6.Express 웹서버 만들기

12 Dec 2022 • Node

6.1 익스프레스 프로젝트

  • http모듈로 웹서버를 만들기 힘듬
    • 프레임워크로 해결하며 대표적으로 express, nestjs 등
    • 코드 관리 용이하며 편의성 높임
  • nodemon
    • 코드가 수정 될 떄마다 서버를 재시작 한다
    • 로컬 개발에서 사용 하면 좋다.
  • html 서빙
    • res.sendFile(path) 로 서빙

6.2 자주 사용하는 미들웨어

  • 미들웨어는 요청에 대한 응답을 보내기 위해 거쳐가는 함수들
  • 미들웨어 사용하기
    • 중복제거를 하기 위해도 사용
    • 모든 라우터에서 실행 됨
    • app.use((req, res, next)) 사용하여 미들웨어를 작성
    • app.use('/about', ...)로 라우터를 지정하여 미들웨어를 작성 할 수 있다.
    • next()를 해줘야 다음 미들웨어가 수행된다.
  • 라우터에 와일드카드를 이용하여 변경될 주소를 지정할 수 있다.
    • 순서가 중요하다 (위에서부터 아래로)
    • 범위가 넓은 라우터들은 아래에 둬야 한다
  • 미들웨어 순서
    • 공통 미들웨어
    • 라우터 미들웨어
    • 모든 라우터 미들웨어
    • 에러 미들웨어
  • 에러 미들웨어
    • app.use((err, req, res, next)) 형태로 작성
    • 404는 따로 커스텀 해야 한다
  • 404 커스텀
    • 에러 미들웨어 위에 404 미들웨어 작성
  • 한 라우터에서 여러 send를 보내면 에러가 발생한다.
  • 응답에 header를 send보다 늦게 쓰면 에러가 발생한다.
  • res.json, res.send. sendFile은 return 아니다.
    • 아래 로직이 진행 된다.
  • next(error) 를 넣어 에러 처리 미들웨어로 바로 넘긴다.
  • next('route')를 넣어 같은 라우터의 다음 미들웨어가 실행되는게 아니라 다음 라우터의 미들웨어가 실행된다
  • morgan
    • 요청과 응답을 기록한다.
    • 개발시 dev, 운영시 combined
  • cookie-parser
    • res.cookie를 사용하여 쿠키 클라이언트에 전달
    • res.clearCookie를 사용하여 쿠키 제거
    • req.signedCookies를 사용하여 쿠키 서명
  • body-parser
    • express.json() json 데이터를 파싱하여 req.body로 넣어 줌
    • express.urlencoded({extended:true})) 클라이언트에서 form submit할 때 req.body로 넣어줌
    • extended:true는 쿼리스트링 파싱
    • 자동으로 req.body로 들어 가 있다
    • form에서 이미지를 보낼 경우 multer를 사용한다
  • static
    • app.use('요청 경로', express.static(실제경로)) 를 사용하여 static 파일 서빙
    • static 파일 서빙은 morgan다음에 해주는게 좋다
    • 미들웨어 순서가 중요 하다.
  • 미들웨어 간의 데이터 전송은 req.data를 이용하자
  • 미들웨어 확장하기 
    app.use("/", (req, res, next) => {
if (req.session.id) {
  express.static(path.join(__dirname, "public"))(req, res, next);
} else {
  next();
}
});
  • multer
    • form 태그의 enctype이 multipart/form-data인 경우
      • body-parser로는 해석할 수 없어서 multer 패키지를 사용
    • 필드를 잘 맞춰 줘야 한다.
      • upload.single('image') 1개의 파일만 업로드 할 경우
      • upload.array('image') 이미지 필드가 여러개를 가지고 올때
      • upload.fields([{name: 'image1'}, {name:'image2}]) 각기 다른 필드로 이미지를 업로드 할 때
      • upload.none() 이미지 업로드 하지 않지만 multipart-formdata 일 때
  • dotenv
    • 숨기고 싶은 정보를 숨기기 위해
    • .env 파일에 Key=Value 형식으로 저장
    • process.env.PORT 등으로 가져옴
    • config({path:~}) 를 통해 환경별로 env 설정 가능

6.3 라우터 분리하기

  • express.Router을 사용하여 app.js가 길어 지는것을 막을 수 있다.
  • 라우트 매개변수
    • 일반 라우터보다 뒤에 위치 해야 한다.
    • /user/:id처럼 사용하고 req.params 사용, 쿼리스트링은 req.query로 사용 할 수 있다.
  • 라우터 그룹화
    • 주소는 같지만 메서드가 다른 코드있을 때
    • router.route로 묶음

6.4 req, res 사용하기

  • req객체
    • app객체 접근 가능
    • body, cookies, ip, params, query, signedCookies, get(헤더이름)
  • res객체
    • app, cookie, clearCookie, end, json, redirect, render, send, sendFile, set, status
    • 메서드 체이닝을 지원함
    • 응답은 한 번만 보내야 함

6.5 템플릿 엔진 사용하기

  • HTML의 정적인 단점을 개선
    • 반복문, 조건문, 변수 등을 사용
    • 동적인 페이지 작성 가능
    • PHP, JSP와 유사
  • Pug(구 Jade)
    • 호불호가 갈림
    • express의 app.set으로 설정
    • render를 사용하여 변수를 넣어 줄 수 있다.
    • res.locals.title처럼 사용가능
      • 미들웨어간 공유 가능
    • pug파일 내 변수 선언 가능
    • 변수값을 이스케이프 하지 않도록 가능
    • for in, each in 으로 반복문 가능
    • if else, case when으로 저건문 가능
    • 퍼그 파일에 다른 퍼그 파일을 넣을 수 있음
      • include를 사용
      • 헤더, 푸터, 내비게이션등의 공통 부분 따로 관리
    • 레이아웃을 정할 수 있음
      • 공통되는 레이아웃을 따로 관리 할 수 있음
      • extends 와 block을 사용
  • 넌적스
    • 퍼그와 설정 방법이 조금 다름
    • `` 를 통하여 변수 사용 가능
    • 내부 변수 선언 가능
    • | safe로 이스케이프 하지 않도록 가능
  • 에러 처리 미들웨어
    • 404 에러도 전체 에러 미들웨어에서 처리 하도록 error 객체를 만들어 넘긴다.
    • 이후 res.locals를 이용하여 redner를 한다
 Node

Comments

Other Posts