이전 강좌의 코드를 활용합니다. 지금까지 우리는 모든 에셋을 수동으로 index.html 에 포함시켰습니다. 하지만 어플리케이션이 커지면서 파일이름에 해시를 사용하고 여러 번들을 출력하기 시작하면, index.html 파일을 수동으로 관리하는것은 어려워 질 것입니다. 이 프로세스를 훨씬 더 쉽게 관리해주는 몇몇 플러그인이 존재하니, 알아봅시다. 준비 Preparation먼저 프로젝트를 약간 수정해 봅시다. project webpack-demo |- package.json |- webpack.config.js |- /dist |- /src |- index.js + |- print.js |- /node_modules src/print.js 에 몇가지 로직을 추가합니다. src/print.jsexport de..
처음부터 가이드를 잘 따라왔다면 “Hello webpack” 이 보여지는 작은 프로젝트를 가지고 있을 것입니다. 이제 몇몇 다른 에셋들(이미지등)을 병합시키는 방법을 알아보겠습니다. 이전 웹팩에서는, 프론트엔드 개발자들이 이 에셋들을 처리하고, /src 폴더에서 /dist 나 /build 폴더로 옮기기 위해 그런트나 걸프같은 툴을 사용했습니다. 같은 아이디어가 Javascript 모듈에 사용되었지만, 웹팩같은 툴은 동적으로 모든 의존성 번들을 처리 했습니다(의존성 그래프 생성). 이것이 대단한 이유는, 이제 모든 모듈이 의존성을 명시적으로 선언하고, 사용하지 않는 모듈들을 번들에서 제외할 수 있기 때문입니다. 웹팩의 가장 멋진 기능 중 하나는 Javascript 외에 로더가 있는 어떤 종류의 파일도 포함..
시작하기웹팩은 javascript 모듈을 컴파일 하는데 사용됩니다. 설치 후 CLI나 API를 통해 웹팩을 적용할 수 있습니다. 만약 아직 웹팩에 익숙하지 않다면, 핵심개념과 다른 툴들과의 비교를 통해 왜 사용해야 하는지 알아보십시오. 기본 설정우선 디렉토리를 만들고, npm을 초기화 하고, 로컬에 webpack과 webpack-cli(커맨드라인에서 웹팩을 실행하는 도구)를 설치해 봅시다. mkdir webpack-demo && cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev 가이드 전체에서 diff 블록을 사용해서 디렉토리, 파일, 코드의 변경사항을 보여줄 것입니다. 다음과 같은 디렉토리 구조와 파일, 컨텐츠를 볼 수 있습니..
사전 요구 사항시작하기 전 새로운 버전의 Node js가 설치되어있는지 확인하세요. 현재 LTS(Long Term Support) 버전이 시작하기 이상적입니다. 이전 버전을 사용하면 필요한 기능 혹은 필수 패키지들의 누락으로 다양한 이슈를 겪을 수 있습니다. 로컬(local) 설치 최신 버전 : 최신 혹은 특정 버전의 웹팩webpack 설치npm install --save-dev webpack npm install --save-dev webpack@만약 웹팩 v4 혹은 이후 버전을 사용한다면, CLI도 설치해야 합니다.npm install --save-dev webpack-cli대부분의 프로젝트는 로컬 설치할 것을 권장합니다. 변경사항이 생겼을때 개별 업그레이드가 쉬워집니다. 일반적으로 웹팩은 로컬 no..
최근 크롬이 업데이트 되면서 (제 크롬은 오늘자 맥버전 68이네요) 로컬 서버를 아주 쉽게 띄울 수 있게 되었습니다.심지어 자기가 원하는 도메인으로 설정도 가능하고, 페이지를 띄워놓고 브라우저에서 수정 및 저장까지 가능합니다! 사실 서버를 띄우려면 이것저것 셋팅 해야될것도 많고, 한번에 여러개를 띄우기도 번거롭기도 하고 그렇죠.주소도 localhost:포트번호로 사용해야 되구요. 그렇다고 작업한 파일을 그냥 열었을 경우, React js등으로 작업되고 빌드된 페이지는 열리지 않죠.서버를 띄우지 않고 스태틱한 파일을 그냥 열면 최종본을 확인할 수 없습니다. 오류가 나요. 그럼, 이제 어떻게 하는지 알아봅시다. 우선 적당한곳에 폴더를 만들어 줍니다. 저는 my_local_servers 라고 만들었어요. 그 ..
대부분의 개발자들은 console.log 를 사용해서 특정 값을 확인하고 디버깅 합니다. 그런데, console 에는 console.log 말고도 여러 메소드가 있다는걸 알고 계시나요? 아래 예를 보겠습니다. 각 로그들은 서로 다른 방식으로 표현되기 때문에 쉽게 구분할 수 있습니다. (스타일은 브라우저 마다 다릅니다.) 또한, 보다 구조적이고 가독성을 높일 수 있게 그룹으로 묶을 수 있습니다. 그룹은 중첩으로 표기할 수 있습니다. 그룹을 축소된 상태로 표시하려면 console.groupCollapsed() 를 사용하세요. 성능 측정 코드 지점간 시간을 측정하면 특정 작업의 성능을 쉽게 확인할 수 있습니다. 보통 이런 방법을 사용하시나요? 좀 더 우아하게 표현 해볼까요? 코드는 더 짧고, 측정은 더 정확하..
- Total
- Today
- Yesterday