mystery

지난 webpack 핵심 컨셉 포스트에 이어서 프로젝트에 사용할 webpack 설정 파일을 작성한 과정에 대해 담아 보려 합니다. 목차는 다음과 같습니다. webpack 설정 babel-loader 적용 ts-loader 적용 react 설정 HMR 적용 위 키워드 외 eslint, prettier, jest 등 기타 설정에 대한 내용은 추가로 포스팅하겠습니다. React + TS 환경을 구성하는 각 과정을 패키지별로 나누어 설명하기에는 패키지 간 의존이 다소 깊습니다. 개연성이 다소 떨어질 수 있어요. 꼬리의 꼬리를 무는 구조이다 보니 전체 설정이 끝나기 전까지 설정에 대한 피드백을 받기 어렵습니다. 차근히 따라 해 보는 용도로 봐주시면 감사하겠습니다 (모든 설정이 끝나고 로컬에서 띄워지는 화면을 보면..

Webpack 공식 문서를 읽다보면 경로 관련 속성에서 자주 등장하는 키워드가 있습니다. path.resolve 와 __dirname 인데요. 대체 무엇인지 한번 알아보겠습니다. 1. path 우선 path를 먼저 알아볼게요. path 모듈은 node.js 내장 API 입니다. 운영체제별로 경로 구분자가 달라 발생하는 문제를 해결하기 위해 탄생했습니다. 운영체제는 크게 Window 진영, POSIX 진영(macOS, Linux)으로 나뉘는데, Window: ' \ ' (역슬레시) POSIX: ' / ' (슬레시) 각각 위와 같은 구분자로 폴더를 구분합니다. path 모듈의 메서드로 위와 같은 구분자 문제를 쉽게 해결할 수 있습니다. 1-1. path.resolve path.resolve([...paths..

첫 팀 프로젝트를 시작하면서 프로젝트 성향에 맞는 커스텀한 개발 환경 설정이 필요했습니다! 직접 개발 환경을 구성해 보면서 전반적인 개발 환경에 대해 이해하고자 합니다. 그 첫 주제는 바로 webpack입니다. 1. webpack 이란? 웹팩은 대표적인 *번들러중 하나로 웹을 구성하는 자원을 각각의 모듈로 취급하고 이를 병합하여 하나의 결과물로 만들어 주는 도구입니다. (js 파일 뿐만 아니라 css, 이미지, 폰트와 같은 기타 파일도 모듈로 취급할 수 있습니다.) *번들러(bundler): 의존성이 있는 여러 개의 js파일(모듈)을 하나의 js파일로 합쳐주는 도구 2. webpack의 핵심 컨셉 웹팩 공식문서에서는 웹팩을 이해하기 위한 핵심 컨셉을 소개하고 있습니다. 2-1. entry entry 속성..