Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags
more
Archives
Today
Total
관리 메뉴

Ruff! Ruff!

서버 시스템 구축 실습 - Express.js 웹 개발 본문

CS

서버 시스템 구축 실습 - Express.js 웹 개발

maeng-kim 2024. 4. 24. 22:25

1. Express.js 프레임 워크
- Node.js 위에서 동작하는 웹 프레임 워크로 프레임 워크에 미리 구현된 기능을 활용함.

- 요청 처리, 동적 및 정적 콘텐츠 제공, 데이터베이스 연결

<설치>

npm install express --save

명령어를 사용하여 패키지 설치

const port = 80,
express = require("express"),
app = express();
app.get("/", (req, res) => {
res.send("Hello, Universe!");
})
.listen(port, () => {
console.log(`The Express.js server has started and is listening on port number:
${port}`);
});

어플리케이션에 express모듈 추가

app에 express웹 서버 어플리케이션 할당 후 GET 라우트 세팅 (별도의 다른 모듈 없이 GET라우드 정의 방법 제공함)

* send() : http모듈의 write와 비슷한 역할을 수행

port설정 및 callback함수 작성

 

*req매개변수로 접근 가능

 

 

 

2. Express.js의 미들웨어

- Express 웹 프레임 워크는 미들웨어 함수들로 구성됨

- 웹과 Node.js 플랫폼 사이에 존재
*미들웨어 : 애플리케이션 로직과의 데이터 교환 전에 대기하고, 분석하고 필터링하고 HTTP 통신을 다루는 코드

- req, res, next : 3개의 매개변수에 접근 가능함

<미들웨어 종류>

- Application-level middleware : app 객체에 연결되는 미들웨어 (use, get, put, post ..) + next함수 이용해 다음 실행할 미들웨어 결정
- Router-level middleware : express.Router()의 객체에 연결되는 미들웨어. app미들웨어와 유사하게 동작. 분리하여 사용
- Error-handling middleware : 다른 미들웨어와 같은 방식으로 동작. 반드시 매개변수가 4개 와야함 (err, req, res, next)
- Built-in middleware : 기본으로 제공되는 미들웨어 (express.static : 정적 에셋 제공)
- Third-party middleware : 다른 사람이 만든 미들웨어. Express 애플리케이션에 기능 추가 (ex. body-parser)

 

* body-parser 미들웨어

웹 브라우저에서 요청한 정보의 본문을 해석해서 가공

post 방식에서 전달되는 데이터의 크기가 크면, 쪼개져서 전송됨

 

 

*사용자로부터의 데이터 추출
- POST요청에서 요청의 body를 통해

  => body-parser를 이용해 URl-encoded데이터와 json데이터를 파싱하도록 요청

- URL에서의 쿼리스트링을 통해

  => http://<IP주소>?cart=3&pagesVisited=4&utmcode=837623
▫ 사용자 장바구니에 있는 아이템의 개수
▫ 페이지 방문 횟수
▫ 마케팅 코드

 

 

 

 

3. MVC 아키텍처

- 모델, 뷰, 컨트롤러로 애플리케이션을 나눠서 구성

뷰: 애플리케이션에서 화면에 보여주는 역할 (주로 html파일)

모델: 서비스에 필요한 데이터 정의 및 접근
컨트롤러: 뷰와 모델 사이에서 연결

 

오른쪽이 node.js의 mvc아키텍처

m,c가 좀 더 세분화됨

 

*템플릿 엔진
- 뷰에 동적 데이터를 삽입하여 동적 페이지 생성

- EJS

  -> 애플리케이션의 뷰 엔진을 ejs로 설정 (set메소드 사용)

 

*에러처리를 위한 미들웨어 생성

- 에러 처리를 위한 미들웨어 (에러 컨트롤러 파일_js) 생성 후 사용자 정의 메세지로 빠진 라우트 및 에러 대응

  (요청 처리를 중단시킨 내부 에러에 대한 로깅와 응답 -> 라우트에 매칭되지 않은 모든 요청들을 처리)