분류 전체보기
-
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 활..
-
[ JS ] Execution Context 실행 컨텍스트Javascript 2023. 11. 21. 20:45
실행 컨텍스트란 ? 실행 컨텍스트란 실행할 코드의 식별자, 스코프 등의 환경 정보를 관리한다. 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 실행 순서를 보장한다. 실행 컨텍스트는 호이스팅, 스코프 체인, 클로저, this binding 등 JS 중요 개념의 근간이 된다. 실행 컨텍스트 구성도 빨간 글씨는 해당 concept과 관련있는 개념을 표기함 Execution Context 실행 컨텍스트 역할 : 실행 컨텍스트는 실행할 코드의 변수와 스코프 같은 환경정보와 외부 참조 정보를 가지고 있다. 콜스택에 쌓이며 실행 순서를 보장한다. 콜스택의 최상단에 위치한 실행 컨텍스트는 running execution context이다. 구성 : Lexical Environment, Variable Envi..
-
[ JS ] 호이스팅Javascript 2023. 11. 17. 00:31
호이스팅 호이스팅이란, 선언문이 해당 스코프의 최상단으로 끌어올려진 듯 동작하는 현상을 의미한다. 변수 호이스팅과 함수 호이스팅으로 분류할 수 있다. 변수 호이스팅 변수 호이스팅에서는 var 키워드 선언과 let, const 키워드 선언한 경우 차이가 있다. var 선언문 이전에 해당 변수를 참조할 경우 undefined를 반환한다. let, const 선언문 이전에 해당 변수를 참조할 경우 Reference Error 발생한다. let, const 선언문은 호이스팅이 발생하지 않는 것처럼 보이지만, var과 동일하게 호이스팅이 발생한다. let hoisting = 1; { console.log(hoisting); // Reference Error let hoisting; } 호이스팅이 발생하지 않는다면..
-
[ PS ] 공원 산책Algorithm/Problem Solving 2023. 11. 16. 02:02
https://school.programmers.co.kr/learn/courses/30/lessons/172928 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 프로그래머스 LV2 리코쳇 로봇 하위 호환 문제이다. 한 방향으로 쭉 이동하는 코드 포맷은 익히면 좋을 것 같다. 이전에는 시작 지점을 2중 for문으로 탐색했었는데, includes와 indexOf를 사용해봤다. const solution = (park, routes) => { const H = park.length; const W = park[0].length; const dy = [-1, ..
-
[ 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번 문제같은 경우는 바로 해결할 수..