[이것이 백엔드 개발이다] ch 5. API 호출 클라이언트 페이지 만들기

1. 스프링 부트 애플리케이션 실행하기

 

1) 스프링 프레임워크와 스프링 부트 

 - 객체지향 프로그래밍 관련 지식 필요 

  ○ 의존성 주입(DI, Dependency Injection)

  ○ 제어의 역전(IOC, Inversion Of Control)

  ○ 관점지향 프로그래밍(AOP, Aspect-Oriented Programming) 

 

 - 스프링 프레임워크는 별도의 WAS를 서버에 설치해야 배포할 수 있는 반면, 스프링 부트는 WAS를 내장하고 있어 쉽게 배포 가능

 

 2) 스프링 이니셜라이저 

 

 - 스프링 부트 애플리케이션을 만들기 위해서는 먼저 스프링 부트 프로젝트를 생성해야 함 

 - 프로젝트란 통합개발환경에서 애플리케이션을 다루는 단위 

 - 일반적으로 하나의 프로젝트에 하나의 애플리케이션이 포함되며, 'IDE로 스프링 부트 프로젝트를 연다'는 식으로 표현

 - 스프링 부트 프로젝트를 생성하려면 '스프링 이니셜라이저'가 필요 

 - 스프링 이니셜라이저에서는 생성할 스프링 부트 프로젝트의 사용 언어나 버전 등을 설정 

 

 

 

 

3) 스프링 부트 애플리케이션 실행하기 

 

  - 스프링 부트 프로젝트를 인텔리제이로 열고 실행 

 - [Progect] 창에서 [hanbit] 프로젝트의 [src]-[main]-[java]-[kr.co.hanbit] 폴더를 차례로 클릭하면 'HanbitApplicaiton' 파일을 확인할 수 있다. 파일을 마우스 오른쪽 버튼으로 클릭해 [Run 'HanbitApplicat..., main()']을 선택 

 

 - 하단 콘솔 창에서 스프링 부트 애플리케이션이 실행된 상태의 내용이 출력되는 것을 볼 수 있다. 

 - https://localhost:8080 접속 

 

- 사용자의 요청을 정상적으로 받을 수 있는 존재가 없기 때문에 에러 메시지가 떠 있는 상태 

- 사용자의 요청을 정상적으로 받기 위해서는 컨트롤러를 추가하거나 정적 리소스를 추가해야 한다. 

 

4) 스프링 부트 프로젝트 살펴보기 

 

 ○ .idea 폴더와 .mvn 폴더 

  - .idea 폴더에는 해당 프로젝트에 적용되는 인텔리제이 설정정보가 들어 있음

  - .mvn 폴더에는 우리가 선택할 빌드 툴인 메이븐을 사용하기 위한 파일이 들어 있음 

 

 ○ src 폴더 

 - 각종 소스코드가 저장되는 경로 

 - 그 하위에는 애플리케이션을 동작하는 코드가 있는 main 폴더와 main 폴더에서 작성된 애플리케이션 코드의 테스트 코드가 있       는  test 폴더가 있다. 

 - main 폴더는 다시 java 폴더와 resources 폴더로 나뉜다. 

 - java 폴더에는 이름 그대로 자바 소스코드, resources 폴더에는 정적 리소스들이 들어간다. 

 

 ○ target 폴더 

 - 메이븐이나 그래들 같은 빌드 툴로 빌드했을 때 서버에 배포할 수 있는 Jar 파일 생성  

 - .java 소스코드의 컴파일 파일인 .class 파일도 이곳에 생성 

 

 ○ .gitignore

  - Git으로 소스코드를 관리하다 보면 추적이 필요하지 않거나 무시하고 싶은 파일이나 폴더들이 생긴다. 

  - target 폴더나 .idea 폴더 같은 것들은 소스코드를 통해 생성할 수 있거나 사용자들의 IDE 설정 등을 기록하고 있기 때문에 버전      으로 관리될 필요 없다. 

 

 ○ mvnw와 mvnw.cmd

  - 메이븐 명령어를 실행시키기 위한 스크립트 파일

  - mvnw에는 리눅스 계열 OS에서 사용할 수 있는 스크립트, mvnw.cmd에는 윈도우에서 사용할 수 있는 스크립트가 들어있다. 

  - 이 스크립트로 명령어를 실행하면 .mvn 폴더에 들어 있는 maven-wrapper.jar 파일이 실행되어 최종적으로 메이븐이라는 빌        드툴의 기능이 수행된다. 

 

○ pom.xml

  - 메이븐으로 관리되는 프로젝트의 빌드 관련 정보를 가지고 있는 파일 

  - pom이라는 이름은 'Project Object Model'의 머리 글자로, 프로젝트 관련 정보를 하나의 개체로 모델링하고 있다는 뜻 

  - 스프링 이니셜라이저에서 프로젝트를 생성할 때 지정했던 정보 확인 가능 

 

