22.05.10
웹 서비스는 HTTP 요청과 응답의 반복으로 이루어진다.
http 요청은 사용자가 어떤 데이터가 필요한지 서버에 알리는 역할
응답은 요청에 해당하는 적절한 데이터를 전달하는 역할
브라우저가 인터넷을 통해 http요청을 서버에 전달
서버는 사용자의 응답을 브라우저에 전송
브라우저는 http 응답을 사용자에게 화면으로 노출
프론트 엔드는 사용자가 직접 사용하게 되는 웹페이지를 담당하여 개발 (클라이언트)
백엔드는 사용자에게 보이지 않는데이터 가공 등 기능을 주로 담당하여 개발 (서버)
간단정리
프론트엔드 : http를 서버에 요청한뒤 요청에 의한 응답을 받아 화면에 노출
백엔드 : 프론테 엔드로부터 http 요청을 받고 그에 맞는 응답을 프론트로 보내준다.
정적웹
사용자와 상호작용 안하는 단방향 통신
동적웹
사용자와 상호작용 하는 양방향 통신, 사용자가 다양한 기능을 수행함
프론트, 백앤드가 통신하며 동작
프론트엔드에서 사용자가 페이지에서 보는 동적 부분을 처리하는 방식
사이트가 변하는 부분을 프론트에서 처리한다.
프론트 엔드 코드에 페이지 리소스들이 미리 정의되어 있다.
복잡한 프로젝트구성, 큰 개발 사이즈
서버와 통신은 API통신을 이용
반응이 빠르지만 페이지의 내용은 API호출이 완료된 이후 보여진다.
백엔드에서 페이지 대부분의 영역을 처리해서 프론트에 전달하는 방식
사이트가 변하는 부분을 백엔드에서 처리
백엔드에서 html 파일을 작성해 프론트엔드에 전달
csr에 비해 쉽고 작은 개발사이즈 이다.
로딩이 완료되면 페이지와 데이터가 한번에 표시
상대적으로 로딩이 느려보인다.
페이지를 이동할 때마다 다시 로딩하기 때문에 페이지가 깜박거린다.
웹서비스는 http 요청과 응답으로 동작
클라이언트는 서버로 http요청, 서버는 클라이언트로 http응답
웹 서비스에 필요한 기능을 제공해주는 다양한 도구들의 모음
사용이유
웹서비스를 구성하려면 많은 기능이 필요함, 하나씩 직접 만들기에는 너무 많은 비용이 듬
많은 부분이 정형화 되어있음
프레임워크를 이용해 정형화된 부분을 간단하게 구현
필요한 부분만 집중 개발 가능
사용이유
node.js에서 가장 유명한 웹 프레임워크
필요에 따라 유연하게 구조 설정 가능
다양하 미들웨어로 필요한 기능을 간단하게 추가가능
모든 동작이 명시적으로 구성
웹프레임워크 동작방식을 이해하기 좋음
사용법
npm install express : express를 받아준다.
index.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send("hello express");
});
app.listen(3000, () => {
console.log("serber started");
}
npm start : 를 이용해 서버 시작
express-generator로 만들어진 디렉터리에 접근 후 npm start로 Express.js 프로젝트를 실행 할 수있다.
localhost:3000에 접속하면 welcome to express 페이지를 확인 할 수 있음
app 객체는 express.js의 모든 기능을 담은 객체로
Express.js 의 모든 동작은 app객체에 정의됨
app객체의 주요 기능
app.use(): middleware를 사용하기위한 함수
app.listen(): http서버를 생성해주는 함수
app.locals: app에서 사용할 공통 상수, express.js에선 global변수를 선언하지 않고 이 값을 사용 가능
express.js는 다양한 라우팅 방식을 제공한다.
크게 app라우팅과 express.router을 통한 라우팅으로 나뉜다.
app라우팅
app객체에 직접 get, post, put, delete 함수를 사용하여 HTTP method 로 라우팅할 수 있다.
var express = require('express');
var app = express();
app.get('/', (req, res) =>{
res.send('GET /');
});
Express.Router
app라우팅은 그룹화를 지원하지 않는다.
Express.Router을 통해 라우팅을 모듈화 할 수 있다.
const express = require('express');
const router = express.Router();
router.get('/', (req, res, next) =>{
res.send('respond with a resource');
});
module.exports= router;
라우팅에 적용되는 함수를 Request Handler라고 부른다.
HTTP 요청과 응답을 다룰 수 있는 함수로 설정된 라우팅경로에 해당하는 요청이 들어오면 Request Handler 함수가 실행됨
router.get('/:id', (req, res) =>{ //이 예제에 있는 화살표 함수가 Request Handler
const id = req.params.id
res.send(`hello ${id}`);
});
Request Handler
router라우팅이나 app 라우팅의 HTTP method 함수의 가장 마지막 인자로 전달되는 함수
위 코드에서 보자면 get 이라는 http method 에 /id 패스 파라미터를 포함한 경로로 요청이 들어오면 request hendler가 실행이 되도록 되어있다.
여기서 패스 파라미터 아이디를 받아서 핼로우 아이디라는 응답을 보내주는 기능
req
req.params : URL 표현중/path/:id 에서:id 를req.params.id 로 사용할 수 있음
req.queries : URL 표현중/path?page=2 에서page 부분을req.queries.page로 사용할 수 있음
req.body : 일반적으로 POST 요청의 요청데이터를 담고있음req.body 에 요청데이터가 저장되어 들어옴
req.get('') : HTTP Request 의 헤더값을 가져올 수 있음req.get('Authorization') 등 으로 값을가져옴
res
res.send() : text형식의HTTP 응답을 전송
res.json() : json 형식의HTTP 응답을 전송
res.render() : HTML Template 을 사용하여 화면을 전송
res.set() : HTTP 응답의 헤더를 설정 res.status()
res.redirect() : 호출한 경로로 재 접근