webpack 으로 번들링된 파일에서 에러가 날때 원인 파악하기

2023-02-11

배경 현재 웹 프레임웍으로 생산되는 대다수의 코드는 , 등의 번들러에 의해 번들된 파일로 서빙된다. 번들된 파일에서 에러가 나는 경우 을 이용해서 파악할 수 있지만, 환경의 경우 을 함께 동반하지 않는 경우가 많고, 또 코드의 경우는 하나의 파일에 여러 라이브러리 소스가 엮여 있기 때문에 어떤 라이브러리가 문제가 되는지 파악하기 더 어렵다. 아래 …


Nodejs, path module, __dirname, __filename 에 대해 톺아보기

2020-03-22

Nodejs 들어가며 웹펙을 입문하려 할 때 처음 마주하게 되는게 entry, output 옵션이고, entry, output 옵션을 설정할 때 나 이 쓰이는 것을 볼 수 있다. 필자를 포함한 입문자들은 대충 경로를 설정하는 구나 하고 넘어가는데(필자만 그런것인가?), 나중에 웹펙을 직접 설정해가며 커스텀 해야할 순간이 오면 해당 내용을 제대로 알아야…


React 빌드(webpack) 환경 직접 구성하기 (without CRA)

2019-08-09

들어가며 webpack, babel 많이 들어는 봤으나 정작 해당 설정을 눈앞에 마주하면 아득 하기만 했다. 설정 이라는 영역은 경험이 쌓이지 않으면 단번에 이해하기가 어렵다. 또한 webpack 과 babel은 수시로 update 되고 규칙과 네이밍이 미세하게 조정되며 어려움을 더한다. 그래서 이번에 리엑트를 시작하며 CRA(create react a…


css loader의 sourceMap 사용시 발생하는 FOUC 이슈

2019-07-24

TLDR webpack 을 통해 번들링한 React 활용 TODO 어플을 로드했다. CSS 가 미적용 된 상태로 DOM 컨텐츠가 로드되는 이슈가 있다. 알고보니 CSS Loader 의 sourceMap 옵션 을 켜둔 것이 원인이었다. 해당 옵션을 끄면 이슈가 해결된다. 1. 이슈 webpack 을 통해 번들링한 React 활용 TODO 어플을 로드했다.…