Webpack
TIL | CRA 없이 React 세팅하기
CRA 없이 React 개발 환경 구축하기 일반적으로 CRA(Create React App)을 사용하게 되면, 개발환경 세팅 시간을 단축시켜 빠르게 프로젝트를 시작할 수 있다. 하지만 추가적으로 웹팩과 바벨 설정 및 변경하며 커스텀할때 어려움이 발생할 수 있다. 또한 리액트 개발자로서, 관련 툴을 직접 사용하여 CRA 환경을 세팅할 줄 알아야한다고 생각했기에 처음부터 세팅을 직접 해보았다. 초기 세팅 ├── dist ├── public │ └── index.html ├── src └── index.tsx 위와 같이, 폴더 구조를 먼저 만들어준다. (CRA를 통해 프로젝트를 생성할 시 보게 되는 비슷한 구조이다.) dist: 빌드 파일이 위치할 경로 public: static 파일이 위치할 경로 src: ..
TIL | 웹팩 로더(Style, CSS)
로더-1(style, css) 로더는 자바스크립트 파일 뿐만이 아닌 style, image 등의 파일들을 모듈로 변환하여 처리할 수 있게 하는 수단이다. css-loader, style-loader loader 설치 npm install -D css-loader style-loader 로 로더를 설치 후 웹팩 설정파일에 추가한다. css-loader: css 코드를 모듈로 변환하는 역할을 한다. style-loader: JS 코드로 변경된 style을 동적으로 DOM에 추가하는 역할을 한다. (설치하지 않을시, 스타일이 DOM에 반영되지 않는다.) webpack.config.js 파일 설정 const path = require("path"); // module.exports = { mode: "devel..
TIL | 웹팩 번들 파일 생성하기
웹팩의 등장 웹 애플리케이션의 크기가 커지면서, JS 파일의 크기 또한 커졌다. 때문에 JS코드 또한 나눠서 관리했으나 이는 script의 많은 사용으로 HTTP 병목 현상이 발생하게 된다. 위와 같은 계기로 인해 모듈로 나누어 관리하는 방법들이 있으며, 대표적으로 웹팩이 존재한다. 웹팩은 다수의 파일(module)을 하나의 파일로 합쳐주는 번들러(bundler). 이때 합쳐진 파일을 번들(bundle)이라고 한다. 웹팩 설치 npm init npm install -D webpack webpack-cli npm init을 통해 npm으로 관리할 프로젝트의 json 파일을 생성한다. 터미널에서 위와 같은 커맨드를 통해 webpack와 터미널 도구인 webpack-cli을 설치한다. -D는, devDepen..
TIL | 웹팩 등장 이전 모듈의 사용
웹팩 등장 이전 모듈의 사용 모듈: 분리된 jS 파일 조각들이다. script 파일이 커지며 기능 또한 복잡해지면서 기능별로 파일을 분리하고 재사용성을 높이고자 도입하게 된 개념이다. import/export가 없던 과거에는 관련 모듈을 index.html에 직접 import하여 사용하였다. 문제점은, 전역 스코프의 오염이다. 즉, window 객체에 sum이라는 함수가 추가되는데, 이때 sum에 다른 값을 할당할 수도 있기 때문에 애플리케이션의 예측 불가와 더불어 런타임 에러가 발생한다. 런타임 에러: 프로그램이 실행되는 환경에서 발생하는 에러 // math.js function sum(a, b) { return a + b; } // // app.js sum(1, 2); // sum = 1; // co..