Babel 썸네일형 리스트형 순수(?) 리액트 앱에 webpack 설정하기 (without CRA) 레벨 3 팀프로젝트를 시작하면서 가장 먼저 맞닥뜨린 과제는 CRA 없이 개발환경을 setting 하는 것이었다. 레벨 2 기간 내내 편하게 써온 CRA를 사용하면 안 된다는 과제가 던져졌다. 🤔 CRA, 편한데 왜? CRA는 Create React App의 약자로, 초보자들도 쉽고 빠르게 개발환경을 세팅할 수 있도록 리액트 팀에서 제공하는 보일러 플레이트이다. 터미널에 아래와 같이 명령어 한 줄만 치면 기본적으로 필요한 패키지를 모두 포함한 프로젝트의 기본 뼈대를 만들어준다. npx create-react-app --use-npm 코치님들께서 CRA 사용을 제한하신 이유는 무엇일까? CRA를 사용하면 편하긴 하다. CRA 편한 것을 즐기려면 적어도 CRA가 무엇을 얼마나 해주는지는 알아야 할텐데 실상 그.. 더보기 웹팩(Webpack) 밑바닥부터 설정하기 최근 웹팩을 설정해서 과제를 제출했다. 웹팩을 '활용'했다고 하기에는 사용한 기능이 빙산에 일각에 불과한데, 이마저도 대부분을 페어로부터 배웠다,,, 혼자 해보면 정말 못할 것 같아서, 다시 처음부터...! 정리를 해보려고 한다. 웹팩 설정 파일(webpack.config.js)을 차근차근 완성해가며 웹팩의 주요 개념을 익혀보자. 0. 웹팩(webpack)이란? 웹팩 공식 Github 에서는 웹팩을 '모듈(module)'을 위한 '번들러(bundler)' 라고 소개한다. 웹팩에 대해 알아보려면 '모듈'과 '번들러'가 무엇인지부터 알아보아야겠다. webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage.. 더보기 이전 1 다음
