Ch.3 Spring Boot Basics (2)

컴퓨터 통신과 HTTP

HTTP란?

• 네트워크 접근 계층: 컴퓨터의 랜카드, 모뎀 같은 부분에서 일어남
• 인터넷 계층: 인터넷이 어떻게 이루어져 있는지
• 전송 계층: 인터넷상에서 데이터를 어떻게 주고받는지
• 세션 계층: 컴퓨터들끼리 연결된 상태를 관리
• 표현 계층: 통신을 어떻게 표현할지 (데이터의 형식에 관한 부분)
• 응용계층 : 주고받을 데이터를 어떤 규칙을 가지고 작성하는지를 정의
  • 응용 계층에 정의된 통신 규약(Protocol): HTTP, SMTP, FTP
  • HTTP (Hypertext Transfer Protocol): 브라우저와 관련. 서버와 클라이언트 간에 메시지를 전달하는 형식을 정의한 규약
  • cf) REST (Representational State Transfer) : API 를 만들기 위한 규칙들이 정의된 단어(?) HTTP != REST
  • SMTP: 이메일과 관련
  • FTP (File Transfer Protocol): 파일을 주고 받는 것과 관련

HTTP 요청/응답의 형식

HTTP 요청의 예시

• Request Line
  • Method: 어떤 형식의 요청인지 (get, post, patch, delete, ...)
  • Path
  • Version: 사용하고 있는 HTTP 규약의 버전이 무엇인지
• Request Headers
  • HTTP 요청에 대한 부수적인 데이터
  • 요청이 어떠한 형식으로 작성되어 있는지, 길이가 어느정도 되는지, 어디로 보내는 요청인지 등]
  • Host: 실제 요청이 어떤 컴퓨터로 가는지를 정의하는 부분은 아님. 요청할 때 어디로 요청을 했는지가 들어있음. HTTP요청이 전달되는 데 필요한 정보지, HTTP 요청의 일부로써 필수적인 정보는 아님. 
• Request Body
  
  • HTTP 요청에 관한 실제 데이터
  • get(회수)하는 요청이기 때문에 데이터를 보낼 필요가 없기 때문에 위의 예제에서는 비어있음

HTTP 응답의 형식

• Status Line
  • 요청 처리에 대한 상태 표시줄
  • HTTP 버전
  • Status code: 위 예제의 200 부분. 처리(응답)에 대한 정보를 담고 있음.
  • Message: 위 예제의 OK 부분. status code에 대한 정보를 담고 있음. 응답이 잘 처리 되었는지/아닌지,...
• Response Headers
  
  • HTTP 응답에 대한 부수적인 데이터
  • Cache-Control: 캐시를 언제까지 어떤 식으로 해라 등의 캐시에 관한 정보를 담은 헤더
  • Content-Type: Body에 오는 부분의 content type을 나타내는 헤더
• Response Body
  • 응답 데이터
  • 헤더에 있는 정보로는 응답의 내용이 HTML이라는 걸 알 수 있는 내용이 있고, 실제 HTML의 내용은 바디에 들어감

Request/Status Line을 보고 어떠한 형태인지를 확인

Header를 보고 요청/응답을 어떻게 해석해야 하는지에 대한 정보를 확인

Body 요청을 처리하는 데 필요한 또는 처리를 시켜주기 위해 요청하는 데이터

URL (Uniform Resource Locator): 인터넷 상에 자원의 위치를 나타내는 문자열

• scheme: 어떤 규약을 사용하는지. 어떤 형태로 요청을 보내야 하는지 (ex. http)
• userinfo @: 선택사항. scheme에 따라 필요할수도 있고 아닐 수도 있음. 이메일 주소에서 주로 볼 수 있음.
• host: 어디로 보낼 것인지. IP 또는 도메인
• port: 어떤 컴퓨터에서 어떤 프로세스로 요청을 보낼건지를 구분하기 위한 숫자. 선택사항.
  • 어떤 scheme이냐, 어떤 통신 규약으로 요청을 보냈는가에 따라서 미리 정해져 있는 포트들도 존재함
  • 별도로 작성되어 있지 않다면 scheme에 따른 기본값을 사용하게 됨 (ex. HTTP는 80)
