전남대 FE_이도현_3주차 과제

.eslintrc.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   env: {
     browser: true,
@@ -13,7 +15,8 @@ module.exports = {
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    project: './tsconfig.json',
+    project: path.resolve(__dirname, './tsconfig.json'),
+    tsconfigRootDir: path.resolve(__dirname),
     ecmaFeatures: {
       jsx: true,
     },

README.md

@@ -0,0 +1,68 @@
+## step1 요구사항
+
+1. API 타입 정의
+
+- [o] OAS 파일을 참조하여 Request 및 Response 타입 정의
+
+2. Axios API 구현
+
+- [ｏ] 각 API 경로별로 함수 구현
+
+3. Main Page
+
+- [o] 테마 카테고리 섹션 : /api/v1/themes API 활용
+- [ｏ] 실시간 급상승 선물랭킹 섹션 : /api/v1/ranking/products 활용
+- [ｏ] 필터 조건을 선택하면 해당 조건에 맞게 api 보임
+
+4. Theme Page
+
+- [ｏ] Header : url의 themekey 사용
+- [ｏ] url의 pathParams와 /api/vi/themes API를 사용
+- [ｏ] themeKey가 잘못된 경우 메인 페이지로
+- [ｏ] 요청시 한번에 20개의 상품 목록이 내려오도록 구현
+
+## step2 요구사항
+
+- [o] 각 API에서 Loading 상태에 대한 UI 대응
+- [o] 각 데이터가 없는 경우에 대한 UI 대응
+- [o] HTTP status에 따라 Error 다르게 처리
+
+## step3 요구사항
+
+- [o] 스크롤을 내리면 추가로 데이터 요청
+- [o] API를 react-query로 구현
+
+## 3주차 질문
+
+- Q1. CORS 에러는 무엇이고 언제 발생하는지 설명해주세요. 이를 해결할 수 있는 방법에 대해서도 설명해주세요
+  - CORS(Cross-Origin Resource Sharing) 에러는 웹 페이지가 다른 도메인의 리소스를 요청할 때 브라우저가 보안상의 이유로 그 요청을 차단하는 경우 발생
+  - 해결 방법
+    1. 서버 설정 변경 : 서버에서 Access-Control-Allow-Origin 헤더를 설정하여, 특정 도메인에서의 요청을 허용
+    2. 프록시 서버 설정 : 모든 요청을 프록시를 통해 우회
+    3. CORS 미들웨어 사용 : Express의 cors 패키지 등을 사용하여 해결
+- Q2. 비동기 처리 방법인 callback, promise, async await에 대해 각각 장단점과 함께 설명해주세요.
+
+  1. Callback
+
+  - 장점 : 간단한 비동기 작업에 쉽고 빠르게 사용 가능
+  - 단점 : 복잡한 비동기 처리에서 콜백 지옥으로 인해 코드의 가독성과 유지보수 어려워짐
+
+  2. Promise
+
+  - 장점 : 콜백 지옥 문제를 해결하고, 비동기 처리를 체인 형식으로 연결하여 가독성을 높일 수 있음
+  - 단점 : 여전히 코드가 중첩될 수 있고, 오류 처리가 직관적이지 않을 수 있음
+
+  3. Async/Await
+
+  - 장점 : 코드가 간결하고 가독성이 좋음. 오류 처리도 일반적인 try-catch문 사용 가능
+  - 단점 : 내부에서 Promise를 사용하므로, 완전히 새로운 비동기 처리 메커니즘은 아니며, 오래된 환경에서는 사용이 어려울 수 있음
+
+- Q3. react query의 주요 특징에 대해 설명하고, queryKey는 어떤 역할을 하는지 설명해주세요.
+  1. React query 주요 특장
+  - 서버 상태 관리 : 데이터 페칭, 캐싱, 동기화 및 업데이트 자동 관리
+  - 효율적인 데이터 캐싱 : 자동으로 데이터를 캐시하고, 캐시에서 빠르게 데이터를 로드하여 성능 향상
+  - 백그라운드 업데이트 : 애플리케이션의 데이터 신선도를 유지하기 위해 백그라운드에서 데이터를 자동으로 리페칭 가능
+  - 비동기 로직 간소화 : 복잡한 비동기 로직을 간소화하며, 비동기 데이터 요청과 상태 관리
+  2. queryKey 역할
+  - 식별자 역할 : queryKey는 데이터의 캐싱 및 무효화 제어. 동일한 queryKey를 가진 쿼리는 같은 캐시된 데이터 공유 가능
+  - 쿼리 관리 : queryKey를 기반으로 쿼리의 상태를 관리하고, 해당 쿼리의 데이터가 변경되어 업데이트가 필요한지 판단