Bundler/Webpack (4) 썸네일형 리스트형 웹팩에서 CSS를 모듈처럼 쓰는 방법 - CSS module 웹팩을 쓰면 CSS까지도 모듈로 쓸 수 있다는 장점이 있다. 이게 무슨 말인가. 기존의 CSS는 전역 변수와 다름 없었다. .any라는 클래스가 있으면 모든 .any에 영향을 줬다. 물론 SCSS의 네스팅을 이용하면 비껴갈 수는 있지만 그래서 BEM과 같은 길고 못생긴 class 네이밍을 해야 했다. .modal__button--active 물론 정확히 네이밍하면 좋은 방법이라고는 생각한다. 자칫하면 작대기로 나눈 위의 세 부분 개념을 사람마다 다르게 해석해서 중구난방이 될 수 있다는 게 문제인듯 하다. 이런 난해함을 해결하기 위해 스타일 컴포넌트 등 다양한 스택들이 있지만 본인은 CSS module이 눈에 들어왔다. 그동안 익숙하게 써왔던 CSS와 똑같기 때문이다. 가운데에 .module을 붙여 any.. 자바스크립트로 웹 개발을 하기 위한 웹팩 설정 방법 리액트에서는 분명 잘 써왔는데 자바스크립트로만 개발을 하려다 보면 import나 export가 잘 안 된다. script의 type을 module로 할 때만 쓸 수 있다고 한다. 그렇다고 module로 설정한 다음에 써도 잘 안 되는 건 여전하다. 모듈 대신 전역 변수로 선언한 클래스를 써야 했다. 아니 회사에서 그렇게 하고 있었다. 뭔가 방법이 있을 것이지만 급한 게 아니라 넘어갔다. 이를 해결할 수 있을 것 같은 웹팩은 어렵기 때문이다. 개발 중에 require나 import, export를 이용한 모듈을 안 쓴다는 것은 너무나 손해다. 필요할 때만 딱 뽑아서 쓰는 코드의 깔끔함을 누리고 싶었다. 다행히 예상대로 웹팩을 사용하면 type 설정 따위는 잊을 수 있다. 웹팩을 통해 번들링이 끝난 파일은 .. 웹팩을 이용해서 리액트 프로젝트 만들기 npx create-react-app 폴더이름 위 명령어를 이용하면 리액트 프로젝트를 쉽게 만들 수 있다. 필요한 파일들을 모두 설치해주고 저장할 때마다 웹페이지가 실시간으로 바뀌는 설정까지도 해줘서 편하다. 웹팩을 이용해서 이를 따라할 수 있는데 디테일한 설정을 마음대로 할 수 있고 요즘 가장 인기 있는 번들러 웹팩을 어떻게 쓰는지 배울 수 있어 의미 있는 작업이 되지 않을까 싶다. 1. 프로젝트 폴더를 만들고 폴더 안에서 npm init -y를 입력한다. 2. 아래의 package.json 내용을 참고해서 필요한 모듈들을 설치한다. "dependencies": { "react": "^16.13.1", "react-dom": "^16.13.1" }, "devDependencies": { "@babel/.. 웹팩 시작하기 웹팩을 간단히 구현해보자. 1. 프로젝트 폴더를 만든다. 2. 프로젝트 폴더에서 npm init -y로 package.json 파일을 만든다. 3. 웹팩을 설치한다. npm install --save-dev webpack npm install --save-dev webpack-cli 4. dist/index.html 파일을 생성하고 아래의 코드를 넣는다. 5. src/index.js 파일을 생성하고 아래의 코드를 넣는다. import _ from 'lodash'; function component() { const element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'world'], ' '); // lodash 사용 .. 이전 1 다음
