HJ's WEB Dev BLOG

안녕하세요~ 이번에는 바벨(Babel)에 대해 알아보려고 합니다. 😃

바벨은 크로스 브라우징의 혼란을 해결해 줄 수 있답니다. 모든 브라우저에서 동작하도록 호환성을 지켜주지요. 타입스크립트, JSX처럼 다른 언어로 분류되는 것도 포함입니다. 먼저 바벨을 사용하려면 패키지들을 설치해주어야 합니다.

설치명령어

$npm install @babel/core @babel/cli

@babel/cli는 바벨 터미널을 사용하기 위해 설치해요. 바벨 실행 할 때는 터미널창에

npx babel app.js

를 입력해서 실행하면 됩니다.

바벨은 세 단계로 빌드를 진행합니다 !

1. 파싱 : 단어들을 분해하는 과정이라고 보면 됩니다.

const alert = (msg) => window.alert(msg);

이 코드를 봤을 때 const 라는 토큰과 alert라는 토큰과 이렇게 일일이 분해해서 봅니다.

2. 변환 : ES6를 ES5로 변환해주고 마지막으로

3. 출력 해줍니다.

1. block-scoping

ES6 문법을 ES5 문법으로 변환해주는 것이 block-scoping 플러그인 입니다. const와 let 처럼 블록 스코핑을 따르는 예약어를 함수 스코핑을 사용하는 var로 변경해줍니다.

$npm install -D @babel/plugin-transform-block-scoping

터미널창에  block-scoping를 설치하고

npx babel app.js --plugins @babel/plugin-transform-block-scoping

위 명령어를 입력하면 var alert = msg => window.alert(msg); 이렇게 출력되는 것을 확인해 볼 수 있습니다.

2. transform-arrow-functions

이 플러그인은var alert = msg => window.alert(msg); 여기서 사용된 var는 브라우저 익스플로어에서 인식을 해주는데 => 이 화살표 함수는 브라우저가 인식하지 못합니다. 이거를 변환시켜주는 플러그인이 바로 transform-arrow-functions 플러그인 입니다.

$npm install -D @babel/plugin-transform-arrow-functions

터미널창에 transform-arrow-functions를 설치하고

npx babel app.js --plugins @babel/plugin-transform-block-scoping --plugins @babel/plugin-transform-arrow-functions

위 명령어를 입력해보세요. 그리고 출력된 결과물을 보면

var alert = function (msg) {
  return window.alert(msg);
};

화살표 함수가 사라지고 ES6 문법으로 변환된 것을 확인 됩니다 !

3. strict-mode

안전하게 작업하려면 엄격모드를 사용해야 합니다. 'use strict' 구문을 추가해야 하므로 strict-mode 플러그인을 설치합시다. 

$npm install @babel/plugin-transform-strict-mode

플러그인이 설치되었다면

npx babel app.js --plugins @babel/plugin-transform-block-scoping --plugins @babel/plugin-transform-arrow-functions

위 명령어를 입력해보세요!

"use strict";

var alert = function (msg) {
  return window.alert(msg);
};

그럼 상단에  use strict가 찍히면서 엄격모드로 변환된 것이 나타납니다. 그리고 플러그인을 사용할 때 명령어들을 모두 사용하려다 보니 커맨드라인 명령어가 점점 길어지기 때문에 설정 파일로 분리하는 것이 좋습니다.

바벨 환경설정 파일인 [babel.config.js] 에서 설정해주시면 되는데요.

module.exports = {
  plugins: [
    "@babel/plugin-transform-block-scoping",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-strict-mode",
  ],
};

이렇게 바벨 기본 설정파일에 그간 설치했던 플러그인들을 담아두면 커맨드 창에 npx babel app.js만 입력하여도 알아서 전부 동작됩니다.

또 다른 방법으로는 프리셋을 사용하시면 됩니다.

프리셋

목적에 맞게 여러가지 플러그인을 세트로 모아놓은 것을 프리셋이라고 합니다. [my-babel-preset.js] 라는 파일을 만들어 그동안 설치했던 플러그인들을 담아놓아요.

module.exports = function myBabelPreset() {
  return {
    Plugins: [
      "@babel/plugin-transform-block-scoping",
      "@babel/plugin-transform-arrow-functions",
      "@babel/plugin-transform-strict-mode",
    ],
  };
};

그리고 기존에 [babel.config.js] 파일에는

module.exports = {
  presets: ["./my-babel-preset.js"],
};

프리셋 파일을 불러와줍니다. 그럼 프리셋에 있는 모든 플러그인들이 실행 됩니다.

