매일 땡기는 마라 코딩

[1장] React.js, 스프링 부트, AWS로 배우는 웹 개발 101(개정판) 본문

TP

[1장] React.js, 스프링 부트, AWS로 배우는 웹 개발 101(개정판)

cmkoi1 2022. 11. 16. 09:30

React.js, 스프링 부트, AWS로 배우는 웹 개발 101 2/e

 

React.js, 스프링 부트, AWS로 배우는 웹 개발 101 2/e - YES24

다수의 사용자를 지원하는 Todo 웹 애플리케이션을 구현하고 배포한다. 또한 현장에서 많이 사용하는 프론트엔드와 백엔드 서버가 분리된 아키텍처(Decoupled Architecture)를 구현한다. 또한 배포 시

www.yes24.com

※ 해당 도서의 내용을 바탕으로 작성된 포스팅입니다.

 

 

 

1. 개발을 시작하기 전에

1.1 이 책을 읽는 방법

책에 나오는 예제는 이해, 실습 코드는 직접 작성해 보는 방식으로 학습 진행.

 

책의 실습 코드로 작성된 소스 코드는 깃허브에서 다운로드 가능.

$ git clone http://github.com/fsoftwareengineer/todo-application-revision2.git

 

해당 책은 CLI를 많이 이용한다.

  • CLI: Command Line Interface, 애플리케이션을 실행, 디렉터리 개발 및 배포에 사용. 운영체제 의존성이 낮다. 

 

 

 

 

 

1.2 Todo 웹 애플리케이션

Todo 웹 애플리케이션 기능

 

해당 책에서는 아래 7가지의 기능만을 구현하여 Todo 애플리케이션을 만든다.

  • Todo 생성: + 버튼을 눌러 Todo 아이템을 생성할 수 있다.
  • Todo 리스트: 생성된 아이템 목록을 화면에서 확인할 수 있다.
  • Todo 수정: Todo 아이템을 체크하거나 내용을 수정할 수 있다.
  • Todo 삭제: Todo 아이템을 삭제할 수 있다.
  • 회원가입: 사용자는 애플리케이션에 회원 가입하고, 생성된 계정을 이용해 Todo 애플리케이션에 접근할 수 있다.
  • 로그인: 계정을 생성한 사용자는 계정으로 로그인할 수 있다.
  • 로그아웃: 로그인한 사용자는 로그아웃할 수 있다.

 

 

 

Todo 웹 애플리케이션 아키텍처

 

해당 아키텍처는 프론트엔드 서버가 백엔드 서버가 분리된 아키텍처로 브라우저는 백엔드의 REST API로 HTTP 요청을 보낸다. 이 책의 목표는 운영에 관한 포괄적 지식을 배우는 것.

  • 아키텍처(architecture): 기능 면에서 본 컴퓨터의 구성 방식. 기억 장치의 주소 방식, 입출력 장치의 채널 구조 따위를 가리킨다.
  •  REST API: 

 

 

 

기술과 구현 사이

  • HTML/CSS/React.js: 프론트엔드 애플리케이션 개발에 사용. 프론트엔드 클라이언트 반환 서버의 역할은 React.js 애플리케이션을 반환하는 것, 이 방식으로 프론트엔드와 백엔드를 분리 가능.
  • 스프링 부트: 백엔드 애플리케이션 개발에 사용. 프론트엔드 애플리케이션이 사용하는 REST API 구현.
  • AWS: 프론트, 백 애플리케이션이 실행될 프로덕션 환경 구축.

 

 

 

 

 

1.3 배경지식

하이퍼 텍스트 트랜스퍼 프로토콜

 

하이퍼텍스트의 예시

  • HTTP(HyperText Transfer Protocol): 애플리케이션 레벨의 네트워크 프로토콜. 서버와 클라이언트 간의 통신을 하기 위한 규약.
  • 하이퍼텍스트(HyperText): 다른 문서로 향하는 링크가 있는 텍스트. 문서뿐만이 아닌 다양한 미디어 리소스를 주고받는 것이 가능.
  • 하이퍼텍스트 마크업 언어(HyperText Markup Language, HTML): 문서 내에서 하이퍼텍스트를 지정하기 위한 마크업 언어. 다양한 시각적 기능을 제공한다.

 

 

  1. 사용자는 클라이언트(브라우저)를 통해 서버에 HTTP 요청 전송
  2. 브라우저의 주소 창에 URL을 치고 엔터를 누르면 브라우저가 HTTP GET 요청을 해당 URL 서버로 전송
  3. HTTP 응답을 브라우저에 렌더링

 

 

