Node.js 나만의 웹 프로젝트 만들기(1) - 개발 환경 준비 & 웹 서버 접속

Node.js 언어에 대해서

Node.js는 자바스크립트를 로컬환경에서 실행할 수 있도록 하는 런타임 환경을 나타냅니다. 웹서비스에 관한 공부를 하다 보면 HTML, CSS를 배운 뒤 웹페이지에 동작을 더해주는 자바스크립트를 배우게 됩니다. 이때 작성한 자바스크립트는 브라우저에서 해석하여 정적 페이지인 HTML에 경고창을 표시하거나 요소를 움직이거나 다양한 역할을 합니다.
이러한 자바스크립트를 개발자의 컴퓨터 즉 로컬 PC에서도 실행이 가능하도록 하기 위한 Node.js를 사용합니다.
 
웹개발자에게 있어서 기본적인 html, css, javascript로 코딩을 하고 백엔드를 다루기 위해서는 자바, PHP, 파이썬 등 서버 개발에 필요한 추가적인 언어랑 문법을 배워야 하는데 Node.js를 사용하면 우리가 알고 있는 자바스크립트를 통해서 간편하게 서버를 구현할 수 있습니다.
 
백엔드 개발의 대표적인 spring 프레임워크와 node.js 중에서 Node.js를 제가 배우게 된 이유는 sprint은 자바라는 언어에 대해서 알고 넘어가야 하는데 Node.js는 자바스크립트를 사용하고 저에게 조금 더 익숙한 언어라서 프론트 개발할 때도 자바스크립트를 사용할 텐데 조금 더 공부가 되지 않을까 하는 마음에 시작하게 되었습니다.
 
 

Node.js 설치

Node.js 설치 페이지(링크)로 이동하여 LTS 최근 버전을 설치하시면 됩니다.
따로 설치과정에서 확인해야 할 옵션은 없고 계속 Next과정만 누르면 인스톨이 완료되기 때문에 자세한 설치과정은 생략하겠습니다.
 
 

Node.js 설치 후 환경변수 설정

Node.js를 설치한 다음에는 환경변수 패치를 해줘야 합니다.
반드시 해야 하는 건 아니지만 이과정을 생략하고 나중에 파워쉘에서 명령을 실행할 때 오류가 발생하는 경우가 있어서 새로 설치하면 환경변수에도 미리 등록해 두는 걸 권장합니다.
환경변수 편집은 제어판의 "시스템 환경 변수 편집"에서 할 수 있습니다.
 
 

 
시스템 속성 창이 나타나면 '고급'탭의 '환경 변수'를 클릭합니다.
 

사용자 변수에서 Path를 선택하고 편집을 누른 뒤 환경변수 편집창에서 Node.js의 설치경로를 붙여 넣어줍니다.
 
 

VSCODE 코드 편집기 설치

Node.js를 작성하기 위해서 VSCode 에디터를 추천합니다. 이미 프론트엔드나 파이썬 언어를 사용해 보신 분들은 VScode가 익숙할 텐데 처음 이용해 볼 경우 vscode 설치페이지에서 자신의 운영체제에 맞게 설치해주세요(설치링크)
 
 

패키지 설치 후 서버 접속해 보기

Npm 패키지 검색

Node.js에서는 npm이라는 명령어를 통하여 외부 패키지를 설치할 수 있습니다. 
npm 패키지 검색 사이트를 통하여 패키지를 검색해 보고 예제 코드를 참고하여 패키지를 사용해 볼 수 있습니다.(링크)
앞으로 서버를 구동하기 위해 필요한 패키지를 설치할 건데 일단은 패키지를 검색해 볼 수 있는 사이트가 있구나 정도로 넘어가시면 됩니다.
 
 

Init 프로젝트 초기화

PS C:\Users\root\Downloads\subway> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (subway)

node 패키지를 설치하기 전 npm init명령을 터미널에 입력한 뒤 enter를 계속 눌러 명령이 종료되면 현재 디렉터리에  json파일이 새로 생성되는데 json파일을 확인해보면 npm으로 설치된 패키지를 한 번에 확인할 수 있도록 도와줍니다.

즉 init명령을통해 패키지설치전 초기화를 해주어 앞으로 설치되는 패키지들과 프로젝트 정보를 json파일에 담기게 됩니다.

 

npm init -y 옵션을 사용하여 명령어를 입력하면 엔터를 여러번 누르지않아도 기본값으로 한번에 init파일을 생성할 수 있습니다.
 
 