지금까지 했던 과정들은 바벨에 대한 이해를 돕기 위한 시행이었고 사실 이렇게 바벨을 사용하는 것은 실무에서는 잘 쓰이지 않습니다.

다음편에는 바벨을 실무로는 어떻게 사용하는지 알아보겠습니다 !! 😃

안녕하세요 오늘은 웹팩에서 자주 사용하는 플러그인에 대해서 알아보려고 합니다 ! 총 5가지가 있구요. 기능부터 알아봅시다 :)

• 🐥 BannerPlugin : 번들링 된 결과물 상단에다가 빌드 정보를 추가하는 역할이다. 잘 배포 되었는지 확인해보는 용도
• 🐥 DefinePlugin : API 서버 주소를 넣음 좋다.
• 🐥 HtmlTemplatePlugin : 이 플러그인은 동적으로 생성되는 자바스크립트와 css 그리고 빌드 타임에 결정되는 값들을 템플릿 파일에 넣어서 html파일을 동적으로 만들어낸다.
• 🐥 CleanWebpackPlugin : src 경로에 있던 파일들을 빌드하면 dist 폴더에 남는다. 근데 src 폴더에 있는 파일을 삭제해도 dist 폴더에 남아있다. 그래서 얘는 src폴더와 dist폴더에 있는 값들이 비례하게 빌드할 때마다 dist에 남아있는 파일이나 폴더들을 제거해주는 역할이다.
• 🐥 MiniCssExtractPlugin : 번들된 자바스크립트 파일에서 css만 따로 뽑아내서 css파일만 만들어 내는 플러그인이다.

플러그인도 [webpack.config.js] 웹팩 환경설정 파일에 설정 할 수 있고, 로더처럼 사용하시면 됩니다. 

const path = require("path");
const webpack = require("webpack");
const childProcess = require("child_process");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

하지만 로더와 다른 점이 플러그인은 상단에 설치한 플러그인들을 import 해줘야 합니다.

1. BannerPlugin

결과물에 빌드 정보나 커밋 버전 같은 걸 추가할 수 있어요. 배포 했을 때 배포가 잘 됐는지 이걸 통해 확인해요.

plugins: [
    new webpack.BannerPlugin({
      banner: `
      Build Date: ${new Date().toLocaleString()}
      Commit Version: ${childProcess.execSync("git rev-parse --short HEAD")}
      Author: 이현주(LeeHyunJu)
      `,
    }),
    ]

입력하고 빌드 했을 시 dist/main.js에 가면 banner 함수에 입력된 내용들이 나타납니다.

•  Build Date: ${new Date().toLocaleString()}  👉🏻 오늘 날짜를 뽑아내줍니다.
•  Commit Version: ${childProcess.execSync("git rev-parse --short HEAD")} 👉🏻 커밋 네임
•  Author: 이현주(LeeHyunJu) 👉🏻 작성자

2. DefinePlugin

어플리케이션은 개발환경과 운영환경으로 나눠서 운영됩니다. 환경에 따라 API 서버 주소가 다를 수 있어요. 같은 소스 코드를 두 환경에 배포하기 위해서 이런 환경 의존적인 정보를 소스가 아닌 곳에 관리하는 것이 좋습니다. 이러한 환경을 제공하기 위해 DefinePlugin를 제공합니다.

 new webpack.DefinePlugin({
      TWO: JSON.stringify("1+1"),
      "api.domain": JSON.stringify("http://dev.api.domain.com"),
    }),

api.domain을 문자열 넣고 싶을 때는 이렇게 출력합니다.

3. HtmlTemplatePlugin

html 파일을 후처리 하는데 사용합니다. 빌드 타임의 값을 넣거나 코드를 압축할 수 있습니다. 

npm install html-webpack-plugin
npm install html-webpack-plugin@4

이 플러그인은 웹팩의 기본 패키지가 아니라 따로 설치해 줘야합니다. 패키지 설치 후 버전이 안맞는다면 @4 이런식으로 버전을 맞춰 설치해주시면 됩니다. 얘를 사용하면 좀 더 유동적으로 html을 만들어 낼 수 있어요. 개발버전과 운영버전 두 가지 버전으로 관리가 가능하답니다.

    new HtmlWebpackPlugin({
      template: "./src/index.html",
      templateParameters: {
        env: process.env.NODE_ENV === "development" ? "(개발용)" : "",
      },
      //불필요한 용량들을 제거해주는거
      minify:
        process.env.NODE_ENV === "procution"
          ? {
              collapseWhitespace: true, //빈칸 제거
              removeComments: true, //주석 제거
            }
          : false,
    }),

