개발 이야기36

• 

  Electron.js에서 HTTP 대신 TCP 서버 사용하기 Electron.js에서 HTTP 서버가 아닌 TCP 서버로 구동할 필요성이 생겼습니다. 이에 Electron.js에서 TCP 서버를 어떻게 연결하는지에 대한 순서 및 TCP 서버의 개념을 정리해보려고 합니다. 이 글은 TCP 서버의 기본 개념부터 시작하여 Electron 환경에서의 구현 방법까지 설명할 것입니다. Electron 환경 설명Electron은 웹 기술을 사용하여 데스크톱 애플리케이션을 개발할 수 있는 프레임워크입니다. 기존의 Electron 애플리케이션은 주로 HTTP 통신을 사용하여 외부 서버와 데이터를 주고받습니다. 이는 웹 애플리케이션과 유사한 방식으로, 웹 서버가 필요한 모든 리소스를 처리하고 클라이언트 측에서는 그 결과를 받아 사용자에게 보여주는 형식입니다. 하지만 Electron.. 개발 이야기/backend 2024. 5. 10.

• 

  리액트에서 커스텀 훅을 사용해야 하는 이유 오늘은 리액트 공식문서의 커스텀 훅과 관련된 내용을 자세히 다루어보려고 합니다. 커스텀 훅을 통해 필요한 로직을 재사용하고 코드를 보다 효율적으로 구현할 수 있습니다. 해당 내용에 대해 더 깊이있게 알아보고 싶으신 분들은 아래 리액트 공식문서의 custom hook 부분을 참고해보세요. Reusing Logic with Custom Hooks – React The library for web and native user interfaces react.dev 기본 훅 (useState, useEffect 등)과 커스텀 훅의 차이점 React의 기본 훅은 useState, useEffect, useContext와 같이 React 라이브러리에 내장되어 있는 함수들로, 상태 관리, 라이프 사이클 이벤트 처리, .. 개발 이야기/frontend 2024. 4. 19.

• 

  React 에서 index.html에 스크립트 태그가 없는 이유 React 애플리케이션은 기존 자바스크립트와 다른 독특한 구조로 이루어져 있습니다. 이는 react-app 내의 index.html파일의 구조를 보면 알 수 있습니다. React 애플리케이션의 기본 구조 index.html의 역할과 구성 React 프로젝트에서 index.html은 애플리케이션의 진입점입니다. 이 파일은 매우 간단하게 유지되며, 주로 단일 div 태그를 사용합니다. 이 index.html은 리액트가 동적으로 모든 UI 컴포넌트를 렌더링하는 장소예요. 파일의 나머지 부분은 기본적으로 비어 있으며, 리액트 및 기타 자바스크립트 파일은 빌드 과정을 거쳐 이 곳에서 결합합니다. React 애플리케이션에서 HTML 파일의 사용 방식 전통적인 웹 애플리케이션과는 달리, 리액트의 html 파일은 주로.. 개발 이야기/frontend 2024. 4. 18.

• 

  [redux]리덕스 초기 세팅 및 폴더구조 생성 electron.js와 react를 통합하여 메신저앱을 만드는 중, react내에서 수시로 불러야 할 api들은 redux로 관리하기로 하여 초기 세팅 작업에 들어갔습니다. 아래는 제가 적용했던 redux 초기 세팅방법에 대한 내용입니다. 리덕스 초기 세팅 및 폴더구조 생성 1. 리덕스 설치 아래 내용으로 redux를 설치합니다. npm install redux react-redux redux-thunk redux: Redux 라이브러리 본체입니다. react-redux: React와 Redux를 연결해주는 라이브러리입니다. redux-thunk: 비동기 로직을 처리하기 위한 미들웨어입니다. 2. redux 폴더구조 폴더구조는 아래처럼 만들기로 하였습니다. src/ └── redux/ ├── action.. 개발 이야기/frontend 2024. 1. 22.

• 

  외부 컴포넌트 스타일을 해당 페이지에서 적용하기 위해 className을 넘겨주기 문제 발생 부모 컴포넌트에 외부 컴포넌트를 자식으로 import 한 뒤 스타일을 먹이려고 하는 중, 문제가 발생했다. 일단 내가 접근한 코드는 이러하다. // 외부 컴포넌트 import React from "react"; export const OnlineStateComponent = () => { return Online; }; export const OnLeaveStateComponent = () => { return On Leave; }; // 부모 컴포넌트 import { OnlineStateComponent, OnLeaveStateComponent, } from "../../common/AgentState/AgentStateComponent.js"; const getComponent = (per.. 개발 이야기/frontend 2023. 11. 7.

