Node.js의 편리함을 제공하는 npm, 그리고 npm의 발전

지난번 포스팅을 통해서 Node.js란 무엇인가와 작동 방식에 대해서 다뤄보았다.

https://hyeeoooook.tistory.com/14

 

이번엔 Node.js에 대용량 라이브러리 npm에 대해서 다뤄볼예정이다.

---

npm이란?

npm = Node Package manager 줄임말로 알려져 있는데, 공식적으로는 npm은 줄임말이 아닌 그 자체로 하나의 단어라고 한다.
Github의 npm 공식 문서에 따르면 기존의 'pkgmakeinst'를 줄여서 'pm'을 진화시킨 작품이라고 소개하고 있고 굳이 풀어서 쓴다면, Node pm 또는 Node pkgmakeinst가 되겠지만, 풀지 말고 nmp이라고 불러달라면서 덤으로 가능한 한 소문자로만 표기하여 사용할 것을 요청하고 있다.
npm Github : https://github.com/npm/cli#is-npm-an-acronym-for-node-package-manager

GitHub - npm/cli: the package manager for JavaScript

 

주요 패키지
 - express : Node.js에서 가장 인기 있는 웹 프레임워크이다.
 - NestJS : 타입스크립트 기반 대규모 서버용 프레임워크이다.
 - Mongoose : MongoDB 연결
 - React : 웹 UI를 만드는 자바스크립트 라이브러리

일단 나는 여기에 React가 있다는 것에서 놀랐다. React에 대한 개념이 없고 React를 배워야 하지만 라이브러리 형태로 npm패키지에 속해 있다는 건 처음 알았다.

 

---

npm의 역사

Node.js가 서버 사이드 JS로 성장하면서 패키지 관리 문제가 발생했다. 때문에 2010년에 Isaac Z.Schueter가 개발자들이 Node.js 모듈을 쉽게 설치 및 공유할 방법을 해결하기 위해서 개발했다.

 

초기의 목적은 Node.js 모듈을 담아 개발자들끼리 패키지 공유를 위해 중앙 저장소 제공을 목적으로 하였고 2014년 npm Inc.가 설립되고 공식 npm 레지스트리 운영을 시작했다.

 

때문에 현재는 세계 최대 JS 패키지 저장소로 남아 수많은 JavaScript 라이브러리를 제공하는 패키지 저장소로 남아있다.(약 200만개)

 

그중에서 이번 포스팅에선 기본중에 기본인 express를 포스팅 해보도록 하겠다.

---

express란?

Node.js 만 사용했을 때 HTTP 요청 처리, 라우팅, 에어 처리를 직접 다 코딩해야 한다. Express는 이를 간편하게 만들어주는 도구이다. npm 패키지의 종류 중 한개이다.

그렇다면 express를 왜 쓰는것일까? 간편하게 만들어준다는데 어떻게 간편하게 만들어주는것일까?

 

다음은 Node.js만을 사용 했을때와 Express를 사용 했을때의 차이이다.

---

 

1. Express 라이브러리를 사용하지 않을때

onst http = require("http");

const server = http.createServer((req, res) => {
  if(req.url === "/" && req.method === "GET"){
    res.writeHead(200, {"Content-Type":"text/plain"});
    res.end("Hello Node");
  }
});

server.listen(3000);

 

 

2. Express 라이브러리를 사용 할때

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("Hello Express");
});

app.listen(3000);

---

 

express 라이브러리를 사용하지 않을때는 직접 요청이 들어온 url의 메서드와 "/" 를 찾고, 콘텐츠의 타입도 직접 지정하여 클라이언트 Hello Node를 출력해야한다.

 

VS

 

하지만 express 라이브러리를 사용하게 된다면 const app = express()로 객체를 생성함과 동시에 HTTP 서버가 생성된다.

(express객체 내부적으로 HTTP 서버가 포함되어 있다.)

요청 URL과 GET 메서드를 자동으로 처리하고 Hello Express를 출력할 수 있다. 

---

Node.js서버를 통해서 HTML에 요청받고 처리하기

간단한 예제를 통해서 배워보겠다.