html에는 title에 <title>Document <%=env %></title> 이렇게 ejs 문법을 사용하면 개발용인지 배포용인지 빌드를 통해 출력됩니다. 그리고  HtmlTemplatePlugin에는 minify 라는 속성도 제공해줘서 불필요한 용량들을 제거해 최소화 시켜줍니다. collapseWhitespace는 빈칸 제거를 의미하고 removeComments는 주석제거를 의미합니다.

4. CleanWebpackPlugin

빌드 결과물은 아웃풋 경로에 모이는데 과거 파일이 남아 있을 수 있습니다. 이전 빌드 내용이 덮어지면 상관 없지만 그렇지 않으면 아웃풋 폴더에 여전히 남아 있을 수 있습니다. 그래서 이 플러그인은 제거되고 사라진 과거 파일들을 빌드하면서 없애주는 역할을 합니다.

npm install html-webpack-plugin

이 플러그인은 다른 플러그인과 다르게 상단에 { } 중괄호를 넣어 가져와야 합니다.

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

사용 법은 정말 간단해요 !

new CleanWebpackPlugin(),

이게 끝입니다 😄

4. MiniCssExtractPlugin

여러 CSS를 하나의 CSS로 만들어주는 플러그인 입니다. 그리고 이 플러그인은 다른 플러그인과 다르게 modules에서 loader도 설정해 주어야 합니다.

new MiniCssExtractPlugin({ filename: "[name].css" }),

플러그인 사용법

module: {
    rules: [
      {
        test: /\.css$/,
        👉🏻 use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      
 (...)

모듈에 플러그인 사용하기

그 외에도 

webpack.js.org/plugins/

웹팩 공식문서에 다양한 플러그인들이 제공되오니 사용하고 싶은 기능들을 잘 살펴보시고 사용하시길 바랍니다 ㅎㅎ

자주 사용하는 플러그인 종류에 대해서 마치겠습니다 ! 👻

https://webpack.js.org/

👩🏻 이번에는 웹팩으로 번들링 작업 해보려고 해요. 번들링 작업 할 때는 웹팩 패키지와 웹팩 터미널 도구를 설치해줘야 합니다. 주의해야 될 점이 있는데, 웹팩은 현재 버전 5 까지 나왔거든요. 하지만 저는 버전 4를 설치하는 것을 추천드립니다. 왜냐하면 좀 더 뒤로 나갈수록 플러그인도 알아볼텐데 버전 5 는 플러그인 설치시 아직까지 지원 안되는 것들이 많더라구요. ㅠㅠ

설치명령어

$npm install -D webpack-cli
$npm install --save-dev webpack@(버전수)

여기서 -D 는 개발용 dependencies를 뜻합니다. 웹팩 번들링 할 때 필요한 기본 패키지들을 설치 하셨다면 웹팩 환경설정 해주는 파일들을 만들어 볼거에요. [webpack.config.js] 라는 파일명 또는 [webpackfile.js] 파일명 중 더 맘에 드는 이름을 골라 웹팩 환경설정 파일을 만들어주세요. 😀저는 [webpack.config.js]로 만들었습니다. 

그리고 웹팩을 실행할 때는 필수적인 옵션이 있어요.

👉 [webpack.config.js]


const path =  require('path');

module.exports = {
  mode: 'development',
  entry: {
    main : './src/app.js',
    main2 : './src/app2.js',
  },
  
  output: {
    path: path.resolve('./dist'),
    filename : '[name].js'
  }
} 

1. mode : development, production, none이 있는데 개발환경이냐 운영환경이냐에 따라서 development, production을 설정합니다.

• development : 개발용 정보를 추가할 때
• production : 운영에 배포하기 위한 것

2. entry : 모듈의 시작점 입니다.

3. output : 엔트리를 통해 모든걸 하나로 합치고 경로를 저장하는 것을 아웃풋으로 설정해줍니다.

이 모든 설정을 끝내셨으면, 터미널 창에 아래 명령어를 실행해보세요!

$node_modules/.bin/webpack --mode development --entry ./src/app.js --output dist/main.js

그럼 여러개의 모듈을 하나의 파일로 만들어지게 됩니다. 아웃풋 폴더 명을 dist라고 설정했으니 dist라는 폴더가 생겼을거에요 😃그리고 packages.json 파일에서도 저희가 설정해 줘야 할 것이 있어요.

👉 [package.json]


{
  "name": "fn_dev_env",
  "version": "1.0.0",
  "description": "<br>",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    👉🏻 "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1"
  },
  "devDependencies": {
    "webpack": "^4.46.0",
    "webpack-cli": "^4.5.0"
  }
}

여기서 build를 webpack으로 설정하면

$npm run build

터미널창에 이 명령어를 입력했을 시, 현재 프로젝트에 있는 노드 모듈을 뒤져서 웹팩 명령어를 찾아줘요. 그럼 웹팩은 기본  [webpack.config.js] 파일을 읽어서 번들링 해줄 것 입니다. 

👩🏻 이제는 로더와 자주 사용하는 로더를 알아볼 것 입니다.

로더

웹팩은 모든 파일을 모듈로 바라봅니다. 자바스크립트로 만든 모듈 뿐만 아니라, css, 이미지, 폰트도 전부 모듈로 보기 때문에 import 구문을 사용하면 자바스크립트 코드 안으로 가져올 수 있어요. 이것이 가능한 이유는 웹팩의 로더 덕분이랍니다. 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URI 형식의 문자열로 변환해주기도 해요. 뿐만 아니라 css 파일을 자바스크립트에서 직접 로딩 할 수 있도록 도와준답니다.

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [path.resolve("./my-webpack-loader.js")],
      },
    ],
  },

