[Web] API 호출 클라이언트 페이지 만들기

스프링 부트 애플리케이션 실행

1. 스프링부트 프로젝트 만들기

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

api.src.main.java.kr.co.api.ApiApplication 우클릭 - Run ApiAppliction.main()' 클릭

컨트롤러 추가

역할

• 클라이언트가 보내는 HTTP 요청을 받아 처리한 후 HTTP 응답을 줄 때, 클라이언트 요청 처리의 시작과 끝을 담당

1. HTML 문서 요청
   • 웹 서비스를 이용시 눈으로 볼 수 있는 웹 페이지는 하나의 온전한 HTML 문서여야 함
2. 필요한 데이터만 요청
   • 필요한 데이터만 요청하는 경우 JSON이라는 데이터 형식을 사용
   • API 서버 
     • JSON 데이터를 클라이언트와 주고 받을 수 있는 API를 제공하는 백엔드 웹 애플리케이션
     • 주로 HTML 페이지나 스마트폰 애플리케이션에서 사용자의 요청을 받거나 서버 간 통신에 사용
     • 별도의 UI가 필요없을 경우 하나의 API 서버가 필요한 데이터의 송수신 기능을 수행 가능
   • JSON 형식 : 모질라(Mozila) JSON으로 작업하기

{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name": "Eternal Flame",
      "age": 1000000,
      "secretIdentity": "Unknown",
      "powers": [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

 

컨트롤러 추가 후 동작 확인

Hello 응답 동작 추가

• 웹브라우저로 해당 경로를 요청하여 응답 받은 상황
• / 경로로 요청이 들어온 경우 Hello 라는 문자열이 반환되도록 코드 작성
•  @RestController
  • Controller+ResponseBody
  • Restful 웹서비스의 컨트롤러
  • HTTP Response Body가 생성되는 방식
• @RequestMapping
  • 요청을 특정 메서드와 매핑하기 위해 사용
  • 속성
    • value : 요청받을 url 설정
    • method : 어떤 요청으로 받을지 설정(GET, POST, PUT, DELETE 등)

Bye 응답 동작 추가

• /bye 경로로 요청이 들어온 경우 Bye 라는 문자열이 반환되도록 코드 작성

경로가 중복될 경우

• java.lang.IllegalStateException: Ambiguous mapping 에러 발생
  • Controller의 @RequestMapping의 값이 중복되면 발생하는 에러로 어떤 경로로 연결할지 모호(Ambiguous)하기 때문에 발생

HTML 코드 입력하는 경우

• / 경로로 요청이 들어온 경우 Hello API Controller 라는 문자열이 HTML로 작성한 태그들이 적용되어 화면에 반영 됨

 

URL의 구조

• URL : Uniform Resource Locator, 네트워크상에 존재하는 자원의 위치를 표현하기 위해 사용하는 문자열 집합
• http://localhost:8080/bye
  • scheme : 어떤 프로토콜을 사용할지 결정(웹 개발 환경에서는 http 또는 https)
  • host : 어떤 호스트로 가야 할지를 결정, 호스트란 IP 주소를 가진 주체를 의미하므로 IP주소 혹은 google.com 같은 도메인 네임이 들어감(localhost는 120.0.0.1과 동일하게 자기 자신을 나타냄)
  • port : 호스트의 어느 포트로 가야 할지를 결정, 포트가 생략될 경우 scheme에 해당하는 기본 포트가 기본값(default)로 지정(http 80번, https 443번)
  • url-path : 요청이 구체적으로 어떤 자원에 요청하는지 의미, HTML 문서나 이미지 파일 같은 정적인 파일의 이름이나 경로 혹은 사용자의 요청이나 서버의 상태에 따라 동적으로 생성되는 응답을 뜻함
• 사용자의 계정(user)과 비밀번호(password)도 포함하고 있음
  • scheme://user:password@host:port/url-path
  • 온전한 형태의 URL은 계정과 비밀번호까지 포함 된 모습이지만, 계정과 비밀번호까지 넣어 인증하는 방식은 거의 사용되지 않음
  • port를 명시하지 않는 경우처럼 계정 정보를 생략하고 사용 가능

 

정적 리소스 추가

resources/static 경로 이용

• [src] - [main] - [resources] - [static] html 파일 추가
• 컨트롤러에 새로운 로직을 작성 하지 않고, 정적 리소스를 응답 받을 수 있음

컨트롤러 vs 정적 리소스

소규모 서비스 운영하는 경우

• 컨트롤러와 정적리소스를 동일한 애플리케이션에 두고 사용
• static 폴더에 사용자가 볼 수 있는 페이지인 html 파일을 작성하고, 컨트롤러에서 API들을 동작하게 하여 서비스에 필요한 데이터를 요청받고 응답함

대규모 서비스 운영하는 경우

• 컨트롤러와 정적 리소스를 동일한 애플리케이션에 두지 않음
• 정적리소스들은 CDN(Content Delivery Network) 서비스 활용, 백엔드 웹 애플리케이션에서는 컨트롤러 API 관리