Node.js 서버구동과 express package를 모두 셋팅한뒤에 Node.js에서 받아서 처리할 명령어를 작성하는 JavaScript 파일을 생성한다. 보통은 server.js라고 표현을 한다.

 

express설치법

서버를 폴더로 지정하고 싶은 위치의 폴더에 Power shell 또는 cmd 등을 열어 설치해줄 것이다.

나는 SQLite.Nodejs라는 폴더를 새롭게 만들어 예제 파일용 폴더를 따로 제작했기 때문에 해당 폴더에 install해주었다.

 

참고로 express를 자주 사용할것이고, 매번 설치해서 이용을 해야하는 경우엔 npm install -g express 를 적어주면 된다.

-g는 global로 모든 Node.js서버에서 앞으로 install 해주지 않더라도 사용 할 수 있도록 설치를 글로벌로 걸어놓는 것이다.

 

만약 설치하는데 오류가 뜬다면 높은 확률로 관리자 권한 문제와 보안성 문제이다.

나는 두문제에 모두 해당되었는데 해당 내용은 구글링을 통해서 해결했다.

 

const express = require('express')
const app = express()

app.listen(8080, () => {
    console.log('http://localhost:8080 에서 서버 실행중')
})

app.get('/', (요청, 응답) => {
  응답.send('Hello World!')
})

위의 코드는 예제로 작성한 express.js 파일이다.

 

요청, 응답을 한글로 적어서 이해가 잘 되지 않는 입문자들에게 유용하도록 작성을 했다.

본래 위의 코드를 정석으로 작성하려면 다음처럼 작성하는것이 정석이다.(컨벤션은 유지해야 좋습니다!)

const express = require('express') // express 라이브러리를 참조해서 변수 express에 저장
const app = express()

app.listen(8080, () => { // 8080포트를 열고 해당 위치에 들어오는 값을 app으로 보내주는 역할
    console.log('http://localhost:8080 에서 서버 실행중')
})

app.get('/', (req, res) => { //라우트 생성 
  res.send('Hello World!') // 'Hello world!' 응답을 보냄
})

 

위의 코드 예제를 살펴보자

 

제일 먼저 require(라이브러리)를 통해서 외부 라이브러리인 express를 불러왔다.

app = express()를 통해 express 객체를 app이라는 변수에 저장했다.

 

app.listen(8080, ...은 포트 8080을 열고 해당 포트로 들어오는 요청 값에 대해서 app으로 보낸다는 것이다.

화살표 함수를 통해 위의 app.listen이 실행되면 console.log로 서버가 실행중이라는 메세지를 직관적으로 띄우도록 하였다.

 

app.get('/', (req, res) ... )

일단 여기서 " / " 는 라우트 경로라는 개념이다. 지금 당장 위의 URL 홈페이지만 보아도 " / "가 들어가 있는 것을 볼 수 있다.

예를 들어 설명하자면 내가 간단한 로그인과 회원가입 화면을 구축했다고 해보자

Login과  Register 화면을 구축하게 된다면 두개의 경로를 나눠야 할것이다. 이때 라우트 경로의 개념이 들어가게 된다.

http://localhost:8080/Login과 http://localhost:8080/Register의 형태로 나눈다. 이런 것을 라우트 개념이라고 한다.

 

다음으론 res.send('Hello World!')가 오는것은 안의 텍스트로 응답하라는 것이다.

 

이제 서버를 실행해보자. 서버 실행은 위에서 만든 server.js가 있는 폴더로 가주어야한다.

cmd나 power Shell에서 cd "경로"를 입력하면 쉽게 접근 할 수 있다.

 

그 이후에 node server.js 명령어를 입력하면 server.js파일을 읽으면서 서버가 실행되게 된다.

 

만약 본인이 VScode를 사용하고 있다면 VScode에서 Ctrl(컨트롤) + ` 를 누르게 된다면 아래에 터미널이 나올것이다.

그런 뒤 위의  http://localhost:8080 를 복사해 인터넷 URL에 입력해준다면 아래와 같은 문자가 출력 되어 있을 것이다.

 

 

이번 포스팅에선 간단하게 Node.js에 express를 설치하는 방법과 포트를 열어 해당 포트에 'Hello World!' 메세지를 보내고 출력하는것을 알아 보았다.