로더를 사용할 때는 이렇게 모듈 객체 안에다가 rules 객체를 만들어 rules 안에 배열로 객체화해서 사용할 로더들을 설정해 주면됩니다. 처리할 파일은 test에 위 코드처럼 정규표현식으로 명시해주세요. 

• test : 로더를 적용할 파일 유형을 뜻합니다.
• use : 해당 파일에 적용할 로더 이름입니다.

자주 사용하는 로더

로더를 사용할 때는 로더 패키지를 설치해주셔야 됩니다.

1. CSS-loader

$npm install css-loader style-loader

css 로더를 사용하고 싶다면 이 파일이 JS로 변환될 때 style-loader도 같이 설치해 주셔야해요. 

module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

먼저 설치한 패키지가 뒤로 가는 순서로 입력해주셔야 합니다 !

2. image-loader

$npm install file-loader

다음으로 자주 쓰일 로더는 이미지로더입니다. 위 명령어를 통해 패키지를 설치해주세요. 

{
        test: /\.jpg$/,
        loader: "file-loader",
        options: {
          pubilcPath: "./dist/",
          name: "[name].[ext]?[hash]", //이름.확장자?해시값
        },
      },

얘도 css 로더와 마찬가지로 rules 안에 선언하시면 됩니다. options에 있는 publicPath는 이 이미지들이 담길 공간을 의미해요. publicPath는 파일로더가 처리하는 파일을 모듈로 사용했을 때 경로 앞에 추가되는 문자열입니다. 쉽게말해 아웃풋을 dist로 설정했으니 pubilcPath도 같은 경로로 동일하게 dist로 설정해줘야 해요!

이번에는 여러 이미지 사용시 data URI로 처리하는 방법입니다. 사용하는 이미지 갯수가 많다면 네트워크 리소스를 사용하는 부담이 있고 사이트 성능에 영향을 줄 수도 있어요. 한 페이지에서 작은 이미지를 여러개 사용한다면 data URI scheme를 이용하는 방법이 더 낫습니다.

$npm install url-loader

패키지를 설치하셨으면 이제 웹팩 환경설정을 해봅시다.

{
        test: /\.(jpg|png|gif|svg)$/,
        loader: "url-loader",
        options: {
          publicPath: "./dist/",
          name: "[name].[ext]?[hash]",
          limit: 20000,
        },
      },

test에 jpg 뿐만 아니라 여러 확장자를 번들링 해주고 싶다면, (확장자명|확장자명|확장자명) 이렇게 띄어쓰기 없이 설정해주시면 됩니다. 그리고 로더는 url-loader로 설정합니다. 여기서 새롭게 추가된 limit은 파일 용량으로 아웃풋을 해주냐, 아니면 data uri로 뿌려주냐 설정해주는데요. 여기서 20000은 20kb를 의미해요. url-loader가 이미지 파일들을 처리할 때 용량이 20kb 미만은 url-loader로 해서 bath 64로 변환처리 해줍니다. 그 이상이면 file-loader로 실행되어 파일이 dist 폴더에 복제된 걸 볼 수 있어요.

이외에도 ts 로더, sass 로더, babel 로더가 있습니다.

npm install --save-dev typescript ts-loader

webpack.js.org/guides/typescript/#loader

로더 마무리

 module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(jpg|png|gif|svg)$/,
        loader: "url-loader",
        options: {
          publicPath: "./dist/",
          name: "[name].[ext]?[hash]",
          limit: 20000, //파일 용량도 설정이 가능하다 2kb
        },
      },
    ],
  },

