페이지 라우팅

클라이언트 요청에 적절한 페이지를 제공하는 기술

페이지 라우팅 메서드

메서드	설명
get(path,callback)	GET 요청이 발생했을 때 이벤트 리스너를 지정
post(path,callback)	POST 요청이 발생했을 때 이벤트 리스너를 지정
put(path,callback)	PUT 요청이 발생했을 때 이벤트 리스너를 지정
delete(path,callback)	DELETE 요청이 발생했을 때 이벤트 리스너를 지정
all(path,callback)	모든 요청이 발생했을 때 이벤트 리스너를 지정

페이지 라우팅 시 토큰 활용

• 라우팅 경로로 데이터를 전달하는ㄴ 방법
• path 문자열에 ‘:토큰_이름’ 형태로 설정
• 토큰에 해당하는 문자열은 request 객체의 parmas.토큰_이름 속설으로 전달함

const express = require('express');
const app = express();
 
app.get('/main/:s1/sub/:s2', (request, response) => {
const str1 = request.params.s1;
const str2 = request.params.s2;
response.send(`<h1>main = ${str1}<br>sub = ${str2}</h1>`);
});
 
app.listen(52273, () => {
console.log('Server running at http://localhost:52273');
});

요청과 응답

repsonse 객체

• 클라이언트에게 응답하는 정보를 담은 객체
• send() 메서드는 클라이언트에게 body를 전달하므로 가장 마지막에 한 번만 실행 가능

response 객체의 기본 메서드

메서드	설명
send()	데이터 본문을 제공
status()	상태 코드를 제공
set()	헤더를 설정

상태 코드와 헤더 설정

HTTP 상태 코드: 서버가 클라이언트에 알려주는 해당 경로의 상태

HTTP 상태 코드	설명	예
1XX	처리중	100 Continue
2XX	성공	200 OK
3XX	리다이렉트	300 Mulitiple Choices
4XX	클라이언트 오류	400 Bad Request
5XX	서버 오류	500 Internal Server Error

const express = require("express");
const app = express();
app.get("*", (request, response) => {
  response.status(404);
  response.set("methodA", "ABCDE");
  response.set({
    methodB1: "FGHIJ",
    methodB2: "KLMNO",
  });
  response.send("이것은 본문");
});
app.listen(52273, () => {
  console.log("Server running at http://127.0.0.1:52273");
});
 

Content-Type

• 서버가 Content-Type 제공
  • 웹 브라우저는 헤더를 확인, 제공된 데이터의 형태 확인(MIME라는 문자열로 제공)
• type() 메서드로 MIME 형식 지정

MIME 형식	설명
text/plain	기본적인 텍스트
text/html	html 데이터
image/png	png 데이터
audio/mpe	mp3 음악 파일
video/mpeg	MPEG 비디오 파일
application/json	json 데이터
multipart/form-data	입력 양식 데이터

const express = require("express");
const fs = require("fs");
const app = express();
app.get("/image", (request, response) => {
  fs.readFile("myimage.png", (error, data) => {
    response.type("image/png");
    response.send(data);
  });
});
app.get("/audio", (request, response) => {
  fs.readFile("myaudio.mp3", (error, data) => {
    response.type("audio/mpeg");
    response.send(data);
  });
});
app.listen(52273, () => {
  console.log("Check http://127.0.0.1:52273/image");
  console.log("Check http://127.0.0.1:52273/audio");
});
 

리다이렉트

• 웹 브라우저가 리다이렉트를 확인하면 화면을 출력하지 않고, 응답 헤더에 있는 Location 속성을 확인해서 해당 위치로 이동
• 특정 경로로 웹 브라우저를 인도할 때 사용
• redirect() 메서드를 통해 이동

const express = require("express");
const app = express();
 
app.get("*", (request, response) => {
  response.redirect("https://www.hufs.ac.kr");
});
 
app.listen(52273, () => {
  console.log("Server running at http://127.0.0.1:52273");
});

요청 매개 변수 추출

• 클라이언트에서 form 방식을 통해 다른 url로 넘어갔을 때 요청 매개 변수를 추출하는 방법
• GET 방식 요청 매개 변수

주소 분석

https://search.naver.com/search.naver?where=nexearch&query=초콜릿&sm=top_hty&fbm=0&ie=utf8

분류	값	설명
프로토콜	HTTPS	통신에 사용되는 규칙
호스트	(search.)naver.com	애플리케이션 서버(또는 분산 장치 등)의 위치
URL 요청 매개 변수	/search.naver?where=nexearch&query=초콜릿&sm=top_hty&fbm=0&ie=utf8	애플리케이션 서버 내부에서 라우트 위치 + 추가적인 정보

