express로 웹 서버 만들기 [npm]

 안녕하세요! 오늘은 npm으로 아주 간단한 웹 서버를 만들어보겠습니다. 웹서버를 만들기 전에 노트북에 Node.js와 npm이 설치되어있어야합니다. 보통 Node.js를 설치하면 npm도 같이 설치됩니다. 저는 현재 맥북 M1 을 사용중이기 때문에 homebrew로 Node.js를 설치했습니다.

brew install node

 homebrew가 노트북에 깔려있는 상태에서 위의 명령어를 터미널에 입력하면 node가 다운로드 됩니다.

---

 Visual Studio Code에서 서버를 생성하겠습니다.

 

 먼저, 웹 서버를 구축할 폴더를 생성합니다. 저는 폴더 명을 make_server로 설정하겠습니다.

 

 그 다음 Ctrl+` 단축키로 터미널을 열어서 디렉토리가 make_server를 제대로 가리키도록 합니다.

 

---

 

이제 서버를 시작합니다. 

1. 

다음 명령어를 터미널에 입력하시면 됩니다. 옵션 -y는 모든 선택사항에 yes를 선택한다는 의미입니다.

npm init -y

터미널

pakage.json 생성

 pakage.json이 생성됩니다. 

---

2. 

npm install express --save

express module을 다운로드합니다.

모듈이 잘 깔린 모습을 알 수 있습니다. node_modules에는 의존성 모듈까지 제대로 다운로드된 것을 알 수 입니다. pakage-lock.json 파일에는 모듈의 버전 정보를 기록되어있습니다.

---

3.  

 main.js 파일을 생성후 실행합니다.

/* main.js */

const express=require('express'); //module import
const app=express() // express 실행

app.listen(3000, ()=>{ // 서버 생성, 포트번호:3000, call back 함수
    console.log('서버 생성');
})

/* terminal */

node main.js #실행

main.js 실행

 

 chrome에서 localhost:3000에 접속한다면 서버가 올바르게 생성된 것을 알 수 있습니다. cannot GET 은 liste에 답변이 오지 않았다는 의미입니다.

---

4.

 get을 받아보도록 하겠습니다. get은 서버에 요청하는 방식(GET,POST) 중 하나입니다. 

/* main.js */

const express=require('express'); //module import
const app=express() // express 실행

app.listen(3000, ()=>{ // 서버 생성, 포트번호:3000, call back 함수
    console.log('listen을 시작했을때');
}) 

//처리해주는 루틴들을 추가 ...
//get이 도달하는 목적지에 따라서 다양하게 get이 존재
app.get('/',(req,res)=>{
    console.log('루트에 대한 요청');
}) 

app.get('/about',(req,res)=>{
    console.log('about에 대한 요청');
})

 

 터미널에서 서버를 재시작하고 localhost:3000과 localhost:3000/about을 실행시키면 터미널에 요청이 들어옵니다.

localhost:3000 chrome

localhost:3000/about chrome

terminal

---

5.

 지금까지는 소스코드가 바뀌면 수동으로 서버를 재시작해야했습니다. 하지만 nodemon을 이용한다면 nodemon에서 자동으로 실행되도록 해줍니다.

npm install -g nodemon

nodemo의 설치와 실행

 코드를 살짝 바뀌었을 경우 nodemon이 알아서 재실행합니다.

---

6.

 웹 페이지에 글이 써지도록 send함수를 활용봅시다.

const express=require('express'); //module import
const app=express() // express 실행

app.listen(3000, ()=>{ // 서버 생성, 포트번호:3000, call back 함수
    console.log('listen을 시작했을때');
}) 

//처리해주는 루틴들을 추가 ...
//get이 도달하는 목적지에 따라서 다양하게 get이 존재
app.get('/',(req,res)=>{
    console.log('루트에 대한 요청');
    res.send('루트에 대한 요청');
}) 

app.get('/about',(req,res)=>{
    console.log('===> about에 대한 요청');
    res.send('about에 대한 요청');
})

localhost:3000 chrome

localhost:3000/about chrome

---

7.

 이제 서버에서 요청을 받을 경우 html 파일을 열 수 있도록 해봅시다.

 먼저, make_server 폴더에 pages 폴더를 생성한 후 about.html,index.html,working.html 파일을 생성합니다. 파일에는 간단하게 h1 태그만 넣었습니다.

/* main.js */

const express=require('express'); //module import
const app=express() // express 실행

app.listen(3000, ()=>{ // 서버 생성, 포트번호:3000, call back 함수
    console.log('listen을 시작했을때');
}) 

//처리해주는 루틴들을 추가 ...
//get이 도달하는 목적지에 따라서 다양하게 get이 존재
app.get('/',(req,res)=>{
    console.log('루트에 대한 요청');
    res.sendFile(__dirname+'/pages/index.html');

}) 

app.get('/about',(req,res)=>{
    console.log('===> about에 대한 요청');
    res.sendFile(__dirname+'/pages/about.html')

})

 파일을 불러와야하기 때문에 res.send 코드를 전부 res.sendFile로 바꿔줍니다. 바꾼 후에 실행시키면 다음과 같이 서버에 html을 올릴 수 있습니다.

localhost:3000/about chrome

localhost:3000 chrome

---

 이상으로 웹 서버를 제작해봤습니다.