HJ's WEB Dev BLOG

웹팩은 여러개 파일을 하나의 파일로 만들어 주는 번들러(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로 등록했던 문장이 출력된다.