목록
1. 웹 서비스 동작 방식
2. 백엔드와 프론트엔드
3. 웹 프레임워크
1) 의미
2) 웹 프레임워크를 사용하는 이유
3) 웹 프레임워크의 기본 구성 요소
4) Node.js의 웹 프레임워크 종류
1. 웹 서비스 동작 방식
웹 서비스 : HTTP 요청과 응답의 반복으로 동작
HTTP 요청 : 사용자가 필요로 하는 데이터를 서버에 알리는 역할 클라이언트 → 서버
HTTP 응답 : HTTP 요청에 해당하는 적절한 데이터를 전달하는 역할 서버 → 클라이언트
사용자
응답 시각화 ↑ ↓ url 입력
웹 브라우저(클라이언트)
http 응답 ↑ ↓ http 요청
서버
* 인터넷이 웹 브라우저와 서버 연결
| http 요청 예시 | 전송된 데이터 | 사용자가 요청한 데이터 |
| get/http/1.1 host: localhost:3000 ← 어떤 정보를 필요한지 User-Agent: ~~~(windows ~~) ← 어떤 사용자 |
HTTP/1.1 200 OK ←정보 잘받음 |
<html> <body> <h1> </h1> |
→ 웹 브라우저가 사용자가 요청한 데이터 html 정보를 보기 쉽게 랜더링해줌
2. 백엔드와 프론트엔드
백엔드 : 유저에게 보이지 않는 데이터 가공 등(서버)
프론트엔드 : 유저가 직접 사용하게 되는 웹페이지를 주로 담당(클라이언트)
나뉘게 된 이유
정적 웹(web 1.0)과 동적 웹(web 2.0) 때문임
| 정적 웹 (web 1.0) | 동적 웹(web 2.0) |
사용자와 상호작용하지 않는 페이지 - 단방향 통신 link를 통한(하이퍼링크) 페이지 이동 정도만 가능 일반적으로 변하지 않는 html 파일로 제공 미궁게임 페이지같은건가? |
사용자와 상호작용함 - 양방향 통신 사용자가 다양한 기능을 수행할 수 있음 프론트엔드와 백엔드가 유기적으로 통신하며 동작 요즘 웹사이트들 거의다 동적 웹 |
3. 웹 프레임워크
1) 의미
| 웹 | 프레임 워크 |
| 웹 서비스에 필요한 기능들을 제공해줌 | 다양한 도구들의 모음 |
2) 웹 프레임워크를 사용하는 이유
웹 서비스 구성에는 많은 기능이 필요함
하나씩 만들면 단가 높아짐
웹 서비스는 많은 부분이 정형화 되어있음
프레임워크를 사용해서 정형화된 부분을 간단하게 구현
→ 필요한 부분만 집중 개발 가능해짐
웹 서비스를 빠르게 구성할 수 있음
3) 웹 프레임워크의 기본 구성 요소
웹 서비스의 틀을 웹 프레임워크가 기본적으로 제공
* http 요청 처리
* http 응답 처리
* 라우팅
* html templating
| http 요청 처리 ! | http 응답 처리 ←⊃ | 라우팅 | html templating |
웹 프레임워크는 http 요청을 처리할 수 있음 어떤 데이터가 필요한지 어떤 사용자로부터 요청이 수신되었는지 등 |
웹 프레임워크는 http 응답을 처리할 수 있음 응답 데이터가 어떤 형식인지 응답 상태가 정상적인지 등 (ok, not found, ...) |
웹 프레임워크는 http 요청을 분기하는 방법으로 제공함 http 요청 url에 해당하는 알맞은 응답의 경로를 미리 설정 |
웹 프레임워크는 응답으로 보낼 html을 서버에서 작성하기 위해 html template를 통해 미리 페이지의 뼈대를 작성 가능 걍 티스토리 스킨같은 템플릿 |
* 분기
요청 a ↘ ↗ 응답 a
요청 b → 라우터 → 응답 b
요청 c ↗ ↘ 응답 c
멀티충전선같은..
4) Node.js의 웹 프레임워크 종류
* Express.js : Node.js의 가장 유명한 웹 프레임워크
* Koa.js 현대적인 JavaScript를 적극적으로 사용하는 웹 프레임워크
* Nest.js - TypeScript 를 사용하며 고정된 구조를 제공하는 웹 프레임워크
* 기타 - Hapi.js, Sails.js, Meteor.js 등
'컴맹도 할 수 있다 > Node.js, Express.js' 카테고리의 다른 글
| Express.js 사용, 라우팅 (0) | 2022.09.30 |
|---|---|
| vscode 확장 프로그램 없이 터미널에서 출력시키기, 터미널 경로 수정하기 (0) | 2022.09.28 |
| 질문했던것들 정리 9.28 (0) | 2022.09.28 |
| Node.js 모듈 (0) | 2022.09.27 |
| NPX (0) | 2022.09.27 |
댓글