초보 프론트의 Stock-Lens 프로젝트 제작기

주식 초보를 위한 핵심 이슈/종목 맥락을 빠르게 훑는 Stock-Lens 서비스를 만들어보려고 한다.

구조를 설계할 때 고려한 핵심은 '비슷한 책임 요소들을 한 곳에 모으기'였다.

CSS, SCSS, CSS Modules, MUI, styled-components, Tailwind CSS를 직접 프로젝트에 적용하며 체감한 장단점을 정리해보았다.

말로만 듣던 React Router를 직접 사용해보았다. 처음에는 모든 페이지에서 공통으로 보여줄 Header를 Router 밖에 두었다. 이상 없이 동작했지만 React Developer Tools로 구조를 보니 무언가 어색했다. 결국 레이아웃을 라우트의 elemen

fetch, useEffect, useState를 이용하여 데이터 패칭과 응답 흐름에 따른 UI를 표현했다. 화면이 많아지며 loading, error, retry 등 데이터 패칭 로직이 여러 페이지에 흩어지는 걸 느꼈다. axios 인스턴스를 만들어서 요청 방식을 정

한 번에 모든 데이터를 불러오는 대신, useSuspenseInfiniteQuery로 데이터를 페이지 단위로 나누어 가져왔다. 리스트 맨 아래에 보이지 않는 sentinel div를 두고, IntersectionObserver로 그 div가 화면에 들어

모달과 토스트가 화면 최상단에 나타날 수 있도록 root가 아닌 React Portal 안에 위치하도록 했다. 모달 안에서도 토스트 트리거를 가능하도록 하기 위해 ToastContext, Provider를 이용해 토스트를 전역화했다. useEffect