Web 백엔드 (3) / express, middleware, supervisor 사용해보기

 

이제 설치한 node.js 환경에서 코드를 작성해보자

아래 강의의 내용을 듣고 공부한 내용을 기록한 포스팅이다.:)

 

 

클래스 101 [유료강좌]

개발자 사관학교 - [웹 개발자 단과반 2교시] MySQL, Node.js 백엔드 속성 실무!

https://class101.net/ko/products/5fac071c1105fb001383cd2a

[웹 개발자 단과반 2교시] MySQL, Node.js 백엔드 속성 실무! | 개발자 사관학교

 

 

 

 

 

 

 

CHAPTER 2: 본격! 백엔드 다루기, Node.js의 모든 것

[3. 서버 개발을 더 쉽게! Express와 서버 실행해보기]

 

 

 

node.js를 설치하면서 npm도 함께 설치했었다.

 

npm이란 무엇일까?

npm은 node package manager로 node.js의 환경에서 사용할 수 있는 각종 패키지/라이브러리를

설치, 관리, 삭제할 수 있게 해주는 명령어들을 모아놓은 곳이다.

때문에 npm을 통해 오늘 사용할 Express를 다운받아줄 수 있다.

 

- 터미널을 열어 node.js를 설치한 폴더에 들어간다.

(또는 vscode에서 해당 폴더에서 터미널을 열어 바로 폴더로 들어가줄 수 있다.)

 

아래와 같은 명령어를 입력해준다.

npm install express

 

 

사진처럼 메시지가 나온다면 설치가 정상적으로 완료된 것이다.

vscode를 열어 지난 포스팅에서 만든 폴더를 다시 확인해보자.

 

 

 

 

 

node_modules라는 새로운 폴더가 추가된 것을 볼 수 있다.

뿐만 아니라 안에는 정말 많은 파일들이 포함되어 있다.

 

 

 

 

 

 

package.json 파일에 들어가보면 "dependencies"라는 새로운 key값이 추가된 것을 볼 수 있다.

안에는 설치한 express의 버전이 쓰여있다.

 

 

 

 

 

 

<app.js에서 express 사용해보기>

실제로 다운받은 express를 어떻게 사용할 수 있는지 코드를 짜볼 시간이다.

우선 app.js파일을 열어 그 안에 아래와 같은 코드를 작성해준다.

 

 

위 코드들은 express를 사용해주기 위한 공식과 같은 코드들이기 때문에

사실 이해를 필요치 않는다. (그냥 그렇구나의 개념에 가까워보인다.)

그래도 기억에 남기기 위해 간단히 설명을 덧붙여본다.

 

require('express')라는 코드를 작성하면, require함수가

node-modules에서 'express'라는 도구를 찾아 const express변수 안에 담아준다.

 

그런데 사실 express의 속성은 본래 함수이고 (이 부분이 와닿지는 않지만 일단 넘어가보자!)

express라는 함수를 호출해 express의 모든 도구들을 app이라는 변수 안에 담아주게 된다.

=> 즉 express도구들이 app변수에 모두 담겨있다. 라고 생각하고 넘어가도 무관해보인다.

 

 

 

 

 

 

간단한 예제로 주소를 만드는 express의 get함수를 이용해보았다.

req는 사용자가 보내는 요청, res는 서버에서 보내는 응답이다.

사용자가 해당 주소에 접근하면 res.send()를 통해 응답을 보낸다.

보다 정확한 내용은 이후 직접 서버를 개발하며 하나씩 알아볼 예정이다.

 

 

 

 

 

 

지난 포스팅에서 app.js가 서버의 가장 첫페이지와 같은 역할을 한다고 이야기했었다.

여기에 더해 app.js는 서버를 실행시키는 스위치의 역할도 수행한다고 한다.

위에 작성한 app.listen이라는 코드는 서버의 스위치를 켜는 일을 수행한다고 볼 수 있으며

나의 컴퓨터에 3000번 포트를 사용하겠다는 의미이다.

(function(req,res)는 node.js에서 흔히 사용되는 기본구조이며 대부분의 것들을 모두 함수화해서

내용을 담고 실행하기 때문에 자연스럽게 따라붙는 구조라고 한다.)

 

 

 

 

 

 

 

<서버 실행시켜보기>

node.js에서 자바스크립트를 실행시키는 방법(서버를 실행시키는 방법)은 다음과 같다.

vscode내에서 터미널을 열고 아래 명령어를 입력해준다.

 

