오늘은 Spring boot을 이용해서 Front-end에 보내는 방법을 알아보겠다.
우선 Controller 에서 api를 이용해 데이터를 보내는 Model이 있는데 여기선 api 에서 웹페이지에 json형태로 데이터를 보내고 그 페이지에서 ajax를 이용해 데이터를 받아오는 형식을 보겠다.
Controller 에서 json 데이터를 웹페이지에 보내는 법을 알아보자.
Service
데이터베이스에서 관련된 데이터를 모두 가져와 리스트로 변환해주는 메소드 이다.
Controller
ResponseEntity를 이용해 성공 status와 Service 에서 반환한 데이터를 웹페이지에 반환해주는 코드이다.
위와 같이 Service에서 조회한 데이터가 json 형태의 데이터로 웹페이지에 보여지게된다.
이러한 데이터를 다른 웹페이지에서 가져와 쓸 수 있는방법을 알아보자.
위의 코드는 Front-end에서 script 부분의 코드로 ajax를 활용한 코드이다.
ajaxs는 간단하게 페이지 전환없이 다른 페이지나 서버에서 데이터를 가져올 수 있다.
Front-end에선 페이지 전환 없이 웹페이지를 변경할 때 사용하는데 예를 들면 게시판에 데이터를 추가하면 페지이 전환없이 바로 게시글이 늘어나는 것을 확인 한다거나, 로그인을 했을때 로그인이 보여지는 부분만 로그인을 상태로 변경해주는 것을 볼 수 있다.
코드를 살펴보면 url 에서 Controller의 api주소를 적고 api의 type과 contentType인 데이터 타입을 json 형태로 적은 것을 볼 수 있다.
success:는 ajax에 내장된 기능으로 api의 Controller가 성공적인 status인지 확인 하는 것이다.
코드의 변경을 통해 Controller의 api 가 실패한 tatus를 보내면 다른 동작을 취할 수 있다.
위와 같은 경우는 성공적으로 json 형태의 웹페이지와 연결이 되었고, response 인자로 데이터를 확인하거나 가져올 수 있다.
respons['postList][i].title 이 바로 데이터를 받아오는 형태인데
위와 같이 postList 란 배열에 저장되어있는 i번째 json 데이터에서 title을 불러온다는 것이다.
이러한 형식으로 가져온 데이터를 노드에 value 값으로 주고 나타내면 사용자가 데이터를 확인 할 수 있다.
결과 화면으로 json에 있는 데이터들이 잘 넘어온것을 확인 할 수 있다.
이러한 방법을 사용하던 중 발견한 것으로 프로젝트를 Spring boot의 Spring Security를 사용한다면 json 데이터를 보내주는 url의 허가를 잘 해줘야 할것 같다.
그 이유는 사용자가 이러한 데이터를 url을 통해 확인 할 수도 있기 때문이다.
따라서 사용자의 권한을 부여해 권한이 맞지않느다면 url입력시 다른곳으로 보내거나 경고창을 띄우는 등의 처리가 필요 할것같다.
