기존 성능 (로컬) lazy 적용 (코드) const Root = lazy(() => import('@/pages/Root')); const Main = lazy(() => import('@/pages/Main')); const Member = lazy(() => import('@/pages/Member')); const Auth = lazy(() => import('@/pages/Auth')); const TV = lazy(() => import('@/pages/TV')); ... const router = createBrowserRouter([ { path: '/', element: ( ), loader: tokenLoader, errorElement: , children: [ { index: tru..

리팩토링 - queries 분리 폴더구조, path alias 설정이 끝났으니 무거웠던 컴포넌트들의 코드를 분리시켜 주어야 한다. 폴더구조를 더 개선하기 위해서도 필요하고 성능 향상등 다양한 이유로 아무튼 해야 한다. 우리 프로젝트의 api 는 분리되어 있는 반면에 리액트 쿼리는 그렇지 않기 때문에, 가장 먼저 수정해야겠다고 생각해서 useQuery, useMutation 들을 분리시킬 것이다! 이전 Bookmark 컴포넌트 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { AxiosError } from 'axios'; import { BsHeart, BsHeartFill } from 'react..

폴더구조를 바꿔야 하는 이유? 위를 보면 알 수 있듯, 우리 프로젝트의 폴더구조는 굉장히 복잡하다. 컴포넌트 폴더 안에 따로 구분 없이 기능이 적혀있는 폴더들이 가득하기 때문에 구조를 처음 보는 사람은 절대 이해하기 어려울 것이다 (우리도 네이밍 때문에 헷갈리곤 했다). 그래서 어떻게? 팀원들끼리 상의한 결과 DDD (Domain-Driven Design) 설계 방식을 따라가면 좋지 않을까? 결론이 나왔고 '각자 폴더구조를 정리해 오자!'라고 얘기했지만 셋 모두 비효율적이라 느꼈기에 다시금 상의를 진행하였다. 이미 우리의 폴더구조는 어느 정도 페이지별로 구분이 되어있었기 때문에 여기에 맞게 작업을 진행하기로 했다. 이해하기 어렵거나 비슷한 네이밍을 가진 파일, 폴더의 이름을 변경하였고, layout의 기..

목표 이 프로젝트에 관해서 아무것도 모르는 사람이 읽고서 이해하기 쉬운가 새로운 기능을 추가하거나 기존 기능을 제거하기 쉬운가 중복되는 코드를 최소화했는가 적절한 네이밍을 부여했는가 리팩토링 순서 폴더구조 정리 ➡️ 재사용 가능한 컴포넌트 분리 ➡️ 네이밍 ➡️ 인터페이스 정의 ➡️ 테스트코드 도입 매주 월요일 저녁 8시까지 스프린트 방식으로 메인 프로젝트 리팩토링을 하기로 했다. 멘토님에게 지적받은 부분과 우리가 생각하는 보완할 점을 개선하기 위함이다. path alias를 설정, eslint를 일부 추가하였다. 폴더의 depth 가 깊어질수록 경로가 복잡해지기 때문에 path alias를 사용하여, 프로젝트 파일들을 상대경로(../../)에서 절대경로로 전부 변경해 주었다. /** tsconfig.j..

배포 주소 https://joying.vercel.app/ JOYING 세상의 모든 컨텐츠를 한 곳에 보여조잉! joying.vercel.app 깃허브 주소 https://github.com/codestates-seb/seb44_main_003 GitHub - codestates-seb/seb44_main_003: JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉! JOYING: 세상의 모든 OTT 컨텐츠를 한 곳에 보여조잉! Contribute to codestates-seb/seb44_main_003 development by creating an account on GitHub. github.com 프로젝트 회고 개발 기간: 2023.06.28 ~ 2023.07.24 코드스테이츠 프론트엔..