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 등을 활용해야 하지만, 솔직히..

포트폴리오 사이트를 768px 이하의 화면에서는 사이드바에 있던 프로필을 화면 상단으로 이동시키고, 탭 메뉴를 가운데로 배치했습니다. 그러나 탭을 전환할 때마다 탭 메뉴로 다시 스크롤해야 하는 불편함이 있었습니다.이를 해결하기 위해 탭 메뉴를 고정(sticky)하고, 탭 클릭 시 자동으로 탭 메뉴 위치로 스크롤이 이동하도록 구현했습니다.스크롤 로직 구현React의 useRef와 useEffect를 활용해 스크롤 동작을 제어했고, useNavigationType을 사용하여 PUSH 방식의 네비게이션에서만 스크롤이 동작하도록 설정했습니다.즉, 페이지 새로고침이나 첫 진입 시에는 스크롤이 발생하지 않도록 했습니다.const navigationType = useNavigationType();const ref =..

포트폴리오의 레이아웃은 이제 마무리 단계인데, 아무래도 카드 형태의 디자인을 많이 사용하다 보니 사이트 디자인이 많이 단조로워 보였습니다.그래서 사이트가 처음 열릴 때 제일 먼저 보여지는 Home 컴포넌트에 동적인 애니메이션을 주어, 조금이라도 인상을 주기로 했습니다.타이핑 효과 구현 원리먼저, 저는 주요 기술 스택인 Javascript, TypeScript, React, Next.js를 동적으로 표시하고자 했습니다.아직 Next.js는 다루지 못하지만, 포트폴리오 작업이 끝난 후 배우고 학습 할 예정이기 때문에 일단 넣어뒀습니다.이 기술 이름들이 화면에 타이핑되었다가, 다시 지워지고, 다시 타이핑되는 패턴을 반복하게 만들었습니다.아래 코드를 통해 각 텍스트가 타이핑되고, 삭제되는 과정을 단계별로 관리했..

포트폴리오에 티스토리 블로그 글을 가져와서 Blog 컴포넌트를 꾸미려고 했습니다.예전에 Tistory Open API를 사용해 구현한 사례를 본 적이 있어, 이를 활용하려고 했는데 검색해보니 Tistory Open API가 서비스 종료되었다는 소식을 접하게 됐습니다.그래서 다른 방법을 찾아보다가 RSS를 통해 블로그 글을 가져오는 방법을 알게 되었습니다. 하지만 RSS를 사용하여 구현을 진행했을 때 RSSTOJSON의 제한으로 인해 한 번에 10개의 데이터만 가져올 수 있었습니다.원래는 페이지네이션 기능도 넣으려 했으나, 이 제한 때문에 구현하지 못한 것이 아쉬웠습니다.앞으로 Next.js를 학습하여 RSSTOJSON을 사용하지 않고, RSS를 직접 파싱해서 페이지네이션까지 완벽하게 구현해보고 싶습니다...