6장. 익스프레스 웹 서버 만들기

6.1 익스프레스 프로젝트 시작하기

learn-express 폴더를 만들고, 항상 package.json을 제일 먼저 생성해야한다는 사실 잊지 말자!
package.json의 scripts 부분에 start 속성도 잊지말고 넣어줘야한다.

...
"scripts" : {
	"start" : "nodemon app"
},
...

nodemon app 은 app.js를 nodemon으로 실행한다는 것이다.
서버코드에 수정 사항이 생길 때마다 재시작하기는 번거로워서 nodemon 모듈로 서버를 자동으로 재시작한다.

6.2 자주 사용하는 미들웨어

미들웨어

요청과 응답의 중간에 위치하여 미들웨어라고 불리는 이것은 익스프레스의 핵심이다. 라우터와 에러 핸들러 또한 미들웨어의 일종으로 미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고, 나쁜 요청을 걸러내기도 한다.

app.use(미들웨어) 형태로 사용하며, 매개변수가 req, res, next인 함수를 넣으면 된다.

6.2.1 morgan

morgan 연결 후 localhost:3000에 다시 접속해보면 기존 로그 외에 추가적인 로그를 볼 수 있다.

app.use(morgan('dev'));

dev 모드에서 요청과 응답을 한눈에 볼 수 있어서 편리하다.

6.2.2 static

정적인 파일들을 제공하는 라우터 역할을 한다.
기본적으로 제공되어 설치가 필요없으며 express 객체 안에서 꺼내서 장착하면 된다.

app.use('요청 경로', express.static('실제 경로'));
app.use('/', express.static(path.join(__dirname, 'public')));

서버의 폴더 경로와 요청 경로가 달라서 외부인이 서버의 구조를 쉽게 파악할 수 없어서 보안에 도움이 된다. 또한, 정적 파일들을 알아서 제공해주므로 fs.readFile로 파일을 직접 읽어서 전송할 필요가 없다.

6.2.3 body-parser

요청의 본문에 있는 데이터를 해석해서 req.body 객체로 만들어주는 미들웨어.
보통 폼 데이터나 AJAX 요청의 데이터를 처리하지만 멀티파트(이미지, 동영상, 파일) 데이터는 처리하지 못한다.

app.use(express.json());
app.use(express.urlencoded({ extended: false}));

JSON, URL-encoded 이 외에도 Raw, Text형식의 데이터를 추가로 해석할 수 있다.
Raw는 요청의 본문이 버퍼 데이터일 때, Text는 텍스트 데이터일 때 해석하는 미들웨어다.

6.2.4 cookie-parser

요청에 동봉된 쿠키를 해석해 req.cookies 객체로 만든다.

app.use(cookieParser(비밀키));

인수로 비밀키를 넣어서 서명된 쿠키가 있는 경우, 제공한 비밀 키를 통해 해당 쿠키가 내 서버가 만든 쿠키라는 것을 검증할 수 있다. 비밀 키를 통해 만들어낸 서명을 쿠키 값 뒤에 붙인다.

쿠키를 지우려면 키와 값 외에 옵션도 정확히 일치해야 쿠키가 지워진다. 단, expires나 maxAge 옵션은 일치하지 않아도 된다.

6.2.5 express-session

세션 관리용 미들웨어.
로그인등의 이유로 세션을 구현하거나 특정 사용자를 위한 데이터를 임시적으로 저장해둘 때 매우 유용하다.

express-session은 인수로 세션에 대한 설정을 받는다.

• resave : 요청이 올 때, 세션에 수정 사항이 생기지 않더라도 세션을 다시 저장할지 설정하는 것
• saveUninitialized : 세션에 저장할 내역이 없더라도 처음부터 세션을 생성할지 설정하는 것

6.2.5 미들웨어의 특성 활용하기

미들웨어는 req, res, next를 매개변수로 가지는 함수(에러 처리 미들웨어만 예외적으로 err, req, res, next를 가진다)로서 app.use, app.get, app.post 등으로 장착한다.

여러 개의 미들웨어를 장착할 수도 있으며, 다음 미들웨어로 넘어가려면 next 함수를 호출해야한다.