const express = require("express");
const app = express();
app.get("*", (request, response) => {
  console.log("request.query:", request.query); 
  // request.query: { name: '홍길동', age: '32', skill: [ '변신', '공중부양' ] }, name = 홍길동, age = 32, skill = [ '변신', '공중부양' ]
  console.log(" name =", request.query.name);
  console.log(" age =", request.query.age);
  console.log("skill =", request.query.skill);
  response.send(request.query);
});
 
app.listen(52273, () => {
  console.log(
    "Check http://127.0.0.1:52273?name=홍길동&age=32&skill=변신&skill=공중부양"
  );
});
 

미들웨어

Express에서의 미들웨어

• Express는 자체적인 최소한의 기능을 갖춘 라우팅 웹 프레임워크
• Express 애플리케이션은 일련의 미들웨어 함수 호출로 구성
• 미들웨어 함수? 클라이언트의 Request를 Response로 반환하기까지 중간에 거치는 모든 함수

모듈과 미들웨어

• 미들웨어: 요청과 응답 사이에서 중간처리를 하는 모든 함수들
• 모듈: 이러한 함수들의 묶음
• 내장 모듈: Node.js에서 기본적으로 지원하는 모듈들
• 확장 모듈: Node.js 사용자들이 필요에 의해 만들어낸 오픈소스 기반의 모듈들

static 미들웨어

• 웹 페이지에서 변경되지 않는 요소(이미지, JS 파일, CSS 파일 등)를 제공하는 기능
• 자주 사용되므로 express에서 직접 제공
• 정적 파일을 제공할 폴더를 지정: app.use(express.static(‘폴더명’));

static 미들웨어 예)

• public 폴더를 만들고
• public 폴더에 hello.html, audio.mp3 파일 넣음
• public/image 폴더에 image.png 파일 넣음

const express = require("express");
const app = express();
 
//기본 url 뒤에 public 폴더의 위치에 바로 접근 가능
//public 폴더에 hello.html이 있으면 localhost:52273/hello.html 로 접근하면 바로 띄워줌
app.use(express.static("public"));
app.get("*", (request, response) => {
  response.status(404);
  //경로가 없기 때문에 static한 요소가 지정되지 않아 출력
  response.send("해당 경로에는 아무것도 없습니다.");
});
app.listen(52273, () => {
  console.log("Server running at http://localhost:52273");
});

클라이언트가 서버로 데이터 전송 방법

• GET 방식
  • URL을 통해 데이터를 전달하는 방식
  • URL 토큰과 URL 요청 매개 변수로 전달
  • 주소에 데이터가 공개된느 문제가 있음
• POST 방식
  • 요청 본문으로 데이터를 전달

요청 본문

• 클라이언트가 서버로 본문을 전달할 때 요청 본문의 종류를 MIME 형식으로 전달
  • 서버에서 클라이언트로 응답 본문을 보내면 웹 브라우저가 알아서 Content-Type을 분석하여 처리
  • 클라이언트에서 서버로 요청 본문을 보내면 서버 개발자가 직접 Content-Type에 따른 대응을 해야 함

body-parser 미들웨어

• 요청한 본문의 Content-Type에 따라 본문을 분석해주는 미들웨어
  • 단, multipart 형태는 분석하지 못함
  • body-parser 미들웨어는 express에 기본 설치됨
• application/x-www-form-urlencoded 형식의 본문을 처리하는 방법
  • app.use(express.urlencoded({extended: false}));
  • extended: false는 node.js에 포함된 queryString 라이브러리를 사용한다는 의미

요청 본문 종류

MIME 형식	설명
application/s-www-form-urlencoded	웹 브라우저에서 입력 양식을 POST,PUT,DELETE 방식 등으로 전달할 때 사용하는 기본적인 요청 형식
application/json	JSON 데이터로 요청하는 방식
multipart/form-data	대용량 파일을 전송할 때 사용하는 요청 방식

const express = require("express");
const app = express();
 
app.use(express.static("public"));
app.use(express.urlencoded({ extended: false }));
app.get("/", (request, response) => {
  let output = "";
  // form 형식의 html을 넘겨줌
  output += '<form method="post">';
  output += ' <input type="text" name="a" />';
  output += ' <input type="text" name="b" />';
  output += ' <input type="submit" />';
  output += "</form>";
  response.send(output);
});
 
app.post("/", (request, response) => {
  // form을 통해서 넘겨 받은 데이터를 출력
  console.log("a =", request.body.a);
  console.log("b =", request.body.b);
  response.send(request.body);
});
 
app.listen(52273, () => {
  console.log("Server running at http://localhost:52273");
});