전남대 FE_이은진_3주차 과제 step3,4

README.md

@@ -0,0 +1,57 @@
+# 3주차 상품리스트 구현 - API
+
+## Step1 📝구현사항
+
+- 첨부된 `oas.yaml` 파일을 토대로 Request, Response Type을 정의하기
+- `axios` 라이브러리 설치
+- 메인페이지 - theme
+  - `/api/v1/themes` API를 사용하여 Section을 구현
+  - API는 `Axios` 또는 `React Query` 등을 모두 활용해서 구현 가능
+- 메인 페이지 - 실시간 급상승 선물랭킹
+  - `/api/v1/ranking/products` API를 사용하여 Section을 구현
+  - 필터 조건을 선택하면 해당 조건에 맞게 API를 요청하여 보여지게 해야 함
+- Theme 페이지 - header
+  - URL의 `pathParams`와 `/api/v1/themes` API를 사용하여 Section을 구현
+  - `themeKey`가 잘못된 경우 메인 페이지로 연결
+- Theme 페이지 - 상품 목록 섹션
+  - `/api/v1/themes/{themeKey}/products` API를 사용하여 상품 목록을 구현
+  - API 요청 시 한 번에 20개의 상품 목록이 내려오게 구현
+
+## Step4 질문답변
+
+### 🧐 질문 1. CORS 에러는 무엇이고 언제 발생하는지 설명해주세요. 이를 해결할 수 있는 방법에 대해서도 설명해주세요.
+
+**CORS 에러**
+- **정의**: Cross Origin Resource Sharing, 한 도메인 또는 Origin의 웹페이지가 다른 도메인을 가진 리소스에 액세스할 수 있게 하는 보안 매커니즘이다.
+- **발생 이유**: 동일 출처 정책(Same-Origin Policy) 때문에 등장하게 되었으며, 이는 동일한 출처의 리소스에만 접근하도록 제한하는 정책이다.
+- **해결 방법**: 요청해야 하는 URL 앞에 프록시 서버 URL을 붙여 이용하면 된다.
+
+### 🧐 질문 2. 비동기 처리 방법인 callback, promise, async await에 대해 각각 장단점과 함께 설명해주세요.
+
+**비동기 처리 방법**
+
+1. **Callback**
+   - **장점**: 콜백 함수는 간단한 작업에서 이해하기 쉽다.
+   - **단점**: 콜백 지옥에 빠질 수 있고, 이로 인해 가독성이 떨어진다.
+
+2. **Promise**
+   - **장점**: 비동기 작업의 순차 처리가 가능하다. 또한, `return` 값을 가지는 객체이기 때문에 동기 코드와 마찬가지로 값을 변수에 할당하거나 다양한 메소드를 사용하는 것과 같이 추가 작업이 가능하다.
+   - **단점**: 중첩된 프로미스 체인의 사용은 가독성이 떨어진다.
+
+3. **Async Await**
+   - **장점**: 변수에 담아 동기적 코드처럼 작성할 수 있는 편리함을 제공한다. 예외 처리를 쉽게 할 수 있다.
+   - **단점**: 최신 JS 기능으로 구형 브라우저에서는 폴리필이 필요하다.
+
+### 🧐 질문 3. React Query의 주요 특징에 대해 설명하고, queryKey는 어떤 역할을 하는지 설명해주세요.
+
+**React Query의 주요 특징**
+- **자동 캐싱**: 서버로부터 가져온 데이터를 자동으로 캐싱
+- **자동 갱신**: 데이터를 최신 상태로 유지하기 위해 백그라운드에서 자동으로 데이터 갱신
+- **쿼리 무효화**: 특정 조건이 발생했을 때 쿼리를 무효화
+
+**queryKey의 역할**
+- **데이터 식별**: 각 쿼리를 고유하게 식별
+- **캐싱 및 갱신**: `queryKey`를 기반으로 데이터를 캐싱하고 필요할 때 데이터를 다시 가져옴
+- **종속성 관리**: 특정 데이터가 변경되면 해당 `queryKey`를 가진 모든 쿼리가 무효화되어 데이터를 다시 가져오도록 함
+- **구조화된 키 사용**: 문자열, 배열, 객체 등 다양한 형태로 사용 가능
+