이처럼 로더를 사용하고 싶다면 모듈안에 rules 객체를 만들어 이 안에서 배열로 로더 객체를 만들어 설정하시면 됩니다! 웹팩 다루는 기본기만 알아두면 다른 로더들도 사용할 때 쉽게 설정할 수 있을 겁니다. 지금은 가장 대표적인 css로더와 이미지 로더를 알아봤는데, 다음에는 ts로더와 sass로더 스프라이트 이미지 만드는 방법도 알아보고 정리해 보겠습니다.

👩🏻안녕하세요 웹팩 다뤄보는 시간을 가져보겠습니다 ! 제가 웹팩을 공부하는 이유는 좀 더 효율적인 작업 환경을 만들기 위해서인데요! 웹팩의 좋은점 세 가지를 간략하게 소개해드릴게요.

1. 파일 단위의 자바스크립트 모듈 관리의 필요성 (모듈번들링)
2. 웹 개발 작업 자동화 도구 (HTML,CSS,JS,이미지 압축 + CSS 전처리기 변환)
3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

을 위해서 사용해보도록 할거에요.

먼저 파일 단위 자바스크립트 모듈 관리 필요성을 알아보자면, 웹 애플리케이션을 제작하려면 HTML,CSS,JS,이미지,폰트 등 많은 파일들이 필요하죠 ! 이게 모두 다 모듈이라고 지칭합니다. 모듈 번들링이란 수많은 파일들을 하나의 파일로 병합 및 압축 해주는 동작을 의미해요. 그리고 웹팩 다뤄보면서 자주 들어보셨을 '빌드하다 = 번들링 = 변환하다' 이 세 가지 뜻이 다 같은 뜻입니다. 🙌

웹 개발 작업 자동화 도구란 HTML,CSS,JS,이미지 압축과 CSS 전처리기 변환 해주는 일들을 자동화 해주는 도구들이 필요했는데 그래서 그런트와 걸프라는 것이 등장했어요. 참고로 걸프는 첫 회사 때 사용해봤는데 진짜 편하더라구요... 하지만 저는 다수가 선택한 웹팩을 배워보겠습니다 !!

웹 어플리케이션의 빠른 로딩 속도와 높은 성능을 위한 이유는 일반적으로 특정 웹사이트를 접근할 때 3초 이내로 웹 사이트가 표시되지 않으면 대부분의 사용자들은 해당 사이트를 벗어나거나 집중력을 잃게 돼요. 그래서 웹사이트 로딩 속도를 높이기 위해 많은 노력들을 해야 되는데, 그 중 대표적인 노력이 브라우저에서 서버로 요청하는 파일 숫자를 줄이는 것입니다. 작업한 파일은 많은데 파일 수를 줄여준다라... 정말 신박한 거 같아요.

🐥 웹팩을 알아가기 전, 간단하게 개념 정리 하고 갑시다.

IIFE (Immediately Invoked Function Expression)

즉시 실행 함수표현은 정의되자마자 즉시 실행되는 자바스크립트 함수를 말해요.

(function () {
    statements
})();

위처럼 첫 번째 괄호로 둘러싸인 익명함수입니다. 이는 전역 스코프에 불필요한 변수를 추가해 오염시키는 것을 방지할 수 있을 뿐만 아니라, IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이에요. 두 번째 괄호는 즉시 실행 함수를 생성하는 괄호입니다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행시켜줘요.

다양한 모듈 스펙

자바스크립트 모듈을 구현하는 대표적인 명세가 AMD, CommonJS 입니다. CommonJS는 자바스크립트로 사용하는 모든 환경에서 모듈화 하는 것이 목표입니다. export 키워드로 모듈을 만들고 require() 함수로 불러들이는 방식이지요. 대표적인 서버 사이드 플랫폼인 Node.js에서 이 방식을 사용합니다.

내보낼 때 (export)

export function sum(a,b) { return a + b;}

가져올 때 (import)

import * as math from './math.js'

AMD : 비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표입니다. 주로 브라우저 환경을 말해요.

UMD : AMD 기반으로 CommonJS 방식까지 지원하는 통합 형태에요. 각 커뮤니티에서 각자의 스펙을 제안하다가 ES2015 에서 표준모듈 시스템을 내놓았어요. 지금은 바벨과 웹팩을 이용해 모듈 시스템을 사용하는 것이 일반적이지요.

<script type="module" src="src/math.js"></script>

HTML 브라우저에서는 위 코드처럼 모듈을 사용할 수 있어요. 이렇게 되면 script 구문 안에 type="module" 을 입력해줘야 한답니다. 하지만 이럴 때는 서버를 돌려야 되는데 npm으로 lite-server 패키지를 설치해 줘야해요.

