Bundler (6) 썸네일형 리스트형 웹팩에서 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 설정 따위는 잊을 수 있다. 웹팩을 통해 번들링이 끝난 파일은 .. 바벨 7.11 시작하기 브라우저의 종류는 다양하다. 때문에 사람들이 최신 브라우저인 크롬만 사용하지는 않는다. 구형 브라우저에서도 돌아갈 수 있는 조치가 필요하다. 이를 위해서 바벨을 사용한다. 바벨을 사용하면 최신 문법의 코드를 옛날 방식으로 바꿔주기 때문에 나이스한 자바스크립트 문법을 마구 사용하더라도 문제가 생길 걱정을 덜 수 있다. 심지어 요즘 웹 개발자들에게 골치를 썩이는 인터넷 익스플로러 11까지도 말이다. 대신 폴리필과는 구분해야 한다. Promise와 같은 메소드는 바벨을 사용한다고 해결되지 않는다. 구형 브라우저에는 Promise라는 빌트인 객체가 아얘 존재하지 않기 때문이다. append나 remove 역시 마찬가지다. Dom Element 객체에 prototype 메소드가 포함되어 있지 않아(아마도?) 구형.. 웹팩을 이용해서 리액트 프로젝트 만들기 npx create-react-app 폴더이름 위 명령어를 이용하면 리액트 프로젝트를 쉽게 만들 수 있다. 필요한 파일들을 모두 설치해주고 저장할 때마다 웹페이지가 실시간으로 바뀌는 설정까지도 해줘서 편하다. 웹팩을 이용해서 이를 따라할 수 있는데 디테일한 설정을 마음대로 할 수 있고 요즘 가장 인기 있는 번들러 웹팩을 어떻게 쓰는지 배울 수 있어 의미 있는 작업이 되지 않을까 싶다. 1. 프로젝트 폴더를 만들고 폴더 안에서 npm init -y를 입력한다. 2. 아래의 package.json 내용을 참고해서 필요한 모듈들을 설치한다. "dependencies": { "react": "^16.13.1", "react-dom": "^16.13.1" }, "devDependencies": { "@babel/.. Gulp 시작하기 기본 동작 원리 1. 프로젝트 폴더에서 걸프를 설치한다. npm install gulp --save-dev 2. gulpfile.js 파일을 생성해서 아래와 같이 작성한다. var gulp = require('gulp'); gulp.task('task-name', function() { // ① }); 터미널에서 gulp task-name을 입력하면 ①이 실행된다. SASS를 CSS로 바꾸는 방법 1. gulp-sass를 설치한다. npm install gulp-sass --save-dev 2. gulpfile.js에 다음을 입력한다. var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function() { ret.. 웹팩 시작하기 웹팩을 간단히 구현해보자. 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 다음