명령어를 입력하고 vscode의 디렉터리를 확인해 보면 node_modules라는 폴더와 package.json이라는 파일이 새로 생긴 걸 확인할 수 있습니다.
 
 

package.json파일을 살펴보면 처음 사용하실 경우 패키지가 설치되어있지 않아 안 보일 수 있지만 만약 npm을 사용하여 패키지를 설치하면 "패키지명":"버전" 형태로 json형태에 저장됩니다.
 
 

서버 구동을 위한 express 패키지 설치하기

 

vscode 에디터에서 터미널을 새로 열어주세요.
터미널이 보이지 않는다면 메뉴에서 열거나 Ctrl + Shift + ` 단축키를 통하여 새 터미널을 띄울 수 있습니다.
 
 

npm i express

Node.js에서 express 패키지를 사용하여 서버를 생성하고 접속하기 위해 터미널에 express 패키지 설치 명령을 입력해 주세요.
npm install express 명령을 통해서도 express패키지를 설치할 수 있습니다.(사진처럼 i = install 약어를 사용하셔도 됩니다)
 
참고로 서버를 실행하기 위해서는 매번 새 프로젝트마다 express를 설치해줘야 하지만 컴퓨터 전체에 패키지를 설치하고 싶을 경우에는 npm install -g 패키지명을 통하여 한번만 설치하여도 다른 프로젝트 전체에 적용되도록 할 수 있습니다. 다만 패키지들이 시스템 전체에 설치되다 보면 충돌이 일어나거나 패키지 관리가 어려울 수도 있으니 이를 잘 고려하여 설치하시는 걸 권해드립니다.
 
 

express 사용방법

express를 설치한 뒤에는 예제코드를 가져와 사용해 볼 수 있습니다. 앞서 npm 패키지들을 검색할 수 있는 사이트가 있다고 소개해드렸는데 여기에서 express를 검색해 보면 아까 우리가 설치했던 방법대로 express 패키지를 설치할 수 있는 install방법과 예제로 사용해 볼 수 있는 코드를 제공하고있습니다.(npm express링크)
 
 

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

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

vscode에서 새로운 index.js파일을 생성하고 express 페이지에서 제공되는 예제 코드를 붙여 넣어주세요
예제 코드에 대해 간단하게 알아보겠습니다. 대략적인 구조와 어떤 기능을 하는지 알고 넘어가면 좋습니다. 아직 코드를 전체 외울 필요는 없습니다.
 
◾ const express = require('express')는 설치한 express 패키지를 require로 불러와서 express 변수에 할당합니다. 그리고 두 번째 줄부터 app이라는 변수에 Express 앱 객체를 생성합니다. 정확한 내부 원리까지는 이해할 필요 없고 express를 사용할 때는 이렇게 구성하는구나 정도만 알고 계시면 됩니다.

---

◾ app.get('/', function (req, res) { code... }) 부분에서 app.get()은 사용자가 웹브라우저 주소창에 주소를 입력하면 그 주소로 서버에 요청이 전송되는데 이 요청에 대한 응답을 설정할 수 있습니다. 
 
첫 번째 매개변수는 URL의 경로를 나타내며 예제 코드에서는 '/'로 설정되어 웹페이지를 접속하자마자 나오는 페이지를 의미합니다. 두 번째 매개변수는 요청에 대한 처리를 담당합니다. 두 번째 매개변수는 req(요청)과 res(응답)이 있습니다. req는 사용자가 보낸 요청에 대한 정보를 담고 있고, res는 서버가 사용자에게 보낼 응답을 담고 있습니다.

---

◾ res.send('Hello World')는 서버가 클라이언트(웹브라우저)에게 메시지를 전송합니다. 실제 웹페이지에 접속해 보면 Hello World라는 문자열이 나타납니다.
app.listen(3000)은 서버를 특정 포트(여기서는 3000번 포트)에서 실행시킵니다
 
 

서버 접속해 보기

node 파일명.js

 
node 명령을 사용하여 서버를 실행할 수 있습니다.
저는 index.js라는 이름으로 파일을 생성하였기 때문에 node index.js라는 명령어를 실행하여 서버를 실행해 보겠습니다.
 
 
 

브라우저에 http://localhost:3000/ 를 입력하여 서버에 접속하면 Hello World라는 문자열이 브라우저에 출력됩니다.
서버를 종료하려면 터미널에서 Ctrl + C 단축키를 통하여 중단할 수 있습니다.
 
 

서버 실행 시 메세지 표시하기

app.listen(3000,()=>{console.log("서버가 실행되었습니다.")})

 
코드에서 listen부분을 이렇게 두 번째 매개변수로 새로운 빈 함수를 생성하여 문자열을 넣어주면 서버가 가동될 때 서버가 실행되었다고 터미널에 나오게 됩니다.
 

1번은 따로 메세지를 설정하지 않았을 때, 2번은 메세지를 실행하였을 때 서버가 제대로 실행되었는지 터미널의 메세지를 통하여 구분할 수 있습니다.
 
 

ejs로 HTML에서 자바스크립트 사용하기

node.js에서 서버를 작동하기 위해 express 패키지를 설치했듯이 이번에는 HTML에서 자바스크립트를 사용할 수 있도록 도와주는 ejs라는 패키지를 설치해 보고 알아보겠습니다.
 

EJS와 express 같이 사용하기

ejs패키지를 NPM 사이트에서 검색해 보겠습니다. (링크)
express 패키지때와 마찬가지로 우측에는 설치 명령어가 나와있고 본문에는 사용 방법이 기재되어 있습니다.
 
터미널에 다음 명령을 입력하여 ejs 패키지를 설치합니다.

npm i ejs

 
 
 

이전에 설치한 express와 ejs를 함께 사용하기 위한 코드가 필요한데 온라인에 ejs sample code 키워드 등으로 검색하면 ejs 예제 코드를 제공하는 사이트들이 많이 나와있습니다.(링크)
ejs 예제 코드

var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page
app.get('/', function(req, res) {
  res.render('pages/index');
});

// about page
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

ejs 예제코드를 가져와 확인해 보면 이전에는 res.sned메서드를 사용하였는데 이번에는 res.render가 사용되었습니다.

 
res.render는 html과 js로 구성된 ejs 파일을 브라우저에 렌더링 하기 위해 사용됩니다.

ejs파일이 아니라 html 파일을 직접 유저에게 보여주려면 sneFile()을 사용하면 되지만 ejs파일은 render를 통해서 사용해야 합니다.

 

ejs를 사용하기 위해 express의 앱 설정에서 view engine을 ejs로 설정합니다. 그다음 사용자에게 보여줄 페이지 파일을 res.render메서드의 매개변수에 입력합니다.
이때 res.rendr에는  views폴더를 생성하여 하위에 있는 ejs 파일명을 적어줘야 합니다.(사진에서는 views/second.ejs파일을 지정하였음)
 

사진처럼 views폴더를 새로 생성하고 ejs파일을 생성해 보겠습니다. (ejs파일은 반드시 views 폴더 안에다가 넣어야 올바르게 불러올 수 있습니다. )
 
 

새로 생성된 ejs파일에 기본적인 html 코드를 작성한 후 다시 메인 페이지에 있는 index.js파일을 node 명령을 통해 서버를 실행 후 웹페이지에서 확인해 보겠습니다.
 

메인 페이지에 접속해 보면 index.js에서 설정한 second.ejs 파일이 렌더링 되어 화면에 표시됩니다.
 
 

HTML에서 자바스크립트 사용해 보기

<body>
    <p>1더하기 1은? = <%=1+1%></p>
    <p>1더하기 1은? = <%1+1%></p>
</body>

second.ejs 에서 기본적인 HTML 코드에서 body태그 부분에 다음과 같은 코드를 추가해 보겠습니다.
p태그는 html에서 많이 사용하던 익숙한 태그입니다. 글을 출력하고 개행을 해주는 태그입니다.
 
<%= %>구문은 ejs에서 html 파일 내에 js코드를 실행하고 결과를 출력할 때 사용합니다.
예를 들어 콘솔창을 사용하여 자바스크립트에서 1+1을 계산하면 2라는 값을 바로 출력합니다. 이 계산식을 <%= %> 사이에 넣으면 페이지에서 자바스크립트의 연산 결과가 즉시 출력됩니다.
 
두 번째 <p>태그에는  <% %>구문이 있는데  앞에 구문과 다르게 "="가 없습니다.
둘의 차이점은 =가 있는 건 js결과를 바로 보여주고  "="가 없으면 자바스크립트 코드를 실행하긴 하지만 결과를 직접 페이지에 출력하지는 않습니다. 보통 데이터 처리나 조건문 등 페이지에 결과를 출력하지 않고 실행할 때 사용합니다.
 

그래서 실제 웹페이지에서 확인해보면 첫번째 ＝가 포함된 구문에서는 2라는 값이 출력되지만 두번째 <p>태그에서는 연산은 이루어지지만 실제 화면에 출력되지 않습니다.
 
 

Node.js에서 CSS 스타일 적용법

HTML작성과 HTML내에서의 자바스크립트 구동까지 알아봤으니 이제 홈페이지의 디자인을 위한 CSS에 대해서 알아보겠습니다.
 
기존에 CSS파일을 사용하려면 style.css 파일을 새로 생성하고 HTML에서 link태그로 연결만 해주면 끝이었지만 추가적으로 node.js에서는 CSS파일을 사용하기위해서 index.js의 express패키지를 활용해서 CSS를 사용하겠다고 명시해야합니다.
 
CSS파일이 늘어날때마다 파일명 하나하나 등록하면 양이 많으니 먼저 CSS를 위치할 디렉터리를 생성하고 CSS파일을 생성해보겠습니다.
 

폴더나 CSS파일명의 이름은 상관없습니다. 저는 style 폴더 아래에 style.css파일을 생성하였습니다.
이제 이 CSS파일을 사용하려면 index.ejs파일에서 해당 디렉터리를 사용하겠다고 코드를 추가해야합니다.
 

app.use(express.static(__dirname + '/style'))

index.js 상단에 다음과같이 코드를 작성합니다. __dirname은 현재 디렉터리를 의미하며 현재 디렉터리의 style폴더를 지정하였습니다.
이제 express에서 style폴더 안에있는 CSS파일들을 HTML에서 사용할 수 있습니다.
 
 

이전에 HTML에서 사용했듯이 HTML파일 <head>태그 안에 사용할 CSS파일명을 link태그로 등록을 한뒤 사용하시면 됩니다. 이때 link 태그의 href에서 style폴더는 생략하고 앞서 등록하였던 style폴더안에있는 css만 직접 지정해주면 됩니다.
 
 

CSS파일이 잘 적용되나 확인하기 위해서 p태그의 글자색상을 변경해보겠습니다.
 
 

페이지를 확인해보니 p태그로 감싸진 글자들의 색상이 빨간색으로 출력됩니다.
 
이제 홈페이지의 대략적인 구조를 만들어볼껀데 홈페이지를 간단하게 만들수 있도록 도와주는 부트스트랩이라는 프론트엔드 프레임워크를 사용할 예정입니다. 부트스트랩을 활용한 홈페이지를 제작하는 내용은 다음 포스팅에서 다루도록 하겠습니다.
 
 

변경사항에 따른 서버 자동실행 패키지

이제 본격적으로 express를 통하여 서버를 열고 ejs를 통하여 html페이지 내에서 자바스크립트를 사용하고 CSS파일을 적용하는 방법까지 알았습니다. 웹사이트를 제작하려면 ejs파일과 CSS파일 내에서 많은 코드 수정이 이루어질 텐데 페이지를 수정할 때마다 터미널에서 서버를 종료하고 재실행하기에는 너무 번거롭습니다. 그래서 파일의 변경사항이 있을 때마다 자동으로 서버를 재실행해주는 패키지를 사용해 보겠습니다.
 
 

 
nodemon 패키지(링크)를 설치하면 파일의 수정사항이 있을 경우 자동으로 서버를 재실행하여 반영합니다.
 

npm i -g nodemon

패키지 설치 명령을 통하여 설치해 보겠습니다. nodemon의 경우 -g 옵션을 주어 모든 프로젝트에서 사용할 수 있도록 전역으로 설치합니다. (global이 아니라 일반 설치 후 실행하니 실행 오류가 발생하여 -g 옵션을 주어 설치하였습니다)
 
 

nodemon사용법

nodemon index.js

 
서버를 실행할 때 이전에는 node index.js형식의 명령어를 사용하였는데 nodemon을 사용하여 서버를 실행시키려면 nodemon 파일명 형태로 명령어를 입력하면 됩니다.
 

서버가 실행되면 이전에 접속하였던 방식과 동일하게 서버를 접속하시면 됩니다.
 
 
또한 파일의 변경사항이 있을 때마다 자동으로 서버를 재실행하여 터미널에서 서버를 종료 후 재실행할 필요 없이 웹페이지에서 새로고침만 하면 웹페이지의 변경사항을 바로 확인할 수 있습니다.