$npx lite-server

설치명령어를 입력하여 설치해주고 현재 폴더를 서버로 만들어 줍니다 ! 

엔트리 / 아웃풋

웹팩은 여러개 파일을 하나의 파일로 만들어 주는 번들러라고 했잖아요. 하나의 시작점으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물로 만들어줘요. app.js 부터 시작해 math.js 파일을 찾은 뒤 하나의 파일로 만드는 방식이예요. 위에 사진을 보면 좀 더 이해하기 쉬울 겁니다.

그래서 엔트리와 아웃풋이 뭐냐하면, 엔트리는 왼쪽에 있는 파일들을 뜻하고(=시작점) 아웃풋은 오른쪽에 하나의 파일로 만들어진 것을 뜻해요. 웹팩 들어가기에 앞서 개념들을 알아봤는데요. 다음편은 실전으로 설명해 드리겠습니다.

{
  "compilerOptions": {
    "esModuleInterop": true, 👉🏻import * as React from 'react'; =>  * as 생략가능하게 해주는 기능
    "sourceMap": true, 👉에러 났을 때 원래 에러난 위치로 찾아가기 좋다
    "lib": ["ES2020", "DOM"], 👉프론트 개발 할 때 꼭 켜두기
    "jsx": "react", 👉다르게 인식되기 전에 리액트꺼라고 지정
    "module": "esnext", 👉 최신 모듈 쓰겠다는 뜻 import, export
    "moduleResolution": "Node", 👉 import, export도 node가 해석할 수 있게
    "target": "es5", 👉 es2020으로 작성하여도 es5로 변환하겠다
    "strict": true, 👉 타입 채킹을 엄격하게 하겠다.
    "resolveJsonModule": true, 👉 json은 import json이라는 것을 허락하겠다.
    
    ---임폴트할 때 편하게 임폴트 해주기---
    "baseUrl": ".", 
    "paths": { 
      "@hooks/*": ["hooks/*"],
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"],
      "@utils/*": ["utils/*"],
      "@typings/*": ["typings/*"]
    }
  }
}

Path는 폴더 경로가 ../../../ 이런식으로 접근해야 될 때 절대경로처럼 임폴트 설정 해주는 것이다. 이정도 타입스크립트 설정이 기본이라고 보면 된다. 

👉🏻 타입스크립트 ----- 바벨 ----> 자바스크립트

바벨이 중간다리 역할을 해준다.

바벨 : 모든 걸 자바스크립트로 만들어주는 아이 

"strict": true, 는 타입스크립트 할 때 무조건 true로 켜둬야한다. 아니면 any같은걸 쓰기 때문에 타입스크립트가 아닌 any스크립트가 된다 ㅋㅋㅋ

ESLint

- 자바스크립트 문법 및 코드 스타일을 검사해 주는 도구이다.

에디터에 뜬 경고처럼 초록색 줄이 그어진 코드는 고치기 싫다면 무시해도 되지만 빨간줄은 반드시 고쳐야 한다. 이런 오류는 고치지 않으면 페이지가 브라우저에 나타나지 않는 치명적인 오류이므로 꼭 고쳐줘야 한다.

Reactjs Code Snippets

- (제작자가 charalampos karypidis)인 것으로 설치하기 

리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 간편하게 코드를 자동으로 생성해 낼 수 있는 코드 스니펫 모음이다.

Prettier-Code formatter

- 코드 스타일을 자동으로 정리해 주는 도구. JSX를 작성 시 코드의 가독성을 위해 들여쓰기를 사용한다. 들여쓰기가 제대로 되어 있지 않은 코드는 가독성이 매우 떨어지기 때문이다. 혹여나 다른 포맷도구 (Beautify) 설치하면 충돌 발생할 수 있으니 조심하기. Prettier를 사용하여 자동 코드 정리를 하면 코드가 제대로 정렬되고, 세미콜론이 빠진 곳은 자동 추가되고 기존에 사용하던 작은 따옴표는 모두 큰 따옴표로 바뀌었을 것이다. 이런 부분은 협업하는 과정에서 정하는 규칙이다.

그리고 Prettier의 장점은 이러한 스타일을 쉽게 커스터마이징 해준다는 점도 있다. 현재 열려있는 프로젝트의 루트 디렉토리에서 .prettierrc라는 파일을 생성 한 후 이런 내용을 적어보자.

{
  "printWidth": 120, //글자수
  "tabWidth": 2, //탭 칸
  "singleQuote": true,//''
  "trailingComma": "all",//, 찍어주기
  "semi": true//;세미콜론
  "useTabs" : false,//공백 대신 탭으로
}

