수준별 학습반_베이직반 2회차 세션

베이직반

API와 웹 서버(MVC)

12/10 20:00 ~ 21:20 (약 1시간 20분 진행)

 

API (Application Programming Interface)

프로그램과 대화하는 방법 : 클라이언트(사용자 또는 외부 시스템)이 서버에 요청할 수 있는 기능 단위이다.

할 일과 관련된 4가지 API 예시

    /**
     * 할일 생성 API
     */
    @PostMapping
    public String createTodoAPI() {
        return "created";
    }

    /**
     * 할일 조회 API
     */
    @GetMapping
    public String getTodoAPI() {
        return "retrieve todo";
    }

    /**
     * 할일 수정 API
     */
    @PatchMapping
    public String updateTodoAPI() {
        return "update todo";
    }

    /**
     * 할일 삭제 API
     */
    @DeleteMapping
    public String deleteTodoAPI() {
        return "delete Todo";
    }

 

RESTful API (Representational State Transfer API) - 면접에서 물어보는 내용 ⭐⭐⭐

전통적인 API 방식

동작 중심 : 전통적인 API 설계 방식은 동작 중심 설계로 인해 확작성이 부족하다.

API 종류	/createTodo	/updateTodoTilte	/markTodoDone	/archiveTodo
API 동작	할일 생성	할일 수정(제목)	할일 수정(상태)	할일 수정(상태)

• 이렇게 사용하면 안 좋은 점
  • 설계할 때 굉장히 복잡해진다.....
  • 만드는 사람, 사용하는 사람 모두 굉장히 혼란스럽다...

RESTful API 방식 (rest architecture style)

자원 중심 : 자원 중심의 API 설계, API의 동작은 HTTP METHOD로 구분한다.

1. URL - 자원을 명시한다.

URL	/workspaces/1/todos
의미	워크스페이스 1에 속한 할일

• 보통 복수형을 권고한다(선호한다).

2. HTTP METHOD - 동작을 명시한다.

HTTP METHOD 종류	GET	POST	PATCH	DELETE
의미	조회	생성	수정	삭제

3. RESTful API는 URL + HTTP METHOD 조합해서 설계합니다.

• (GET)  workspaces/1/todos
  • 워크스페이스 1에 대한 todo 목록 조회
• (GET)  workspaces/1/todos/1
  • 워크 스페이스 1에 대한 todo 목록 중, id가 1인 todo 조회
  • 가장 마지막에 식별자(id)가 들어간다고 생각하면 된다.
• (POST)  workspaces/1/todos
  • 워크스페이스 1에 대한 todo 생성
• (PATCH)  workspaces/1/todos/1
  • 워크스페이스 1에 대한 todo 목록 중, id가 1인 할일 수정
  • 가장 마지막에 식별자(id)가 들어간다고 생각하면 된다.
• (DELETE)  workspaces/1/todos/1
  • 워크스페이스 1에 대한 todo 목록 중, id가 1인 할일 삭제
  • 가장 마지막에 식별자(id)가 들어간다고 생각하면 된다.

 

현업에서 사용되는 API 문서 스타일 예시

API 문서 목록

앱 이름	요청 메서드	URL	API 설명	우선 순위	담당자
todo	GET	/workspaces/1/todos	할일 조회 API	긴급	의문의 개발자
todo	POST	/workspaces/1/todos	할일 생성 API	보통	의문의 개발자

예) API 문서 상세 : 할일 조회 API

Request

• URL

GET https://xxxx.com/workspaces/1/todos

• Headers

