[Spring + Javascript] fetch()를 활용한 api방식 웹페이지 기초 (2)

API 란?

[Application Programming InterFace] 의 약어로 서버와 클라이언트 (웹 브라우저)가 데이터를 주고받기 위한 약속된 방법에 일종이다.

 

예를들어 웹사이트에서 날씨를 보려고 할 때, 브라우저가 서버에게 날씨데이터를 요청하게 된다. (API 요청)

요청을 받은 서버는 브라우저에게 날씨데이터를 응답하게 된다. (API 응답)

 

fetch() 함수란? 

JavaScript에서 API에 요청을 보내기 위한 함수로 해당 함수에 인자로는 첫번째로 http://@@?board=2 같은 요청과 두번째 파라미터로 어떤 방식으로 요청을 보낼지에 대한 옵션을 담는다. 두번째 파라미터가 비어있다면 기본적으로 header와 body가 비어잇는 GET 방식의 요청을 보내게 된다.

 

여기서 JSON이라는 데이터 형식을 확인하게 될 텐데, JSON은 서버와 클라이언트가 주고받는 데이터 형식이라고 생각하면 된다.

ex) [{ "title" : "반갑습니다", "content" : "안녕하세요"}, {"title" : "어서오세요", "content" : "반가워요"}] 와 같은 방식

 

 

이제 해당 게시물에서는 Spring 그리고 자바스크립트에 fetch함수를 이용한 api 활용으로 웹브라우저와 서버간의 데이터 전송에 대해서 다루어 보겠다.

 

 

0. JDBC 구조

• HomeController : 메인 화면을 다루기 위한 컨트롤러
• BoardApiController : 글 작성, 글 목록 출력 등 기능에 대해서 담고있는 요청을 받을 컨트롤러로 좀있다 말할 @responseBody 어노테이션을 통해서 자바스크립트에게 기능에 대한 결과를 반환하는 역할을 한다.
• BoardController : 단순히 기능처리 없이 페이지(jsp)를 포워딩하기 위한 컨트롤러 
• BoardService : 비지니스 로직, 트랜잭션 처리를 위한 서비스클래스
• BoardMapper : sql 쿼리문 실행을 통해서 결과를 반환
• BoardVo : 다뤄야할 sql 테이블 컬럼 구조를 가지고 있는 객체

 

 

 1. HomeController 구성하기

application.properties에서 view resolver를 다음과 설정하였다.

view resolver

 

prefix의 접두사 그리고 suffix의 접미사로 @GetMapping / @PostMapping 에 소괄호에 적는 요청 키워드에 대해서

다음과 같이 /WEB-INF/views + 요청키워드 + .jsp로 해당 경로에 있는 jsp파일을 바로 포워딩 리다이렉트 해줄 수 있다.

 

HomeController

 

HomeController에서 단순하게 "home" 요청에 대해서 home.jsp파일을 포워딩해주기 위해서 @GetMapping("home") 어노테이션을 통해서 위에서 말했 듯 /WEB-INF/views/home.jsp 파일을 포워딩 한다.

 

해당 경로에 있는 home.jsp에 대해서 웹 브라우저에게 응답한다. 

 

 

home.jsp는 단순히 a태그에 href 속성을 통해서 get방식으로 /board/insert와 /board/list 요청을 설정하였다.

 

이제 boardController에서 해당 링크를 클릭해서 get요청을 보냈을 때 jsp파일에 대해서 포워딩 해주어야 한다.

 

2. BoardController 구성하기

 

BoardController

 

해당 클래스에서는 공통적으로 /board/@@@ 요청을 처리하므로 중복되는 부분은 @RequestMapping 어노테이션을 통해서

board 키워드를 지정하였다. 그리고 @GetMapping을 통해서 insert와 list 키워드만 설정하여 

각각 /board/insert와 /board/list  요청에 대해서 insert.jsp / list.jsp에 대해서 포워딩 한다.

 

insert.jsp

list.jsp

 

