Webpack 입문하기 4부작
- [1] node와 npm (현재 글)
- [2] npm과 친해지기
- [3] Webpack
- [4] Webpack과 친해지기
이번 글의 목차
0. npm start? 그래서 그게 뭔데요?
1. Node.js 설치
2. Node.js란 무엇인가
3. NPM
4. npm이 왜 필요할까?
0. npm start? 그래서 그게 뭔데요?
제가 다닌 첫 회사에서 운영중인 서비스는 Spring boot로 구성된 MPA 사이트였고, 프론트에서는 js파일만 따로 모아 webpack번들링을 통해 배포하고 있었습니다.
webpack은 커녕 npm도 몰랐고, 프로그래밍이라곤 java, spring과 jsp를 사용해 본 게 전부였던 제가 출근첫날 환경설정을 할 때 아래와 같은 대화를 나눈 적이 있었는데요.
아마 이런 비슷한 경험이 저같은 주니어 개발자분들에겐 꽤나 흔한 경험이지 않을까 싶습니다.
나: 알려주신대로 환경설정 끝냈습니다.
사수: 그럼 로컬 서버 켜시고 터미널에 npm start 치세요.
나: (npm start를 입력하며) 이게 뭐에요?
사수: 그렇게 쳐야 서버가 떠요
나: 스프링으로 띄우는 서버랑은 다른 건가요?
사수: 네. 항상 그렇게 2개 켜고 개발 하시면 됩니다.
npm이 뭔지, npm start가 뭔지, 전혀 몰랐던 저에게는 그날 ‘우와… 이게 현업인가..’ 하는 감탄과 함께 첫날부터 넘어야 할 산이 잔뜩 생긴 것 같은 막막한 기분이 함께 느껴졌었던 기억이 있습니다.
어찌됐든 사수가 알려준대로 npm start를 실행하고 나니 터미널에 뭔가 서버가 기동되는 것 같은 문자들이 주루룩 뜨더니 아래와 같은 문구가 저를 반겨줬습니다.
webpack is watching the files…
그 당시 기억으로는 아.. npm start라고 치면 뭔가 서버가 하나 더 기동되고, 이런식으로 서버를 2개 띄우고 개발을 하는 거구나.. 하고 깨달았던 기억이 있습니다.
궁금한 것은 많았으나.. 그냥 이렇게 치면 된다고 하니 이사람이 귀찮아서 이렇게 알려 주었는지, 몰라서 이렇게 알려 주었는지를 알 수 없었기에 npm start가 도대체 뭐 하는 녀석인지, webpack이라는 게 파일들을 쳐다보고 있다는데 이건 또 뭐하는 녀석인지 혼자 알아볼 수 밖에 없었는데요.
이번에는 총 4회에 걸쳐 npm start 라는 명령어가 어디서 나타난 것인지 부터 npm은 뭐고 webpack은 무엇인지에 대한 것들을 알아보려고 합니다.
1. Node.js 설치
node.js 공식 사이트에서 LTS 버전을 설치 후 터미널에서 다음 명령어를 통해 정상 설치 되었음을 확인해 봅시다.
- node -v
잘 설치 되었네요!
2. Node.js란 무엇인가
node.js는 다양한 내장 객체를 가지고 있는 javascript 런타임 입니다.
아래와 같은 간단한 예제를 실행해 볼 수 있습니다.
// index.js
console.log("hello Node.js");
http 내장 객체를 만들면 이렇게 간단한 비동기 웹서버를 만들 수도 있습니다.
// index.js
const http = require("http");
const hostname = "127.0.0.1";
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader("Content-Type", "text/plain");
res.end("Hello World");
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
한번 직접 작성해 보시고 node 명령어를 사용해 실행시킨 뒤
브라우저로 http://localhost:3000 으로 접속 해 보세요!
그 외에도 다양한 내장객체들을 가지고 있으며 (참고)
npm에서 제공하는 다양한 패키지들을 활용해 확장하기도 편리합니다.
이번 시리즈에서는 node.js를 깊고 넓게 활용하지는 않고 위 예제처럼 http 객체를 활용한 간단한 웹서버 용도로만 사용해볼 예정이니 위 코드를 이해할 수 있는 정도면 충분 할 거에요!
3. NPM
NPM (Node Package Manager) 이란, 세계에서 가장 큰 소프트웨어 Registy 입니다. 전세계의 오픈소스 개발자들이 패키지를 공유하기 위해 NPM을 사용하며 많은 단체에서도 역시 private한 개발들을 매니징하기 위해 사용합니다.
from NPM 공식 사이트
간단히 말하자면, Javascript 오픈소스 진영의 중앙 저장소 라고 볼 수 있을 것 같습니다. (Java진영의 maven과 같은..)
npm은 node.js를 설치하면 함께 설치되기 때문에 아마 설치가 되어 있을것입니다.
아래와 같이 잘 설치 되었는지 확인 해 봅시다.
- npm -v
4. npm이 왜 필요할까?
작업중인 프로젝트에 다음과 같은 코드가 있었다고 생각 해 보겠습니다.
아마 흔히 볼 수 있는 코드일 것입니다.
<script src="cdn.someLibrary.com/foo/v1/foo.js" />
<script src="cdn.someLibrary.com/bar/v1/bar.js" />
그리고 bar.js 는 foo.js에 의존하고 있다고 생각 해 볼게요
부트스트랩이 jQuery에 의존하듯이요.
작업 도중 다음과 같은 필요가 발생하게 되었습니다.
bar.js 라이브러리가 업데이트 되었고, 업데이트된 내용의 함수들을 사용할 필요가 생겨 v2 버전의 라이브러리를 사용해야 한다.
그럼 위 코드를 어떻게 유지보수할 수 있을까요?
<script src="cdn.someLibrary.com/foo/v1/foo.js" />
<script src="cdn.someLibrary.com/bar/v2/bar.js" />
와 같이 바꾸어 줄 수 있겠죠?
아마 눈치 빠르신 분들은 이정도만 보아도 아차 하는 생각이 드셨을 수도 있는데요.
언뜻 생각나는 문제점만 나열 하더라도 아래와 같은 이슈가 생길 수 있을 것 같네요.
- 막상 bar.js를 v2로 업그레이드하고 봤더니 해당 라이브러리는 foo.js의 v3 버전과 의존관계에 있다면 어떻게 될까요?
- 위와 같은 의존관계가 얽히고 설켜 있다면 어떻게 될까요?
- bar.js 라이브러리가 페이지 여기저기 수십 수백군데에서 사용되고 있다면 어떻게 될까요?
- 새로 입사한 개발자가 bar.js를 사용하고자 하는데 그 사람은 bar.js가 foo.js에 의존하고 있다는 걸 모른다면 어떻게 될까요?
<script src="cdn.someLibrary.com/abc/v1/abc.js" />
<script src="cdn.someLibrary.com/xyz/v1/xyz.js" />
<script src="cdn.someLibrary.com/foo/v1/foo.js" />
<script src="cdn.someLibrary.com/bar/v2/bar.js" />
- 위와 같은 코드가 프로젝트 어딘가에 있을 때 bar.js가 foo.js에 의존한다는 것은 알지만 abc.js와 xyz.js는 어떤 것인지 모를 때 어떻게 하실 건가요?
- 아마 하나씩 내용을 파악해 보기보다 4줄 모두 복붙 하게 되실걸요?😁😁
셀 수도 없는 당연한 이유들로 인해, 그리고 개발자라면 본능적으로 위 처럼 얽힌 의존관계의 라이브러리들을 사용하는 것은 위험하다고 느낄 것입니다
이를 해결하기 위해서 의존관계에 있는 라이브러리 끼리 모아서 공통 레이아웃을 만든다거나, js만 로드하는 조각을 만들어 include시킨다거나 하는 꼼수들도 사용해 보셨을 수 있습니다.
하지만 그런 방법이 근본적인 해결책이 될 수는 없겠죠.
이러한 복잡한 라이브러리간의 의존관계관리, 버전관리를 도와주고 비지니스로직 개발에 좀 더 집중할 수 있도록 도와주는 역할을 하는 첫번째 친구가 바로 NPM 이랍니다.
다음 장에서는 아래 내용들이 이어집니다.
- NPM을 사용해 간단한 nodejs 프로그램을 만들어 보고 실제로 다양한 패키지들을 어떻게 관리할 수 있는지 알아봅니다.
- 간단한 웹 페이지를 구성해 보고 NPM에 의해 관리되는 패키지들을 사용해 봅니다.
- 예제를 통해 기본적인 NPM 명령어와 설정 방법에 대해 알아봅니다.