개발 이야기/frontend22 [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. react-router-dom을 사용하는 이유와 구조 electron.js와 react로 데스크탑 메신저앱을 만들면서 초반에 router path를 잡아야 할 필요성을 느껴 react-router-dom을 사용했다. 또한 electron.js에서 ipcRenderer를 통해 react에서 만든 브라우저를 electron의 새 창으로 띄우고 싶어서, react-router-dom를 통해 새 창으로 띄우려는 path를 잡아 loadURL(path주소) 이벤트를 사용할 수도 있었다. 오늘은 이 react-router-dom 개념에 대해 포스팅 해보려고 한다. react-router-dom react에서 라우팅을 구현하기 위한 라이브러리이다. 기본적으로, SPA(Single Page Application)에서 페이지를 다시 로드하지 않고도 다른 뷰나 컴포넌트를 표.. 개발 이야기/frontend 2023. 10. 12. props로 내려줄때 원하는 부분만 가져오기 서론 코딩앙마 유튜브를 보며 react.js 스터디를 하고있다. next.js안에서만 리액트를 써봤고, 회사 프로젝트를 하느라 3개월동안 바닐라 자바스크립트만 쓰느라 react를 복습하며 놓친 부분을 메우고 있는 중이다! props로 내려줄때 원하는 부분만 가져오기 내가 기존에 알고있던 props 사용방식은 다음과 같다. 출처: https://ko.reactjs.org/docs/components-and-props.html#function-and-class-components function Welcome(props) { return Hello, {props.name}; } function App() { return ( ); } App 컴포넌트에서 name을 넘겨서 Welcome 컴포넌트에서 props... 개발 이야기/frontend 2023. 10. 9. 리액트 yarn start시 proxy 에러 해결 방법 ERROR 스프링부트와 리액트를 연동하기 위해 proxy를 설정하던 중 오류가 발생했다. 다른 블로그들을 보면서 이런식으로 package.json에서 proxy를 설정한 뒤 저장하고 yarn start를 해서 서버를 구동시키려는데 터미널에서 다음과 같은 오류가 떴다. "Invalid options object. Dev Server has been initialized using an options object that does not match the API schema." SOLUTION 이런 경우 당황하지 말고 터미널 켜서 http-proxy-middleware를 깔아보자 npm install http-proxy-middleware 그리고 src폴더 밑에 setupProxy.js라는 파일을 만들고 아.. 개발 이야기/frontend 2023. 10. 9. 이전 1 2 3 다음