파이널 프로젝트 개요

학습 목표

이 영상을 통해 React Router DOM의 레이아웃 라우트와 아웃렛을 활용한 효율적인 페이지 구성 방법을 이해하고, NavLink 컴포넌트의 end 속성을 활용한 정확한 활성 상태 관리를 배울 수 있습니다. 또한, RESTful API 설계 원칙과 프론트엔드 URL 설계의 차이점을 명확히 구분하고, ESLint와 Prettier 같은 코드 린터 및 포맷터의 역할과 사용법을 익힙니다. 마지막으로, Styled Components의 테마와 글로벌 스타일 적용 방법, 그리고 브라우저의 CORS(Cross-Origin Resource Sharing) 정책과 해결 방안에 대해 학습합니다.

핵심 개념

• 컴포넌트 명명 규칙: 컴포넌트와 클래스(개체)는 직관적인 구분을 위해 대문자로 시작합니다.
• 레이아웃 라우트와 아웃렛: React Router DOM에서 페이지의 공통 레이아웃을 효율적으로 관리하고, 동적으로 변경될 자식 컴포넌트를 Outlet 컴포넌트로 렌더링하는 방식입니다.
• NavLink end 속성: URL 경로가 정확히 일치할 때만 활성 상태로 표시하도록 설정합니다. end가 없으면 포함 관계도 활성으로 간주합니다.
• RESTful API vs 프론트엔드 URL: 서버 API 설계 원칙과 사용자에게 보여지는 프론트엔드 URL 설계는 목적과 규칙이 다릅니다. 프론트엔드 URL은 가독성, 즐겨찾기, 공유 용이성을 고려하여 설계합니다.
• ESLint & Prettier: 코드의 문법 오류를 잡아주는 린터(ESLint)와 코드 스타일을 통일시켜주는 포맷터(Prettier)의 역할과 차이점, 그리고 프로젝트 적용의 중요성을 배웁니다.
• Styled Components: 테마(Theme)와 글로벌 스타일(Global Style)을 활용하여 컴포넌트 스타일을 관리하는 방법을 익힙니다. 테마 프로바이더 내부에 글로벌 스타일을 위치시켜야 합니다.
• CORS (Cross-Origin Resource Sharing): 브라우저 보안 정책으로, 다른 출처(origin)의 리소스 요청 시 발생하는 문제이며, 서버 설정 또는 프록시를 통해 해결할 수 있습니다.

공부 방향성

이 영상은 React 프로젝트의 라우팅, URL 설계, 코드 품질 관리, 스타일링, 그리고 브라우저 보안 정책까지 다루는 종합적인 내용을 담고 있습니다. 영상 시청 전 React Router DOM의 기본 개념과 RESTful API에 대한 기본적인 이해가 있다면 학습에 더욱 도움이 될 것입니다. 시청 후에는 각 개념을 실제 프로젝트에 적용해보며 익숙해지는 것이 중요하며, 특히 URL 설계와 CORS 해결 방안은 실제 서비스 개발 시 필수적으로 고려해야 할 사항이므로 깊이 있게 학습하는 것을 권장합니다.