익스프레스 시작하기

1. 웹이란 ?

= World Wide Web

인터넷상에서 동작하는 모든 서비스.

일반적 의미 : 웹 브라우저로 접속해서 이용하는 서비스, 웹사이트.

 

2. 웹 서비스 동작 방식

사용자 : 웹 브라우저( 클라이언트 )에 url 입력

웹 브라우저( 클라이언트 ) : 인터넷을 통해 서버에 http 요청 (Request).

서버 : http 응답( Response )

웹 브라우저( 클라이언트 ) : 응답을 시각화

 

정적 웹 vs 동적 웹

1. 정적 웹 Web 1.0 : 사용자와 상호작용하지 않는 단방향 통신.

• Link를 통한 페이지 이동 정도만 가능하고, 변하지 않는 html 파일로 이루어져 있다.

2. 동적 웹 Web 2.0 : 사용자와 상호작용하는 양방향 통신.

• 프론트엔드와 백엔드가 유기적으로 통신하며 동작한다.

 

동적 웹 구현 방법 2가지

1. CSR = Client Side Rendering : 프론트엔드의 동적인 부분을 대부분 처리하는 방식.

• 프론트엔드 코드에 페이지 리소스들이 미리 정의되어 있다.
• 서버와 API 통신을 이용한다.
• 반응이 빠르지만 페이지의 내용은 API 호출이 완료된 후에 보여진다.
• 프로젝트 구성이 복잡하고 개발 사이즈가 크다.

2. SSR = Server side Rendering : 백엔드에서 동적인 부분을 대부분 처리해서 프론트엔드로 전달하는 방식

• 백엔드에서 HTML 파일을 작성해서 프론트엔드로 전달
• CSR에 비해 프로젝트 구성이 쉽고, 개발 사이즈가 작다.
• 사용자 입장에서 로딩이 느려 보인다. - 로딩이 완료되면 페이지와 데이터가 한번에 표시된다.
• 페이지 깜빡임 - 페이지 이동할 때마다 다시 로딩해서

 

 

3. 웹 프레임워크 란?

= 웹서비스에 필요한 프레임워크

 

웹서비스는 정형화된 구성이 많다.

-> 프레임워크에서 웹서비스에 필요한 기능을 제공해준다.

1. HTTP 요청 처리

2. HTTP 응답 처리

3. 라우팅 : HTTP 요청에 따라 알맞은 응답을 보내주는 경로(url)를 설정하는 것.

• HTTP 요청을 분기하는 방법, Url에 해당하는 알맞은 응답 경로를 미리 설정할 수 있다.

4. HTML Templating : SSR 을 구현하기 위한 방법.

• SSR 에서 응답으로 보낼 HTML Template 을 미리 작성할 수 있다.

 

Node.js 웹 프레임워크 종류

1. Express.js

2. Koa.js

3. Nest.js : TypeScript 사용.

4. Hapi

5. Sails.js

6. Meteor.js 등

 

4. Express.js 시작하기

$ npm init     // 프로젝트 시작.

$ npm i express     // express 설치

const express = require('express')
const app = express()

app.get('/', (req, res) => {
    res.send('hello world')
})

app.listen(3000, () => {
    console.log('3000 port listening!')
})

 

express-generator : express.js에서 제공하는 프로젝트 생성기

: 기본구조를 자동생성해 준다.

$ npm i -g express-generator     // 전역 패키지로 설치

$ express my-project

$ cd my-project

$ npm i             // express에서 제공하는 dependency 모두 설치.

$ npm start        // 프로젝트 실행

 

npx로 설치 없이 express-generator 사용가능

$ npx express-generator my-project

$ cd my-project

$ npm i

$ npm start

 

 

5. Express.js 구조

프로젝트 폴더 안에

app.js 기본 파일

bin/www Express.js 실행, 포트와 실행 오류 정의 파일

package.json 프로젝트 의존성, 스크립트 정의 파일

public 코드를 통하지 않고, 직접 제공되는 파일 디렉터리

routes 라우팅 파일 디렉터리

views HTML Template 디렉터리

 

6. Express.js 동작방식

const express = require('express')
const app = express()

app 객체

app.use( ) : middleware 사용.

app.listen( ) : http 서버 생성.

app.locals : app 에서 사용할 공통 상수. global 선언없이 값을 사용할 수 있다.

 

라우팅

1. app 라우팅

: app 객체에 직접 get, post, put, delete 메소드로 라우팅. 첫번째 인자에 url, 두번째 인자에 함수

app.get('/', (req, res) => {
	res.send('GET /')
})

app.post('/', (req, res) => {
	res.send('POST /')
})

app.put('/', (req, res) => {
	res.send('PUT /')
})

app.delete('/', (req, res) => {
	res.send('DELETE /')
})

app.all('/all', (req, res) => {            // method에 상관없이 라우팅 가능.
	res.send('ANY /')
})

 

2. Express.Router : 

express에서 router 객체를 불러와 사용. app 과 같이 첫번째 인자에 url, 두번째에 함수를 준다.

const express = require('express')
const router = express.Router()

router.get('/', (req, res, next) => {
	res.send('hello')
}

module.exports = router;

위에서 router 를 생성하고, exports 하면 app.js에서 아래 코드처럼 사용할 수 있다.

const userRouter = require('./routes/users')
const app = express()

app.use('/users', userRouter)

/users 경로의 요청은 userRouter 로 처리하게 된다.

---

 

routes/users.js 에서 /users 하위 라우터를 생성할 수도 있다.

// users.js

const router = express.Router()
const petRouter = require('./pets')      // pets.js 에서 petRouter를 불러옴.

router.use('/:userId/pets', petRouter)         // userRouter에 use 함수로 연결.

module.exports = router;

위와 같이 하면 /users/pets 경로에 대해 petRouter 로 처리하게 된다.

// pets.js

const router = Router({ mergeParams: true });   // 계층적 구조의 라우터 사용할 때. 이전 라우터의 path parameter 사용가능해짐.

router.get('/', (req, res) => {       // 루트경로로만 해도 상위 users.js의 경로를 받아옴.
    const {userId} = req.params
    res.send(`Pets of user ${userId}`)
})

module.exports = router;

 

** path parameter : 주소의 일부를 변수처럼 사용 가능

/users/:id       

/users/123    url로 요청이 들어왔을 때 req.params 로 123 을 받아 사용

app.get('/users/:id', (req, res) => {
	const id = req.params;
    res.send(id)
})

/messages/:from-:to- / message/123-456         -> from에 123, to에 456 이 담김.

 

Request Handler

: router.get(), app.get() 의 마지막 인자로 전달되는 함수, 라우팅 경로에 해당하는 요청이 들어오면 실행된다.

Request 객체

① req.params : URL의 path parameter 가 들어있다.

② req.queries : get 방식으로 보낸 데이터가 들어있다.

③ req.body : post 방식으로 보낸 데이터가 들어있다.

④ req.get('') : 요청의 헤더값이 들어있다.

 

Response 객체

① res.send( ) : text 형식을 보냄

② res.json( ) : json 형식을 보냄

③ res.render( ) : HTTP Template을 보냄

④ res.set( ) : 응답의 헤더 설정

⑤ res.status( ) : 응답의 상태값 설정