express가 몬데요
Node.js를 위한 빠르고 쉬운 웹 프레임워크.
파이썬의 Django, 자바의 spring처럼 JS의 웹 프레임워크이다.
웹 프레임워크는 몬데요
프레임워크와 라이브러리의 차이
(https://velog.io/@suhoag/%EC%9B%B9%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC)
소프트웨어 개발에 있어서 하나의 뼈대 역할을 해 준다. 어떠한 프로그램을 만들기 위한 기본 틀 정도로 생각하면 쉽다. 개발에 바탕이 되는 템플릿 및 클래스와 인터페이스의 집합체.
다양한 웹 프레임워크가 있지만 현재까지 단연코, 단연코 많이 사용하는 것이 이 express이다. 이 프레임워크는 마지막 커밋이 몇 년 전이라고 뜰 정도로 준비가 다 됐고, 완벽하고 완성형에 가까운 프레임워크이다. 그렇기에 많이 쓰는 것이겠지요. npm으로 설치가 가능하다.
익스프레스는 서버를 만들고, 라우팅을 돕고, 미들웨어를 추가할 수 있게 해 준다.
서버 만들기
//express를 사용하겠다는 선언
const express = require("express");
//변수에 익스프레스를 실행해서 담았음
const app = express();
const PORT = 4000;
app.listen(PORT);
//localhost:4000으로 로딩하면 페이지가 뜬다.
//라우터를 연결해 주지 않아서 Cannot Get /이 나오는 게 정상 (인덱스(루트)를 가지고 올 수 없음)(기본적으로 npm으로 익스프레스를 설치해야 된다) 아주 쉽게 만들 수 있다.
function handelListening () {
console.log(`listening: http://localhost:${PORT}`);
}
//서버가 응답할 수 있게 만드는 함수. 쉽게 말하자면 메인 페이지를 띄운다.
//req, res는 웹이 어떻게 움직이는지와 연관이 있다. get request에 대한 응답을 줘야 하는데(HTML응답같은), 그것을 req와 res로 주게 된다.
//req(의뢰)는 우리가 정보를 받는 것이다. 어떠한 사용자가 홈페이지에 접속했는지, 어떤 종류의 데이터가 전송됐는 같은 정보를 받을 때 req를 사용한다. 만약, 우리가 app.post로 아이디와 비밀번호를 받는다면 req로 그 정보를 받을 수 있다.
//res(응답)는 우리가 주는 것이다. 어떠한 HTML로 응답을 하거나, 에러 등등으로 이 웹에 접속한 사람에게 무엇인가를 주어야 한다.
//req, res가 없다면 페이지는 다음으로 넘어가지 않고 계속 로딩이 될 것이다.
function handleHome (req, res) {
res.send('홈입니다.');
}
//get은 어떠한 정보를 브라우저에게 주는 것이고, post는 브라우저에서 정보를 받는 것이다. 지금은 '/'(메인)에 온 사람들을 위한 페이지를 띄울 것이기 때문에 get을 쓴다.
app.get('/', handleHome)
//app이 PORT를 listen하기 시작하면 콜백 함수를 실행시킨다
app.listen(PORT, handleListening)메인 페이지 이외의 다른 페이지를 만들고 싶다면 위의 것과 똑같이 해 주면 된다.
function handleProfile (req, res) {
res.send('프로필입니다.');
}
app.get('/profile', handleProfile)그리고 이게 바로 라우트를 생성하는 법이다.
서버를 생성하고, 라우트를 생성하고, 서버에 응답하고.
라우팅, 라우터 (Routing, Router)
라우팅
const express = require("express");
const app = express();
const PORT = 4000;
function handleHome (req, res) {
res.send('홈입니다.');
}
//얘가 라우터이고, 경로를 찾아가게 하는 과정을 라우팅이라고 함
app.get('/', handleHome)
app.listen(PORT)서버에 클라이언트가 요청한 데이터를 전달할 수 있는 길을 만들어 주는 것을 일컫음.
쉽게 말해서 서버와 페이지를 연결해 주는 통로라고 생각하면 쉽다. (물론 페이지만 연결해 주는 건 아니지만)
메인 화면으로 접속하면 handleHome 콜백 함수를 실행한다.
라우터
라우트를 따로 정리할 수 있게 돕는 express의 내장 모듈. 복잡함을 쪼개 주는 데에 사용할 수 있다.
const express = require("express");
// 유저라우터를 이런식으로 설정해 놓고
const userRouter = express.Router();
function userIndex (req, res) { res.send('유저 페이지입니다.');}
function userEdit (req, res) { res.send('프로필 수정합니다.');}
userRouter.get("/", userIndex)
userRouter.get("/edit", userEdit)
//use메서드를 사용해 두번째 파라미터에 설정한 라우터를 넣어 주면,
//누군가 user 경로에 접속하면 설정한 라우터 전체(index, edit)를 사용하겠다는 의미이다.
//예를 들어 누군가 /user에 접속하면 userIndex가 실행이 된다.
//그리고 /user이 메인이 되기 때문에, edit같은 경우엔 /user/edit같은 경로가 된다.
app.use("/user", userRouter);익스프레스는 이런 식으로 작게 쪼개어서 사용할 수 있게 만든다. 정리벽(ㅋㅋ)있는 사람에겐 아주 좋다.
미들웨어(middleWares)
미들웨어는 양 쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어, 네트워크를 통해서 연결된 여러 개의 컴퓨터에 있는 많은 프로세스들에게 어떤 서비스를 사용할 수 있도록 연결해 주는 소프트웨어를 말한다. 3계층 클라이언트/서버 구조에서 미들웨어가 존재한다. 웹 브라우저에서 데이터베이스로부터 데이터를 저장하거나 읽어올 수 있게 중간에 미들웨어가 존재하게 된다.
express에서의 모든 함수는 미들웨어가 될 수 있다.
(https://ko.wikipedia.org/wiki/%EB%AF%B8%EB%93%A4%EC%9B%A8%EC%96%B4)
예를 들어, (실제 있었던 일이지만 ^-T) 넥슨 마비노기 영웅전에 들어가서 로그인을 했다. 그런데 팝업창 하나가 뜨더니 '해킹으로 인하여 로그인을 할 수 없으니 고객센터로 연락해 주세요.' 라며 다시 본래 있던 곳으로 리다이렉트를 해 버렸다.
페이지에 로그인을 하게 되면 로그인이 된 창이 뜨는 게 일반적이지만, 저렇게 해킹 팝업이 뜨면서 본래의 비로그인된 창으로 리다이렉트를 하게 만드는 게 미들웨어이다. 요청과 응답 사이에서 벌어지는 일들을 처리해 주는 소프트웨어를 말한다. 그렇기에 클릭과 입장은 단번에 이루어지지만 단 두 개만 있는 것은 아니며, 그 짧은 찰나에 수많은 미들웨어들의 검사(?)를 통하여 적합하다고 판정이 되면 페이지를 띄울 수 있다. 미들웨어는 갯수에 상관 없이 넣을 수 있다.
비단 로그인만이 아니라 보안이나 파일 전송할 때 중간에 가로채거나 쿠키를 파싱하는 등 많은 것을 할 수 있다.
//익스프레스의 모든 함수는 미들웨어가 될 수 있다.
//next는 요청을 계속 처리할지, 그래서 그 요청이 다음 함수로 처리될지에 대한 권한이 있는 key이다.
//express의 모든 커넥션(라우트라든지 그러한 것들)을 다루는 건 req, res, next를 가지고 있다.
//그런데 왜 handleHome에는 넣지 않았나요? 마지막 함수이기 때문.
function firstMiddleWare (req,res,next) {
return console.log('저는 미들웨어입니다.');
next()
}
//만약, 중간에서 미들웨어로 중간에서 끊고 싶다면 next를 없애면 된다. 그게 최종 응답 메서드가 되는 것.
//요청과 응답 사이에 끼워넣으면 된다.
app.get('/', firstMiddleWare, handleHome)전역 미들웨어
위에서 사용한 미들웨어는 하나의 라우터에 한정된 미들웨어이다. 그런데 보안을 메인 페이지에만 둘 것도 아니고, 전체에 둬야 되지 않나..? -> 한 개의 라우터 말고 라우터 전체에게 쓰고 싶을 땐 전역 미들웨어를 사용하면 된다.
미들웨어의 위치는 아주 중요하다. 어디에 두느냐에 따라서 미들웨어가 실행이 될 수도, 되지 않을 수도 있다. 실행하고 싶은 라우팅 상단에 올려야 된다. top to bottom이 되기 때문.
function firstMiddleWare (req, res, next) {
return console.log('저는 중간입니다.');
}
app.use(firstMiddleWare);
app.get('/ranking', handleRanking);
//만약 여기에 app.use(미들웨어)를 놓게 된다면 랭킹 라우터에겐 미들웨어가 적용되지 않는다.
app.get('/profile', handleProfile);
app.get('/', handleHome);
app.listen(4000);