초보 프론트의 프로젝트 제작기 (React + TS)

🪄 TL;DR 주식에 관심은 있지만 뉴스가 너무 어렵고 매체도 많아서, 핵심 이슈/종목 맥락을 빠르게 훑는 서비스를 기획하게 되었다. React, Typescript에 대해 학습하며 전체적인 Front 개발 프로세스를 익히는 것이 목적이다. 이번 프로젝트에서 특히

🪄 TL;DR 첫 파일을 만들기 전에 FSD를 참고해 폴더 구조부터 설계했다. 하지만 공식 레이어를 그대로 따라가자, 작은 프로젝트치고는 구조가 빠르게 비대해졌다. 그래서 현재 프로젝트에서는 features 중심의 축소형 구조로 다시 정리했다. 구조를 판단할 때 가장

🪄 TL;DR CSS → SCSS → CSS Modules → MUI → styled-components → Tailwind CSS 순으로 직접 프로젝트에 적용해보며 체감한 장단점을 정리해보았다. 여러가지를 사용해본 후 결국 채택한 건 Tailwind CSS였다.

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

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

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

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