React 프로젝트를 진행하다 보면 import 순서가 제각각이라서 보기 불편해질 때가 많습니다.처음에는 수동으로 정리하려 했는데, 이걸 매번 사람이 맞추는 건 너무 번거롭고 비효율적이라 방법을 찾다가 ESLint로 해결하게 됐습니다.1. 필요한 라이브러리 설치먼저, eslint-plugin-import 플러그리를 설치합니다.npm install eslint-plugin-import --save-dev2. eslint.config.js 설정// eslint.config.jsimport importPlugin from 'eslint-plugin-import';export default [ { /* ... 기타 설정 생략 ... */ plugins: { /* ... 기타 플러그인 생략 ..

X(구 트위터) 사이트를 클론코딩하다가, 회원가입이나 로그인 버튼을 누르면 모달이 뜨고 URL이 '/i/flow/signup', '/i/flow/login'으로 바뀌는 걸 봤습니다.처음엔 그냥 페이지 이동인 줄 알았는데, 실제로는 화면은 그대로고 모달만 올라오는 구조였습니다.생각해보니 이 방식이 꽤 괜찮은 것 같았습니다.특히 모바일에선 실수로 뒤로가기를 눌렀을 때, 모달만 닫히고 기존 페이지는 그대로 유지돼서, 사용자 입장에서 훨씬 안정적인 흐름을 만들 수 있다고 생각했습니다.사용자 입장에서 꽤 괜찮은 흐름이라고 판단했고, 그래서 저도 이 구조를 비슷하게 구현해봤습니다.경로 기반으로 모달 열기아래처럼 버튼을 눌렀을 때 navigate()를 사용해 URL을 바꾸면서 현재 위치 정보를 state로 같이 넘기..

최근 프로젝트를 진행하면서 다양한 상태관리 라이브러리를 사용해봤습니다.그중에서도 가장 자주 사용한 건 Zustand였고, 최근에는 Redux Toolkit도 경험해봤습니다.사실 React에서는 Context API만으로도 상태 공유가 가능합니다.그런데도 사람들이 굳이 Zustand나 Redux 같은 상태관리 라이브러리를 사용하는 이유는 뭘까요?Context API를 피하는 이유Context API는 Provider로 컴포넌트를 감싸서 상태를 공유할 수 있게 해줍니다. 문제는 하나의 값만 바뀌더라도 value 전체가 바뀐 것으로 간주되어, 이를 구독하고 있는 모든 컴포넌트가 리렌더링된다는 점입니다.이 문제를 해결하려면 memoization, context 분리, useMemo 등을 활용해야 하지만, 솔직히..

https://socket.io/docs/v4/server-initialization/ Server Initialization | Socket.IOOnce you have installed the Socket.IO server library, you can now init the server. The complete list of options can be found here.socket.io채팅 앱에서는 유저가 메시지를 실시간으로 주고받는 것뿐만 아니라, 누가 온라인인지도 즉시 보여주는 기능이 중요합니다.이를 위해 Socket.IO를 도입했습니다.서버(Node.js) 에서는 socket.io 라이브러리를 사용하였고, 클라리언트(React) 에서는 socket.io-client 라이브러리를 사용하였습니다..

사용자가 회원가입 시 또는 이후에 프로필 사진을 업로드할 수 있도록 하기 위해, 이미지 저장소로 Cloudinary를 연동하는 기능을 구현했습니다. https://cloudinary.com/documentation/node_integration Node.js SDK – Node.js Upload + Image, Video Transformations | CloudinaryThe Cloudinary Node.js SDK provides simple, yet comprehensive image and video upload, transformation, optimization, and delivery capabilities through the Cloudinary APIs, that you can imple..

MERN todo 프로젝트에서 Google OAuth 2.0을 활용한 로그인 기능을 구현했습니다.@react-oauth/google 라이브러리를 활용하여 클라이언트에서 Google 로그인 버튼을 만들고, 서버에서는 Google API를 이용해 사용자 정보를 받아와 JWT를 발급하는 방식으로 처리했습니다.1. Google OAuth 로그인 흐름클라이언트에서 useGoogleLogin 훅을 이용해 Google 로그인 요청@react-oauth/google 라이브러리에서 제공하는 useGoogleLogin 훅을 사용했습니다.이 훅을 이용하면 Google 로그인 창을 띄우고, 로그인 성공 시 code를 반환받을 수 있습니다.Google에서 code를 반환하면 이를 서버로 전송code는 Google OAuth 서..