RestController
pom.xml에 새로운 dependency인 RestController를 추가했다.
RestController란 스프링프레임워크 4.x 버전 이상부터 사용가능한 어노테이션으로, @Controller에 @ResponseBody가 결합된 어노테이션이다.
기본적으로 json문서는 타입을 바꿔서 보내야 인식이 가능하기 때문에 번거롭다. 하지만, RestController를 이용하면 컨트롤러 클래스 하위 메서드에 @ResponseBody 어노테이션을 붙이지 않아도 문자열과 JSON 등을 전송할 수 있게된다.
PostMan API
백엔드의 특성상 React.js, Andriod, ios 개발과 RestController개발간 서로서로 잘 구현이 되는지에 대해서 테스트를 하기 위한 용도의 api이다.
API 설치주소
파일은 exe 파일로, 설치 후 실행하여 Google 계정을 등록하면 되겠다.
Servlet
Postman API를 사용하기 이전, 먼저 페이지를 json형식으로 출력하고자 다음과 같이 Servlet을 새로 생성해주었다.
@WebServlet(urlPatterns = { "/api/board/select.json" })
public class RestBoardSelectController extends HttpServlet {
private static final long serialVersionUID = 1L;
private Gson gson = new Gson(); // 라이브러리를 이용한 객체생성
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 문자로된 페이지 정보를 전달받음.
String page = request.getParameter("page");
// 10개 단위로 가져오기 위한 페이지네이션(PN) 시작값과 종료값
int start = Integer.parseInt(page) * 10 - 9;
int end = Integer.parseInt(page) * 10;
// mapper를 통한 결과조회
List<Board> list = MyBatisContext.getSqlSession()
.getMapper(BoardMapper.class).selectBoardList(start, end);
long cnt = MyBatisContext.getSqlSession()
.getMapper(BoardMapper.class).countBoardList();
// 전송하는 데이터 타입설정 (json문서) <= text/html을 json문서로
response.setContentType("application/json");
// list 객체를 json으로 변환
Map<String, Object> map = new HashMap<>(); // 페이지네이션
map.put("list", list);
map.put("pages", (cnt - 1) / 10 + 1);
String jsonString = gson.toJson(map);
// 호출된곳으로 값을 전송.
PrintWriter out = response.getWriter();
out.print(jsonString);
out.flush();
}
}
postman 실행
- 먼저 사용하려는 용도와 관련된 collection을 생성하고,
- 상황에 맞는 기능을 request를 각각 추가한다.
- request에 알맞은 형태(get, post 등)를 지정해주고,
- json을 적용한 URL주소를 입력해준다.
- 이때 URL주소에 적용할 key값과 value를 입력해준뒤,
- Send 버튼을 눌러주면
- 결과가 코드나 화면으로 표시되게 된다.
이때 내가 사용하고자 하는 용도에 따라서 입력해주어야 하는 내용이 달라질 수 있으므로, 아래의 글들을 참고하여 사용하도록 하자.
게시글 조회수 증가
이번에는 게시글의 조회수를 증가시키는 기능을 활성화해보도록 하겠다.
Mapper
먼저 SQL문부터 구성해주었다.
해당하는 게시글의 넘버값을 받으면 조회수가 1씩 증가하도록 구성했다.
// 조회수 증가 (글번호를 입력하면 해당 글 번호의 조회수만 1증가)
@Update ( value = {
" UPDATE board ",
" SET hit = hit+1 WHERE no =#{no} "
} )
public int updateBoardHit (@Param("no") long no);Servlet
@WebServlet(urlPatterns = { "/api/board/updatehit.json" })
public class RestBoardUpdateHitController extends HttpServlet {
private Gson gson = new Gson(); // 라이브러리를 이용한 객체생성
@Override
protected void doPut(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 글번호 받기
String strno = request.getParameter("no");
// 형변환
Long no = Long.parseLong(strno);
// mapper의 결과값 받아옴
int ret = MyBatisContext.getSqlSession().getMapper(BoardMapper.class)
.updateBoardHit(no);
// 전달할 값을 map으로 통일
Map<String, Integer>map =new HashMap<>();
map.put("result", ret);
// RestBoardSelectController의 마지막 부분과 동일
response.setContentType("application/json");
String res = gson.toJson(map);
PrintWriter out = response.getWriter();
out.print(res);
out.flush();
}
}postman api
위와같이 Servlet에서 정해둔 URL에 key, value값을 넣어 해당하는 게시글의 조회수가 1씩 상승하도록 지정하였다.
잘 적용이 된 모습이다. (총 7번을 추가하였다.)
Axios.cdn
위와 같이 작업을 진행하다보면 백엔드와 프론트엔드 사이에서 시간과 공간의 제한으로 소통의 제약이 발생할 수 있다.
또한 실시간으로 작업결과를 보며 피드백 할 수 있는 프론트엔드의 작업환경과는 달리 백엔드는 SQL과 UI와의 호환이 잘 이루어지는지에 대해서 확인을 하며 수정하는것이 어렵다. 이러한 문제를 해결하기 위하여 이번시간에 Axios를 사용하기로 하였다.
Axios란?
Axios는 브라우저와 Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리다. 백엔드와 프론트엔드의 통신을 간편하게 하기 위해서 Ajax와 더불어 사용한다.
이미 자바스크립트에는 fetch api가 있지만, 프레임워크에서 ajax를 구현할땐 axios를 사용하는 편이다.
CDN은 여기서 다운받아주도록 하자.
axios를 사용하는에 있어 먼저 간단하게 알아야 할 것들이 몇가지가 있다.
<script>
async function ajaxBoardList(page) {
// 같은 서버내에서는 http://127.0.0.1:8080/web03 생략이 가능하다.
const url = '${pageContext.request.contextPath}/api/board/select.json?page=' + page;
const headers = {"Content-Type":"application/json"};
axios.get(url).then(function(response) {
console.log(response);
console.log('A')
});
console.log('B')
};
ajaxBoardList(1);
</script>
(async와 await의 개념과 사용법에 대해서는 이 글을 참고하도록 하자.)
기존의 코드 실행 순서라면 'A'가 출력된 이후, 'B'가 출력되는 순서일것이다.
하지만, url을 가져와 콘솔창에 로그를 남기는데 시간이 다소 소요되기 때문에
B가 먼저 출력되고, 그다음 A가 출력이 되게 된다.
그런데 이마저도 항상 똑같은 결과를 보장해주지 않기 때문에 기능을 구성할때는 이를 염두해두고 코드를 구성해야 하겠다.
위의 코드는 아래와 같이 재정의할 수 있다.
<script>
async function ajaxBoardList(page) {
// 같은 서버내에서는 http://127.0.0.1:8080/web03 생략이 가능하다.
const url = '${pageContext.request.contextPath}/api/board/select.json?page=' + page;
const headers = {"Content-Type":"application/json"};
/* axios.get(url).then(function(response) {
console.log(response);
console.log('A')
});
console.log('B')
*/
const response = await axios.get(url,{headers});
console.log(response);
};
ajaxBoardList(1);
</script>