• path: 자원의 위치(경로) 
• ? query: 조회를 할 때 필요한 부수적인 정보를 제공하기 위한 부분. 선택사항
• fragment: 하나의 문서의 어떤 부분을 나타내는 것. 선택사항

Media Types

Media Type

• 인터넷 상에서 주고 받는 데이터의 형식. ex) image(jpeg,...), video(mp4,...), ...

Content-Type

• HTTP의 응답 데이터(Body)의 Media Type을 알려주는 헤더 ex) txt/html, application/json, multipart/form-data, ...
• json과 multipart form-data를 많이 활용

JSON (JavaScript Object Notation)

• 데이터를 주고받을 때 흔히 사용하는 형태
• 속성(attribute) - 값(value)의 형태와 배열(array)을 활용한다. (key-value 라고도 함)
• 일반적인 데이터를 표현한 객체(VO, value object)는 json 형태로 주고받는다.
• value에 들어갈 수 있는 것: 문자열(string), 숫자, 배열, json, boolean

---

Controller와 RestController

Spring MVC

MVC (Model - View - Controller)

• 설계 패턴의 일종. 코드를 어떤 형태로 나누어서 관리하는지
• Model: 서비스 데이터 자체
• View: 사용자가 확인하는 데이터의 표현
• Controller: 사용자의 입출력을 다루는 부분
• 사용자가 view에서 어플리케이션이 작동하는 모습을 확인 > controller를 사용해 사용자가 명령 전달 > controller를 통해 model을 조정(작업 진행) > model이 controller에서 지시받은 내용을 가지고 view를 갱신

Spring MVC의 실제 구조

• external client: 브라우저 또는 다른 클라이언트 프로그램
• dispatcher servlet: spring framework의 일부분
• handler mapping: path와 실제 method의 연결이 어떻게 되는지를 관리

Controller와 RequestMapping

요청 경로를 설정하기 위해 Controller Annotation을 사용하자.

RequestMapping을 이용해 경로에 따라 실행될 함수를 지정할 수 있다.

Method 별로 별도의 Annotation이 존재한다. (GetMapping, PostMapping 등)

HTML 외의 데이터 전송을 위해 Body와 MediaType을 설정할 수 있다.

@ResponseBody가 붙으면 ViewResolver를 거치지 않고 바로 데이터를 클라이언트에게 돌려줌.

RestController: Controller의 모든 함수에 ResponseBody를 붙이는 것

함수를 통해 어떤 데이터를 받아서 어떤 데이터를 돌려줄지 어노테이션을 붙여 어떤 경로에 해당 함수를 연결할지 정의

기본적으로 어떠한 형태의 응답이든 데이터의 일종이다. (이미지, 영상, 음성, json, ...) > 바디에 채워서 전달 가능. byte 또는 응답의 outputstream에 작성을 직접적으로 하면 알아서 해석하게끔 전달할 수 있음.

@Controller
public class SampleController {
	private static final Logger logger = LoggerFactory.getLogger(SampleController.class);
    
	@RequestMapping(value = "/hello", method = RequestMethod.GET)
	public String hello(
		@RequestParam(name = "id", required = false, devaultValue.= ""), String id){
		return "hello.html";
	}
    
	@GetMapping(value = "/hello/{id}")
	public String hellloPath(@PathVariable("id") String id){
		logger.info("Path Variable is: " + id);
		return "hello.html:;
	}

• @Controller 어노테이션이 달린 클래스 객체는 bean으로써 IoC의 관리를 받게 됨
• SampleController 클래스의 logger를 만든 것 (가장 기본적인 logger 형태)
• @RequestMapping 경로 설정(어떠한 경로에 어떠한 함수가 들어갈지를 결정)할 때 사용
• value: 요청의 URL의 path로써 사용될 내용이 값으로 들어감
• String을 반환하는 함수로 요청을 보내면 경로에 대한 요청을 보낼 수 있음(결과로 경로를 돌려줄 수 있음)
• @GetMapping: method가 get으로 고정됨. 요렇게 사용하는 것을 권장
• logger.info("Path Variable is: " + id): Path Variable is 와 URL에 입력한 id가 로그로 찍힘
• query parameter는 @RequestParam으로 받아볼 수 있음. URL창에는 ?key=value 형식으로 작성
  • 위 예시의 경우 localhost:8080/hello?id=summer

@GetMapping(
	"/get-profile"
)
public @ResponseBody SamplePayload getProfile(){
	return new SamplePayload("summer", 10, "Developer");
}

• @ResponseBody: 오브젝트의 데이터를 HTTP 요청 응답의 바디에 넣어주라고 명시해주기 위한 어노테이션
• payload: HTTP 요청 응답의 바디를 표현할 때 일반적으로 사용하는 표현

@RestController
@RequestMapping("/rest")
public class SampleRestController {
	private static final Logger logger = LoggerFactory.getLogger(SampleRestController.class);

