Node.js 는 http 모듈과 웹과 관련된 기본적인 처리를 한다.
하지만, http 모듈만으로는 제대로 된 웹 애플리케이션을 만들기 굉장히 어렵기 때문에
express 모듈을 이용해 http 모듈에 여러 기능을 추가해 쉽게 웹 애플리케이션을 만든다.
웹 요청과 응답
스트림
프로그램이 프로그램 외부와 통신할 때 컴퓨터 속에 흐르는 물길로 비유할 수 있는 스트림을 사용한다.
HTTP 웹 서버의 요청 메시지
웹 브라우저 → 서버
URL: 누구Method: 어떤 방식Headers: 무엇을 요청
HTTP 웹 서버의 응답 메시지
서버 → 웹 브라우저
Status Code: 잘 받았는 지 확인Header: 추가적인 요청 사항 확인Data: 본문
응답 메시지를 사용하면 쿠기를 저장하거나 추출할 수 있고, 강제로 웹 페이지를 이동시킬 수도 있다.
express 모듈을 사용한 서버 생성과 실행
express 모듈을 사용해 서버를 생성할 때는 다음 메소드를 사용한다.
| 메소드 | 설명 |
|---|---|
| express() | 서버 애플리케이션 객체를 생성한다. |
| app.use() | 요청이 왔을 때 실행할 함수를 지정한다. |
| app.listen() | 서버를 실행한다. |
express 모듈로 서버 생성과 실행
// 모듈을 추출한다.
const express = require('express');
// 서버를 생성한다.
const app = express();
// request 이벤트 리스너를 설정한다.
app.use((request, response) => {
response.send('<h1>Hello express</h1>');
});
// 서버를 실행한다.
app.listen(52273, () => {
console.log('Server running at http://127.0.0.1:52273');
});Port
포트는 컴퓨터와 컴퓨터를 연결하는 정보의 출입구 역할을 하는 곳이다.
페이지 라우팅
클라이언트 요청에 적절한 페이지를 제공하는 기술
express 모듈은 app 객체의 다음 메소드를 활용해서 페이지 라우팅을 한다.
| 메소드 | 설명 |
|---|---|
| get(path, callback) | GET 요청이 발생했을 때 이벤트 리스너를 지정한다. |
| post(path, callback) | POST 요청이 발생했을 때 이벤트 리스너를 지정한다. |
| put(path, callback) | PUT 요청이 발생했을 때 이벤트 리스너를 지정한다. |
| delete(path, callback) | DELETE 요청이 발생했을 때 이벤트 리스너를 지정한다. |
| all(path, callback) | 모든 요청이 발생했을 때 이벤트 리스너를 지정한다. |
GET, POST, PUT, DELETE
웹 요청을 할 때는, 여러 정보를 서버에 전달한다.
이때 메소드 값을 전달한다.
GET, POST, PUT, DELETE, HEAD, OPTION, TRACE, CONNECT, ...을 적어서 보내는 것이 규칙(프로토콜)이며, 목적에 맞게 사용하면 된다.
GET: 값을 확인할 때POST: 값을 전달할 때PUT: 값을 수정할 때DELETE: 값을 제거할 때
토큰(token)
페이지 라우팅을 할 때는 토큰(token)을 활용할 수 있다.
토큰은 :토큰_이름 형태로 설정한다.
요청 메시지와 응답 메시지
response.send() 메소드를 사용하면 문자열을 클라이언트에 제공할 수 있다.
response 객체
response 객체에는 여러 가지 메소드가 있다.
| 메소드 | 설명 |
|---|---|
| send() | 데이터 본문을 제공한다. |
| status() | 상태 코드를 제공한다. |
| set() | 헤더를 설정한다. |
Content-Type
서버가 클라이언트 웹 브라우저에 데이터를 제공하면,
웹 브라우저는 해당 데이터가 어떤 데이터인지 구분한다.
서버 → Content-Type
→ 웹 브라우저 → 헤더 확인 → 제공된 데이터의 형태 확인여기서 형태는 MIME 형식이라는 문자열로 제공된다.
HTTP 상태 코드
대표적인 HTTP 상태 코드
| HTTP 상태 코드 | 설명 | 예 |
|---|---|---|
| 1XX | 처리 중 | 100 Continue |
| 2XX | 성공 | 200 OK |
| 3XX | 리다이렉트 | 300 Multiple Choices |
status() 메소드
| 메소드 | 설명 |
|---|---|
| status() | 상태 코드를 지정한다. |
리다이렉트
웹 브라우저가 리다이렉트를 확인하면 화면을 출력하지 않고, 응답 헤더에 있는 Location 속성을 확인해서 해당 위치로 이동한다.
| 메소드 | 설명 |
|---|---|
| redirect() | 리다이렉트한다. |
request 객체
요청 매개 변수
주소 분석
| 분류 | 값 | 설명 |
|---|---|---|
| 프로토콜 | HTTPS | 통신에 사용되는 규칙을 의미한다. |
| 호스트 | (search.)naver.com | 애플리케이션 서버(또는 분산 장치 등)의 위치를 의미한다. |
| URL | /search.naver | 애플리케이션 서버 내부에서 라우트 위치를 나타낸다. |
요청 매개변수 추출
- query 객체 사용
- URL 뒤에
?기호 삽입 키=값형태로 값을&로 구분해서 입력한다.
| 요청 매개 변수 | ?where=nexearch &query=초콜릿 &sm=top_hty &fbm=0 &ie=utf8 | 추가적인 정보를 의미한다. |
|---|
미들웨어
앞의 내용 중 조금 복잡하게 구현해야 하는 것이 있는데, express 모듈은 이것을 쉽게 활용할 수 있도록 여러 가지 기능을 제공한다.
이를미들웨어(Middleware)라고 한다.
미들웨어 설정 메소드
| 메소드 | 설명 |
|---|---|
| use() | 미드웨어를 설정한다. |
정적 파일(Static File) 제공
웹 페이지에서 변경되지 않는 요소(이미지, 음악, 자바스크립트 파일, 스타일시트 파일, ...)를 쉽게 제공해 주는 기능
body-parser 미들웨어
body-parser 미들웨어는 요청 본문을 분석해 주는 미들웨어이다.
클라이언트 → 서버 (데이터 전송)
클라이언트가 서버로 데이터를 전송하는 방법
- URL 입력
URL에 요청 매개 변수를 입력하면, 추가적인 정보를 객체 형태로 전달할 수 있다.
하지만, URL을 사용한 요청은 주소에 정보가 남는다는 단점이 있다. - 요청 본문(Request Body)
요청 본문(Request Body)
서버가 클라이언트로 데이터를 전달할 때
응답 본문(Body)와 응답 본문의 종류(Content-Type)를 함께 전달했던 것처럼,
클라이언트도 서버로 본문을 전달할 때
요청 본문의 종류(Encoding-Type)을 함께 전달해주어야 한다.
마찬가지로 MIME 형식이다.
요청 본문의 종류
| MIME 형식 | 설명 |
|---|---|
| application/x-www-from-urlemcoded | 웹 브라우저에서 입력 양식을 POST, PUT, DELETE 방식 등으로 전달할 때 사용하는 기본적인 요청 방식이다. |
| application/json | JSON 데이터로 요청하는 방식이다. |
| multipart/form-data | 대용량 파일을 전송할 때 사용하는 요청 방식이다. |
- 서버 → 클라이언트 데이터 전송
서버에서 대충 보내면 잘 만들어진 웹 브라우저가 알아서 Content-Type을 분석해 본문을 출력한다. - 클라이언트 → 서버 데이터 전송
클라이언트에서 서버로 데이터를 전달한 이후의 모든 처리는 서버를 개발하는 우리가 처리해야 하기 때문에,
클라이언트가 어떤 Encoding-Type으로 요청했는지 확인하고 변환해서 읽어야 한다.
⇒ Encoding-Type에 따라 변환을 해야하므로 굉장히 귀찮고 복잡함
body-parser 미들웨어
위의 Encoding-Type에 따른 데이터 변환을 쉽게 해주는 미들웨어가 body-parser 이다.
form 태그를 사용하면 action 속성에 지정한 URL에 method 속성에 지정한 방식으로 데이터를 요청할 수 있다.
action 속성을 지정하지 않으면, 현재 URL로 method 속성에 지정한 방식으로 데이터를 요청한다.
<form method="post">
<input type="text" name="a" />; <!--서버에 a라는 이름으로 보내겠다!-->
<input type="text" name="b" />;
<input type="submit" />; <!--제출 버튼-->
</form>GET
- url을 통해 데이터 전달
- 검색인 경우 데이터 전달이 쉽다
- 하지만 보안의 측면에서는 좋지 않다.
POST
- Header를 통해 데이터 전달
- 실제 서버에 보내는 데이터: Payload에 담겨 있다.