node app.js

(node.js의 명령어이다.)

 

 

혹시 node.js가 설치된 폴더가 아니라면 해당 폴더로 이동시켜준 후,

반드시 app.js 파일을  저장한 후에 명령어를 입력해야 한다.

그러고 나면 서버가 실행될때 출력되도록 적은 메시지가 나타난다.

 

 

 

웹브라우저를 열고 localhost:3000(포트넘버)라고 입력해 주소로 들어가보면

요청에 응답한 서버가 아까 전에 코드로 적은 메시지가 나타난다.

 

 

 

 

 

 

 

 

 

[4. NodeJS 서버 개발을 위한 필수 지식!]

 

 

주소를 바꿔서 새로운 페이지에 접속해보자.

 

 

app.get에서 주소를 /about으로 바꿔주고 메시지도 About Page로 바꿔준다.

이번에는 해당 주소를 입력해서 들어가보자: localhost:3000/about

 

 

 

그랬더니 이른바 404에러처럼  주소 또는 내용을 찾을 수 없다는 내용이 나온다.

이유가 무엇일까?

이미 서버가 시작된 상태에서는 변경된 상태를 컴퓨터가 인지하지 못한다.

수정사항이 있을 경우, 서버를 껐다가 다시 켠 후에 주소에 들어가야 한다.

서버는 Ctrl+C로 끌 수 있다. (맥도 Cmd말고 Ctrl을 눌러야 한다.)

 

 

 

 

 

 

껐다가 다시 node app.js 명령어로 서버를 다시 실행해준다.

 

 

 

 

 

 

주소가 잘 접속이 되는 것을 확인할 수 있다.

 

 

그렇다면 매번 수정사항이 있을때마다 서버를 껐다켰다 해주어야 할까?

매우 번거로운 일일것이다..

그런 번거로움을 방지하기 위해 superviser 도구를 다운 받아 사용할 수 있다.

 

 

 

 

 

 

 

<supervisor 설치하기>

 

아래 명령어를 통해 설치할 수 있다.

npm install supervisor

 

 

위 사진처럼 나타나면 설치가 잘 끝난 것이다.

이처럼 npm을 사용하면 정말 편하게 다양한 라이브러리/도구들을 설치할 수 있다!

이제 서버를 껐다 킬 필요없이 파일을 저장할때마다 서버가 재시작된다.

supervisor를 실행하기 위해서는 supervisor app.js 명령어로 실행이 가능하다.

 

 

 

 

<supervisor 설치 오류 (맥)>

 

 

하지만 나의 경우 다음 에러와 함께 supervisor 실행이 안됐다.

npm install -g supervisor로 다시 설치해서 전역적으로 supervisor를 사용할 수 있도록 시도해보았다.

 

 

한마디를 했더니 백마디로 돌려주네...

 

하지만 다시 실패했다. 오류가 엄청 많았고 뭔가 권한을 부여받아야 하는 모양이다.

 

어떻게 해야할지.. 자료를 뒤져보다가 permission관련 내용이니 관리자 권한으로 설치하면 된다는  도움의 글을 보았다.

따라서 말씀해주신대로 아래 명령어로 다시 시도해보았다.

sudo npm install -g supervisor

 

 

 

 

요구하는대로 비밀번호를 입력하니 설치가 완료되고 실행도 됐다!

supervisor를 실행시키면 파일을 저장할때마다 서버가 재시작되었다는 내용을 콘솔로 볼 수 있다.

 

 

 

 

 

서버가 실행되고 있습니다. 는 내가 따로 작성해준 내용이며,

그 외에 crashing child, Starting child process with ~ 의 내용등이 서버가 재시작 될때마다 나타난다.

 

 

 

 

 

 

 

 

 

 

<npm 활용해보기 - helmet 설치해보기>

 

node.js로 서버 개발을 하는 것은 npm을 통해 필요한 도구들을 설치하는 것이다.

라는 말을 할 정도로 npm을 통해 다양한 도구들을 설치해보는 것이 중요하다.

 

 

실제로 node.js로 개발하는 사람들이 하루에 한번씩은 아래 사이트를 방문한다고 한다.

 

https://www.npmjs.com/

npm

 

이중에서도 웹사이트의 기본 보안을 담당하는 helmet을 설치해보자.

 

 

 

 

사이트 안에서 helmet을 검색해보면 바로 상단에 나온다.

 

https://www.npmjs.com/package/helmet

helmet

 

 

 

 

 

