먼저 node.js가 뭐고 express가 무엇인지?
우리가 음식을 먹는다고 하면 숟가락 젓가락도 필요하고 음식을 담아서 먹을 접시도 필요하고 나 같은 경우에는 물 광인이라서 얼음이랑 물도 필요하다.. (TMI)
그런데 숟가락, 젓가락, 접시, 컵은 어디 가서 사야만 할 수 있는 것들인데 그것들이 없는 거면 후라이팬에 있는 음식을 손으로 먹어야 하는데, 어쨌든 먹을 수 있기는 하지만 편리하게 먹지는 못한다는 것이다!
그럴 때 우리는 슈퍼마켓에 가서 편하게 먹을 수 있는 도구들을 사야 하는데, 슈퍼마켓을 node.js(NPM), 숟가락, 젓가락 등 도구들을 express라고 생각하면 쉽다
이번 프로젝트에서는 백엔드와 백엔드가 사용하는 프로그래밍 언어 없이 서버를 열고 웹을 만들 건데 그런 것들은 생 자바스크립트로 하기보다는 node.js라는 슈퍼마켓에 있는 express 도구를 이용해서 하려고 한다
node.js랑 NPM의 차이점은?
node.js를 슈퍼마켓 본사, NPM을 지점이라고 생각하면 편하다 (개똥비유)
무엇을 살 때 본사로 가는 게 아니라 내가 사는 동네에 있는 슈퍼마켓 지점에 가는 거니까 직접적인 도구 설치는 npm으로 하면 된다!
대신 설치는 node.js를 설치해야 한다
express 설치하는 방법은?
node.js를 먼저 설치해야 하는데 설치 방법은 유튜브에 검색만 해도 잘 나오고
express는 터미널에 npm i express만 적고 엔터 눌러 주면 node_modules 파일이 만들어지며 (express 사용을 위한 소스들)
잘 설치가 된다
참고로 나는 babel과 nodemon도 같이 설치했다 (개발을 더 편리하게 해 주기 위함임)
1. express 사용하기
서버 열기
import express from 'express';
const PORT = 4000;
const app = express();
const handleServerOpen = () => {
console.log('이 메시지가 보인다면 서버가 잘 작동되고 있다는 뜻이에요')
}
app.listen(PORT, handleServerOpen)먼저 node_modules 폴더에 있는 express를 불러와야 한다
PORT란 우리가 서버를 열었는데 어떤 주소로 들어가야 할지 모른다.. 그때 서버를 들어갈 수 있게 해 주는 문이라고 생각하면 된다
port를 4000이라고 해 뒀으니 (백엔드의 관습이기도 하고 보통은 비어 있어서 4000을 자주 사용한다) localhost:4000으로 들어가면 된다
그리고 express() 함수를 자주 사용하게 될 텐데 그럴 때마다 express()를 적기보다는 app이라는 변수에 담아서 사용하면 된다 (app이라고 쓰는 것도 관습이다)
app.listen()으로 서버를 열어 준다 인자로는 미리 변수로 설정한 4000이라는 port와 서버가 잘 작동되었을 경우를 확인하기 위한 handleServerOpen이라는 함수도 넣어 준다
잘 보인다
2. 브라우저와 소통하기
그리고 이제 4000이라는 port를 통해 문을 열었는데 뭘.. 뭘 해야 할까요?!
그러면 이제 유저가 요청한 것들에 대한 응답을 해 줘야 하는데 요청을 request, 응답을 response라고 합니다
저는 일단 손님이 제 집에 오면 잘 왔다고 환영 인사를 해 줄 건데,
const handleRes = (req, res) => {
return res.send('내 서버에 오신 것을 환영합니다 ^^');
};이런 함수를 하나 만들겠습니다
일단 요청과 응답에 대한 함수를 만들 때는 함수의 인자로 req, res를 적어야 합니다 그것들을 통해 인사를 하든지 말든지 돌려보낼지 해야 하거든요
그리고 응답(res)을 보낼 건데(send) 손님에게 하는 인사가 최종 목적이니 return으로 함수를 종료시켜 주고
res.send()을 써 줍니다
그리고 이 함수를 실행시키려면
app.get('/', handleRes);
app.get('/', 함수)로 적어 주시면 되는데 앞에 /는 메인 홈페이지만 작동되는 것이므로
login이라는 홈페이지에 인사를 적용시키고 싶다면
const handleLogin = (req, res) => {
return res.send('여기는 로그인하는 곳~');
}
app.get('/login', handleLogin)
이렇게 적어 주시면 되겠습니다
3. 중간절차 넣기
그런데 유저가 우리 집 문이 아닌 벽을 부수고 들어온다면? ..뭐 이런 상황이 생길 수 있으니까 중간 절차가 필요합니다
꼭 꼭 제대로된 문을 열고 오라고요
const comfirmMiddle = (req, res, next) => {
const url = req.url;
if (url === '/danger') {
return res.send('여기로 들어오면 안 됩니다 ^^')
}
console.log('아주 잘 들어오셨습니다~')
next();
}그래서 함수를 하나 만들어 줬습니다
인자를 보면 req, res 뒤에 next가 하나 생겼는데 이거는 미들웨어를 사용할 때만 쓰는 인자입니다
코드를 해석해 보자면 req.url은 유저가 현재 있는 사이트의 페이지 주소입니다
req.url이 danger라면.. 즉 localhost:4000/danger라는 페이지로 이동했다면
res.send로 여기 들어오면 안 된다고 경고 메시지를 주고
그럴 경우가 아닌 경우 console.log로 잘 들어왔다고 알려 준 다음에 다음 코드를 실행시켜야 할 거 아니에요?
그래서 next()로 다음 코드로 넘겨 주는 겁니다
그리고 미들웨어를 사용할 수 있는 방법은 두 가지가 있는데
app.use로 모든 페이지에서 사용할 수 있는 미들웨어,
app.get에 최종적인 함수 전에 사용해서 해당 페이지에서만 사용할 수 있게 하는 미들웨어 두 가지가 있는데
저는 app.use로 사용해 볼 겁니다
const dangerPage = (req, res) => {
return res.send('악!!! 여기들어오면안되는데 어떻게왔슈~~');
};그리고 정말 어떻게든 danger페이지로 들어왔을 때 찐 경고문을 알려 줍니다
전체코드//
const comfirmMiddle = (req, res, next) => {
const url = req.url;
if (url === '/danger') {
return res.send('여기로 들어오면 안 됩니다 ^^');
}
console.log('아주 잘 들어오셨습니다~');
next();
};
const dangerPage = (req, res) => {
return res.send('악!!! 여기들어오면안되는데 어떻게왔슈~~');
};
app.use(comfirmMiddle);
app.get('/', handleRes);
app.get('/danger', dangerPage);app.use라는 글로벌 미들웨어는 get 전에 써야 합니다
중간 단계니까요!!
그러면 찐 최종경고문이 안 나오고 미들웨어에 막혀 세미 경고문이 나오게 됩니다..
강의들으면서 쓴 거라서 나도 틀릴 부분이 있음
다들 즐거운 개발 ^^
즐개
(출처: 노마드코드 유튜브 클론 챌린지)
제 개인 네이버 블로그에 작성했던 글을 수정해서 작성하는 것입니다!