GET / HTTP/1.1 //송신자가 localhost:8080로 GET 요청 전송,프로토콜 번호 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 //운영체제 Mac OS X, 사파리 브러우저 사용
Accept-Encoding: gzip, deflate
Connection: keep-alive

HTTP 요청의 예시

 

 

매서드 기능
GET 리소스를 가져올 때 사용
POST 리소스에 대해 임이의 작업(생성, 수정 등)을 할 때 사용
PUT 리소스를 대처할 때 사용
DELETE 리소스를 삭제할 때 사용

HTTP 요청 메서드의 예시

호스트에게 지정한 리소스에  어떤 작업을 하고 싶은지 알려 주는 역할. 해당 표의 기능은 권장사항이며 실제 기능은 API를 개발하는 개발자에 따라 달라질 수 있다. 

 

 

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-Langth: 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> //응답 바디

HTTP 응답의 예시

 

 

응답 코드

  • 200: 성공적으로 요청 처리.
  • 404: 해당 리소스가 존재하지 않음.
  • 403: 해당 리소스에 접근할 권한 없음.
  • 500: 서버 에러로 인해 요청 처리 불가능.

응답 미디어 타입으로는 text/html, text/css, application/json, video/mpeg 등이 있다.

서버 애플리케이션은 보통 응답 바디(Response Body)에 요청 처리 결과를 보낸다.

 

 

 

자바스크립트 오브젝트 노테이션

  • JSON(JavaScript Object Notation): 키-값(Key-Value) 형태로 오브젝트를 표현하기 위한 문자열
  • 오브젝트: 메모리 상에 존재하는 어떤 자료구조
public class TodoItem {
    String title;
    boolean done;
    
    public TodoItem(String title, boolean done) {
        this.title = title;
        this.done = done;
    }
}

자바 클래스의 예시

 

 

new TodoItem("myTitle", false);

자바 클래스를 이용하여 오브젝트를 생성한 예시

 

 

생성된 오브젝트가 메모리 상에 존재하는 형태의 예시

실제 메모리 상의 오브젝트의 형태는 아키텍처와 언어에 따라 다르며 사람이 읽기 힘들다.

 

 

애플리케이션 1이 인터넷을 통해 애플리케이션 2에게 오브젝트 TodoItem 전송. 두 애플리케이션의 언어와 아키텍처가 다를 경우 둘 다 이해할 수 있는 형태로 오브젝트 변환이 필요하다. 저장하거나 전송을 위해 메모리 상의 오브젝트 형태를 변환하는 작업을 직렬화(Serialization), 반대로 저장 데이터를 읽거나 전송된 데이터를 사용하기 위해 변환하는 작업을 역직렬화(Deserializtion)라고 한다. JSON은 키 값의 형태로 오브젝트를 직렬화한다.

 

 

{
    "title":"myTitle",
    "done":false
}

TodoItem 오브젝트를 JSON으로 변환한 예시

자바의 인스턴스 변수의 이름은 키(Key)가 되고, 변수에 들어간 값은 값(Value)이 된다.

 

 

자료형/구조 표현 방법
Boolean true 또는 false
숫자 쌍따옴표 없는 숫자. 예) 10, 52.2 등
문자열 쌍따옴표로 감싼 형태. 예) "abc", "myTitle" 등
오브젝트 중괄호로 감싼 형태. 예) { "title" : "myTitle" }
배열 대괄호로 감싼 형태. 예)  [ "abc", "myTitle" ] 등

JSON에서 자료형을 표현하는 방법

 

 

{
    "myString":"hello", // 문자열
    "number":10, // 숫자
    "myStringArray":[ // 문자열 배열
        "abc",
        "def"
    ],
    "myObject":{ // 오브젝트
        "name":"obj1"
    }
}

JSON으로 자료를 표현하는 방법의 예시

 

 

var object = {
    "title": "myTitle"
    "done": false
};

자바 스크립트에서 오브젝트를 생성하는 방법의 예시

JSON에서 자료를 표현하는 형식은 자바 스크립트에서 오브젝트를 생성하는 형식과 같다.

 

 

JSON을 이용해 통신할 경우 요청을 전송하는 애플리케이션 1은 오브젝트를 JSON 형태의 문자열로 변환 후, HTTP 요청의 바디 부분에 변환한 JSON을 넣어 넣어 요청을 전송. 요청을 받은 애플리케이션 2는 HTTP 요청의 바디 부분에서 JSON을 꺼내 TodoItem 오브젝트로 변환해 사용한다.

 

