[node.js] Expess

jini.choi·2024년 4월 1일

node.js

목록 보기
5/5

왜 익스프레스인가

  • http 모듈을 사용해서 서버를 만들 수도 있지만
  • 익스프레스에는 http 모듈의 기능 외에도 다양한 기능이 포함되어 있음
기능설명
라우팅http 모듈을 사용할 때는 if문이나 switch 문으로 요청 메서드나 요청 URL에 따라 라우팅해야했다. 하지만 익스트레스에는 더욱 간편한 방법으로 라우팅할 수 있다.
미들웨어익스프레스에는 미들웨어라는 개념이 있어서 요청과 응답 사이에서 여러 가지 기능을 실핼할 수 있다. 이미 많은 사용자들이 미들웨어를 만들어서 패키지로 제공하므로 자주 사용하는 미들웨어는 따로 만들 필요없이 가져와서 사용할 수 있다.
템플릿 엔진html 페이지는 기본적으로 정적이지만 서버와 함께 사용해서 동적인 html 페이지를 만들 수 있다. 애플리케이션에서 보이는 부분인 뷰를 담당한다.
정적인 파일 지원익스프레스에는 동적인 파일만 생성하는 것은 아니다. css파일이나 js파일, 이미지처럼 정적인 파일을 쉽게 서비스할 수 있는 기능도 제공

nodemon패키지
서버를 종료하지 않더라도 코드 수정한것으로 바로 적용함
npm i nodemon --save-dev -g

express사용해서 서버 만들기

const express = require("express"); //express모듈 가져옴
const app = express(); //express를 실행을 시켜서 app이라는 이름을 가진 서버를 만듬

//get방식으로 루트경로에 요청이 들어온다면 어떤것을 실행해줄시 설정
app.get("/", (req, res) => {
  res.send("Hello Node");
});
app.get("/contacts", (req, res) => {
  res.send("contacts page");
});
app.listen(3000, () => {
  console.log("서버 실행 중");
});
  • nodemon app 실행 명령어

익스프레스 라우팅

const express = require("express"); //express모듈 가져옴
const app = express(); //express를 실행을 시켜서 app이라는 이름을 가진 서버를 만듬

//get방식으로 루트경로에 요청이 들어온다면 어떤것을 실행해줄시 설정
app.get("/", (req, res) => {
  res.send("Hello Node");
});

// 전체 연락처 가져와서 보여줄거 처리
app.get("/contacts", (req, res) => {
  res.send("contacts page");
});

//유저가 새로 입력한 연락처를 서버에 저장
app.post("/contacts", (req, res) => {
  res.send("create contacts");
});

app.listen(3000, () => {
  console.log("서버 실행 중");
});
  • 현재는 form이 없기 때문에 vscode확장프로그램인 thunder client에서 테스트(postman 같은거)

라우트 파라미터 사용

  • 특정 조건을 지정할 때 라우팅 코드에서 요청URL 뒤에 :를 붙인 후 그 뒤에 변수 작성
    /요청url/:id
  • 요청 할 때는 요청 URL 뒤에 조건 값 지정
    • 예) 연락처 정보 중에서 아이디가 '1'인 것을 가져오려면 /contacts/1

특정 연락처만 가져오기

여기에서 작성할 라우트 코드는?

요청 방식요청 URL역할
GET/contacts/:idid에 맞는 연락처 가져오기
PUT/contacts/:idid에 맞는 연락처 수정하기
DELETE/contacts/:idid에 맞는 연락처 삭제하기
const express = require("express"); //express모듈 가져옴
const app = express(); //express를 실행을 시켜서 app이라는 이름을 가진 서버를 만듬

//get방식으로 루트경로에 요청이 들어온다면 어떤것을 실행해줄시 설정
app.get("/", (req, res) => {
  res.send("Hello Node");
});

// 전체 연락처 가져와서 보여줄거 처리
app.get("/contacts", (req, res) => {
  res.send("contacts page");
});

//유저가 새로 입력한 연락처를 서버에 저장
app.post("/contacts", (req, res) => {
  res.send("create contacts");
});

//특정 연락처만 가져오기(연락처 1개 가져오기)
//요청을 보낼 떄 id값을 같이 보내기 때문에 req.params.id로 값 가져옴 (req객체에 있는 params가 모두 담겨있는 객체에서 id를 가져옴)
app.get("/contacts/:id", (req, res) => {
  res.send(`view contact for ID : ${req.params.id}`);
});

//연락처 수정
app.put("/contacts/:id", (req, res) => {
  res.send(`update contact for ID : ${req.params.id}`);
});

//연락처 삭제
app.delete("/contacts/:id", (req, res) => {
  res.send(`delete contact for ID : ${req.params.id}`);
});

app.use(express.static(__dirname + "/public"));

app.listen(3000, () => {
  console.log("서버 실행 중");
});




익스프레스 요청 객체

속성설명
req.body서버로 POST 요청할 때 넘겨준 정보를 담고 있다. 예를 들어 로그인 버튼을 눌렀을 때 사용자의 아이디와 비밀번호의 값이 req.body에 들어있다.
req.cookies클라이언트에 저장된 쿠키 정보를 서버로 함께 넘겼을 경우 쿠키 정보를 담고 있다.
req.headers서버로 요청을 보낼 때 같이 보낸 헤더 정보를 담고 있다.
req.paramsURL 뒤에 라우트 파라미터가 포함되어 있을 경우 파라미터 정보를 담고 있다.
req.query요청 URL에 포함된 질의 매개변수(쿼리,query)를 담고 있다. 예를 들어 검색 사이트에서 검색어를 입력하고 [검색] 버튼을 클릭했을 때 검색어와 관련된 질의 매개변수가 req.query에 담긴다.

익스프레스 응답 객체의 함수

함수설명
res.download파일을 내려받는다
res.end응답 프로세스를 종료
res.jsonJSON 응답을 전송
res.jsonpJSONP 지원을 통해 JSON 응답을 전송
res.redirect요청 경로를 재지정해서 강제 이동
res.render뷰 템플릿을 화면에 렌더링
res.send어떤 유형이든 res.send() 괄호 안의 내용을 전송
res.sendFile지정한 경로의 파일을 읽어서 내용을 전송
res.sendStatus상태 메세지와 함께 HTTP 상태 코드를 전송
res.status응답의 상태 코드를 설정
profile
개발짜🏃‍♀️

0개의 댓글