Webpack webpack.conifg.js 설정하기 🔎 webpack.conifg.js란 webpack 4버전 이후로는 따로 설정파일이 없더라도 webpack 이 src.index.js 파일을 dist/main.js 로 번들링 해주기 때문에 설정파일이 필수라고는 할 수 없다. 하지만 모든 프로젝트가 동일한 설정으로 번들링 된다는 것은 불가능하기 때문에 각 프로젝트에 맞는 설정값을 셋팅하는 것이 좋다. 이럴 때 webpack.config.js 파일에 설정값을 셋팅하면 webpack 은 해당 파일을 자동으로 읽고 설정에 맞게 번들링 해준다. 🔎 Entry webpack 이 어떤 파일을 기준으로 번들링 할 지 그 시작점을 나타낸다. 기본값은 아래와 같이 src/index.js 이다. module.expor..
React React - CRA 없이 React 환경 설정 🔎 npm init 우선 프로젝트를 진행할 폴더를 생성한 후 터미널에서 npm init 명령어를 통해 package.json 을 생성한다. npm init -y // package.json { "name": "demo-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", // 따로 추가한 부분 "type": "module" // module 사용하는 방식 "module"..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Tools 2. Module Bundler 🔎 Module 애플리케이션의 크기가 커지면 개발하는 과정에서 파일을 여러개로 분리하게 되는데 여기서 분리된 각각의 파일을 모듈(module) 이라 한다. 모듈화의 필요성 기능의 분리가 가능하고 인터페이스가 단순해진다. 하나의 파일에 많은 기능들을 작성하면 코드 파악이 힘들고 관리가 어려워진다. 따라서 기능별로 파일을 분리하여 관리할 필요성이 있다. 각 모듈은 자신만의 스코프를 보장해준다. 하나의 파일에서 모든 코드를 관리하면 변수나 함수명이 중복되거나 다른 기능의 코드끼리 서로 영향을 끼칠 수 있다. 이러한 문제를 해결하기 위해 기능별로 여..
