Springboot 기반에 git, npm을 사용한 webpack 환경구축

webpack 작업 브랜치 생성(Optional)

기존 작업 중인 저장소에서 바로 작업하여 커밋하는 방법도 있습니다. 하지만 작업을 분리하기 위해서 webpack 작업용 브랜치를 생성하겠습니다. webpack 브랜치에서 작업 후 메인 브랜치에 rebase/merge 할 예정입니다.

> cd 프로젝트 루트 폴더
> git checkout -b webpack
Switched to a new branch 'webpack'

로컬 환경에 webpack 브랜치가 새로 생성되었고 git branch 명령어를 입력하면 master 브랜치에서 webpack 브랜치로 전환이 된 것을 확인할 수 있습니다.

> git branch
  master
* webpack

하지만 로컬에 브랜치를 생성했다고 끝이 아닙니다. git pull origin webpack 명령을 입력해보면 알 수 있습니다. 원격 저장소는 로컬에서 생성된 브랜치를 감지할 수 없습니다.  아래와 같은 메시지가 출력되는 것을 볼 수 있습니다. 

Can't Update No tracked branch configured for branch webpack or the branch doesn't exist.
To make your branch track a remote branch call, for example,
git branch --set-upstream-to=origin/webpack webpack (show balloon)

그러므로 원격 저장소와 현재 생성된 브랜치를 연결 위한 추가 작업이 필요합니다. 친절하게도 입력해야 할 명령어를 알려줍니다. 그대로 입력해보겠습니다.

> git branch --set-upstream-to=origin/webpack webpack
error: the requested upstream branch 'origin/webpack' does not exist
hint: 
hint: If you are planning on basing your work on an upstream
hint: branch that already exists at the remote, you may need to
hint: run "git fetch" to retrieve it.
hint: 
hint: If you are planning to push out a new local branch that
hint: will track its remote counterpart, you may want to use
hint: "git push -u" to set the upstream config as you push.

git branch —set-upstream-to=origin/webpack webpack 실행 결과 origin/webpack 브랜치가 존재하지 않는다고 합니다. 실패하는 2가지 경우에 실행해 볼 만한 명령어 힌트를 주는데요. 첫 번째는 이미 webpack 브랜치가 원격 저장소에 존재하는 경우입니다. 두 번째는 새 로컬 브랜치를 생성하고 원격 저장소에 추가하려는 경우입니다. git push -u 명령으로 upstream 설정을 원격 저장소에 푸시하라고 합니다. 그대로 실행해봅니다.

> git push -u
fatal: The current branch webpack has no upstream branch.
To push the current branch and set the remote as upstream, use

    git push --set-upstream origin webpack

또 실패합니다. 현재 브랜치인 webpack은 업스트림 브랜치가 없다고 합니다. 현재 브랜치를 원격 저장소에 업스트림 브랜치로 추가하려면 git push --set-upstream origin webpack 을 입력합니다. 원격 저장소의 계정 정보를 알맞게 입력하면 원격 저장소 브랜치에 webpack 브랜치가 생성됩니다. 여기에서는 원격 저장소를 GitLab 사용하지만 Github가 될 수도 있습니다. 사용방법은 같습니다.

> git push --set-upstream origin webpack
Username for 'https://gitlab.com': userId
Password for 'https://userId@gitlab.com':
Total 0 (delta 0), reused 0 (delta 0)
remote:
remote: To create a merge request for webpack, visit:
remote:   https://gitlab.com/{...}
* [new branch]      webpack -> webpack
Branch 'webpack' set up to track remote branch 'webpack' from 'origin'.

---

LTS버전의 Node.js 설치

Node.js

LTS(Long Term Support) 버전은 최신 버전에 비해 기능은 적지만 안정적이고 신뢰할 수 있습니다.. 총 30개월 동안 치명적인 버그 수정을 보장하는(guarantee) 기간을 갖는 장기 지원 프로젝트로, production 제품 개발은 반드시 LTS 버전을 사용해야 합니다. 주(Major) 버전은 출시 후 6개월 간 라이브러리 작성자들이 해당 버전 지원을 위한 6개월의 시간을 제공합니다. 그 후 주 버전이 홀수인 경우 6개월 뒤 지원이 끊기고(unsupported), 짝수인 경우 활성 LTS 상태(Active LTS status)로 변경됩니다.

The Long Term Support (LTS) schedule.