이것은 파일에서 들여쓰기 할 때 탭 대신 공백을 두 칸 사용. 그리고 큰따옴표 대신 작은 따옴표. 세미콜론은 언제나 붙이도록 설정했다.

VS Code 언어 한국어로 설정하기

Korean Language Pack for Visual Studio Code를 설치한다.

Reactjs Code Snippet

VS Code에서 위 확장 프로그램을 설치했다면 컴포넌트 코드를 간편하고 빠르게 생성할 수 있다.

웹팩은 여러개 파일을 하나의 파일로 만들어 주는 번들러(bundler)다. 하나의 시작점으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물을 만들어 낸다. app.js 부터 시작해 math.js 파일을 찾은 뒤 하나의 파일로 만드는 방식이다.  번들 작업을 하는 webpack 패키지와 웹팩 터미널 도구인 webpack-cli를 설치한다.

$npm install -D webpack webpack-cli

설치 완료하면 node_modules/.bin 폴더에 실행 가능한 명령어가 몇 개 생긴다. webpack과 webpack-cli가 있는데 둘 중 하나를 실행하면 된다. 여기서 사용된 -D는 개발용 dependencies다.

https://webpack.js.org/

웹팩을 실행 할 때에는 필수적인 옵션이 있다.

1. --mode => development, production, none이 있는데 개발환경이냐 운영환경이냐에 따라서 development, production을 설정한다.

• development : 개발용 정보를 추가할 때
• production : 운영에 배포하기 위한 것

2. 모듈의 시작점 : entry 라고 한다.

3. entry를 통해 모든걸 하나로 합치고 경로를 저장하는 것은 output 이라고 한다.

$node_modules/.bin/webpack --mode development --entry ./src/app.js --output dist/main.js

webpack의 mode는 개발용이고 entry(시작점)은 ./src/app.js 이며 이 모든걸 하나로 합치고 경로를 저장하는 최종 아웃풋은 dist/main.js에 담으라는 뜻이다. 웹팩은 이처럼 여러개의 모듈을 하나의 파일로 만들어주는 역할을 한다.

웹팩 설정 파일

웹팩 설정 파일명 [webpack.config.js] 또는 [webpackfile.js] 로 지정한다.

{
  "name": "fn_dev_env",
  "version": "1.0.0",
  "description": "<br>",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "leehyunju",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1"
  },
  "devDependencies": {
    "webpack": "^4.46.0",
    "webpack-cli": "^4.5.0"
  }
}

여기서 script안에 있는 build를 "webpack"으로 하면 현재 프로젝트에 있는 노드 모듈을 뒤져서 웹팩 명령어를 찾는다. 그럼 웹팩은 기본 webpack.config.js 파일을 읽어서 번들링을 해줄 것이다.

패키지설치

가장 간단한 방법은 CDN으로 제공하는 라이브러리를 직접 가져오는 방식이다. 리액트의 주소를 html에서 로딩해준다. 하지만 주의해줘야 될 것이 아무리 우리 어플리케이션 서버가 정상이더라도 필수 라이브러리를 가져오지 못한다면 웹 어플리케이션은 정상적으로 동작할 수 없다. 그런 장애와 무관하게 우리가 직접 다운로드를 하는 방법이 있다.

명령어

npm install [설치할 라이브러리]

예를 들어 npm install react 했을 경우, 밑에처럼 package.json 파일에 dependencies 안에 react가 설치 된 것을 확인 할 수 있다.

IIFE (즉시 실행 함수 표현)

정의되자마자 즉시 실행되는 자바스크립트 함수를 말한다.

var math = math || {};

(function () {
 function sum(a,b) {
 retrun a + b;
 } 
  math.sum = sum;
 })();

1. 첫 번째는 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.

2. 두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.

(function () {
    var aName = "Barry";
})();

aName 

IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.

// throws "Uncaught ReferenceError: aName is not defined"

다양한 모듈 스펙 알아보기

자바스크립트 모듈을 구현하는 대표적인 명세가 AMD와 CommonJS다. CommonJS는 자바스크립트로 사용하는 모든 환경에서 모듈을 하는 것이 목표다. exports 키워드로 모듈을 만들고 require() 함수로 불러 들이는 방식이다. 대표적으로 서버 사이드 플랫폼인 Nodejs에서 이를 사용한다.

export function sum(a,b) { return a + b;}

내보낼 때는 export를 사용한다.

import * as math from './math.js'

가져올 때는 import를 사용한다.

