[4팀 박지영] Chapter 4-2. 코드 관점의 성능 최적화

.github/pull_request_template.md

@@ -2,64 +2,30 @@
 
 ## 과제 요구사항
 
-- [ ] 배포 후 url 제출
-
-- [ ] API 호출 최적화(`Promise.all` 이해)
-
-- [ ] SearchDialog 불필요한 연산 최적화
-- [ ] SearchDialog 불필요한 리렌더링 최적화
-
-- [ ] 시간표 블록 드래그시 렌더링 최적화
-- [ ] 시간표 블록 드롭시 렌더링 최적화
+- [X] 배포 후 url 제출
+- [X] API 호출 최적화(`Promise.all` 이해)
+- [X] SearchDialog 불필요한 연산 최적화
+- [X] SearchDialog 불필요한 리렌더링 최적화
+- [X] 시간표 블록 드래그시 렌더링 최적화
+- [X] 시간표 블록 드롭시 렌더링 최적화
 
 ## 과제 셀프회고
 
-<!-- 과제에 대한 회고를 작성해주세요 -->
+https://youngh02.github.io/front_7th_chapter4-2/
+
+최적화의 중요성을 체감했지만 실제로 효과를 내려면 코드 흐름 전체를 파악해야만 어디를 건드릴지 보였다는 점이 제일 힘들었습니다. 캐싱, 가상 리스트, DnD 개선 모두 초기 구조 이해가 충분히 되어야 손댈 수 있어 앞으로도 먼저 전체 지도를 그리는 습관을 더 들이려고 합니다.
+또 다양한 devTools 를 사용해볼 수 있는 기회여서, 앞으로도 유용하게 사용할 것 같았습니다.
 
 ### 기술적 성장
-<!-- 예시
-- 새로 학습한 개념
-- 기존 지식의 재발견/심화
-- 구현 과정에서의 기술적 도전과 해결
--->
+병렬 API 호출에 캐싱 레이어를 더해 동시 호출이 있더라도 실제 네트워크 비용은 한 번만 발생하도록 만들었습니다.
 
-### 코드 품질
-<!-- 예시
-- 특히 만족스러운 구현
-- 리팩토링이 필요한 부분
-- 코드 설계 관련 고민과 결정
--->
 
-### 학습 효과 분석
-<!-- 예시
-- 가장 큰 배움이 있었던 부분
-- 추가 학습이 필요한 영역
-- 실무 적용 가능성
--->
+### 코드 품질
+검색 필터/테이블/리스트를 역할마다 memoized 컴포넌트로 쪼개고, useAutoCallback으로 핸들러 참조가 바뀌지 않게 해 리렌더을 줄였습니다.
 
 ### 과제 피드백
-<!-- 예시
-- 과제에서 모호하거나 애매했던 부분
-- 과제에서 좋았던 부분
--->
+주어진 JSON 데이터 규모가 꽤 커서 최적화 지점이 눈에 띄게 드러난 점이 좋았습니다.
 
-## 리뷰 받고 싶은 내용
-
-<!--
-피드백 받고 싶은 내용을 구체적으로 남겨주세요
-모호한 요청은 피드백을 남기기 어렵습니다.
-
-참고링크: https://chatgpt.com/share/675b6129-515c-8001-ba72-39d0fa4c7b62
 
-모호한 요청의 예시)
-- 코드 스타일에 대한 피드백 부탁드립니다.
-- 코드 구조에 대한 피드백 부탁드립니다.
-- 개념적인 오류에 대한 피드백 부탁드립니다.
-- 추가 구현이 필요한 부분에 대한 피드백 부탁드립니다.
-
-구체적인 요청의 예시)
-- 현재 함수와 변수명을 보면 직관성이 떨어지는 것 같습니다. 함수와 변수를 더 명확하게 이름 지을 수 있는 방법에 대해 조언해주실 수 있나요?
-- 현재 파일 단위로 코드가 분리되어 있지만, 모듈화나 계층화가 부족한 것 같습니다. 어떤 기준으로 클래스를 분리하거나 모듈화를 진행하면 유지보수에 도움이 될까요?
-- MVC 패턴을 따르려고 했는데, 제가 구현한 구조가 MVC 원칙에 맞게 잘 구성되었는지 검토해주시고, 보완할 부분을 제안해주실 수 있을까요?
-- 컴포넌트 간의 의존성이 높아져서 테스트하기 어려운 상황입니다. 의존성을 낮추고 테스트 가능성을 높이는 구조 개선 방안이 있을까요?
--->
+## 리뷰 받고 싶은 내용
+SearchDialog.tsx의 filteredLectures 계산을 현재는 전체 searchOptions를 의존성으로 묶어 useMemo로 감싸 두었는데, 더 세분화하거나 계산 비용을 줄일 수 있는 구조 개선이 있을지 궁금합니다.

.github/workflows/deploy.yml

@@ -0,0 +1,58 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./dist"
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package.json

@@ -22,26 +22,28 @@
     "framer-motion": "latest",
     "msw": "latest",
     "react": "latest",
-    "react-dom": "latest"
+    "react-dom": "latest",
+    "react-window": "^2.2.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/express": "latest",
     "@types/react": "latest",
     "@types/react-dom": "latest",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "@vitest/coverage-v8": "^2.0.3",
-    "@vitest/ui": "^1.6.0",
-    "eslint": "^8.57.0",
+    "@types/react-window": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "@vitest/coverage-v8": "^2.1.9",
+    "@vitest/ui": "^1.6.1",
+    "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "tsx": "^4.17.0",
-    "typescript": "^5.4.5",
-    "vite": "npm:rolldown-vite@latest",
+    "eslint-plugin-react-refresh": "^0.4.26",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "vite": "npm:rolldown-vite@^7.3.0",
     "vitest": "latest"
   }
 }