우선은 터미널에서 명령어를 통해 helmet을 설치해보자.

 

 

npm install helmet

명령어를 통해 설치가 가능하다.

 

 

 

 

 

상단에 올려두었던 링크를 들어가보면 어떤 코드를 입력해서 사용할 수 있는지 나온다.

해당 내용을 app.js에 옮겨 적어본다.

 

 

 

 

 

 

크게 달라진게 없어보이지만 이제 기본 보안이 웹사이트를 보호해주는 중이다!

 

 

 

 

 

 

 

<middleware에 대해 알아보자>

 

사이트 ---------> 요청 ----------> middleware() ---------> Node.js

 

middleware는 사이트에서 요청을 보내면 node.js 서버에서 응답을 보내주기 전 거치는 중간 다리 역할이다.

예를 들어 해킹위험이 있는 요청이 들어왔을때 서버에 접속하기 전 사전 위험을 감지할 수 있다.

즉, 요청과 응답 사이에서 한번 더 점검해주는 역할이 middleware이다.

 

 

 

 

앞서 사용한 helmet이 바로 middleware에서 작동된다.

helmet이 웹사이트 보안을 강화시켜준다고 이야기했었는데,

이처럼 서버에 접속하기 전에 해킹위험이 있는지 확인해준다.

 

여기서 app.use는 express에서 middleware를 사용할 수 있도록 해주는 함수이다.

 

 

 

 

 

<Router에 대해 알아보자>

지금 app.js에는 다양한 주소들이 써있다.

 

 

하지만 웹페이지의 내용이 많아질때마다 모두 여기에 주소를 적는다면..

app.js의 크기가 점점 커지고 무거워질 것이다.

이때 사용해줄 수 있는것이 바로 Router이다.

만들어두었던 mainRouter.js파일을 열어 코드를 작성해보자.

 

 

 

 

*app.get 대신 router.get으로 바꿔줘야한다.

 

mainRouter에 위와 같은 코드를 적는다.

굉장히 복잡해보이지만 서버를 사용하기 위한 기본적인 방법들이니 하나하나 세세하게 이해할 필요는 없다.

 

하지만 간단하게 설명해보자면,

express변수를 선언하여 그 안에 express도구들을 담는다.

그리고 router 변수에 express의 Router와 관련된 도구들을 담는다.

app.js에 적었던 주소들을 mainRouter에 옮긴다.

app라고 적었던 부분은 router로 바꿔준다.

module.exports = router; 는 담아놓은 router변수를 app.js에서 사용하기 위해 밖으로 꺼내준 부분이다.

자세히 이해가지 않아도 괜찮으니 구조를 알아만두자!

 

 

 

 

 

이제 app.js에서 router를 이용해보자.

 

 

const mainRouter 변수를 만들고 require로 mainRouter을 꺼내온다.

그리고 app.use로 middleware를 사용한다는 것을 알린다.

안에는 원하는 추가 주소를 쓰고 그 옆에 mainRouter 변수를 담는다.

 

이제 서버를 실행시켜 로컬주소에 들어가보자.

 

 

 

 

 

추가적으로 적어준 /testweb주소를 적어야 웹사이트에 정상적으로 들어가진다.

이처럼 Router를 이용하면 여러가지의 주소들을 관리하기 편해진다.

예를 들어 로그인과 관련된 정보는 /login을 유저정보 페이지는 /user등으로 주소를 나눠줌으로써

이렇게 주소를 깔끔하게 관리하는 것이 필요하다. 이는 프로젝트가 커지면 커질수록 중요한 문제이다.

 

 

 

 

 

 

 

|정리|

- npm을 통해 도구를 다운받고 사용할 수 있다. require함수를 통해 가능하다.

- middleware는 요청과 응답사이에 존재한다. 사용방법은 app.use(원하는기능)이다.

- middleware로 질서를 잡아주면 Router를 깔끔하게 나눠서 관리할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

처음보는 내용들이지만 이부분에 대해서는 너무 많은 왜?를 남발할 필요는 없다.

그냥 node.js의 사용방법이라고 받아들이면 된다.

생소한 것이 어려운 것은 아니다!

익숙해질수록 더욱 쉬워질 것이니 너무 걱정하지 말자!

공부를 이어가서 익숙해지는데 노력하자

 

 

 

 

 

 

 

출처: 클래스101 / [웹 개발자  단과반 2교시] MySQL, Node.js 백엔드 속성 실무! - 개발자 사관학교