소스맵(Source Map) 이란? 웹팩은 흔히 여러 자바스크립트 파일을 하나로 합쳐주는 번들의 역할을 한다. 그리고 보통 서버에 배포할때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 합축하게 된다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅할 수 있을까? 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 ...

Mobx란? Mobx는 프론트엔드를 위한 애플리케이션 상태 관리 라이브러리이다. 애플리케이션 전반에서 사용하는 상태(state, 자주 변경되어 관리되는 데이터)를 손쉽게 관리하여 변경에 대한 반응을 처리해줄 수 있는 라이브러리이다. 그래서 전역 상태 라이브러리 라고 표현하기도 한다. 상태 관리는 왜 필요할까? mobx를 왜 사용해야 할까? 간단하게 ...

React(with Typescript) 프로젝트를 빌딩하면서 직접 eslintrc 파일을 설정해보며 학습했던 내용들을 한 번 정리해보려고 한다. ESLint와 Prettier 프로젝트가 커지고 개발자가 많아지면 javascript 코드 구조가 일관성을 유지할 수 없을 가능성이 커진다. 이러한 문제를 해결해주기 위한 도구들이 Eslint 와 Pret...

프로젝트 초기 개발 환경을 구축하면서 less파일을 module로 ts가 인식하지 못하는 문제를 겪었다. 이와 관련해서 아래와 같이 타입 정의를 해줌으로써 해결할 수 있었다. style.d.ts declare module '*.module.less' { const classes: { [className: string]: string }...

npm과 yarn은 둘 다 자바스크립트 패키지매니저다. 즉, 둘 다 여러 자바스크립트 의존성들을 손쉽게 관리해줄 수 있는 도구라고 할 수 있다.(마치 맥 유저들이 homebrew를 통해 손 쉽게 패키지를 관리할 수 있는 것처럼..) npm은 노드 패키지 매니저의 약자로 런ㄴ타임 동안 노드 환경에서 쓰이는 다양한 패키지들을 관리한다. npm은 npm...

핫 모듈 리플레이스먼트 배경 웹팩 개발서버는 코드의 변화를 감지해서 전체 화면을 갱신하기 때문에 개발 속도를 높일 수 있다. 하지만 어떤 상황에서는 전체 화면을 갱신하는 것이 좀 불편한 경우도 있다. 싱글페이지어플리케이션(SPA)은 브라우져에서 데이터를 들고 있기 때문에 리프레시 후에 모든 데이터가 초기화 되어 버리기 때문이다. 다른 부분을 수...

웹팩 최적화 코드가 많아지면 번들링된 결과물도 커지기 마련이다. 거의 메가바이트 단위로 커질수도 있는데 브라우져 성능에 영향을 줄 수 있다. 파일을 다운로드하는데 시간이 많이 걸리기 때문이다. 이번 포스팅에서는 번들링한 결과물을 어떻게 최적화 할수 있는지 몇가지 방법에 대해 알아볼 것이다. 1) production 모드 웹팩에 내장되어 있는 최적화 ...

웹팩 개발 서버 배경 지금까지는 브라우져에 파일을 직접 로딩해서 결과물을 확인했다. 인터넷에 웹사이트를 게시하려면 실제 서버를 기동하여 이 파일을 읽고 요청한 클라이언트에게 제공해야 한다. 개발환경에서도 이와 유사한 환경을 갖추는 것이 좋다. 운영환경과 맞춤으로써 배포시 잠재적 문제를 미리 확인할 수 있다. 게다가 ajax 방식의 api 연동은 c...

API 연동 프론트엔드에서는 서버와 데이터 주고 받기 위해 ajax를 사용한다. 보통은 api 서버를 어딘가에 띄우고(혹은 로컬 호스트에 띄우고) 프론트 서버와 함께 개발한다. 개발 환경에서 이러한 api 서버 구성을 어떻게 하는지 알아 보자. 목업 API 1: devServer.before 웹팩 개발 서버 설정 중 before 속성은 웹팩 서버에 ...

eslint 자동화 린트는 코딩할 때마다 수시로 실행해야하는데 이러한 일은 자동화 하는 것이 좋다. "깃 훅을 사용하는 방법"과 "에디터 확장 도구"를 사용하는 방법이 있다. 깃 훅을 사용하는 방법 소스 트래킹 도구로 깃을 사용한다면 깃 훅을 이용하는 것이 좋다. 커밋 전, 푸시 전 등 깃 커맨드 실행 시점에 끼여들수 있는 훅을 제공한다. husky...