특강: Webpack & 모던JS

오늘의 우리의 목표는...

• Part 1
  • Bundler의 의미와 필요성을 설명할 수 있다
  • Webpack의 기본적인 기능들을 자유자재로 다룰 수 있다
  • Loader와 Plugin들을 사용할 수 있다
• Part 2
  • Array, Object를 자유자재로 다룰 수 있다
  • fetch API를 사용할 수 있으며,
  • Promise API에 대한 기본적인 이해를 가지고 있다

index.html 비교

https://tumblbug.com

https://wadiz.kr

어떤 차이, 장단점?

Bundle, Bundling, Bundler

Webpack v2

Gulp, Grunt...

Gulp is a task runner.

Webpack is an asset bundler.

Gulp operates on a more general level.

Webpack cares just about making those bundles.

Webpack로 할 수 있는 것

• js 및 다양한 asset module들을 bundling하여 미리 정의해놓은 한 개 혹은 그 이상의 파일로 출력할 수 있습니다

• 다양한 플러그인들을 지원하여 모던 프론트엔드 개발 환경을 용이하게 해줍니다.

실습

(구)프로젝트를 Webpack을 사용하도록 바꿔기보기

http://todomvc.com

Vue.js으로 작성되어있는 TodoApp

1. git clone
https://github.com/paulsoh/fastcampus_webpack_tutorial.git
2. git checkout Starting-Point

Step-0-NPM-setup

• Keywords: npm, node_modules, dependencies, scripts
• Instructions
  • Clone todoapp
  • Add node_modules folder to .gitignore
  • Add http-server npm package as development dependencies
  • Add dev script in package.json

Step-1-Init-Webpack

• Keywords: devDependencies, webpack options
• Instructions
  • Add webpack as devDependencies
  • Migrate index.html to use bundle.js instead of routes.js
  • Add --watch options for webpack, (-p option)
  • Add webpack-dev-server as devDependencies and modify script

Step-1-Init-Webpack

• Keywords: production settings, paths
• 이어서 - Instructions
  • Add dist/ to .gitignore
  • Tidy up path configurations
  • Add publicPath to let webpack-dev-server know where to serve from

Step-2-Setup-Webpack-for-Production

• Keywords: source-map, eval, minify(uglify), env object
• Instructions
  • Add build script for production
  • Add devtool eval
  • Change devtool to use source-map
  • Change webpack.config to use env object to determine whether app is running in production mode or development mode

Step-3-Bundling-in-webpack

• Keywords: module.exports, bundling, require
• Instructions
  • Refactor modules for bundling
  • Add pathinfo for better debugging

Step-4-Adding-Loaders

• Keywords: babel-loader, css-loader, style-loader

• Instructions
  • Add babel loader
  • Add babel presets to use state of the art es6+
  • Add sample es6 syntax to see if it works
  • Add settings for loading css modules
  • Refactor index.html to use css modules

Step-5-Adding-URL-loader

• Keywords: url-loader, file-loader, data url

• Instructions
  • Add image to todoApp
  • Change image to be loaded by url-loader
  • Specify paths for assets

Part 2.

• Array, Object를 자유자재로 다룰 수 있다
• fetch API를 사용할 수 있으며,
• Promise API에 대한 기본적인 이해를 가지고 있다

Zigbang API를 이용하여 Data Structure 다루기

Zigbang API

• git checkout Manipulate-Zigbang-Data-Init
  • 추가 / 변경된 파일 목록 확인
    • routes.js
    • manipulateZigbangData.js
    • zigbangData.js
  • Chrome console창 확인

DataStructure API

• .map
• .filter
• .forEach
• .reduce
• .sort
• .find

Simple Excercises

• agent_no가 26002인 사람이 올린 매물의 개수
• 보증금이 가장 비싼 방의 이미지
• 월세가 가장 비싼 방의 이미지
• 모든 매물의 조회수의 합

Lodash(underscore.js)

• A modern JavaScript utility library delivering modularity, performance & extras.

import _ from 'lodash';

var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 34 }
];
 
_.sortBy(users, [function(o) { return o.user; }]);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
 
_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]

_.sortBy(collection, [iteratees=[_.identity]])

Challenging Excercises

• 등록한 매물의 순서대로 등록한 매물 개수, 중개사의 이름 및 전화번호 목록
  • [{count: 10, name: 'abc, phone_number: '010-...'}, ...] 
• 월세가 70만원 이상인 매물 개수를 기준으로 집값 비싼 지역구 목록
  • [{local: 서초동, count: 15} , {잠원동: 12, ...}, ...]
• 제목에서 가장 빈번하게 나타나는 단어들 목록
  • [{word: '초대박', count: 23, ...}, {...}, {...}, ...]

2. Asynchronous JS

(Fetch API, Promise API)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

ES7: async, await

Promise API

1. Promise를 이용하여 Async 기능을 만드는 법

2. Promise API를 사용하는 법

Synchronous 와 Asynchronous의 차이

const functionOne = (a, b) => {
  return a + b;
}

const functionTwo = (a, b) => {
  let c;
  // Async action!
  setTimeout(() => {
    c = a + b;
  }, 1000)
  return c;
}

Promise의 기본 구조

결과를 당장 알 수 없는 경우, Promise를 Return

const asyncFunction = () => {
  return new Promise((resolve /* 성공시 실행할 함수 */, reject/* 실패시 성공할 함수*/) => {
    // 비동기 코드 수행부
    if (성공) resolve();
    else reject();
  })
}

Promise의 기본 구조

결과를 당장 알 수 없는 경우, Promise를 Return

const functionTwo = (a, b) => {
  let c;
  return new Promise((resolve, reject) => {
    // Async action!
    setTimeout(() => {
      c = a + b;
      if (c) resolve(c);
      else reject('error');
    }, 1000)    
  })
}

Promise API 사용법

.then(), .catch()

const functionTwo = (a, b) => {
  let c;
  return new Promise((resolve, reject) => {
    // Async action!
    setTimeout(() => {
      c = a + b;
      if (c) resolve(c);
      else reject('error');
    }, 1000)    
  })
}

functionTwo(1, 2)
  .then(/* resolve 된 값이 들어와서 호출되는 함수 */)
  .catch(/* reject 된 값이 들어와서 호출되는 함수 */)

Promise API 사용법

.then(), .catch()

const functionTwo = (a, b) => {
  let c;
  return new Promise((resolve, reject) => {
    // Async action!
    setTimeout(() => {
      c = a + b;
      if (c) resolve(c);
      else reject('error');
    }, 1000)    
  })
}

functionTwo(1, 2)
  .then((resolvedValue) => {
    console.log('The answer is ' + resolvedValue);
  })
  .catch(/* reject 된 값이 들어와서 호출되는 함수 */)

Fetch API

Promise API를 사용할 수 있는 좋은 기회

Fetch API

fetch(url /* string */, options /* Object */)
  .then((response) => {
    // 요청 성공시 Response Object로 resolve!
  })
  .catch((err) => {
    console.error(err);
  })

https://developer.mozilla.org/en-US/docs/Web/API/Response

Fake API

Fetch API

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => {
    if (response.ok) return response.json();
    else return new Error('Failed');
  })
  .then(data => {
    console.log(data);
  })
  .catch((err) => {
    console.error(err);
  })

Fetch API Excercise

insertImageToHtml.js를 참고하여
todoapp하단에 FakeAPI로부터 fetch해온
comments들이 보이게 해보자

paulsoh.dev@gmail.com