Thymeleaf 로 뷰를 만들다 보면 JavaScript 의 ajax가 아닌 HTML Form태그 만으로 데이터 전송을 해야할 때가 있다. 이 때 로그인 인증을 위한 csrf 토큰을 보냄과 동시에 multipart 로 데이터와 이미지를 동시에 보내야 하는 상황이여서 막막했던 차에 좋은 해결 방법을 찾아서 공유한다. 우선 소스코드는 아래와 같다. 텍스트 * 이미지 * 1. 로그인 세션 문제 흔히 웹사이트들은 권한이 필요한 페이지들은 유저들이 로그인 한 정보를 토큰으로 남기고 이 토큰을 같이 전송해서 로그인 한 유저가 보낸 요청이라는 것을 서버에 알린다. ajax 에서는 beforeSend 를 통해 미리 토큰을 보내 해결할 수 있지만 form 태그에서는 어떻게 보낼 지 막막하던 차에 hidden 으로 in..
ajax
[SpringBoot] ajax로 사진 업로드와 삭제, 썸네일 미리보기 기능 구현하기 안녕하세요 오늘은 ajax를 이용하여 사진 업로드 기능을 구현하고자 합니다. 보통 게시판 등의 웹사이트를 만들면 사진을 업로드하는 기능이 흔히 들어가고는 합니다. 이 사진 업로드하는 기능을 만들면서 조금 애를 먹었어서 정보를 공유해보려고 합니다. 먼저 결과물 보여드리겠습니다ㅎㅎ 기능이 따로 특별한건 없고 (관리자페이지와 왼쪽의 네비게이션 영역은 공통레이아웃이니 신경안쓰셔도 됩니다) 유저가 사진을 추가 버튼을 누르고 사진을 추가하면 추가한 사진들의 썸네일을 보여준 뒤, 썸네일을 누르면 전송 목록 및 썸네일에서 누른 사진을 삭제, 전송하기 버튼으로 사진들을 전송하면 서버에서 사진을 받아 처리한 뒤 그 결과를 아래에 띄워주는..
[Thymeleaf]ajax 사용법 및 예제(SpringBoot) 안녕하세요! 오늘은 SpringBoot에서 Ajax를 사용하는 방법에 대하여 정리해보려고 합니다. 흔히 웹 개발을 진행할 때 비동기통신을 사용하여 진행하고싶을 때가 있습니다. 예를 들면 버튼을 눌렀을 때 화면 전체를 새로고침 하지 않고 뷰를 갱신한다던가 하는 일입니다. 이번 포스팅은 뷰 템플릿 엔진으로 Thymeleaf를 이용하였고 SpringBoot로 개발하였습니다. 참고해주세요! 1. 뷰 페이지 작성 먼저 뷰 페이지를 작성해야겠죠? 저는 간단하게 input 박스와 버튼을 넣어서 버튼을 클릭시 서버로 데이터를 보내고 받아온 데이터를 뷰에서 갱신하는 방식으로 진행하였습니다. 1. 데이터 전송 뷰 소스코드입니다. input에 데이터를 입력하..