키	값	설명
Authorization	Bearer <토큰>	사용자 인증 토큰
Content-Type	application/json	요청 본문 형식 지정(JSON

• Query Parameters

파라미터 이름	필수 여부	타입	설명
author	선택	String	할일을 생성한 작성자의 이름 (예 : Steve)
startDate	선택	String	검색 시작 날짜 (YYYY-MM-DD, 예 : 2024-12-01)
endDate	선택	String	검색 종료 날짜 (YYYY-MM-DD, 예 : 2024-12-02)

• Query Parameters 예시

GET /workspaces/1/todos?startDate=2024-12-01&endDate=2024-12-31

• RequestBody

필드 이름	필수 여부	타입	설명
empty	empty	empty	empty

• RequestBody 예시

empty

Response

• ResponseBody

필드 이름	타입	설명
workspace	int	할일이 속한 워크스페이스 id
todos	List<Todo>	할일 리스트
pagination	Pagination	페이지 정보
title	string	할일 제목
author	string	할일 생성자
...

• Response 예시

{
  "workspaceId": 1,
  "todos": [
    {
      "id": 1,
      "title": "Write monthly report",
      "author": "steve",
      "status": "done",
      "dueDate": "2024-12-15",
      "createdAt": "2024-12-01T08:30:00Z"
    },
    {
      "id": 2,
      "title": "Prepare presentation",
      "author": "john",
      "status": "done",
      "dueDate": "2024-12-20",
      "createdAt": "2024-12-05T09:00:00Z"
    }
  ],
  "pagination": {
    "currentPage": 1,
    "pageSize": 5,
    "totalPages": 2,
    "totalItems": 10
  }
}

• Error Response

필드 이름	설명
error	에러 이름
message	에러 메세지

• Error Response 예시

{
  "error": "Invalid date range",
  "message": "The 'startDate' must be earlier than 'endDate'."
}

 

 

MVC - 면접에서 물어보는 내용 ⭐⭐⭐

• Model은 데이터베이스가 아니라 객체이다.
• 각각의 역할을 확실하게 알고 있어야 한다. 내 머리 속에 잘 정리해두기.. 🤨

기본적인 MVC 순서

세부적인 MVC 순서

 

 

MVC 실습 시나리오 : 회원 관리 프로그램

• 회원 목록 조회
  • 회원 목록 페이지
• 회원 생성
  • 회원 생성 페이지
  • 회원 생성 API

의존성 추가

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

member.java

public class Member {

    // 속성
    private String name;  // 회원 이름
    private String email;  // 회원 이메일
    private int age;  // 회원 나이

    // 생성자


    // 기능
    // Getter
    public String getName() {
        return name;
    }

    public String getEmail() {
        return email;
    }

    public int getAge() {
        return age;
    }

	// Setter
    public void setName(String name) {
        this.name = name;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

(HTML) member-create.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>New Member</title>
</head>
<body>
<h1>Create New Member</h1>
<form action="/members" method="post">
    <label>Name: <input type="text" name="name" /></label><br />
    <label>Email: <input type="email" name="email" /></label><br />
    <label>Age: <input type="number" name="age" /></label><br />
    <button type="submit">Create</button>
</form>
<a href="/members">Back to List</a>
</body>
</html>

(HTML) member-list.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Member List</title>
</head>
<body>
<h1>Member List</h1>
<a href="/members/new">Create New Member</a>
<table>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Age</th>
    </tr>
    <tr th:each="member : ${members}">
        <td th:text="${member.name}"></td>
        <td th:text="${member.email}"></td>
        <td th:text="${member.age}"></td>
    </tr>
</table>
</body>
</html>

MvcController.java

@Controller
@RequestMapping("/members")
public class MvcController {

    private final List<Member> memberList = new ArrayList<>();

    // 전체 회원 리스트 페이지 조회 API
    @GetMapping
    public String getMemberListView(Model model) {
        List<Member> foundMemberList = this.getMemberList();
        model.addAttribute("members", foundMemberList);
        return "member/member-list";
    }

    // 회원 생성 페이지 조회 API
    @GetMapping("/new")
    public String createMemberListView() {
        return "member/member-create";
    }

    // 회원 생성 API
    @PostMapping
    public String createMemberAPI(@ModelAttribute Member member) {
        this.addMember(member);
        // return "member/memberlist";
        return "redirect:/members";
    }
}