웹

-사전적 의미 : 인터넷상에서 동작하는 모든 서비스
-일반적 의미 : 웹 브라우저로 접속해서 이용하는 서비스, 웹 사이트
-WEB 1.0 : 정적 웹 - 상호작용 없는 단방향 통신, link등을 이용한 페이지 이동, html 파일로 주로 동작.
-WEB 2.0 : 동적 웹 - 사용자와 상호작용하는 양방향 통신, FE와 BE가 유기적으로 통신하며 동작.

웹 서비스 동작 방식

-웹 서비스는 기본적으로 HTTP 요청과 응답의 반복으로 이루어짐
-HTTP 요청 : 사용자가 어떤 데이터를 필요로하는지 서버에게 알림.

• 어떤 사용자가 어떤 데이터를 필요로 하는지 드을 담고 있음
  -HTTP 응답 : 요청에 해당하는 적절한 데이터를 전달
• 사용자가 요청한 데이터와 어떤 데이터가 전송되는지 등을 담음
  
  브라우저가 인터넷을 통해 HTTP 요청을 서버에 전달
  ->서버는 HTTP 응답을 브라우저로 전송
  ->브라우저는 받은 응답을 사용자에게 적절한 화면으로 노출

동적 웹의 구현

(1) FE와 BE
-FE : HTTP 요청 송신, HTTP 응답 수신
-BE : HTTP 요청 수신, HTTP 응답 송신

(2) CSR : client-side rendering

-FE에서 사용자가 마주하는 동적인 부분을 대부분 처리하는 방식
-FE가 대부분의 리소스를 가지고 페이지를 표현, BE와 API 통신으로 데이터만 주고 받음
-사이트가 변하는 부분들을 FE에서 처리, FE 코드에 '페이지 리소스들이 미리 정의'되어 있음
-서버와의 통신은 API 통신 이용
-반응이 빠르나 페이지의 내용은 API 호출 완료후 보여짐(내용이 화면보다 늦게 표시)
-복잡한 프로젝트 구성, 큰 개발 사이즈

(3) SSR : server-side rendering

-BE에서 페이지의 대부분의 영역을 처리해서 FE로 전달하는 방식
-FE는 HTTP 응답을 받아 화면에 표시, BE에서 필요한 데이터가 포함된 페이지를 만들어서 HTTP 응답에 전달
-사이트가 변하는 부분들을 BE에서 처리, BE에서 HTML 파일을 작성해서 FE로 전달
-로딩이 완료되면 '페이지와 데이터가 한 번에 표시'
-상대적으로 사용자가 보기에 로딩이 느림
-페이지 이동시마다 다시 로딩하므로 페이지 깜빡임
-CSR에 비해 쉬운 구성, 작은 개발 사이즈

정리

-웹 서비스는 HTTP 요청과 응답으로 동작
-클라이언트는 서버로 HTTP 요청을, 서버는 클라이언트로 HTTP 응답을 보냄
-FE : 클라이언트 담당, BE : 서버 담당
-현대적인 웹은 대부분 동적웹으로 구현.
-동적 웹을 클라이언트에서 주로 담당하는 것이 CSR, 서버에서 주로 담당하는 것이 SSR

웹 프레임 워크

-웹+프레임 워크의 합성어 : 웹 서비스에 필요한 기능을 제공해주는 다양한 도구들의 모음

1. 사용이유
   -서비스 구성에 매우 많은 기능 필요, 이런 기능을 만들기에는 큰 비용 발생.
   -웹 서비스는 많은 부분이 정형화 되어 있음 이러한 부분을 프레임워크로 간단하게 구현
   -프레임 워크 사용으로 필요한 부분만 집중해서 개발이 가능해짐

2. 웹 프레임워크 기본 구성 요소
   -웹 서비스의 정형화 된 구성을 많은 웹 프레임워크가 기본적으로 제공함
   -HTTP 요청/응답 처리, 라우팅, HTML Templating 등

(1) HTTP 요청 처리
-어떤 데이터가 필요한지, 어떤 사용자로부터 요청이 수신되었는지 파악
(2) HTTP 응답 처리
-응답 데이터가 어떤 형식인지, 응답 상태가 정상적인지 파악
(3) 라우팅
-HTTP 요청을 분기하는 방법을 제공, HTTP 요청 URL에 해당하는 알맞은 응답의 경로를 미리 설정함

(4) HTML Templating
-웹 프레임워크는 SSR을 구현하기 위한 방법을 제공.
-SSR에서 응답으로 보낼 HTML을 서버에서 작성하기 위해 HTML Template를 통해 미리 페이지의 뼈대를 작성 가능.

3. 정리
   -웹 서비스를 빠르게 구성하기 위해 웹 프레임워크를 사용
   -웹 프레임 워크는 HTTP 요청/응답, 라우팅, HTML Templating 등의 기능을 제공.

웹 프레임 워크 : Express.js

-필요에 따라 유연하게 구조 설정 가능
-다양한 미들웨어를 통해 필요한 기능을 간단하게 추가 가능
-모든 동작이 명시적으로 구성되어 웹 프레임워크의 동작 방식을 이해하기 가장 좋음

1. 시작

(1) npm init

mkdir newPj(프로젝트명)
cd newPj(프로젝트 폴더로 이동)
npm init
npm i express(익스프레스 모듈 추가설치)
---
  
const express = require('express') //익스프레스 모듈 load
const app = express() //익스프레스 사용, 앱 생성

//간단한 라우팅 추가
app.get('/', (req, res) => {
res.send('Hello Wrold!');
});

//서버 시작
app.listen(3000);

(2) express-generator
-익스프레스는 express-generator라고 하는 프로젝트 생성기를 제공
-프로젝트의 기본구조를 자동으로 생성해줘 빠르게 프로젝트를 시작하기 좋음
-생성 프로젝트는 npm start로 실행

npm i -g express-generator
express newPj
cd newPj
npm i
npm start

(3) npx + express-generator
-npx를 사용하여 express-generator 설치하지 않고 바로 사용 가능
-제네레이터는 프로젝트 생성 이후엔 사용되지 않기 때문에 이 방법도 좋음.

npx express-generator newPj
cd newPj
npm i 
npm start

2. Express.js의 구조

3. Express.js 동작 방식

(1) 실행
-express-generator로 만들어진 프로젝트 디렉터리에 접근하여 npm start로 Express.js 프로젝트를 실행 가능.
-localhost:3000에 접속하여 페이지 확인 가능

1. 브라우저에서 localhost:3000접속
2. app.js -> app.use('/', indexRouter);
3. routes/index.js -> router.get('/', ...
4. routes/index.js -> res.render('index', ...
5. views/index.jade

(2) app.js
-express()로 생성되는 app 객체를 확인 가능.
-app 객체는 Express.js의 기능을 담은 객체
-Express.js의 모든 동작은 app 객체에 정의됨.

var express = require('express');

var app = express();

1) app.use()
-middleware를 사용하기 위한 함수.
-모든 path에 일괄적으로 미들웨어를 적용할 때도 씀.

app.use('/', indexRouter);

2) app.listen()
-http 서버를 생성하는 함수
-express-generator 사용시 http.createServer를 사용하는데 app.listen으로 대체 가능

3) app.locals
-app에서 사용할 공통 상수. Express.js에선 global 변수를 선언하지 않고 이 값을 사용할 수 있음

4. 정리
   -Express.js는 app객체를 시작으로 모든 동작이 이루어짐
   -app객체나 Express.Router를 사용하여 라우팅을 구현할 수 있음
   -Request Handler를 통해 HTTP 요청과 응답을 처리