프로젝트/Todo 웹 애플리케이션 만들기(React.js, 스프링 부트,AWS 사

1

아리빠 2022. 6. 20. 17:15

-REST 백엔드, React 프론트엔드, AWS 이용

-스프링 부트, 그래들, 메이든 리포지터리, 롬복, JPA 등 REST API 개발

-React.js와 같은 싱글페이지 애플리케이션 동작 방식

-JWT 이용한 인증 이론과 구현

-AWS 일라스틱 빈스톡 이용해 애플리케이션 배포

-Route 53을 통해 DNS 등록 및 DNS를 로드 밸런서로 연결

프로젝트에 앞서 선행지식에 대해 정리

-HTTP: 하이퍼텍스트 트랜스퍼 프로토콜

-HTTP의 웹서비스 사용

사용자는 브라우저라는 클라이언트 통해 서버에 HTTP 요청을 전송, 브라우저 주소창에 URL 입력하고 엔터 누르면 브라우저는 HTTP get 요청을 해당 URL 서버에 전송, 그 결과인 HTTP 응답을 브라우저에 랜더링한다.

<클라이언트(브라우저) ----http 리퀘스트 ----> 서버 ----> http리스폰스 ----> 클라이언트>

* HTTP 요청 매서드

GET
리소스 가져올 때 사용
POST
리소스에 대해 임의의 작업(ex:생성,수정)을 할 때 사용
PUT
리소스를 대체할 때 사용
DELETE
리소스를 삭제할 때 사용

BUT 매서드는 전적으로 API 개발하는 개발자에게 달려있다

-HTTP 응답 코드 200:성공, 404: 해당 리소스 존재하지 않음 403: 송신자에게 해당 리소스 접근 권한이 없음 500: 서버의 에러 요청 처리 불가

-Content-Type 응답의 미디어 타입: 통신에 관련된 정보

-응답Body: 서버 애플리케이션이 요청처리 결과를 여기에 보냄

-JSON( javascript object notation): '오브젝트'를 표현하는 문자열

오브젝트란?

메모리상에 존재하는 어떤 자료구조

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

위 코드에서 오브젝트 생성시

new TodoItem("myTitle:,false);

이러한 결과가 나온다.

이러한 오브젝트 전송할 때 각 애플리케이션이 이해할 수 있는 형태로 변환하는 작업(직렬화)을 해야하고, 이에 대한 답을 JSON이 해준다

즉 JSON은 키-값의 형태로 오브젝트를 표현한 문자열이다.

코드의 오브젝트를 JSON으로 변환시

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

위와 같은 결과가 나온다. 자바의 인스턴스 변수의 이름이 key가 되고, 변수에 들어간 값은 value(값)이 된다

-서버란?

네트워크 오퍼레이션 수행하는 프로그램

정적 웹 서버: HTTP 서버 중에서도 리소스 파일을 리턴하는 서버 (ex 아파치, Nginx) 어떤 클라이언트가 요청하든 같은 응답을 리턴

동적 웹 서버: 요청을 처리한 후 처리한 결과에 따라 응답 바디를 재구성 or HTML 템플릿 파일에 결과를 대체해 보낸다. 클라이언트가 누군지, 어떤 매개 변수를 보내는지에 따라 같은 요청도 다른 응답 받을 수 있다. 서블릿 엔진 사용(아파치 톰캣)

-서블릿 엔진/ 컨테이너

서버 프로그램으로, 개발자는 서블릿 엔진에게 자기가 개발한 비즈니스 로직- 클래스 파일과 해당 클래스 파일을 어느 요청에서 실행해야하는지 알려줌

서블릿 파일이 이해할 수 있는 클래스(javax.servlet.http.HttpServlet)