jfmam 개발 블로그

Webpack과 Vite 동작 원리번들러는 여러 모듈의 의존 관계와 실행 순서를 관리하고, 각 파일의 스코프를 분리해 변수 충돌을 막는다. TypeScript나 JSX처럼 브라우저가 바로 실행할 수 없는 코드도 JavaScript로 변환한다.Webpack 동작 원리Webpack은 다음 순서로 동작한다.Entry를 기준으로 분석을 시작한다.import, require를 따라가며 전체 의존성 그래프를 만든다.로더와 플러그인으로 각 모듈을 변환한다.모듈 코드와 실행 런타임을 하나의 번들로 출력한다.1. Entry와 번들 요청개발 서버는 / 요청에 HTML을 반환한다. HTML에 포함된 를 통해 브라우저가 다시 번들 파일을 요청한다.export function createDevServerResponse({ u..

단계번들러는 왜 필요한가?번들러의 동작원리와 과정은?번들러는 왜 필요한가?핵심은 모듈을 브라우저가 이해할 수 있는 형태로 효율적으로 묶기모듈 시스템의 간극import, export를 이용해 코드를 잘개 쪼개 작성하지만, 과거의 브라우저는 모듈을 이해하지 못했다.Script 전역 Scope 오염Script로 로드된 파일은 모두 window에서 관리가 되었다아래의 경우 충돌로 인해 데이터가 꺠짐Script 순서script를 짤 때도 script를 실행하는 순서가 중요한 경우 이 모든것을 고려하면서 코드를 작성했어야함 // 에러 발생: "Uncaught ReferenceError: $ is not defined" // 아직 jQuery가 로드되지 않았기 때문에 $를 사용할 수 없음 $('#main-but..

개요 node v16을 지원하는 툴 (vercel) 들이 점점 deprecated 되는 과정에서 node v20으로 마이그레이션 하는 법을 알아보기로 하였다. 실제 유지보수 하는 서비스의 경우에도 마이그레이션 하는 일이 발생할 것 같아 진행해 보았다. 시나리오 nvm을 사용해서 원하는 버전(20)으로 변경한다. yarn.lock을 삭제하고 .yarn/cache를 삭제한다. yarn 명령어를 실행하여 다시 의존성을 설치한다. 까지가 원래의 시나리오 였다. 문제 발생 yarn을 통해 의존성들을 설치하는 과정에서 failed가 발생하면서 다음과 같은 에러가 발생했다. Only URLs with a scheme in: file, data, and node are supported by the default ES..

개요 사이드 프로젝트 백엔드를 서버리스로 배포하는 방법에 대해 정리한다. 포트폴리오 시 링크를 달아야 할 때 서버리스로 배포하면 비용절감에 도움이 될 것이라 생각함 클라우드 서비스에 좀 더 익숙해지기 위해 사용 단점 nestjs + lambda를 적용하기 전에 단점부터 알아보자. 일단 nestjs 전체를 묶어서 올리는 것이기 때문에 무겁다. api gateway에서 routing을 한번, nestjs에서 routing을 한번 더 하기 때문에 속도가 느리다. 즉, 실제 고객한테 제공하는 서비스를 만들 예정이라면 쓰지 않는 것을 추천한다. 방법 순서 serverless 환경설정 serverless에 필요한 의존성 설치 serverless yml 작성 serverless offline으로 먼저 동작하는지 배포..

개요 지금의 상태관리 라이브러리가 생겨난 이유에 대해 알아보자 지난 면접에서 물어본 mvc, mvvm 패턴에 대해 이해하고 현재의 라이브러리들이 상태관리를 위해 어떠한 패턴을 도입했는지 알아보자 MVC 패턴 도입 mvc 패턴이란? Model, View, Controller의 줄임말로 패턴을 이용해서 구조화 된 코드를 작성하는 방식이다. 일반적으로 백엔드에서 주로 사용되었으며 각각 해당하는 부분은 다음과 같다. Model: 데이터를 수집 가공 한다 (데이터 베이스 내용 조회, 생성) Controller: Router (Request, Response) View: 뷰 생성 이전에 수업에서 JSP를 사용했을 때 주로 사용하던 패턴이였다. View 부터 데이터베이스 까지 강하게 의존성이 엮어서 위의 다이어그램 ..

개요 react suspense의 사용법에 대해 자세히 알아보자 react suspense 이전의 코드와 현재의 코드를 비교해서 장,단점을 비교해보자 react suspense가 나오게 된 계기는? 동시성(concurrent) 동시성모드 이전의 react는 stack 기반으로 동작 하였습니다. 태스크를 stack 담고 빌 때까지 동기적으로 처리를 하였습니다. 이러한 방법은 많은 태스크를 처리해야 할 때 문제점을 다가왔습니다. 예시로 현재 유저가 검색으로 list를 불러온다고 했을 때 당장에 생각해봐도 loading component를 보여주고 자동완성 UI도 보여주고 api 요청도 하고 유저로부터 input처리도 받게 되고 등 등 요구사항이 늘어날수록 처리해야 되는 것도 많아집니다. 그러다 보니 태스크가..

개요파일을 배포하기 전에 최적화를 진행한다.먼저 파일의 리소스 용량을 줄임으로써 사용자는 더 빠르게 페이지를 로드할 수 있게 된다.리소스 용량을 줄이는 방법에 대해서 알아보자. 방법먼저 코드 스플리팅을 통해 불필요하게 렌더링 되고 있는 부분을 lazy 하게 로딩한다.next dynamicnext-bundle analyzer를 이용해서 코드스플리팅을 진행하려 한다.1. next bundle analyzer를 설치하고 next config js에 적용한다.https://www.npmjs.com/package/@next/bundle-analyzer @next/bundle-analyzerUse `webpack-bundle-analyzer` in your Next.js project. Latest version..

개요 프론트엔드 개발을 하면서 정상적으로 동작하는 UI 외에 에러가 발생했을 때 적절한 UI 및 페이지 이동을 통해 더 안정적이고 사용성을 고려한 서비스 개발이 필요 했습니다. 가장먼저, Error Boundary를 도입하고자 하였습니다. https://ko.legacy.reactjs.org/docs/error-boundaries.html 다음 링크를 통해 간략한 에러발생 시나리오를 파악해보면 하위 컴포넌트에서 에러발생 getDerivedFromError에서 fallback UI가 보이도록 설정해주고 componentDidCatch를 통해 logging을 지원합니다. 다음은 링크를 참고하여 간략하게 작성한 APIErrorBoundary 코드 입니다. // ApiErrorBoundary.tsx import..