AMD : 비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표다. 주로 브라우저 환경이다.

UMD : AMD 기반으로 CommonJS 방식까지 지원하는 통합 형태다.

이렇게 각 커뮤니티에서 각자의 스펙을 제안하다가 ES2015에서 표준 모듈 시스템을 내놓았다. 지금은 바벨과 웹팩을 이용해 모듈 시스템을 사용하는 것이 일반적이다. ES2015 모듈 시스템의 모습을 살펴보자.

😀 html 브라우저

<script type="module" src="src/math.js"></script>

이렇게 되면 script 구문 안에 type="module" 을 입력 해야한다. 하지만 이럴 때는 서버를 돌려야 되는데, npm으로 lite-server를 설치해준다.

$npx lite-server

위 명령어로 설치해주면 현재 폴더를 서버로 만들어준다. 그럼 자동으로 브라우저가 켜지면서 app.js 파일에 import 시킨 math.js 파일의 수식들이 계산되어 나온다.

👩🏻 프로젝트나 클론코딩 할 때마다 개발환경에 대한 지식이 미흡했는데 인프런 김정환님의 강의를 보면서 그동안 알고 싶었던 웹팩, 바벨, esLint, 프리티어에 대해 공부 시작해보자. 이렇게 개발환경에 대해 잘 알아두면 협업 할 때나 개발환경을 커스터마이징 할 수 있어서 나에게 편한 개발환경을 구축해 나갈 수 있다는 것이 정말 필요할 것 같고 웹팩과 eslint는 요즘 채용공고에 뜨는 기업들의 우대사항에 있어 빼놓을 수 없는 부분인 듯 하다.

FN개발에 node.js가 필요한 이유

1. 최신 스펙으로 개발할 수 있다

타입스크립트나 scss같은 고수준 프로그래밍 언어를 사용하려면 전용 트랜스파일러가 필요하다. 이런 것도 노드.js 환경이 뒷받침 돼야 프론트앤드 개발 환경을 만들 수 있다.

2. 빌드 자동화

파일을 압축하고, 코드를 낙독화하고, 폴리필을 추가하는 등 개발 이외의 작업을 거친후 배포한다. node.js는 이러한 일련의 빌드 과정을 이해하는데 적지 않은 역할을 한다.  뿐만 아니라 라이브러리 의존성을 해결하고, 각종 테스트를 자동화 하는데도 사용된다.

3. 개발 환경 커스터마이징

리액트 CRA를 사용하면 손쉽게 개발환경을 갖출 수 있다. 하지만 개발 프로젝트는 각자의 형편이라는 것에 있어서 툴을 그대로 사용할 수 없는 경우도 빈번하다. 커스터마이징을 하려면 Node.JS 지식이 필요하다. 어쩌면 자동화된 도구를 사용할 수 없는 환경이라면 직접 환경을 구축해야 할 상황에 놓일 수도 있다. 이러한 배경하에 Ndoe.js는 프론트엔드 개발에서 필수 기술로 자리매김하고 있다. 

node 설치 (https://nodejs.org)

페이지에 들어가서 본인 운영체제에 맞는 파일을 다운로드 하면 된다. 후에 터미널 창을 켜서 node를 검색하면 node가 실행된다. 이런 터미널창을 REPL 이라고 부른다. 자바스크립트 코드를 입력하고 즉시 결과를 확인할 수 있다.

{
  "name": "fn_dev_env",
  "version": "1.0.0",
  "description": "<br>",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "leehyunju",
  "license": "ISC"
}

• name : 프로젝트 이름
• version : 버전 정보
• description : 내용
• main : node.js에서 쓰이는 거라 무시해도 된다.
• scripts : 프로젝트를 자동화 할 수 있는 스크립트를 입력하는 부분
• author : 프로젝트 작성자
• license : 라이센스 정보

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

여기서 test는 터미널창에 `프로젝트 이름 test` 입력하면 밑에처럼 나온다.

echo 명령어로 `no test specified`라는 문구가 출력됐고, 1번 에러코드를 반환했기 때문에 에러메시지가 나오는 것을 확인할 수 있다. && exit 1 이 에러코드를 반환하겠다는 뜻.

터미널창에 npm command를 입력하면 우리가 자주 사용하는 command 명령어가 나온다. 특히 이중에서 start, install, test 를 가장 많이 사용. 기본으로 제공되는 command외에 다른 command를 추가하고 싶다면,

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"echo \"여기에 빌드 스크립트를 추가합니다\""
  },

스크립트 부분에 "build"를 입력하면 된다.

npm run build를 입력하면 스크립트 부분에 build로 등록했던 문장이 출력된다.