• react에서 css module로 다른 클래스와의 스타일이 충돌되는 것 방지하기 리액트에서 css 파일을 사용하면, 종종 해당 css파일의 스타일이 다른 컴포넌트의 요소에 적용되는 문제를 마주하게 된다. 이러한 문제를 해결하기 위해 styled-component를 사용하는 방법도 있지만, 내 경우는 css 형태를 유지해야 하는 이유가 있었기 때문에 간단하게 css module을 사용하기로 했다. css 모듈을 사용하면, 클래스 이름이 고유하게 변환되어, 같은 이름을 가진 클래스들 간의 충돌을 방지할 수 있다. 아래는 기존 css를 css 모듈로 변경하는 방법이다. 1. css파일 이름을 css모듈에 맞게 변경한다. 예를 들어 chatpopup.css가 기존 css이름이라면, 이름과 css 사이에 'module'을 넣어 다음과 같이 변경해야 한다. chatpopup.moule.css .. 개발 이야기/frontend 2023. 11. 6.

• 

  채팅창 우측 하단부터 메세지 나오게 하기 - flex-direction reverse 사용 문제 채팅앱을 구현하던 중, 채팅창 메세지가 사진처럼 우측 위부터 시작해서 나오는 것을 발견했다. 이는 어떻게 해결하면 좋을까? ref도 쓰고 높이도 재서 자바스크립트로 구현도 해보았지만, 결국 flex의 기본 개념만 잘 알고 있으면 되었다는 것을 깨달았다. 여기서 사용할 내용은 flex의 row-reverse 및 column-reverse이다. flex-direction의 reverse 속성 먼저 row-reverse를 설정하면 다음과 같이 행을 기준으로 뒤에서부터 쌓인다. 예시 코드는 이 링크를 참조하자: W3Schools Tryit Editor W3Schools online HTML editor The W3Schools online code editor allows you to edit code a.. 개발 이야기/frontend 2023. 10. 31.

• 

  React에서 Props 사용하여 공통 컴포넌트 재사용하기 공통 컴포넌트로 분리하는 개념은 단순한 것이면서도 익숙한 사람들에겐 당연하지만, 누군가에겐 이러한 아이디어가 잘 생각나지 않을 수도 있다. 오늘은 React에서 공통 컴포넌트를 어떻게 재사용하는지, 그리고 props를 어떻게 활용할 수 있는지에 대해 포스팅해보려고 한다. 잘 설계된 컴포넌트는 여러곳에서 반복하여 사용될 수 있다. 공통 컴포넌트란? 공통 컴포넌트는 이름 그대로 여러 곳에서 사용될 수 있는 컴포넌트를 의미한다. 예를 들어, 프로필 카드, 버튼, 헤더 등 웹 애플리케이션의 여러 부분에서 반복적으로 사용되는 UI 요소들이 이에 해당한다. Props를 활용하여 각 컴포넌트별로 고유한 내용을 공통 컴포넌트에게 동적으로 표시되게 하기 props는 부모 컴포넌트로부터 자식 컴포넌트로 값을 전달하는 메커.. 개발 이야기/frontend 2023. 10. 22.

• React에서 로그인 시 callback으로 WebSocket 상태관리하기 React에서 WebSocket과 State Management를 활용하여 로그인 기능을 구현중이다. 여타의 react hook을 사용하지 않고, callback을 통해 부모 컴포넌트인 app.js와 자식컴포넌트인 login.js사이를 원하는 위치에서 왕복하도록 하였다. Callback을 활용한 로그인 정보 전송 현재 내 코드를 보면서 설명해보면, App 컴포넌트에서 WebSocket을 초기화하는 initWebSocket 함수는 로그인 작업이 시작되기 전에 호출되며, WebSocket 객체를 생성한다. // app.js const initWebSocket = (callback) => { const ws = new WebSocket('ws://웹소켓 주소'); ws.onopen = () => { conso.. 개발 이야기/frontend 2023. 10. 18.

• 

  Electron 이벤트값을 다르게 설정하여 리액트 컴포넌트 재사용하기 Electron.js와 React.js를 이용해 채팅 팝업창을 만들면서, 이전에 만들어둔 TitleMenuBar라는 컴포넌트를 재사용하고 싶어졌다. 일렉트론은 원래 디폴트로 제공해주는 상단 메뉴바가 있는데, 내가 원하는 UI로 디자인하기 위해 아래처럼 상단 메뉴바를 없앴다. 그리고 TitleMenuBar를 리액트에서 새로 만들어 일렉트론에서 기본으로 제공해주는 이벤트인 minimize()라던지 close()등에 연결하였다. BrowserWindow 코드 mainWindow = new BrowserWindow({ //생략 frame: false, // 여기서 default menu값을 없앰 }); // TitleMenuBar.js에서 발신한 ipcMain값을 읽은 뒤 이벤트 발생시킴 ipcMain.on('.. 개발 이야기/frontend 2023. 10. 13.