기존 성능 (로컬) 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 코드스테이츠 프론트엔..

Pre 프로젝트 Day2~3 구현 & 에러 팀원분들과 회의하면서 사용자 요구사항 정의서, API 명세서, 레이아웃, 깃 플로우 방식 등등을 결정했다. 몇몇은 진행하면서 원활한 의사소통을 통해 개선해 나갈 거 같다. 일정에 따라 테스트도 진행하기로 했고, 쭉 그랬듯 앞으로도 엄청 바쁠 거 같다. 레포에는 BE 팀장님과 내가 각각 초기 세팅을 진행하였다. client에 vite build, typescript, eslint, prettier... 상태관리 recoil, react querry... 폴더, 페이지 정리.. 등등.. FE 팀원분들과는 각자 페이지, 기능을 맡아서 작업하기로 했다. 해야 할 것 깃에 이슈, 마일스톤 작성, 무호흡 코딩 팀장, 팀원분들이 갈수록 적극적이어서 엄청 만족 중이다 >

Pre 프로젝트 Day1 부트캠프를 시작한 지 벌써 4개월이나 지났고, 저번주 금요일 pre 프로젝트 팀빌딩이 끝났다. (랜덤) 솔로 프로젝트, 스터디 팀 프로젝트가 끝나자마자 새로운 프로젝트가 시작되려고 한다..😶‍🌫️ 개인적으로 프로젝트를 진행해야 불타는 성향이라 떨리거나 한다기 보다는 기대되는 마음이 더 큰 것 같다. 나까지 포함해서 총 6명(FE3 + BE3)이 한 팀이 되었고, 팀원 모두 비 전공자에 팀 프로젝트 경험이 없다던 것 같다(아마도). 경험이 많은 분에게 배우기를 바라긴 했지만, 부팀장이 되어버린 내가 팀을 주도하면서 많은 걸 배울 수 있을 거라 생각하기에 만족하고 있다. BE 팀장님과 모든 팀원들이랑 열심히 해서 좋은 결과물을 만들 수 있게 노력해야겠다. pre-project 202..

쿠키에 대해 설명해주세요. 쿠키는 클라이언트(웹 브라우저)에 저장되는 작은 데이터 조각입니다. 웹 서버에서 클라이언트에게 전송되어 클라이언트 측에서 유지됩니다. 쿠키는 주로 세션 관리, 사용자 인증, 개인화 등을 위해 사용됩니다. 웹 서버는 쿠키를 생성하고 HTTP 응답 헤더를 통해 클라이언트에게 전달하며, 클라이언트는 이후 요청에서 쿠키를 함께 전송하여 서버가 클라이언트를 식별하고 상태를 유지할 수 있게 합니다. 세션에 대해 설명해주세요. 세션은 서버 측에서 클라이언트의 상태를 유지하기 위한 방법입니다. 클라이언트가 웹 서버에 접속하면 서버는 해당 클라이언트에 대한 고유한 세션 식별자를 생성하고 이를 클라이언트에게 전달합니다. 클라이언트는 이 세션 식별자를 쿠키 또는 URL 매개변수를 통해 서버에 전달..