JavaScript Ajax

[SpringBoot] ajax로 사진 업로드와 삭제, 썸네일 미리보기 기능 구현하기 안녕하세요 오늘은 ajax를 이용하여 사진 업로드 기능을 구현하고자 합니다. 보통 게시판 등의 웹사이트를 만들면 사진을 업로드하는 기능이 흔히 들어가고는 합니다. 이 사진 업로드하는 기능을 만들면서 조금 애를 먹었어서 정보를 공유해보려고 합니다. 먼저 결과물 보여드리겠습니다ㅎㅎ 기능이 따로 특별한건 없고 (관리자페이지와 왼쪽의 네비게이션 영역은 공통레이아웃이니 신경안쓰셔도 됩니다) 유저가 사진을 추가 버튼을 누르고 사진을 추가하면 추가한 사진들의 썸네일을 보여준 뒤, 썸네일을 누르면 전송 목록 및 썸네일에서 누른 사진을 삭제, 전송하기 버튼으로 사진들을 전송하면 서버에서 사진을 받아 처리한 뒤 그 결과를 아래에 띄워주는..

[Thymeleaf]ajax 사용법 및 예제(SpringBoot) 안녕하세요! 오늘은 SpringBoot에서 Ajax를 사용하는 방법에 대하여 정리해보려고 합니다. 흔히 웹 개발을 진행할 때 비동기통신을 사용하여 진행하고싶을 때가 있습니다. 예를 들면 버튼을 눌렀을 때 화면 전체를 새로고침 하지 않고 뷰를 갱신한다던가 하는 일입니다. 이번 포스팅은 뷰 템플릿 엔진으로 Thymeleaf를 이용하였고 SpringBoot로 개발하였습니다. 참고해주세요! 1. 뷰 페이지 작성 먼저 뷰 페이지를 작성해야겠죠? 저는 간단하게 input 박스와 버튼을 넣어서 버튼을 클릭시 서버로 데이터를 보내고 받아온 데이터를 뷰에서 갱신하는 방식으로 진행하였습니다. 1. 데이터 전송 뷰 소스코드입니다. input에 데이터를 입력하..