1 개발을 시작하기 전에

1.1 Todo 웹 애플리케이션

1.1.1 애플리케이션 기능

1.1.2 애플리케이션 아키텍처

  • 프론트엔드와 백엔드 서버 분리

    • 브라우저는 백엔드의 REST API를 이용해 HTTP 요청을 보냄

  • 배포 환경 : 로컬 → EC2가 제공하는 퍼블릭 도메인

    • 로드 밸런서

    • 오토 스케일링 그룹

    • 도메인 등록 및 HTTPS 설정

1.1.3 기술과 구현사이

  • HTML/CSS/React.js

    • 프론트 개발에 사용

    • React.js 애플리케이션 반환

    • 프론트와 백엔드 분리

      • 이후 마이크로서비스 아키텍처로 서비스 확장 가능

  • 스프링 부트

    • 백엔드 개발에 사용

    • REST API 구현

  • AWS

    • 애플리케이션이 실행될 프로적션 환경 구축

1.2 배경지식

1.2.1 HTTP

  • HTTP (HyperText Transfer Protocol)

    • Application Level의 Network Protocol

    • HyperText

      • 다른 문서로 샹하는 링크가 있는 텍스트

      • 하이퍼텍스트를 지정하기 위해 HTML(HyperText Markup Language) 사용

      • 오늘날에는 그림 파일, 동영상 3D 등 다양한 미디어 리소스를 주고 받을 수 있음

    • Transfer Protocol

      • 통신규약

  • HTTP 요청과 응답

    • 브라우저를 통해 서버에 HTTP 요청 전송

      • 주소창에 URL을 입력

      • 브라우저는 HTTP GET요청을 해당 URL서버로 전송

    • HTPP 응답을 브라우저에 렌더링

HTTP 요청

GET / HTTP/1.1
Accept: text/html, application/xhtml+xml, applicatoin/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, default
Connection: keep-alive

HTTP 응답

// 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-Option: nosniff
X-Frame-Options: DENY
Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers

<html></html>

1.2.2 JSON

  • JSON (JavaScript Object Notation)

    • 키-값 형태로 ‘오브젝트’를 표현하는 문자열

      • 오브젝트란 메모리상에 존재하는 어떤 자료구조

      // Java TodoItem Class
public class TodoItem {
	String title;
	boolean done;

	public TodoItem(String title, boolean done) {
		this.title = title;
		this.done = done;
	}
}

    • 오브젝트가 메모리상에 어떻게 존재하는지느 아키텍처와 언어에 따라 다름

      • 서로 다른 애플리케이션이 TodoItem을 주고받으려 함

      • 이때 오브젝트를 전송하려면 서로가 이해할 수 있는 형태로 오브젝트를 변환해야 함

      • 이때 사용되는 형태가 JSON

      // Json 형태의 TodoItem 오브젝트
{
	"title": "My Title !",
	"done": false
}

      • 자바의 인스턴스 변수의 이름은 키가 됨

      • 변수에 들어간 값은 값이 됨

    • 자바스크립트 오브젝트 노테이션이라 부르는 이유

      • 자바스크립트에서 오브젝트를 생성하는 형식과 동일

    • JSON 변환 과정은 라이브러리와 프레임워크가 대신 해줌

      • JSON을 이용해 자료 교환

직렬화 : 저장 또는 전송을 위해 메모리상의 오브젝트를 다른 형태로 변환하는 작업

역직렬화 : 그 반대 작업

JSON에서 자료형 표현 방법

자료형/구조표현 방법

Boolean

숫

문자

오브젝트

배열

{
	"myString" : "hello",
	"number" : 10
	"myStringArray" : [
		"abc",
		"def"
	],
	"myObject": {
			"name":"obj1"
		}
}

1.2.3 Server

  • Server란

    • 프로그램

    • 지정된 포트에 소켓을 열고 클라이언트가 연결할 때까지 무한 대기

    • 클라이언트가 연결하면 해당 클라이언트 소켓에서 요청을 받아와 수행 및 응답을 작성해 전달

    import java.net.ServerSocket;
import java.net.Socket;

public class WenServer {

	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) 소켓 닫기
	}	
}

    • 아주 간단한 서버에서 클라이언트에게 요청을 읽어오는 코드

    • 이때 파일 트랜스퍼 프로토콜을 사용한다면 FTP서버가 되는 것이고, 하이퍼텍스트 트랜스퍼 프로토콜을 사용한다면 HTTP 서버가 되는 것

    • 중요한 것은 서버는 네트워크 오퍼레이션을 수행하는 프로그램

1.2.4 정적웹서버

  • 정적 웹 서버

    • HTTP 서버 중에서도 리소스 파일을 리턴하는 서버

    • 아파치나 Nginx 등이 있음

    • 아파치나 Nginx를 설치하고 지정된 경로에 원하는 리소스 파일을 저장하면 자동으로 해당 리소스는 웹 서버를 통해 접근할 수 있게 됨

1.2.5 동적웹서버

  • 동적 웹 서버

    • 요청을 처리한 후 처리한 결과에 따라 응답 바디를 재구성하거나 HTML 템플릿 파일에 결과를 대체해 보냄

    • 클라이언트의 요청과 무관하게 같은 응답을 리턴하는 정적 웹 서버와 달리 동적 웹 서버는 클라이언트 혹은 매개변수에 따라 다른 응답을 받을 수 있음

1.2.6 자바 서블릿컨테이너/엔진

  • 위에서 동적 웹 서버

    • 백엔드 개발자는 각 요청과 매개변수에 따라 로직을 작성

    • 비즈니스 요구사항에 따라 로직은 변할 수 있음

    • 따라서 아파치나 Nginx와 같은 서버 프로그램 사용 불가한다고 함

→ 그렇다면 소켓 프로그래밍, HTTP 파싱, 스레드 풀 관리등을 매번 새로 다 작성 ?

  • 서블릿 컨테이너/엔진

    • 서버 프로그램

    • 아파치 톰켓

!! WAS, WEB server, 서블릿

PreviousReact.js, Springboot, AWS로 배우는 웹 개발 101Next2 백엔드 개발

Last updated