NodeJS 웹서버 만들기 설치부터 브라우저에 띄우기까지

내용 목차

1. NodeJS 웹서버 개발환경 설치

오늘은 nodejs 웹서버 만드는 방법을 정리해보겠습니다. 저도 초보이다보니 나중에 이 글을 읽고 nodejs 웹서버는 이렇게 시작하는구나 하고 기억하기 위해서 포스트로 남겨둡니다.

nodejs 설치 : 구글에서 nodejs 검색하여 nodejs 설치합니다.
1. 설치 완료되면 명령프롬프트 창에서 node –version 엔터를 해봅니다.
2. npm –version 하고 엔터를 해봅니다.
3. 정상설치 되었다면 버전번호가 나옵니다.
vscode 설치 : 구글에서 vscode 검색하여 vscode 편집기를 설치합니다

Node.JS 공식홈

Vscode 공식홈

2. 작업폴더 만들기

원하는 곳에 자신의 작업용 폴더를 만듭니다. ex) my_first_project
vscode의 file메뉴에서 open folder로 폴더 전체를 엽니다.

3. npm init

npm은 nodejs에서 패키키(라이브러리)들을 관리하는 도구입니다. nodeJS를 설치하면 자동으로 같이 설치됩니다. 앞으로 어떤 패키지들을 설치할때는 대부분 npm을 사용할 것입니다.

npm init

vscode에서 자신의 작업폴더를 열고 최초로 하는 작업이 npm init입니다. vscode 터미널을 열고 npm init를 치고 엔터 칩니다.

npm init는 뭐냐하면

내가 앱을 개발하는데 앞으로 어떤 패키지나 라이브러리를 사용할 것이라는 것을 모두 기록하는 파일 하나를 만들어라는 명령입니다. 이 파일의 이름은 package.json입니다. 이 과정은 그냥 필수과정이다라고 생각하시면 편합니다.

npm init를 실행하고 뭐라고 나오면 일단 계속 엔터를 치다가 “entry point” 항목이 나오면 자신이 개발하는 주된 파일의 이름을 적습니다. 예를들면 index.js 또는 server.js 같은 것입니다. 그리고 나서는 계속 엔터입니다.

4. Express 설치

웹서버를 만들기위해 쌩코딩을 하지 않고 사람들이 제일 많이 사용하는 express 패키지를 설치하겠습니다. 이건 그냥

npm install express

참고사항 : npm 이랑 yarn은 똑같은 용도를 가지고 있는 도구입니다. 혹시 npm으로 설치가 잘 안되면 yarn을 구글검색해서 설치하시면 됩니다. 대신 명령어들은 살~짝 다릅니다. (예시: yarn add express)

사실 yarn을 선호하는 사람들도 많습니다. 에러가 덜 나고 안정적이라는 말이 있습니다.

5. 기본코드 작성

//기본파일인 server.js

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

app.listen(8080, function(){
  console.log('Listening at 8080');
});
Code language: JavaScript (javascript)

위와 같이 작성합니다. app.listen의 숫자 8080은 포트번호입니다. 이 앱이 어떤 포트를 사용할 것인지를 우리가 정하는 것입니다. 8080, 8090, 9000, 45851, …. 원하는 포트를 아무거나 적어주면 됩니다. 다만 1024포트 아래로는 적지마세요.

이제 실행합니다. 터미널에서 node server.js 엔터

우리가 사용할 수 있는 포트는 대략 6만개 정도 되지만 1024포트 아래는 시스템 관리자만 사용가능한 포트거든요..

암튼 이유는 묻지말고 이해하려고도 하지말고 위의 코드 그대로 외웁니다. 그리고 브라우저의 주소창에 localhost:8080 (위에서 사용한 포트번호) 치면 “Cannot GET / ” 이렇게 나올 것입니다. 정상입니다. 잘 접속되었습니다.

6. 경로에 뭔가를 띄워보자

우리가 페이지에 접속했을때 “cannot GET /” 말고 다른 글자가 나오게 해보죠. 그럴려면 코드 하나를 추가해 넣어야합니다. 기본 코드이니 이것도 왜 이렇게 써야하는 거야 생각하지 말고 그냥 외웁시다.

// app.get('경로', 할일);
// app.get('다른경로', 할일);
Code language: JavaScript (javascript)

쉽게 쓰면 위와 같습니다. 어떤 경로로 들어오면 이런일을 해라라는 뜻입니다. ‘할일’이라는 것은 함수입니다. 이 ‘할일’이라는 놈은 요청이 들어오면 응답을 해주는 놈입니다. 그래서 두개의 파라미터를 무조건 갖고 시작합니다.

