Project
-
React + Vite 초기 로딩 최적화Project 2023. 12. 8. 17:54
SPA의 초기 로딩 문제점 React는 SPA기반입니다. 때문에 최상위 루트 index.html 파일에 위치하는 스크립트에 모든 모듈이 담겨 있습니다. 이로써 페이지 초기 진입 시, 당장 사용하지 않는 모듈까지 로드하기 때문에 초기 로딩 속도가 느린 문제가 있습니다. 초기 로딩 속도 개선을 위해 위해 두 가지를 생각했습니다. vite의 splitVendorChunkPlugin & manualChunks 활용 여러 chunks로 분할하여, 비동기 청크 로드 가능 React의 lazy 활용하여 dynamic import 적용 초기 진입 시, 불필요한 모듈은 불러오지 않게 하며 앱의 초기화 로딩에 필요한 비용을 줄여줍니다. 1. vite의 splitVendorChunkPlugin & manualChunks 활..
-
[ Project ] FormData ( File과 Json data를 함께 )Project 2023. 10. 19. 02:00
진행 중인 프로젝트에서 유저 정보 변경 항목에는 이미지, 이름, 자기소개 세 가지가 있습니다. 세 가지 각각 Update API가 존재하는 것이 아닌 하나의 API로 이미지, 이름, 자기소개를 Update하게 됩니다. 이미지는 File 타입이고 이름과 자기소개는 application/json 타입의 데이터인데 어떻게 서로 다른 타입의 데이터를 함께 보낼 수 있는지에 대한 문제를 해결해 나아가는 글이 되겠습니다 😊 백엔드 : dto 데이터는 application/json 타입으로 넘겨주셔야 해요 ! Postman으로 API 테스트를 했을 때, Request Body에 'dto'에는 application/json 타입의 객체 데이터가 들어가고 'img'에는 multipart/form-data 타입의 이미지 ..
-
[ Project ] 컴포넌트 설계에 대한 고민 (Feat. 합성 컴포넌트)Project 2023. 9. 10. 17:03
- 최초 기획 UI 사진 속 Table 컴포넌트는 앞으로 다양한 모습으로 사용됩니다. 사진 속 UI처럼 가장 처음에 기획했던 Table 컴포넌트는 텍스트로만 이루어져 있습니다. 중간중간 기획에 대한 아이디어가 더해지면서 UI가 조금씩 다른 컴포넌트가 필요했고 자연스럽게 컴포넌트의 확장성, 재사용성에 대해서 고민을 하게 되었습니다. - 초기 코드 Table 컴포넌트는 Header, Content, Pagination 세 가지 컴포넌트로 구성되어 있습니다. // /components/common/table/Table.tsx // 생략 const Table = ({...props}) => { if (data.length === 0) return ; return ( ); }; export default Tabl..
-
[ Project ] Axios Interceptor 활용하기Project 2023. 9. 6. 18:59
- Axios Interceptor 활용하기 Axios Interceptor를 활용하여 모든 요청과 응답 전에 원하는 로직을 적용할 수 있다. 이를 활용하여 1. 모든 요청 헤더에 토큰이 필요. 2. accessToken토큰이 만료되었을 경우 토큰 재발급하고, 갱신된 토큰을 헤더에 설정하고 재요청. 위 두 가지 문제를 해결할 수 있다. - Request Interceptor, 헤더에 Access Token 설정하기 const instance = axios.create({ baseURL: process.env.NEXT_PUBLIC_BASE_URL, }); // 요청 인터셉터 : 헤더에 토큰 추가 instance.interceptors.request.use( (config) => { const token =..
-
[ Project ] RTK-Query에 Axios 입히기Project 2023. 9. 4. 21:29
- RTK-Query에 Axios 를 ? RTK-Query란 Redux Toolkit 내의 포함되어 있고 데이터 패칭 및 서버 상태 관리를 도와주는 기능을 제공합니다. 기본적으로 fetch를사용하여 HTTP 통신을 합니다. 현재 진행 중인 프로젝트에서 RTK-Query를 사용 중인데, API 요청에 일괄 처리가 필요한 두 가지의 이유가 있습니다. 1. 모든 요청 헤더에 토큰이 필요. 2. accessToken토큰이 만료되었을 경우, 토큰 재발급하고 갱신된 토큰을 헤더에 설정하고 재요청. 1번 문제 같은 경우, RTK-Query의 prepareHeaders 요청 헤더를 수정할 수 있습니다. 하지만 API slice마다 헤더에 토큰을 넣어주는 중복되는 코드도 발생할뿐더러 2번 문제같은 경우는 바로 해결할 수..
-
[ Project ] React 재사용 버튼 컴포넌트 만들기Project 2023. 9. 1. 23:34
- 재사용 가능한 컴포넌트 여러 곳에서 사용되는 컴포넌트는 공통 컴포넌트로 만들어 사용하는 게 좋은 점이 많다. 1. 반복적인 코드를 작성하는 것은 시간과 노력을 낭비하는 것이므로, 공통 컴포넌트를 만들어 재사용함으로써 중복 코드를 줄일 수 있다. 2. 중복 코드가 많으면 동일한 로직 또는 스타일을 변경할 때 여러 위치에서 수정을 해야 할 수 있다. 공통 컴포넌트를 사용하면 하나의 위치에서만 수정을 하면 되므로 유지 보수가 훨씬 용이하다. 3. 요구 사항 변화나 기능 추가 시 공통 컴포넌트를 기반으로 확장하는 것이 더 쉽다. 등등 매우 많다. - 버튼 컴포넌트 버튼 컴포넌트는 프로젝트에서 빠질 수 없는 컴포넌트 중 하나이다. 지난 테오의 스프린트 때 만들었던 프로젝트에서 버튼 컴포넌트를 구현했던 코드를 ..
-
[ Project ] Next.js 13 다크모드 적용기Project 2023. 8. 30. 18:08
- 구현 방향 현재 프로젝트에 Styled-component를 사용하고 있다. 해당 스택 기준으로 다크 모드를 구현할 수 있는 방법은 두 가지로 추려지는데 첫 번째로는 Theme Provider 사용, 두 번째로는 Css variable 사용하는 방법이 있다. 그 중 벨로퍼님의 의견을 참고하여 Css variable 방법을 채택하여 구현했다. 벨로퍼님 다크모드 글 - 스타일 설정 디자이너 없이 진행하고 있는 프로젝트라서, dark mode, light mode 색상 선택이나 디자인 적인 부분을 생각하고 기획하는데 시간이 은근 쓰였다. 단순히 디자이너의 영역이라고 생각하면 스트레스였지만, 프론트엔드 개발자로서 나쁠 것 없는 역량이라 생각하며 . . 😊 객체에 각 모드별 스타일 색상을 정의하고 Css var..