insert.jsp 에서는 제목과 내용에 대해서 입력받고 list.jsp에서는 테이블을 만들어서 board-tbody에 해당하는 태그에 게시물 목록을 출력할 것이다.

 

3. BoardApiController

게시물 등록 요청처리

 

일단 클래스 블록 위에 3가지의 어노테이션이 있다.

• RestController : 해당 컨트롤러 어노테이션은 @Controller + @ResponseBody 의 합성 어노테이션이다.

여기서 @ResponseBody 어노테이션은 Api 요청에 대해서 해당 클래스 또는 메서드에서 반환되는 값을 그대로 응답해주기 위한 어노테이션이다.

• RequestMapping : 요청을 처리하는 메서드의 파라미터 앞에 적히는 어노테이션으로, Api 요청에 있어서 패킷의 바디내에 담긴 데이터를 서버측에서 얻기위해 사용된다.
• RequiredArgsConstructor : 해당 어노테이션은 컨트롤러 서비스 매퍼 간 의존성 주입을 위해서 사용되는 어노테이션으로 다른 클래스 객체를 가져올 때, 자동으로 생성자를 통해 의존성 주입(DI)을 실행시켜 준다. (@AutoWired 안써도 됨)

 

RequestMapping 어노테이션을 통해서 api/board로 키워드를 묶고 아래서 @PostMapping 을 통해서 

api/board/insert에 post 요청이 들어오게 되면 서버에서 아래 메서드를 실행한다. Post요청이 올때 패킷 바디에 담긴 데이터 vo를 통해서 sql 구문이 실행되고 return을 통해 결과를 응답해준다. 이때 vo는 javascript에서 어떤식으로 보내지고 어떤식으로 포워딩처리가 되는지 확인해보자.

 

fetch()를 이용한 데이터 요청응답

 

insert.jsp에 만들어둔 형식 제목과 내용 박스에 데이터를 적고 버튼을 누르게 되면 아래 function f01함수가 실행되게 된다.

f01함수에서는 비동기 fetch() 함수에 파라미터로 들어가는 url과 option에 대해 정의한다.

option 객체에 3가지 필드에 값을 채워줄 수 있다.

• method : 해당 요청을 어느 방식으로 보낼지?
• headers : 바디에 담긴 데이터를 json 형식으로 보냄을 표기
• body : 해당 요청에 따른 서버에 작업에 필요한 데이터를 담아두는 공간 (해당 데이터가 insert 메서드의 파라미터 @RequestBody BoardVo vo에 담기게됨

그리고 fetch함수가 작동되면 .then()을 통해서 서버에서 insert메서드 실행문이 끝나고 반환된 데이터를 resp 라는 json형식으로 받고, 그냥 문자열로 처리할꺼라면 .text() / 객체나 리스트와같은 json 형식으로 반환되었다면 resp.json()을 통해서 data를 반환받을 수 있다. 반환받은 값에 대해서 조건문을 통해서 올바르게 작동했으면 location.href를 통해 list페이지에 포워딩을 진행하여 게시물 목록을 보여주도록하고 그렇지않으면 alert 함수를 통해서 작성실패를 띄워준다.

 

 

그리고 브라우저에서 서버로 굳이 패킷바디에 데이터를 채워 보내주지않아도 되는 경우가 리스트 출력이다.

list.js

리스트 페이지를 열기전에 바로 해당 js가 실행될 수 있도록 다른 이벤트리스너 없이 fetch함수를 바로 실행한다.

2번째 파라미터로 option을 넣어주지 않으면 get방식으 요청을 보낼 수 있다. 그리고 if문을 통해 올바르게 서버로부터 데이터를 전달 받았으면 if(data != null), for of문을 통해서 BoardVo 객체를 담고있는 리스트에서 객체를 하나하나 꺼내서 아까 만들어 둔

테이블에 자식으로 객체의 데이터를 채워넣은 tr태그를 추가하여 게시물 목록을 출력하도록 한다. 

마지막에 .catch를 통해서 어떤 에러가 발생했는지에 대해서도 처리할 수 있다.