diff --git a/README.md b/README.md index 438749c73..400365759 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,9 @@ # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편 ## FE 카카오 선물하기 2주차 과제: 페이지 만들기 + +### 1단계 + 1. README에 구현할 기능 목록을 정리 2. header, footer 구현 3. 라우터 설정 및 기본 레이아웃 구현 @@ -8,3 +11,53 @@ 5. ThemePage 구현(HeaderSection, GoodsList) 6. LoginPage 구현(ID/PW 로그인 버튼) 7. MyAccountPage 구현 (로그아웃 버튼) + +### 2단계 + +8. id와 pw를 sessionStorage에 저장 +9. 모든 페이지에서 로그인 여부 판단 (ContextAPI) +10. Header [내 계정, 로그인] 수정 +11. 내 계정은 로그인 했을 경우에만 접근 가능하도록 구현 +12. 로그아웃 시 `/`로 redirect + +## 3단계 질문 +### 질문 1. CRA 기반의 SPA프로젝트에서 React Router를 사용하지 않는다면 어떤 문제가 발생하나요? + + - SPA는 하나의 html 파일을 사용하여 필요한 데이터만 비동기적으로 요청하고 동적으로 컨텐츠를 바꿉니다.
+ 결국 SPA는 페이지 이동 없이 URL을 변경하고 해당 URL에 맞는 컨텐츠를 동적으로 렌더링해야 합니다.
+ React 자체에는 라우팅 기능이 없어서 React Router 라는 라이브러리를 사용하는데,
+ React Router는 내부적으로 브라우저의 History API를 사용하여 URL을 변경하고 해당하는 컴포넌트를 렌더링하는 기능을 제공합니다.
+ 즉, 클라이언트 사이드에서 이루어지는 라우팅을 간단하게 구현하도록 도와줍니다.
+ 만약 React Router를 사용하지 않는다면, 직접 주소마다 다른 뷰를 보여줘야 하며 네비게이션 기능(뒤로가기 등)을 사용하지 못합니다. +--- +### 질문 2. 리액트 Context 나 Redux는 언제 사용하면 좋을까요? (로그인을 제외한 예시와 이유를 함께 적어주세요.) + + - **Context** - props-drilling을 피할 때, 단순히 전역 상태만을 관리할 때:
+ Context API는 전역적으로 상태를 공유해줄 뿐, 상태관리는 직접 해야합니다.
+ (ex 테마 관리 (다크 모드/라이트 모드), 설정 관리(언어, 알림 설정) 등)
+ - **Redux** - 여러 곳에서 많은 상태를 관리할 때, 상태 관리 외에 여러 기능이 필요할 때:
+ Redux는 상태를 관리해줍니다. 또한 `redux-saga`, `redux-thunk`, `redux-devtools` 등의 추가 라이브러리를 통해 더 많은 기능을 사용할 수 있고 리렌더링 관련 이슈도 최적화해줍니다.
+ (ex 장바구니, 사용자 정보, 제품 목록, 주문 상태 등 다양한 상태를 관리하는 경우, API를 통해 가져온 데이터를 캐싱하고 여러 컴포넌트에서 사용할 경우 등) +--- +### 질문 3. Local Storage, Session Storage 와 Cookies의 차이가 무엇이며 각각 어떨때 사용하면 좋을까요?
+ + #### 차이점 + + - **데이터 전송**
+ Cookies: HTTP 요청과 함께 서버로 자동으로 전송
+ Storage: 클라이언트 측에만 저장됨
+ - **데이터 용량**
+ Cookies: 도메인당 약 4KB의 데이터를 저장
+ Storage: 도메인당 약 5MB의 데이터를 저장
+ - **만료 시간**
+ Cookies: 만료 시간을 지정할 수 있으며, 지정된 시간이 지나면 자동으로 삭제
+ Local Storage: 명시적으로 삭제할 때까지 데이터를 유지
+ Session Storage: 브라우저 세션이 끝나면 데이터를 삭제
+ - **보안**
+ Cookies: Secure 및 HttpOnly 플래그를 사용하여 보안을 강화
+ Storage: 보안 설정 없음
+ + #### 사용 사례 + - Local Storage - 영구적으로 저장해야 하는 데이터를 클라이언트에서 저장할 때 사용
+ - Session Storage - 세션 동안만 유효한 데이터를 저장할 때 사용
+ - Cookies - 서버와 클라이언트 간에 데이터를 교환해야 하거나 만료 기간을 설정해야할 때 사용