2. 컨트롤러 추가하기

 

- 백엔드 웹 애플리케이션 개발에서 사용자로부터 오는 HTTP 요청과 그에 대한 응답은 '컨트롤러'라고 부르는 소스코드를 통해 이      루어진다. 

 

1) 컨트롤러의 역할 

 - 컨트롤러는 사용자가 보낸 HTTP 요청을 받아 애플리케이션의 적절한 기능을 호출하고, 그 결과를 받아와 HTML 문서나 JSON      이라는 데이터 형식으로 변환하여 사용자에게 응답으로 제공하는 역할을 한다. 

 

○ HTML 문서 요청

 - 클라이언트에게 고정된 HTML 문서를 그대로 보내기만 하면 되는 경우라면 '정적 리소스'로 등록하는 거싱 좋음 

 

○ 필요한 데이터만 요청 

 - 클라이언트가 필요한 데이터만 요청하는 경우는 HTML 문서 대신 JSON이라는 데이터 형식을 사용 

 - JSON 데이터를 클라이언트와 주고 받을 수 있는 API를 제공하는 백엔드 웹 애플리케이션을 API 서버라고 부른다. 

 - API 서버는 주로 HTML 페이지나 스마트폰 애플리케이션에서 사용자의 요청을 바거나 서버 간 통신에 사용  

 

2) 컨트롤러 추가하고 동작 확인하기 

 

○ 컨트롤러로 'Hello' 응답 동작 추가하기 

  - 클래스를 추가할 패키지(kr.co.hanbit)를 마우스 오른쪽 버튼으로 클릭한 다음 [New] - [Java Class] 선택 

  - [New Java Class] 창에서 클래스 이름을 'SimpleRestController'로 입력한 후 [Enter]키를 누름 

  

package kr.co.hanbit;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class SimpleRestController {

    @RequestMapping("/")
    public String hello() {
        return "Hello";
    }

}

 

- http://localhost:8080 주소로 접속 

 

- 컨트롤러 코드의 @RequestMapping에서 '/' 경로로 요청이 들어온 경우 'Hello'f라는 문자열이 반환되도록 작성

- 그리고 웹 브라우저로 해당 경로를 요청하여 응답을 받은 것 

 

○ 컨트롤러로 'Bye' 응답 동작 추가하기 

package kr.co.hanbit;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class SimpleRestController {

    @RequestMapping("/")
    public String hello() {
        return "Hello";
    }

    @RequestMapping("/bye")
    public String bye() {
        return "bye";
    }

}

 

- http://localhost:8080/bye 주소로 접속 

 

3) URL의 구조 

 

 - URL(Uniform Resource Locator)은 네트워크상에 존재하는 자원의 위치를 표현하기 위해 사용하는 일련의 문자열 집합

 

○ scheme

 - 해당 요청이 어떤 프로토콜을 사용할 것인지 결정 

 - 웹 개발 환경에서는 'http' 또는 'https'가 해당 

 

○ host

 - 해당 요청이 네트워크상에서 어떤 호스트로 가야 할지를 결정 

 - 호스트란 IP 주소를 가진 주체를 의미하므로 주로 서버의 IP 주소가 들어간다. 

 

 ○ port

  - 해당 요청이 호스트의 어느 포트로 가야 할지를 결정 

  - 포트가 생략될 경우에는 scheme에 해당하는 기본 포트가 기본값(default)로 지정 

  

 ○ url-path 

  - 특정 호스트나 포트에 도달한 요청이 구체적으로 어떤 자원에 요청하는지를 의미 

  

 ○ user, password

  - 인증에 사용되는 사용자의 계정(user)과 비밀번호(password)

  - 종종 데이터베이스에 접속하기 위한 URL이 비밀번호만 제외하고 사용하는 정도 

 

3. 정적 리소스 추가하기 

 

1) resources/static 경로 이용하기 

 

 - 스프링 부트에서는 프로젝트의 'src/main/resources/static' 경로에 정적인 파일을 두는 것만으로 간단하게 정적 리소스를 추가할    수 있다. 

 

 - [src]-[main]-[resources] 폴더로 이동한 다음, [static] 폴더를 마우스 오른쪽 버튼을 클릭하고 [New]-[File]을 차례로 선택 

 - [New File] 창에서 파일 이름으로 'backend.html'을 입력하고 [Enter] 키를 누른다. 

<html>
<head>
    <title>이 HTML의 제목입니다/</title>
    <meta charset='utf-8'>
</head>
<body>
 안녕하세요. <stromg>resources/static 폴더</stromg>에 추가된 backend.html입니다.
</body>
</html>

 

- http://localhost:8080/backend.html 주소로 접속