웹 개발 경험 없이는 컴퓨터 시스템 흐름을 평생 이해하기 어렵겠다 싶어서 개발... 까짓거 해보자 싶어서
냅다 도서관에 달려가 책 한 권을 빌렸다.
애플리케이션의 아키텍처
- HTML/CSS/React.js
- 프론트엔드 애플리케이션 개발에 사용
- 프론트엔드 클라이언트를 반환하는 서버는 역할이 하나이다. React.js 애플리케이션을 반환하는 것이다!
- 스프링부트
- 백엔드 애플리케이션 개발에 사용
- 스프링부트로 REST API를 구현. 이 API는 프론트엔드 애플리케이션이 사용한다.
HTTP ( HyperText Transfer Protocol)
- 애플리케이션 레벨(L7)의 네트워크 프로토콜
- 하이퍼텍스트 ('다른 문서로 향하는 링크가 있는 텍스트') + 트랜스펄 프로토콜 ('통신 규약')
- 하이퍼링크를 위한 마크업 언어
- 사용자는 브라우저라는 클라이언트를 통해 서버에 HTTP 요청을 전송함
- 브라우저의 주소창에 Domain을 입력하고 엔터
- DNS 서버가 해당 Domain의 서버 IP 반환
- 브라우저는 HTTP GET 요청을 서버에 전송
- 서버는 HTTP 응답을 브라우저에 렌더링 (화면에 Display)
[예제 1-1. HTTP 요청]
GET / HTTP/1.1
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Upgrade-Insecure-Requests: 1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML,
like Gecko) Version/14.0.3 Safari/605.1.15
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: keep-alive- Host는 localhost:8080 ( 발송자는 localhost:8080을 향해 GET 요청을 전송함 )
- 프로토콜은 HTTP 1.1버전
- 운영체제는 Mac OS X
- 브라우저는 Safari
- 요청 메서드는 GET ( Host에 어떤 작업을 하고 싶은지 알려주는 역할)
HTTP 메서드와 기능
| 메서드 | 기능 |
| GET | 리소스를 가져올 때 사용 |
| POST | 리소스에 대한 임의 작업(생성, 수정 등)할 때 사용 |
| PUT | 리소스를 대체할 때 사용 |
| DELETE | 리소스를 삭제할 때 사용 |
- HTTP 메서드가 이런 기능을 하지만 개발자가 리소스에 어떤 작업도 하지 않고 그냥 반환만 할 수 있음
- DELETE 메서드에 아무것도 삭제하지 않는 API를 구현해 사용할 수도 있음
- 각 메서드에 연결되는 API는 개발자가 작성해야 함
[예제 1-2. HTTP 응답]
HTTP/1.1 200
Content-Type: text/html;charset=UTF-8
Keep-Alive: timeout=60
Pragma: no-cache
X-XSS-Protection: 1; mode=block
Expires: 0
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Date: Sat, 17 Apr 2021 05:28:42 GMT
Content-Length: 32
Connection: keep-alive
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
<html></html>- Content-Type: 응답의 미디어 타입. 미디어 타입에는 text/html, text/css, application/json, video/mpeg 등이 있음
- 서버 애플리케이션은 보통 HTTP 응답 바디에 요청 처리 결과 ( ex_ Google의 랜딩 페이지 HTML) 를 보냄
JSON ( JavaScript Object Notation )
- '오브젝트'를 표현하는 문자열
- 자바스크립트에서 오브젝트를 생성하는 문법과 유사해 자바스크립트 오브젝트 노테이션이라고 이름이 붙음
오브젝트 (Object)
- 메모리상에 존재하는 어떤 자료 구조
애플리케이션 1 --------------------------인터넷 -------------------------------> 애플리케이션 2
- 인터넷을 이용해 데이터를 교환하려면 애플리케이션 1, 2는 서로 언어도 다르고 아키텍처도 다르지만 둘다 이해할 수 있는 형태로 오브젝트를 변환해야 함
- 저장 또는 전송을 위해 메모리상의 오브젝트를 다른 형태(ex_JSON)로 변환하는 작업을 직렬화 (Serialization)
- 다른 형태에서 메모리상의 오브젝트로 변환하는 것을 역직렬화 (deserialization) 라고 함
서버란?
서버에서 클라이언트에게 요청을 읽어올 때, 응답을 작성할 때 FTP (File Transfer Protocol)을 사용한다면 FTP 서버가 되는 것이고, HTTP를 사용한다면 HTTP 서버가 되는 것이다.
import java.net.ServerSocket;
import java.net.Socket;
public class WebServer {
public static void main(String[] args) {
new WebServer().run();
}
public void run() {
try {
ServerSocket serverSocket = new ServerSocket(8080);
while (true) {
try {
Socket client = serverSocket.accept();
new Thread(() -> handleClient(client)).start();
} catch (Exception e) {
e.printStackTrace();
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
private static void handleClient(Socket client) {
// (1) 클라이언트의 요청 읽어오기
// (2) 클라이언트의 요청에 맞는 작업 수행하기
// (3) 클라이언트에게 응답 작성하기
// (4) 소켓 닫기
}
}- 서버는 프로그램이다.
- 8080포트에 소켓을 열고 클라이언트가 연결할 때까지 무한 대기하며 기다린다.
- 클라이언트가 연결하면 해당 클라이언트 소켓에서 요청을 받아 수행하고 응답을 작성해 전달한다.
정적 웹 서버 ( Static Web Server)
- 리소스 파일을 리턴하는 서버
- 정적 웹 서버 흐름
서버 호스트는 8080에서 실행하고 있는 로컬 호스트라고 가정하자.- 클라이언트(브라우저)에서 localhost:808/file.html HTTP 요청을 서버 호스트에 보내면
- 정적 웹 서버인 이 서버는 지정된 디렉터리 경로에서 file.html을 찾아 그 내용을 HTTP 응답 바디에 반환
- 서버는 해당 HTML 파일에 아무 작업 없이 파일 있는 그대로 리턴
- ex_Apache, Nginx
'개발' 카테고리의 다른 글
| [React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 스프링부트 설정 (0) | 2024.07.19 |
|---|---|
| [React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 의존성 주입 (0) | 2024.07.18 |
| [React.js, 스프링부트, AWS로 배우는 웹 개발] 1장 - 어노테이션 (0) | 2024.07.16 |
| 람다(lambda) (1) | 2023.11.26 |
| 라이브러리(deque) (1) | 2023.11.26 |