웹 사이트 프론트엔드 개발의 전반적인 내용을 알려드립니다. javascript, typescript, react, next.js를 기술스택으로 사용합니다. 프로젝트 설정부터 배포까지 실제 서비스 개발을 처음부터 끝까지 알 수 있습니다. 커리큘럼 ### 1. 프로젝트 설정 #### 1.1 환경 구성 - Node.js 설치 및 패키지 매니저 (npm 또는 yarn) 사용 - 프로젝트 디렉토리 생성 및 초기화 #### 1.2 프로젝트 구조 설계 - 컴포넌트 기반 아키텍처 - 폴더 구조 및 파일 네이밍 규칙 #### 1.3 패키지 설치 - React, ReactDOM, react-scripts 등의 필수 패키지 설치 - 필요한 라이브러리 및 툴의 버전 관리 ### 2. 기본 개념 및 언어 #### 2.1 HTML/CSS 기초 - HTML5 및 CSS3의 주요 기능 - 시맨틱 HTML 마크업 - Flexbox 및 Grid 레이아웃 #### 2.2 JavaScript/TypeScript - 기본 문법 및 데이터 타입 - 함수, 객체, 배열 등의 핵심 개념 - 비동기 프로그래밍과 Promise, Async/Await ### 3. React 기초 #### 3.1 컴포넌트와 Props - 컴포넌트의 정의와 사용 - Props를 통한 데이터 전달 #### 3.2 State와 생명주기 - 상태의 관리와 setState 메서드 - 생명주기 메서드 활용 #### 3.3 이벤트 처리 - 이벤트 핸들링 및 SyntheticEvent - 이벤트 전파와 버블링 #### 3.4 조건부 렌더링과 리스트 - 조건문을 사용한 렌더링 제어 - 배열과 맵을 활용한 리스트 렌더링 #### 3.5 폼과 폼 핸들링 - 제어 컴포넌트와 비제어 컴포넌트 - 폼 이벤트 처리와 상태 관리 ### 4. 상태 관리 #### 4.1 Context API - 전역 상태 관리 - createContext, useContext 활용 #### 4.2 Redux - 액션, 리듀서, 스토어의 개념 - React-Redux를 통한 상태 관리 ### 5. 라우팅 #### 5.1 React Router - 라우터의 설정과 기본 사용법 - 동적 라우팅과 중첩 라우팅 ### 6. 프로젝트 최적화 #### 6.1 성능 최적화 - React.memo와 PureComponent 사용 - 불필요한 렌더링 방지 #### 6.2 코드 분할 - React.lazy와 Suspense를 이용한 코드 분할 ### 7. 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG) #### 7.1 Next.js 기초 - 프로젝트 설정과 폴더 구조 - 페이지 기반 라우팅 #### 7.2 SSR과 SSG의 이점과 활용 - getServerSideProps, getStaticProps 활용 - 데이터 피칭과 미리 렌더링 ### 8. 테스팅 #### 8.1 단위 테스트와 통합 테스트 - Jest 및 Testing Library를 사용한 테스트 작성 - 컴포넌트, 리듀서, 액션 테스트 ### 9. 배포 #### 9.1 빌드 및 패키징 - 프로덕션 환경에 맞는 빌드 스크립트 작성 - 필요한 리소스 번들링 #### 9.2 배포 옵션 - 서버 배포 및 클라이언트 배포 - AWS, Netlify, Vercel 등의 서비스 활용 이러한 주제들을 순차적으로 다루면서 프론트엔드 개발의 기초부터 심화까지 학습할 수 있을 것입니다.