express로 웹 서버 만들기 [npm]
안녕하세요! 오늘은 npm으로 아주 간단한 웹 서버를 만들어보겠습니다. 웹서버를 만들기 전에 노트북에 Node.js와 npm이 설치되어있어야합니다. 보통 Node.js를 설치하면 npm도 같이 설치됩니다. 저는 현재 맥북 M1 을 사용중이기 때문에 homebrew로 Node.js를 설치했습니다.
brew install nodehomebrew가 노트북에 깔려있는 상태에서 위의 명령어를 터미널에 입력하면 node가 다운로드 됩니다.
Visual Studio Code에서 서버를 생성하겠습니다.
먼저, 웹 서버를 구축할 폴더를 생성합니다. 저는 폴더 명을 make_server로 설정하겠습니다.
그 다음 Ctrl+` 단축키로 터미널을 열어서 디렉토리가 make_server를 제대로 가리키도록 합니다.
이제 서버를 시작합니다.
1.
다음 명령어를 터미널에 입력하시면 됩니다. 옵션 -y는 모든 선택사항에 yes를 선택한다는 의미입니다.
npm init -y
pakage.json이 생성됩니다.
2.
npm install express --saveexpress 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 #실행
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을 실행시키면 터미널에 요청이 들어옵니다.
5.
지금까지는 소스코드가 바뀌면 수동으로 서버를 재시작해야했습니다. 하지만 nodemon을 이용한다면 nodemon에서 자동으로 실행되도록 해줍니다.
npm install -g nodemon
코드를 살짝 바뀌었을 경우 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에 대한 요청');
})
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을 올릴 수 있습니다.
이상으로 웹 서버를 제작해봤습니다.