• next를 호출하지 않는 미들웨어는 res.send / res.sendFile 등의 메서드로 응답을 보낸다.
• express.static과 같은 미들웨어는 정적 파일을 제공할 때 next 대신 res.sendFile 메서드로 응답을 보낸다.
• 미들웨어 장착 순서에 따라 어떤 미들웨어는 실행되지 않을 수 있다.

미들웨어 간에 데이터를 전달하는 방법도 있다.
세션을 사용한다면 req.session 객체에 넣어도 되지만, 요청이 끝날 때까지만 데이터를 유지하고 싶다면 req 객체에 데이터를 넣으면 된다. 요청이 처리된느 동안 req.data를 통해서 미들웨어 간에 데이터를 공유할 수 있다.

미들웨어 안에 미들웨어를 넣어서 사용할 수 있다.
이 패턴이 유용한 이유는 기존 미들웨어의 기능을 확장할 수 있기 때문이다.

6.2.7 multer

이미지, 동영상 등을 비롯한 여러 가지 파일들을 멀티파트 형식으로 업로드할 때 사용하는 미들웨어.
멀티파트 형식이란 enctype이 multipart/form-data인 폼을 통해 업로드하는 데이터의 형식을 의미한다.

multer 패키지 안에는 여러 종류의 미들웨어가 들어있다.

• 파일 하나만 업로드하는 경우, single 미들웨어를 사용
• 여러 파일을 업로드하는 경우, multiple 을 사용
• 파일을 여러개 업로드하지만 input 태그나 폼 데이터의 키가 다른 경우, fields 를 사용

6.3 Router 객체로 라우팅 분리하기

익스프레스를 사용하는 이유 중 하나는 라우팅을 깔끔하게 관리할 수 있다는 점이다. 라우터를 많이 연결하면 코드가 매우 길어져서 익스프레스에서는 라우터를 분리할 수 있는 방법을 제공한다.

app.js에서 app.get 같은 메서드가 라우터 부분이다.

라우터 주소에는 정규표현식을 비롯한 특수 패턴을 사용할 수 있다. 자주 쓰는 패턴 중 하나는 라우트 매개변수라고 불리는 패턴이다. '/user/:id' 주소에 :id 는 문자 그대로의 의미가 아닌 다른 값이 들어왔을 때, 그 값을 조회할 수 있다는 의미이다.
** 단, 일반 라우터보다 뒤에 위치해서 사용해야 한다. 그래야 다른 라우터를 방해하지 않는다.

6.4 req, res 객체 살펴보기

익스프레스의 req, res객체는 http 모듈의 req, res 객체를 확장한 것이다. 기존 http 모듈의 메서드도 사용할 수 있고, 익스프레스가 추가한 메서드나 속성을 사용할 수 있다.

익스프레스의 메서드가 편리해서 잘 안쓰지만 여기서는 사용하는 http 모듈의 메서드

• req.app : req 객체를 통해 app 객체에 접근 가능
• req.body : body-parser 미들웨어가 만드는 요청의 본문을 해석한 객체
• req.cookies : cookie-parser 미들웨어가 만드는 요청의 쿠키를 해석한 객체
• req.ip : 요청의 ip 주소가 담겨 있음
• req.params : 라우트 매개변수에 대한 정보가 담긴 객체
• req.query : 쿼리스트링에 대한 정보가 담긴 객체
• req.signedCookies : 서명된 쿠키들은 req.cookies 대신 여기에 담겨 있음
• req.get(헤더 이름) : 헤더의 값을 가져오고 싶을 때 사용

• res.app : req.app처럼 res객체를 통해 app객체에 접근 가능
• res.cookie(키, 값, 옵션) : 쿠키를 설정하는 메서드
• res.clearCookir(키, 값, 옵션) : 쿠키 제거
• res.end() : 데이터 없이 응답을 보냄
• res.json(JSON) : JSON 형식의 응답 보냄
• res.redirect(주소) : 리다이렉트할 주소와 함께 응답을 보냄
• res.render(뷰, 데이터) : 템플릿 엔진을 렌더링해서 응답할 때 사용
• res.send(데이터) : 데이터(문자열, HTML, 버퍼, 객체, 배열 등)와 함께 응답을 보냄
• res.sendFile(경로) : 경로에 위치한 파일을 응답
• res.set(헤더, 값) : 응답의 헤더를 설정
• res.status(코드) : 응답 시의 HTTP 상태 코드 지정