프론트엔드 개발

'프론트엔드 개발환경의 이해'강의를 듣고 정리를 하였는데, 이해를 바탕으로 직접 webpack과 babel을 세팅을 해보고자 합니다. 기존에는 CRA를 이용하여 React를 쉽게 바로 쓸 수 있는 장점이 있었기 때문에 사용하였습니다. CRA를 이용하면 Webpack 및 Babel 등 설정하기 까다로운 것들을 편하게 쓸 수 있었는데, 나중에 이러한 구성요소들을 변경을 하고자 할 때 이해해야 할 수 있기 때문에 직접 리액트 환경을 Webpack을 통해서 구축해보는 시간을 갖도록 하겠습니다. React + Typescript + Webpack 구성 먼저 package manager는 이 글을 참고하여 yarn으로 진행하도록 하겠습니다. node 14.17.3, yarn: 1.22.17 버전으로 진행하였습니다...

웹팩을 공부하면서, 공식 홈페이지에서 Core Concepts부분을 번역하였습니다. webpack Core Concepts: Entry Output Loaders Plugins Mode Browser Compatibility Entry Webpack이 내부 *dependency graph 구축을 시작하기 위해 사용해야 하는 모듈을 나타냅니다. Webpack은 entry(진입점)이 (직간접적으로) 의존하는 다른 모듈과 라이브러리를 알아낼 것입니다. 기본적으로 값은 ./src/index.js이지만 Webpack 구성에서 항목 속성을 설정하여 다른(또는 2개 이상의 entry)을 지정할 수 있습니다. 예시, webpack.config.js module.exports = { entry: './path/to/my..

React를 사용할 때, CRA로 부르면 너무 잘 구성되어있는 webpack에 대한 이해가 부족하였는데 직접 바닐라 js에서 환경을 구축해보고, 웹팩에서 사용되는 용어를 정리하고자 작성하였습니다. webpack이란? 최신 JavaScript 애플리케이션을 구축하고 있다면 "webpack"이라는 용어를 들어본 적이 있을 것입니다. Webpack은 JavaScript 응용 프로그램을 위한 정적 모듈 번들러입니다. 응용 프로그램에서 모든 코드를 가져와 웹 브라우저에서 사용할 수 있도록 합니다. Webpack은 앱에서 코드가 어떻게 사용되는지에 따라 코드를 분리하며, 이러한 모듈식 책임 분류를 통해 코드를 훨씬 쉽게 관리, 디버그, 확인 및 테스트할 수 있습니다. 모듈 번들러란? 웹 애플리케이션을 구성하는 자원..