NPM(Node Pacakge Manager)은 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자입니다. 모듈을 패키지화하여 다운로드하고 설치할 수 있게 해 주는 패키지 스토어 역할을 합니다. 또한 설치, 업그레이드 및 의존성 관리를 위한 CLI(Command line interface - 명령어를 입력하여 기능을 수행하는 것)를 제공할 뿐 아니라 자신이 작성한 패키지를 NPM에 제공하여 다른 사용자가 다운로드할 수도 있습니다.

npm 패키지 초기화

IntelliJ나 vscode는 에디터 내장 cmd 또는 terminal을 실행하여 아래 명령어를 입력하면 pm 프로젝트를 생성합니다. 그 외에는 cmd 또는 terminal 실행 후 프로젝트의 루트 폴더로 이동해야 합니다. npm init 명령어를 통해 프로젝트 루트 경로에 package.json이 생성됩니다.

// -y는 입력이 필요한 항목을 모두 기본값으로 자동으로 설정하겠다는 옵션입니다.
npm init -y

package.json

npm init을 통해 만들어진 package.json 파일은 패키지에 대한 정보, 패키지 사이의 의존성(dependency) 관리를 위한 정보가 기술되어 있습니다. package.json와 인터넷만 있으면 언제 어디서든 동일한 개발환경으로 개발할 수 있습니다.

webpack & babel 설치

 웹팩은 여러 개의 파일을 1개의 js파일로 만들어주는 번들링을 해줍니다. 일부 브라우저에서 최신 문법 ES6을 지원하지 않으므로 브라우저에서 ES6를 사용하기 위해 ES5로 변환해주는 babel을 적용하고(물론 webpack만으로도 가능합니다.), 1개의 파일로 만들어주기 위해 webpack을 적용합니다. 그 결과 스프링 부트 View 또는 html에서 webpack으로 뭉친 bundle.js하나만 로드하면 됩니다. 또한 웹팩은 번들링 과정에서 추가로 여러 작업들을 수행 가능합니다. 예를 들어 파일이 수정되었을 때 변경을 감지하여 변경 내용을 보여주거나, coffee, jade 등을 모듈링 중 컴파일하는 것과 같은 일을 수행할 수 있습니다. 이제 웹팩과 필요한 로더들을 프로젝트에 추가해보겠습니다. 로더는 중요한 개념이므로 뒤에서 더 자세히 설명하겠습니다.

// webpack 설치
npm install --save-dev webpack webpack-dev-server webpack-cli

// 번들링(bundling)을 위한 로더(loader) 설치
npm install --save-dev babel-loader @babel/core @babel/preset-env css-loader url-loader file-loader

https://webpack.github.io/

패키지 자세히보기

• babel
  • babel-loader : 자바스크립트 모듈 번들링을 위한 패키지입니다. 보통은 ES6 코드를 ES5로 변환하기 위해 사용합니다.
  • css-loader : css 파일을 자바스크립트에서 임포트 하여 사용할 수 있게 모듈화 해주는 패키지입니다.
  • style-loader : css-loader에 의해 모듈화 된 코드를 style 태그에 자동으로 주입하기 위한 패키지입니다. 
  • url-loader : 이미지나 폰트 파일을 문자열 형태의 데이터(Base64)로 변환하여 해당 CSS 파일 안에 포함시키므로 정적 파일을 관리하기 쉬운 반면 실제 파일들보다 용량을 많이 차지하고, CSS 파일 용량이 무거워지는 단점이 있으므로 주의 깊게 사용해야 합니다.
  • file-loader : 단어 그대로 (정적) 파일을 로드하는 데 사용되며, 보통 프로젝트 환경에 맞게 특정 디렉터리에 파일을 복사하는 역할을 수행합니다.
• webpack
  • webpack-cli : 웹팩 명령어 수행을 위한 패키지입니다.
  • webpack-dev-server : 스프링 부트로 실행한 서버와 연계하기 위한 프록시 서버로 사용합니다. Live reloading을 지원하기 때문에 파일이 변경될 때 자동으로 내용을 반영합니다. 

패키지 의존성

npm install명령어를 통해 설치한 패키지 의존성은 아래와 같이 package.json에 추가됩니다.

"devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "file-loader": "^5.1.0",
    "url-loader": "^3.0.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }

 

webpack 실행을 위한 npm 스크립트 추가 및 webpack config 설정은 다음 글에 이어서 작성하겠습니다.