1. 방향성 정하기
하고싶은 개발..
1. 제품(서비스) 개발 & 유지보수
-
주요업무
-> React, Vue 등을 활용해 서비스의 UI 개발
-> 새로운 기능 추가 및 기존 기능 개선
-> 사용자 피드백 반영 & UI/UX 개선 -
필수역량
✅ 기본적인 프론트엔드 개발 역량 (핵심 기술 스택)
-> React, Vue 같은 프레임워크를 사용하여 컴포넌트 기반 개발
-> React의 useState, useEffect, useContext 같은 Hook 활용
✅ 유지보수를 고려한 코드 작성 & 협업 능력
-> 코드의 일관성 (ESLint, Prettier 활용)
-> 컴포넌트 분리 & 재사용 가능하게 만들기
-> 디자인 시스템 적용 (Tailwind, Styled-components 등)
✅ UI/UX 개선 능력
-> 사용자의 행동 패턴을 이해하고 UI 개선 방향을 제시할 수 있는 능력
-> A/B 테스트를 통해 사용성 평가 가능
✅ 브라우저 렌더링 & 최적화
-> CSR(클라이언트 사이드 렌더링) vs SSR(서버 사이드 렌더링) 개념 이해
-> Virtual DOM, React의 리렌더링 최적화 (useMemo, useCallback)
공부순서
1) 기본적인 프론트엔드 개발 역량 (핵심 기술 스택)
목표: 웹 서비스를 만들고 유지보수할 수 있는 기본적인 기술 익히기
✅ HTML, CSS, JavaScript 기본기
-> 시맨틱 마크업 (웹 접근성 고려)
-> CSS Flexbox & Grid 활용한 레이아웃 구성
-> 반응형 디자인 (미디어 쿼리, Tailwind CSS)
✅ 프론트엔드 프레임워크 (React/Vue) 이해
-> 컴포넌트 기반 개발 (useState, useEffect 등 React Hook 활용)
-> 상태 관리 (Redux, Zustand, Vuex)
-> 이벤트 핸들링 (onClick, onChange 등)
2) 유지보수를 고려한 코드 작성 & 협업 능력
목표: 팀원과 협업할 수 있는 깔끔한 코드 작성 & 코드 품질 유지
✅ 코드 스타일 일관성 유지
-> ESLint, Prettier를 활용한 코드 포맷팅
-> 컴포넌트 분리 & 파일 구조 정리
✅ 디자인 시스템 & 공통 컴포넌트 활용
-> 버튼, 입력 필드 같은 재사용 가능한 UI 컴포넌트 개발
-> Storybook을 활용한 UI 문서화
✅ 협업 도구 활용
-> Git & GitHub을 사용한 버전 관리 & 코드 리뷰
-> PR(풀 리퀘스트) 작성 & 코드 리뷰 참여
3) 프론트엔드 성능 최적화
목표: 빠르고 효율적인 웹 서비스 유지 & 개선
✅ 렌더링 최적화
-> React.memo, useMemo, useCallback을 활용한 성능 개선
-> Virtual DOM & 리렌더링 최적화
✅ 불필요한 API 호출 방지
-> React Query, SWR을 활용한 데이터 캐싱
-> Debounce & Throttle을 활용한 이벤트 최적화
✅ 웹 성능 측정 & 개선 (Lighthouse, Web Vitals 활용)
-> 이미지 최적화 (Next.js Image 컴포넌트 활용)
-> 코드 스플리팅 (React.lazy, Suspense 활용)
4) 에러 핸들링 & 디버깅 역량
목표: 서비스 운영 중 발생하는 버그를 빠르게 해결할 수 있는 능력 키우기
✅ 에러 핸들링 전략
-> try-catch 활용하여 API 호출 에러 처리
-> ErrorBoundary를 활용한 React 컴포넌트 에러 처리
✅ 디버깅 도구 활용
-> Chrome DevTools, React Developer Tools 활용
-> Sentry, LogRocket 같은 에러 로깅 시스템 적용
2. 디자인 시스템 & 컴포넌트 개발
-
주요 업무
-> 디자인 시스템 구축 (예: Material UI, Chakra UI, 내부 UI 라이브러리)
-> 재사용 가능한 UI 컴포넌트 개발
-> Storybook을 활용한 컴포넌트 문서화 -
필요기술
-> React
-> Storybook, Figma
-> TypeScript -
필수역량
✅ 디자인 시스템 & UI 설계 원칙 이해
✅ 컴포넌트 개발 (React)
✅ 스타일링 & 디자인 시스템 적용
✅ UI 성능 최적화 & 접근성 (A11Y) 고려
공부순서
1) 디자인 시스템 & UI 설계 원칙 이해
목표: 일관된 UI/UX를 위한 디자인 시스템 개념 이해
✅ 디자인 시스템이란?
-> 일관된 UI를 만들기 위한 컴포넌트 + 스타일 + 가이드라인
-> 예: Material UI, Ant Design, Carbon Design System
✅ 디자인 시스템 구성 요소
-> 타이포그래피 (글꼴, 크기, 줄 간격)
-> 색상 시스템 (Primary, Secondary, Gray Scale)
-> 간격 시스템 (Margin, Padding, Grid)
-> 버튼, 입력 폼, 카드, 모달 같은 공통 컴포넌트
-> 반응형 디자인 규칙 (Mobile, Tablet, Desktop 크기 정의)
2) 컴포넌트 개발 (React)
목표: 재사용 가능한 컴포넌트 개발 & 유지보수 가능한 코드 작성
✅ Atomic Design 패턴 적용
-> Atoms → 버튼, 아이콘 같은 기본 요소
-> Molecules → 입력 폼, 검색 바 같이 작은 컴포넌트 조합
-> Organisms → 네비게이션 바, 카드 리스트처럼 복잡한 UI
-> Templates & Pages → 전체 페이지 구조
✅ Props & Composition 활용
-> props로 동적인 UI를 만들기
-> children & slot을 활용해 확장성 높은 컴포넌트 설계
3) 스타일링 & 디자인 시스템 적용
목표: 디자인 시스템 기반으로 스타일 적용 & 유지보수 가능한 스타일 관리
✅ CSS-in-JS 활용 (Styled-components, Emotion)
-> styled-components를 활용한 스타일링
-> 테마 적용 (ThemeProvider 활용)
✅ Tailwind CSS 활용
-> 디자인 시스템과 잘 맞는 유틸리티 기반 스타일링
-> 예: className="text-lg font-bold text-blue-500"
4) UI 성능 최적화 & 접근성 (A11Y) 고려
목표: 성능 최적화된 컴포넌트 개발 & 웹 접근성 준수
✅ 컴포넌트 렌더링 최적화
-> React.memo를 활용한 불필요한 리렌더링 방지
-> useMemo, useCallback을 활용한 성능 최적화
✅ 웹 접근성(A11Y) 준수
-> aria-label, aria-hidden을 활용한 접근성 향상
-> 키보드 네비게이션 지원 (Tab 키로 이동 가능하게 만들기)
3. API 연동 & 상태 관리 & 데이터 핸들링
-
주요 업무
-> 백엔드 API 연동 (REST API, GraphQL)
-> 상태 관리 (Redux, Zustand, Recoil)
-> 클라이언트 측 데이터 캐싱 (React Query, SWR) -
필요 기술
-> JavaScript (ES6+), TypeScript
-> 상태 관리 라이브러리 (Redux, Zustand, recoil)
-> 비동기 처리 (Axios, Fetch API) -
필수역량
✅ 비동기 처리 & 데이터 핸들링
-> fetch API, Axios를 활용한 REST API 호출
-> async/await, Promise 활용하여 API 응답 처리
-> 오류 처리 (try-catch, 에러 핸들링)
✅ 상태 관리 라이브러리 사용
-> React 상태 관리 (useState, useReducer)
-> 전역 상태 관리 (Redux, Zustand, Recoil 등)
-> 서버 상태 관리 (React Query, SWR)
✅ API 연동 & 최적화
-> Infinite Scroll, Pagination 구현
-> 데이터 캐싱 & 불필요한 API 호출 방지
-> GraphQL을 사용할 경우 Apollo Client 활용
✅ 보안 & 인증 처리
-> JWT(JSON Web Token) 인증 처리
-> OAuth (Google, Kakao 로그인) 연동
공부순서
1) 비동기 처리 (Async/Await, Promise)
목표 : 비동기 데이터 처리 원리를 이해하고, API 요청을 다룰 수 있도록 하기
✅ 기본 개념 학습
-> Promise의 기본 원리 (.then(), .catch())
-> async/await를 활용한 비동기 코드 작성
✅ 실습 예제
-> setTimeout(), Promise.resolve(), fetch()로 API 호출 연습
-> try-catch로 에러 핸들링 연습
✅ 추천 학습 자료
-> MDN: 비동기 JavaScript 가이드
-> async/await 실습 코드 작성
2) API 호출 & 데이터 핸들링 (REST API, GraphQL)
목표 : Axios, Fetch API를 활용해 백엔드와 데이터 주고받기
✅ REST API 연습
-> JSONPlaceholder 같은 무료 API 활용 (https://jsonplaceholder.typicode.com/)
-> CRUD 요청 (GET, POST, PUT, DELETE) 실습
-> fetch API vs Axios 비교
✅ GraphQL 학습 (선택사항)
-> GraphQL 개념 & Apollo Client 학습
3) 상태관리(React State, Redux, React Query)
목표: 전역 상태 & API 데이터 상태를 관리하는 방법 익히기
✅ React 기본 상태 관리 (useState, useReducer)
-> 로컬 상태를 useState, useEffect로 관리하는 연습
-> useReducer를 사용해 상태 변화 흐름 익히기
✅ Redux, Zustand 같은 전역 상태 관리 학습
-> Redux Toolkit을 사용한 상태 관리
-> Zustand, Recoil 등 다른 상태 관리 라이브러리 비교
✅ React Query (서버 상태 관리) 학습
-> useQuery(), useMutation()을 활용해 API 요청 최적화
-> 데이터 캐싱, 자동 리페치 기능 실습
4) API 최적화 & 성능 개선
목표: API 호출 최적화 & 캐싱을 활용해 성능 개선
✅ 불필요한 API 호출 방지
-> Debounce & Throttle (lodash 활용)
-> useEffect 의존성 배열 최적화
✅ 데이터 캐싱 & 무한 스크롤 적용
-> React Query / SWR을 활용한 캐싱
-> Infinite Scroll 적용
