익스프레스 프레임워크 사용하
1. 일반적으로 웹서버가 제공하는 기능
| 항목 | 설명 |
| 라우팅 | URL 요청을 함수와 매핑시켜주는 기능 |
| 정적 파일 서비스 | CSS, JS,이미지 등의 정적인 파일을 다루는 기능 |
| 템플릿 엔진 | 동적인 웹페이지를 HTML과 인스턴스를 사용해 생성하는 기능 |
| 요청(request) 데이터 다루기 |
HTTP요청을 추상화해 편리하게 다룰 수 있게 하는 기능 |
| 응답(response) 데이터 다루기 |
HTTP 응답을 커스터마이징할 수 있는 기능 파일 내려받기, 이미지 출력 등 |
| 파일 업로드 | HTTP로 전송된 파일을 읽고 다룰 수 있는 기능 |
| 쿠키 및 세션 지원 | 클라이언트 측 혹은 서버 측의 메모리에 일정기간 동안 저장해야 하는 데이터를 다루는 기능 |
| 리다이렉트 | 서버의 응답 시 다른 페이지로 전달시키는 기능 |
| 에러 페이지 | 요청이 잘못되었거나, 서버 에러 시 특정 에러 페이지를 보여주기 |
| 미들웨어 | 요청 혹은 응답 사이에 공통된 기능을 추가하는 기능 |
-기본 라이브러리로 구현하고 유지보수할 수도 있지만 시간이 많이 든다.
-Node.js에는 이런 작업을 제공하는 오픈소스 웹서버가 많이 있다. 그중 익스프레스가 널리 사용된다.
2. express 설치하기
1)설치할 폴더 생성 후 폴더로 이동
mkdir chapter1
cd chapter1
mkdir express-server
cd express-server
2) express-server 폴더에 npm을 사용해 express 설치하기
npm install express
3) 설치 완료 후 ls 명령으로 무엇이 설치되었는지 확인(연습용이라 폴더명 내맘대루..)
4) node_modules디렉터리 안에는 익스프레스를 실행하는 데 필요한 의존성 패키지가 설치된다. 의존성 패키지 정보는 package.json에 들어 있다. npm ls 명령어로 확인한다.
🙋♀️익스프레스를 무사히 설치했으니 간단한 API서버를 만들어보자.
3. 익스프레스 서버 만들기
1) 해당 폴더에 npm intall 명령실행 시키기
npm install
2)"헬로 express"를 반환하는 익스프레스 서버
const express = require("express");
const app = express(); //express를 초기화 후에 app에 할당
const port = 3000;
// url의 path가 "/"이면서 http메서드가 get()인 경우 콜백함수를 실행한다.
app.get("/", (req, res) => {
res.set({ "Content-Type": "text/html; charset=utf-8"}); //반환할 컨텐츠 정보 설정
res. end("헬로 express");
});
//listen()함수를 사용해 서버를 기동해 클라이언트의 요청을 기다린다.
app.listen(port, () => {
console.log(`START SERVER : use ${port}`)
})3)서버 실행하기
4) localhost:3000
4. Node.js 라이브러리로 만든 서버를 익스프레스로 구현하기
-기존에는 http 인스턴의 createServer() 함수 내에서 라우팅과 결과처리를 했지만, 익스프레스를 사용해 더 손쉽게 더 좋은 라우팅 기능을 사용해본다.
const url = require("url");
const express = require("express");
const app = express();
const port = 3000;
app.listen(port, ()=>{
console.log("익스프레스로 라우터 리팩토링");
});
//url매핑을 관리하던 부분을 없애고 app.get()함수에 등록하도록 변경함.
//매핑을 사용하면 수백개의 함수를 하나하나 매핑시켜서 길어지는 단점이 있어서
//app.get()를 이용해 코드를 좀 더 깔끔하게 유지할 수 있다.
app.get("/", (_, res) => res.end("HOME"));
app.get("/user", user);
app.get("/feed", feed);
function user(req, res) {
const user = url.parse(req.url, true).query;
//res.end()대신에 express에서는 res.json()함수를 사용한다.
//응답을 JSON타입으로 보여주고, charset=utf-8을 자동으로 설정해준다.
res.json(`[user] name: ${user.name}, age: ${user.age}`);
}
//사용하지 않는 변수는 빼는 것이 원칙이다. _는 구조상 넣을 수 밖에 없을 때의 관례
function feed(_, res){
res.json(
`<ul>
<li>picture1<li>
<li>picture2<li>
<li>picture3<li>
</ul>`
)
}5. 익스프레스로 간단한 게시판 API 서버 만들기
1) 데이터베이스를 쓰지 않고 메모리 기반으로 동작하는 휘발성 게시판 만들기
-데이터를 저장하는 것처럼 보이지만 메모리에 저장하므로 서버를 재시작하면 사용한 데이터가 모두 사라진다.
-목록 가져오기, 글 작성하기, 글 삭제하기 3가지 API를 작성해본다.
2) 게시판 API 코드 작성하기
-API는 REST API원칙을 따라 만든다.
-REST API : 자원을 URL에 표현하고 자원을 가져오는 행위를 HTTP 메서드로 표현하는 규칙이다.
-구현할 게시판 API 스펙
| 경로 | HTTP 메서드 | 설명 |
| / | get | 게시판 목록 가져오기 |
| /posts | post | 게시판에 글 작성 게시글은 id(아이디), title(제목), name(작성자), text(내용), createdDt(생성일시)로 구성 |
| /posts:id | delete | 게시글 아이디가 id인 글을 삭제 |
3) API규칙에 맞게 서버 구현하기
const express = require("express");
const app = express();
let posts = []; //게시글 리스트로 사용할 빈 리스트
//req.body를 사용하려면 JSON 미들웨어를 사용해야한다.
//사용하지 않으면 undefined로 반환
app.use(express.json()); //JSON 미들웨어 활성화
//POST요청 시 컨텐트 타입이 application/x-www-form-urlencoded인 경우 파싱한다.
app.use(express.urlencoded({ extended: true })); //JSON 미들웨어와 함께 사용!
app.get("/", (req, res) => { // "/"로 요청이 오면
res.json(posts); //게시글 리스트를 JSON형식으로 응답한다.
})
app.post("/posts", (req, res) => { // "/posts"로 요청이 오면
const { title, name, text } = req.body; //HTTP요청의 body 데이터를 변수에 할당
//게시글 리스트에 새로운 게시글 정보 추가
posts.push({ id: posts.length+1, title, name, text, createdDt: Date() });
res.json({ title, name, text });
});
app.delete("/posts/:id", (req, res) => {
const id = req.params.id; //app.delete에서 설정한 path 정보에서 id값을 가져온다.
const filteredPosts = posts.filter((post) => post.id !== +id); //+id는 문자열인 id를 숫자형으로 변경한다는 뜻
const isLengthChanged = posts.length !== filteredPosts.length;
posts = filteredPosts;
//posts의 데이터 개수가 변경되었으면 삭제성공
if(isLengthChanged){
res.json("OK"); //게시글이 삭제된 경우 "OK"응답
return;
}
//변경되지 않은 경우 "NOT CHANGED"응답
res.json("NOT CHANGED");
app.listen(3000, () => {
console.log("welcome posts START!")
})
})6. 게시판 API 테스트하기
-HTTP 프로토콜의 메서드를 사용하는 API는 브라우저만으로 테스트하기가 조금 어렵다.
-curl을 사용하면 API 테스트를 쉽게 진행할 수 있다.
1) curl 옵션
| 옵션 | 사용 예시 | 설명 |
| -X | -X POST | HTTP 메서드 종류 |
| -d | -d "key1=value1&key2=value2" localhost:3000 | POST 통신 시 body 데이터 |
| -H | Content-Type:application/x-www-form-urlencoded | 헤더정보 |
| -x | curl -x http://proxy_server:proxy_port--proxy-user username:password | 프록시 서버 설정 |
| -T | curl -T file.txt http://server.com | 파일을 서버에 전송 시 사용 |
| -A | curl -A "Mozilla/5.0" http://server.com | 유저 에이전트를 변경 |
| -i | curl -i https://goldenrabbit.co.kr | 서버의 응답을 결과로 출력 |
| -I | curl -I https://goldenrabbit.co.kr | 서버의 응답에서 헤더값만 출력 |
| -O | curl -O http://server.com/test.txt | 서버의 파일을 이름 변경 없이 내려받기 |
| -L | curl -L http://server.com/redirectingURL | 리다이렉트 URL 따라가기 |
| -s | curl -s localhost:3000 | 에러가 발생해도 출력하지 않음 |
| -S | curl -S localhost:3000 | 에러 발생 시 에러 출력 |
2) curl로GET호출하기
-curl을 사용해서 익스프레스로 구현한 서버를 테스트해본다.
curl -X GET http://localhost:3000
-에러가 발생한다....설치도 했는데 왜 안될까...
왜지? 구글링을 좀 더 해봐야겠다...
