[군 장병 AI/SW 교육] 웹과 Express.js 1 / Express.js 기초 1

 

군 장병 AI/SW 교육 / 엘리스 코딩 / [초급] 웹 개발 프로젝트 / Express.js 기초 1 / 웹과 Express.js의 노트필기입니다

---

-- 웹과 Express.js --

목차

 
1. 웹 서비스 동작 방식 <==

    가. 웹

    나. 프론트엔트와 백엔드

2. 웹 프레임워크

3. Express.js 시작하기

4. Express.js의 구조

5. Express.js 동작 방식

---

가. 웹

1) 웹의 정의

-사전적 의미 : World Wide Web. 인터넷 상에서 동작하는 모든 서비스

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

 

*군 장병 AI/SW 교육에서는 웹 사이트를 웹으로 지칭.

 

2) 웹 서비스 동작 방식

-HTTP* 요청과 HTTP 응답의 반복으로 이루어짐

 

-HTTP 요청 : 사용자가 어떤 데이터가 필요한지 서버에게 알리는 역할

-HTTP 응답 : HTTP 요청에 해당하는 데이터를 전달하는 역할

 

*HTTP : Hyper Text Transfer Protocol의 약어. 텍스트를 기반으로 인터넷에서 데이터를 주고 받을 수 있는 프로토콜.

 

웹 서비스 동작 방식을 도식화 하면 아래 그림과 같다.

-사용자가 url을 입력하면 브라우저가 인터넷을 통해 HTTP 요청을 서버에 전달

-서버는 사용자의 HTTP 응답을 브라우저로 전송

-브라우저는 HTTP 응답을 사용자에게 적절한 화면으로 시각화

 

웹브라우저는 HTTP 통신의 관점에서는 클라이언트의 역할을 수행.

 

그림 1: 웹 서비스 동작 방식의 도식도 / 출처 : 엘리스 코딩

 

3) HTTP 요청 예시

그림 2는 HTTP 요청의 예시이다. HTTP 요청은 어떤 사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있다.

사용자에 대한 정보는 User-Agent를 통해 알 수 있다.

어떤 데이터를 필요로 하는지는 localhost의 뒷 부분의 목표 지점을 통해 알 수 있다.

 

정보를 받은 서버는 이에 맞는 정보를 반환한다. 그림 3이 그 예시이다.

첫 줄의 '200 OK'는 주어진 정보를 잘 반환했다는 뜻에서 이런 데이터가 응답된 것이다.

 

궁극적으로 사용자에게는 그림 4와 같은 html 파일이 보여진다. 

그림 2: HTTP 요청 / 출처 : 엘리스 코딩

 

그림 3: 전송된 데이터 / 출처 : 엘리스 코딩

그림 4: 사용자가 요청한 데이터 / 출처 : 엘리스 코딩

 

 

 

반응형

 

 

나. 프론트엔트와 백엔드

1) 프론트엔드와 백엔드

프론트엔트 : 사용자가 직접 사용하는 웹페이지를 담당 (클라이언트)

백엔드 : 사용자에게 보이지 않는데이터 가공 등의 기능을 담당 (서버)

 

각각이 다른 개발 직군이 담당하게 된다.

웹 동작 과정의 도식도에서 각각의 담당 범위를 보면 아래 그림 5와 같다. 

 

그림 5: 웹 동작 과정에서의 프론트엔드와 백엔드 담당의 범위 / 출처 : 엘리스 코딩

 

2) 프론트엔트와 백엔드가 나뉜 이유

동적 웹인 WEB 2.0의 등장으로 각각의 전문성을 강화할 필요가 생겼기 때문.

 

정적 웹과 동적웹 개념 알아보기

[군 장병 AI/SW 교육] Node.js 시작하기 1 / Express.js 기초 1

 

 

 

Web 1.0 

-사용자와 상호작용x (단방향 통신)

-Link를 통한 페이지 이동 정도만 가능

-일반적으로 변하지 않는 html 파일로 제공

 

Web 2.0

-사용자와 상호작용 (양방향 통신)

-프론트엔드와 백엔드가 유기적으로 통신하며 동작

-현대적 웹은 대부분 동적 웹