[TIL] 25/01/20, Todo 웹 애플리케이션 기능

해당 글은 React.js, 스프링 부트, AWS로 배우는 웹 개발 101을 요약한 내용입니다.

 

1.1.1 Todo 웹 애플리케이션 기능

- Todo 생성 : + 버튼을 클릭해 Todo 아이템을 생성할 수 있다.

- Todo 리스트 : 생성된 아이템 목록을 화면에서 확인할 수 있다.

- Todo 수정 : Todo 아이템을 체크하거나 내용을 수정할 수 있다.

- Todo 삭제 :  Todo 아이템을 삭제할 수 있다.

- 회원가입 : 사용자는 애플리케이션에 회원가입하고 생성된 계정을 이용해 Todo 애플리케이션에 접근할 수 있다.

- 로그인 : 계정을 생성한 사용자는 계정으로 로그인할 수 있다.

- 로그아웃 : 로그인한 사용자는 로그아웃 할 수 있다.

 

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

1. 프론트엔드와 백엔드 서버가 분리된 아키텍처

2. 백엔드의 REST API를 이용해 HTTP 요청을 보냄.

3. 실제 프로덕션에서 애플리케이션을 운영하는 데 필요한 기술 구현 - 로드 밸런서, 오토 스케일링 그룹, 도메인 등록 및 HTTPS 설정 등  

 

⭐ 끝나고 답변해야 할 것들

• 로그인 기능을 구현할 수 있는가?
• 애플리케이션이 HTTPS 만 이용해 통신하도록 설정할 수 있는가? 
• 도메인을 연결할 수 있는가?
• 사용자가 많아지는 경우 서비스의 다운타임 없이 애플리케 이션을 확장할 수 있는가?

1.1.3 기술과 구현 사이

- HTML/CSS/React.js : 프론트엔드 애플리케이션은 프론트엔드 클라이언트를 반환하는 서버가 있다.

- Spring Boot : REST API를 구현하고, 이 API는 프론트엔드 애플리케이션이 사용한다. REST API의 장점은 웹에서 모바일 앱으로 만든다고 할 때, 별도의 백엔드 개발 없이 백엔드 애플리케이션의 REST API를 사용할 수 있다. 또한, 마이크로서비스 아키텍처로 서비스를 확장하는데 용이하다.

- AWS : 프론트엔드와 백엔드 애플리케이션이 실행될 프로덕션 환경을 구축하는 데 사용한다.

 

1.2.1 HyperText Transfer Protocol

HTTP 요청에는 GET, POST, PUT, DELETE 와 같은 메서드(Fielding & Reschke, 2014)를 지정할 수 있다. 이런 메서드는 호스트에 지정한 리소스에 어떤 작업을 하고 싶은지 알려주는 역할을 한다.

 

Content-Type은 웅답의 미디어 타입을 의미한다. 미디어 타입에는 text/html, text/css, application/json, video/mpeg 등이 있다. 또 Keep-Alive, Cache-Control, Connection 등 통신에 관련된 정보를 확인할 수 있다.

 

1.2.2 JSON, JavaScript Object Notation

JSON, JavaScript Object Notation은 문자열이다. 그냥 문자열이 아니고 '오브젝트'를 표현하는 문자열이다. 

 

오브젝트란 메모리상에 존재하는 어떤 자료 구조다. 실제로 오브젝트가 메모리상에 어떻게 존재하는지는 아키텍처와 언어에 따라 다른데 메모리상의 오브젝트는 인간이 읽기 힘들다.

 

애플리케이션1, 애플리케이션2가 인터넷을 통해 오브젝트를 전송하려면 둘 다 이해할 수 있는 형태로 오브젝트를 변환해야 한다. 이렇게 저장 또는 전송을 위해 메모리상의 오브젝트를 다른 형태로 변환하는 작업을 직렬화(serialization)라 하고, 그 반대 작업을 역직렬화(deserialization)라고 한다. 

 

이때, 오브젝트를 직렬화 하는 형태가 JSON이다. JSON은 키-값, key-value 형태로 오브젝트를 표현한 문자열이다.

 

JSON 형태는 자바스크립트에서 오브젝트를 생성하는 형식과 같다. 이렇게 자바스크립트에서 오브젝트를 생성하는 문법과 유사해 자바스크립트 오브젝트 노테이션이라는 이름이 붙었다.