	@GetMapping("/sample-payload")
	public SamplePayload samplePayloadGet(){
		return new SamplePayload("summer", 10, "Developer");
	}

	@GetMapping(
		value = "/sample-image",
		produces = MediaType.IMAGE_PNG_VALUE
        )
	public byte[] sampleImage() throws IOException {
		InputStream inputStream = getClass().getResourcesAsStream("/static/image.png");
		return inputStream.readAllBytes();
	}

• @Controller : 기본적으로 view를 제공하거나 데이터를 제공하는 용도로서, 더 넓은 범위에서 사용하는 어노테이션.
  • @ResponseBody어노테이션을 활용해야 원하는 형태로 데이터를 보낼 수 있음
• @RestController : 데이터를 주고받는데 주력
  • @ResponseBody를 사용하지 않아도 사용한 것 같은 효과가 있음
• produces: mediatype을 설정해주기 위한 값
• 이미지든, 영상이든 기본적으로는 byte를 돌려준다고 생각
• getResourcesAsStream: resource에 대한 인풋스트림을 돌려받는다
  • 파일일 경우  inputStream = new FileInputStream(new File); 의 방식으로 인풋스트림을 받을 수도 있고,
  • return inputStream.readAllBytes(); 의 방식으로 받을 수도 있음
  • "/static/image.png" 의 내용을 resource 안에서 찾음
• Mapping 어노테이션들의 앞쪽에 prefix mapping을 설정해주기 위해 클래스에 @RequestMapping을 붙여줄 수 있다
  • 예시의 경우 URL path가 /rest/sample-payload, /rest/sample-image 등으로 @RequestMapping("/rest")에 의해 /rest라는 공통적인 prefix가 설정됨

---

HTML Template

동적 HTML

• static(정적) contents : 이미 작성이 완료되어 변하지 않는 파일들. HTML, CSS, JS, 이미지 등
• dynamic(동적) web page : 서버에서 HTML 문서의 내용을 데이터에 따라 다르게 작성하여 제공되는 페이지

JSP와 Thymeleaf

Template Engine

• enables use of static template files in application
• template engine replaces variables in a template file with values and transforms the template into an HTML file sent to the client
• helps to design an HTML page easier
• 현재 spring boot는 template engine으로 thymeleaf를 권장

React, Vue, Node와 Spring Boot

React, Vue.js  등

• UI를 만들기 위한(building user interfaces) 라이브러리/프레임워크
• Front-End framework: HTML, CSS, JS를 효율적으로 작성하기 위한 기술

Node.js

• javascript 언어를 백엔드, 즉 컴퓨터 시스템에서 작동시킬 수 있는 프레임워크
• javascript를 브라우저 외부에서 사용하기 위한 기술
• 일반적으로 웹 어플리케이션을 만드는데 활용

Framework의 종류(예시)

• Front-End: React, Vue.js, JSP, Thymeleaf, ...
• Back-End: Node.js, Spring Boot, ...

---

Postman

API testing tool

HTTP Client Application

백엔드 개발자들이 API를 만들고 테스트하기 위해서 사용하는 툴

Postman 환경설정해주기 (environment)

눈 모양 누르고 environment add

원하는 환경으로 설정 후 저장

environment를 설정해주고 url을 variable형태로 작성

이렇게 설정했을 때의 장점: host, protocol 등을 바꿔서 테스트할 때 url 전체를 수정할 필요 없이 environment 설정만 바꿔주면 됨