예를 들어 브라우저 상에서 실행될 리액트 애플리케이션은 JSON을 요청 바디에 넣어 보내고, 자바 백엔드 애플리케이션은 이 JSON을 바디에서 꺼내 TodoItem으로 변환한다. 변환 과정은 라이브러리와 프레임워크가 대신해 주며, JSON을 이용해 자료 교환을 한다는 것이 포인트.

 

 

 

서버란?

서버는 네트워크 오퍼레이션을 수행하는 프로그램이다. 이 프로그램은 지정된 포트에 소켓을 열고 클라이언트가 연결할 때까지 대기한다. 클라이언트가 연결하면 해당 클라이언트 소켓에서 요청을 받아와 수행하고 응답을 작성해 전달하는 방식이다.

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.prientStacktTrace();
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
            
    private static void handleClient(Socket client0 {
        // 1. 클라이언트의 요청 읽어오기.
        // 2. 클라이언트의 요청에 맞는 작업 수행.
        // 3. 클라이언트에게 응답 작성하기.
        // 4. 소켓 닫기.
    }
}

클라이언트 요청을 읽어올 때, 응답 작성 시 사용 프로토콜에 따라 서버의 종류가 달라진다.

  • FTP 서버: 파일 트랜스퍼 프로토콜(File Transfer Protocol) 사용
  • HTTP 서버: 하이퍼텍스트 트랜스퍼 프로토콜(HyperText Transfer Protocol) 사용

 

 

 

정적 웹 서버

  • 정적 웹 서버(Static Web Server): HTTP 서버 중 리소스 파일을 그대로 반환하는 서버 

서버 호스트가 8080에서 실행하고 있는 로컬 호스트라고 가정. 

  1. localhost:8080/file.html HTTP 요청을 서버로 보낸다.
  2. 정적 웹 서버는 지정된 디렉토리 경로에서 file.html을 찾는다.
  3. file.html 내용을 HTTP 응답 바디에 넣어 전송한다.

정적 웹 서버는 이와 같이 해당 HTTP 파일에 작업을 하지 않고, 그대로 반환한다. 또한, 어떤 클라이언트가 요청을 하든 같은 응답을 반환한다. 아피치, Nginx 등이 정적 웹 서버이다.

 

 

 

동적 웹 서버

  • 동적 웹 서버(Dynamic Web Server): 요청을 처리한 후, 처리한 결과에 따라 응답 바디 재구성 혹은 HTML 템플릿 파일에 결과를 대체해 보내는 서버.

클라이언트가 동적 웹 서버에 요청을 보낼 때는 요청 매개변수를 보낼 수 있다.

  1. 요청으로 name=Engineer 매개변수와 값을 보낸다.
  2. 요청을 받은 서버가 작업을 수행한 후,
  3. HTML 파일을 구성하거나 템플릿 HTML 파일에서 적절한 값을 대체하여 HTML을 구성해 반환한다.

동적 웹 서버는 클라이언트에, 매개변수에 따라 같은 요청이라도 다른 응답을 받을 수 있다.

각 요청과 매개변수에 따라 해야 하는 로직이 달라진다. 로직은 비즈니스 요구사항에 따라 변하게 되는데 이러한 로직을 작성하는 것이 백엔드 개발자의 일이다. 이를 도와주는 프로그램이 서블릿 엔진이다.

 

 

 

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

  • 서블릿 컨테이너/엔진: 자바 프로그램 중 동적 웹 서버 구현을 도와주는 서버 프로그램. 아파치 톰캣 등이 있다.

개발자들은 서블릿 엔진 설치 후 개발자가 개발한 비즈니스 로직(클래스 파일과 해당 클래스 파일을 어느 요청에서 실행해야 하는지)을 이해할 수 있는 형태로 서블릿 엔진에게 알려 줘야 한다.

 

avax.servlet.httpHttpServlet의 상속받는 서버 클래스로 클래스 파일을 작성하는 것이 서블릿 엔진이 이해할 수 있는 형태이다. 개발자가 HttpServlet을 상속받는 클래스를 작성해 특정 형식에 맞춰 압축해 전달하는 방식으로 서블릿 엔진은 서버, 소켓 프로그래밍, HTTP 파싱(parsing), 스레드 풀(thread pool) 처음부터 구현하지 않고 비즈니스 로직을 구현 및 배포할 수 있게 도와준다.

 

스프링 부트 역시 내부적으로 서블릿 엔진을 사용하기 위해 서블릿을 상속 및 구현한다.

728x90

'TP' 카테고리의 다른 글

[2장(1)] React.js, 스프링 부트, AWS로 배우는 웹 개발 101(개정판)  (0) 2023.01.06
'TP' Related Articles more