React Micro Projects
만들며 숙달하는 React 기술 — 작은 프로젝트로 React의 주요 기술을 손으로 익히는 실습의 흔적
Prologue
10년 전, 내일배움카드로 HTML/CSS를 배우고 혼자 반응형 포트폴리오를 만들어 어렵게 첫 취업을 했습니다.
그때는 피그마도 없어서 포토샵으로 폰트 크기, 컬러, 패딩·마진을 직접 픽셀 단위로 재며 퍼블리싱을 했습니다.
시작은 막막했습니다.
간단한 네비게이션 마크업도 서툴러 다른 사이트 코드를 보며 따라 쳤고, 화면 하나에도 시간이 오래 걸려 야근이 일상이었습니다.
“조금만 더 준비하고 취업할 걸…” 하는 후회도 있었습니다.
그런데 시간이 지나 수많은 화면을 반복해 만들다 보니, 그 자체가 훈련이 되었고, 신입 때 야근하며 붙잡던 작업들이 이제는 몇 시간이면 끝나게 됐습니다.
이제 프론트엔드 개발로 전향하려 합니다.
React에서는 아직 초입에 있지만, 반복 가능한 미니 프로젝트를 꾸준히 만들며 손으로 익히고 몸으로 익히려 합니다.
처음부터 모든 코드를 스스로 완성하긴 어렵겠지만, 저는 압니다. 반복하면 성장한다는 것을 — 10년 전, 이미 경험했습니다.
그래서 지금 여기서부터 다시 시작합니다.
감사합니다.
Tech Stack & Configuration
- Framework: Next.js 16 — App Router
- Styling: SCSS Modules
- Design: Dark & Light themes, 반응형 대응
Learning Goals
- react.js 핵심 훅 숙달 훈련 (useState/useEffect/useMemo/useCallback)
- 상태관리 & 패턴 (Context / Redux / HOC)
- 구조적 설계와 렌더링 최적화
© Sanghwan An — GitHub