Web Standard

모드 Modemode 구성 옵션은 웹팩에 내장된 최적화를 사용하도록 지시한다. string 사용 가능한 mode 값 : none , development , production(기본값) 사용법config에 mode 옵션을 주는 방식 module.exports = { mode: 'production' }; CLI를 이용 webpack --mode=production 지원하는 문자열 값 OptiondevelopmentDescriptionSets process.env.NODE_ENV on DefinePlugin to value development. Enables NamedChunksPlugin and NamedModulesPlugin.OptionproductionDescriptionSets process.e..

엔트리 포인트 Entry Pointsentry 속성을 정의하는 방법은 여러가지가 있다. 싱글 엔트리(축약형) 구문 Single Entry (Shorthand) Syntaxentry: string|Array webpack.config.jsmodule.exports = { entry: './path/to/my/entry/file.js' }; 위 코드는 이 코드의 축약본이다. module.exports = { entry: { main: './path/to/my/entry/file.js' } }; entry 에 배열을 선언하면 어떻게 되는가? 배열을 전달하면 multi-main entry가 생성된다. 여러개의 의존성 파일을 하나의 chunk 로 모으고 이들의 의존성 그래프를 생성하고 싶을때 유용하다. 이것은 (..

이전 강좌의 코드를 활용합니다. 가이드를 계속 따라오고 있다면, 웹팩 기초에 대한 확실한 이해가 있을 것입니다. 계속 진행하기 전에, 삶을 보다 쉽게 만들어 줄 개발 환경 설정을 살펴보겠습니다. 이 가이드에서 활용되는 도구들은 오직 개발development 환경을 위한 것이므로, 프로덕션 환경에서는 사용하지 마십시오. 소스맵 사용 Using source maps웹팩이 소스 코드를 번들로 묶을때, 에러와 경고를 원래 경로로 추적하기 어려워질 수 있습니다. 만약 3개의 파일들(a.js, b.js, c.js)을 하나의 bundle.js 파일로 묶으려 하고, 이 중 하나의 파일이 에러를 포함하고 있다고 가정했을때, stack trace는 단순히 bundle.js를 가리킬 것입니다. 이것은 어떤 소스파일이 에러를..

이전 강좌의 코드를 활용합니다. 지금까지 우리는 모든 에셋을 수동으로 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..

GNB를 제외한 모든 페이지 개발은 완료 되었습니다.월/화/수 링크를 클릭하면 요일에 맞게 리스트를 그려주는 작업을 해보도록 하겠습니다. 우선 Gnb 컴포넌트의 a태그를 Link로 바꾸고, 경로를 메인 페이지, query string으로 요일을 명시합니다.props로 day를 받아 해당 요일이면 on 클래스를 추가해주는 작업도 합니다. /src/component/Gnb.js 이제 Gnb를 클릭하면 Main 컴포넌트에 props.location.search 로 day 값을 얻을 수 있습니다. day의 기본값은 월요일, day 값이 있다면 해당 요일로 set해주는 작업을 해줍니다. /src/container/Main.js 이어서, componentDidUpdate를 통해 day값이 바뀌면 새로운 리스트를 그..

에피소드를 누르면 해당 뷰어로 이동합니다. 지금까지 해왔던 방식과 동일하므로 어렵지 않습니다. 우선 이미지를 더미 데이터에 넣기 위해 이전 편에서 사용했던 episode_list.json 파일에 이미지 리스트를 추가합니다. /public/dummy/episode_list.json (전체 코드) 이후 전편과 동일하게 axios로 api를 불러와서 제목과, 이미지를 화면에 그려주면 끝납니다. props.match.params.episodeId 로 현재 에피소드의 ID와 일치하는 이미지들을 루프를 돌면서 그려줍니다. /src/container/Viewer.js 이번 강의의 모든 코드는 Github : tutorial_05 에서 확인하실 수 있습니다. 다음편 : React 강좌 tutorial 6 - GNB 처..

이번에는 웹툰 상세페이지를 만들어 보겠습니다.메인 페이지에서 감상하고 싶은 웹툰을 누르면 상세페이지로 이동합니다. 우선 Link 를 /webtoon/웹툰ID 로 수정해줍니다. 그러면 1장에서 만들었던 WebtoonHome 으로 이동합니다.그리고 웹툰ID는 props.match.params.webtoonId로 접근할 수 있습니다. (이는 1장 router 부분을 참고) 이 페이지에서는 웹툰의 상세정보와 해당 웹툰의 에피소드 리스트를 표현합니다.3장에서와 마찬가지로 더미 데이터를 우선 만들고 시작하겠습니다. /public/dummy/webtoon_detail.json (웹툰 상세 정보)/public/dummy/episode_list.json (에피소드 리스트) WebtoonHome 에서 axios로 방금 만..