API란?

API란?

API는 응용프로그램에서 사용할 수 있도록 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.

 

더 쉽게 이해해보자.

 

API는 식당의 점원과 같은 존재이다.

API는 식당에서 손님에게 주문 가능한 메뉴를 보여주고 손님이 고른 음식을 주방에 전달한 후 음식이 나오면 고객에게 전달하는 점원과 같은 역할을 수행한다.

 

코드로 한번 살펴보자.

우리가 수행했던 과제의 script ajax와 controller의 일부이다.

 

function getMemos() {
    $('#cards-box').empty();
    $.ajax({
        type: "GET",
        url: "/api/memos",
        data: {},
        success: function (response) {
            for (let i = 0; i < response.length; i++) {
                let post = response[i];
                let id = post.id;
                let username = post.username;
                let title = post.title;
                let contents = post.contents;
                let modifiedAt = post.modifiedAt;
                addHTML(id, username, title, contents, modifiedAt);
            }
        }
    });
}
 function addHTML(id, username, title ,contents, modifiedAt) {
            let tempHtml = makeMessage(id, username, title, contents, modifiedAt);
            $('#cards-box').append(tempHtml);
        }

        function makeMessage(id, username, title, contents, modifiedAt) {
            return `<a href="detail.html?id=${id}">
                        <div class="card">
                            <div class="metadata">
                               <div "${id}-name" class="name">
                                   ${username}
                               </div>
                               <div class="date">
                                   ${modifiedAt}
                               </div>
                            </div>
                        <h2 class='title' id="${id}-title">"${title}"</h2>
                            <div class="contents" id="${id}-contents" >
                               ${contents}
                            </div>
                            </a>
                        </div>`;
        }

@GetMapping("/api/memos")
public List<Memo> getMemos() {
    return memoRepository.findAllByOrderByCreatedAtDesc();
}

 

ajax 코드에서 url /api/memos, get 타입으로 요청하면,

controller에서는 @GetMapping으로 받아서 memoRepository안에 있는 내용을 return한다.

이를 다시 ajax 코드로 받고,

memoRepository 내의 username, title, contents, modifiedAt을 화면에 보여주는것!

 

 

---

 

let data = {'title': title, 'contents': contents};
$.ajax({
    type: "POST",
    url: "/api/memos",
    contentType: "application/json",
    data: JSON.stringify(data),
    success: function (response) {
        alert('메시지가 성공적으로 작성되었습니다.');
        location.href = 'index.html';
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert('로그인을 해주세요');
        window.location.replace("/user/login");
    }
});

@PostMapping("/api/memos")
public Memo createMemo(@RequestBody MemoRequestDto requestDto,  @AuthenticationPrincipal UserDetailsImpl userDetails) {
    String username = userDetails.getUser().getUsername();
    Memo memo = memoService.createContents(requestDto, username);
    return memo;
}

title, contents를 ajax 코드를 사용해서 POST형식으로 넘겨주면,

controller에서는 이를 받아서 memoRequest, UserDetailsImpl 에 있는 코드를 토대로 memo를 return해준다.

그리고 나서  '메시지가 성공적으로 작성되었습니다' 라는 창과 함께 index.html로 새로고침 해주는 것!

 

 

API는

1. 서버와 데이터베이스에 대한 출입구 역할을 하고 

2. 애플리케이션과 기기가 원활하게 통신 가능