카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편

Step 1

1. Header, Footer와 같은 공통 컴포넌트를 만들었습니다. 모든 페이지에서 Header와 Footer는 보여질 수 있게 적용 되었습니다.

2. 각 Url Path별로 페이지를 만들었습니다

• 메인 페이지 (/)
  • Theme 카테고리 섹션을 추가했습니다.
  • Theme 카테고리 Item을 클릭 시 Theme 페이지(/theme/:themeKey)로 이동합니다
  • 실시간 급상승 선물랭킹을 추가했습니다.
  • 필터 기능을 hooks를 사용하여 구현했습니다. (ex. 전체, 여성이, 남성이, 청소년이 / 받고 싶어한, 많이 선물한, 위시로 받은)
  • 상품 목록을 더보기를 누르는 경우 더 보여주도록 했습니다.

Step 2

Step 3

1. CRA 기반의 SPA 프로젝트에서 React Router를 사용하지 않는다면 어떤 문제가 발생하나요?

Create React App(CRA)를 기반으로 한 싱글 페이지 애플리케이션(SPA)에서 React Router를 사용하지 않으면 다음과 같은 문제들이 발생할 수 있습니다

• 페이지 간 이동의 불편함:

SPA는 단일 HTML 파일로 여러 페이지를 구현합니다. React Router 없이 페이지 간 이동을 구현하려면 직접 상태 관리와 URL 변경을 처리해야 합니다. 이는 매우 복잡하고 비효율적입니다.

• 사용자 경험 저하:

사용자 경험(UX)이 저하될 수 있습니다. URL이 동적으로 업데이트되지 않으면 사용자는 브라우저의 뒤로 가기, 앞으로 가기 버튼을 사용할 수 없고, 북마크를 할 수 없는 불편함이 생깁니다.

• SEO 문제:

React Router는 SPA의 SEO 문제를 일부 해결하는데 도움이 됩니다. 특정 URL에 대한 적절한 콘텐츠를 제공할 수 없으면 검색 엔진이 페이지를 제대로 인덱싱하지 못할 수 있습니다.

• 상태 관리 복잡성 증가:

경로를 기반으로 상태를 관리하는 것이 어려워집니다. 각 페이지의 상태와 데이터를 효과적으로 관리하기 위해 복잡한 로직을 작성해야 할 수도 있습니다.

• 코드 유지 보수성 저하:

다양한 경로와 컴포넌트를 관리하는 코드가 단순한 라우팅 라이브러리를 사용할 때보다 훨씬 복잡하고 유지 보수가 어려워질 수 있습니다.

2. 리액트 Context 나 Redux는 언제 사용하면 좋을까요?

리액트 Context 사용 예시 및 이유:

• 테마 관리 (다크 모드 / 라이트 모드): 애플리케이션 전반에 걸쳐 사용자가 선택한 테마(예: 다크 모드 또는 라이트 모드)를 일관되게 적용하려면 Context를 사용하는 것이 적합합니다. Context를 통해 최상위 컴포넌트에서 테마 상태를 정의하고 하위 컴포넌트들이 쉽게 접근하여 사용할 수 있습니다.

• 사용자 언어 설정: 다국어 지원 애플리케이션에서 사용자의 언어 설정을 전역적으로 관리하기 위해 Context를 사용할 수 있습니다. 이렇게 하면 각 컴포넌트가 필요할 때 현재 언어 설정을 쉽게 참조하고 다국어 텍스트를 렌더링할 수 있습니다.

Redux 사용 예시 및 이유:

• 복잡한 상태 관리 (예: 전자 상거래 장바구니): 전자 상거래 애플리케이션에서 장바구니의 상태는 매우 복잡할 수 있습니다. 아이템 추가, 삭제, 수량 변경 등의 다양한 액션을 통해 상태가 자주 변경됩니다. Redux를 사용하면 이러한 상태 변화를 중앙에서 관리하고 각 컴포넌트가 일관된 상태를 참조할 수 있습니다.

• 사용자 프로필 정보: 여러 페이지에서 사용자 프로필 정보를 참조하고 수정할 필요가 있는 경우, Redux를 사용하면 상태를 전역적으로 관리하고 쉽게 업데이트할 수 있습니다. 이는 특히 사용자 정보가 복잡하거나 여러 컴포넌트에서 공유될 때 유용합니다.

3. Local Storage, Session Storage, Cookies의 차이와 사용 시기

Local Storage

• 데이터는 브라우저에 영구적으로 저장됩니다. 브라우저를 닫거나 다시 열어도 데이터가 유지됩니다.
• 용량이 비교적 크며(약 5MB), 문자열 형태로 저장됩니다.
• 사용자 설정(테마, 레이아웃 등)을 저장할 때 사용됩니다. 사용자가 애플리케이션을 다시 방문했을 때 이전 설정을 복원하는 데 유용합니다.

Session Storage

• 데이터는 브라우저 세션 동안만 유지됩니다. 브라우저나 탭을 닫으면 데이터가 사라집니다.
• 용량은 Local Storage와 유사하게 약 5MB입니다.
• 일시적인 데이터(예: 사용자 진행 상태, 임시 양식 데이터)를 저장할 때 유용합니다. 페이지를 새로 고치더라도 데이터가 유지되지만, 세션이 끝나면 데이터가 사라집니다.

Cookies

• 서버와 클라이언트 간의 데이터 교환에 주로 사용됩니다. 만료 시간과 도메인을 설정할 수 있으며, HTTP 요청 시 자동으로 서버에 전송됩니다.
• 용량이 작고(약 4KB), 다양한 속성을 통해 보안 설정이 가능합니다(예: HttpOnly, Secure).
• 인증 정보나 사용자 추적 정보를 저장할 때 사용됩니다. 예를 들어, 사용자가 로그인 상태를 유지하도록 하거나 서버에서 세션을 확인할 때 쿠키를 활용할 수 있습니다.