app.get('경로',함수(요청,응답{});

app.get('/', function(요청,응답){
  응답.send('여기는 나의 작업용 페이지입니다.');
}

app.get('/about', function(req,res){
  res.send('여기는 어바웃페이지.. 뭘 적지?');
});
Code language: JavaScript (javascript)

이렇게 작성해 볼 수 있습니다. 이런식으로 경로를 계속 아래에 붙여넣어서 만들어 낼 수 있습니다. 100개든 1000개든 붙여넣으면 그 경로에 맞게 보여줍니다.

이제 전체코드에 붙여넣고 실행해 보죠. 실행할 때 이전의 프로세스가 진행되고 있다면 터미널에서 Ctrl+C를 누르고 취소한 후에 node server.js 명령을 내려야합니다.

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

app.get('/',function(요청,응답){
  응답.send('여기는 나의 작업용 페이지입니다.');
})
;

app.listen(8000, function(){
  console.log('Listening at 8000');
});
Code language: JavaScript (javascript)

위와 같이 나옵니다. 코드를 좀 멋지게 보이려면 요청,응답 이라는 코드보다 req, res로 적어줘도 됩니다.

방금 우리는 서버를 하나 만들었습니다. 어떤 사람이 홈페이지를 보여줄 것을 요청하면 ‘여기는 나의 작업용….’이라는 응답을 보내주는 서버를 만든겁니다.

노드JS로 웹서버 만드는 것… 이게 다~ 입니다. 끝입니다.

7. nodemon 설치 사용

그동안 우리는 코드를 수정할 때마다 프로세스를 Ctrl+C키로 취소시키고 다시 node server.js 이렇게 타이핑해서 다시 실행하곤 했는데.. 좀 불편합니다.

그래서 이것을 자동으로 해주는 라이브러리를 하나 설치하기로 하죠. nodemon 입니다. pm2도 비슷한 기능을 합니다.

npm install -g nodemon

여기서 -g 는 현재 작업폴더 뿐아니라 여러분 컴퓨터의 모든 폴더에서도 nodemon이 작동 가능하게 해달라는 표시입니다.

이제 설치가 끝나고 실행을 해보죠.

nodemon server.js
Code language: CSS (css)

그런데 혹시 위와 같이 보안 에러가 뜨는 경우가 있다면, 이것은 윈도우에서 nodemon의 실행을 차단시켜버린 것입니다.

해결방법은 아래와 같습니다.

윈도우10의 검색버튼에서 powershell을 검색하여 powershell을 관리자 권한으로 실행시킵니다.

executionpolicy 엔터
'Restricted' 확인

set-executionpolicy unrestricted
y키
Code language: JavaScript (javascript)

만약 executionpolicy를 해봤는데 Restricted가 나왔다면, 윈도우가 ‘내가 허용한 스크립트 말고는 다 막아버리겠다.’라고 말한 것과 같습니다.

즉, nodemon같은 근본 없는 스크립트들은 다 차단해버리고 있다는 것입니다. 이것을 바꿔줘야겠죠. 위의 코드를 보시고 그대로 따라 하시면 됩니다.

다시 vscode로 가서 nodemon server.js를 실행하면 코드를 바꾸고 저장만 하면 재실행되서 브라우저에 바로 반영됩니다.

8. 경로에 html파일을 연결하자

이제까지는 해당 경로로 들어오면 글자나 메세지를 표시해주기만 했습니다. 이제 html파일 자체를 표시해 보기로 하죠.

간단합니다. 응답.send(블라블라…)를 응답.sendFild(파일이름)해주면 됩니다.

app.get('/',function(요청,응답){
  // 응답.send('여기는 나의 작업용 페이지입니다.');
  응답.sendFile(__dirname + '/idx.html');
});
Code language: JavaScript (javascript)

여기서 __dirname는 현재 내 컴퓨터에서 뒤에 있는 파일의 위치(경로)를 자동으로 찾아주는 것입니다. 거기에다가 파일이름을 더해주면 되겠죠.

한가지 주의점은 파일이름 앞에 ‘/’이것 꼭 붙여주세요. __dirname가 전체경로를 찾아주는데 마지막에 /를 안붙여주거든요. 예를들면 C:\myDjango\pjt\sProject 이런식으로 찾아주는 것이죠. C:\myDjango\pjt\sProject\이렇게 마지막에 역슬래시를 붙여주면 좋은데…

전체코드를 보면 바로 아래파일은 idx.html 파일입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>이곳은 나의 작업장 홈페이지입니다.</h2>
  <a href="http://google.com" target="_blank">구글로 가고 싶다면...</a>
</body>
</html>
Code language: HTML, XML (xml)

아래는 server.js 파일입니다.

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

app.get('/',function(요청,응답){
  // 응답.send('여기는 나의 작업용 페이지입니다.');
  응답.sendFile(__dirname + '/idx.html');
});

app.get('/about',(req,res)=>{
  res.send('여그는 어바웃페이지... 뭔가를 ..뭘 적지?');
});

app.listen(8000, function(){
  console.log('Listening at 8000');
});
Code language: JavaScript (javascript)

브라우저로 가서 localhost:8000을 하면 idx.html 페이지가 보입니다.

9. nodejs 웹서버 만들기 정리

NodeJS의 웹서버 만들기는 위의 기본 코드를 일단 붙여넣고 수정하면서 시작하면 편하겠죠. 노드 웹서버 소개는 여기서 마치겠습니다. 감사합니다.

오늘은 nodejs 웹서버 만들기 기초과정을 살펴봤습니다. 사실 깊이 들어가면 끝도 없지만 일단 시작은 심플하게 하는 것이 좋습니다. 복잡하게 많은 코드들을 치는 것보다 위의 코드로 시작만 하게되면 그 이후는 자연히 공부하면서 해결됩니다.

며칠 지나고 다른 데 신경을 팔다보면 금방 nodejs 웹서버 만들기를 저번에 하긴 했는데 어떻게 시작했지? 하면서 까먹게 됩니다.