Let's smile, woohaha~
diary 프로그램 화면의 기본 레이아웃은 아래 그림과 같아. 빨간색 사각형 영역이 네비게이터, 파란색 사각형 영역이 컨텐츠, 초록색 사각형 영역이 풋터야. 현재 코딩되어 있는 thymeleaf 용 템플릿 파일 home.html, write.html, editdiary.html 에는 모두 네비게이터, 컨텐츠, 풋터에 해당되는 html 태그들이 중복적으로 들어가있어. 심지어 home.html 파일에 들어가있는 네비게이터 영역의 html 태그들과 write.html 파일에 들어있는 네비게이터 영역의 html 태그가 … Read more
오늘은 주고받을 데이터에 객체를 사용하는 방법에 대해서 알아볼까 해. Spring Boot: study.diary : json 형식으로 Rest API 에게 전송 포스트에서는 클라이언트에서 올린 json 형식의 데이터를 Map<String, Object> 형식으로 수신받았어. 클라이언트에서 올린 json 데이터가 일기 수정 폼의 모든 필드 항목을 뽑아내어 json 으로 만들었기 때문에 아래와 같은 값이었다고 해볼께. Rest API 에서 이 데이터를 Map<String, Object> … Read more
Spring Boot: study.diary : ajax 를 이용한 Rest API 호출로 view 와 data 분리 에서 최종적으로 만든 코드는 Rest API 를 호출할 때 application/x-www-form-urlencoded 형식의 content-type 으로 전송하는 예제였어. application/x-www-form-urlencoded 형식의 데이터는 _csrf=26906007-6d4e-4470-b76f-189dc827fa2d&_method=PUT&diary_date=2024-03-05&diary_content=4444 와 같이 key=value&key=value 형식으로 데이터가 이루어졌어. 반면에 application/json 형식의 데이터는 {_csrf: ‘49543209-c640-4c87-9c04-6e70334c5150’, _method: ‘PUT’, diary_date: ‘2024-03-05’, diary_content: 4444} 와 같이 이루어지지. Rest … Read more
일기 데이터를 수정하고 저장하는 editdiary.html 에 ajax JQuery 함수를 적용시켜볼께. 이미 작성된 일기 데이터를 읽어들여 보여주고, 수정한 후에 “저장” 버튼을 누르면 form 태그의 action URL 로 전송되는 구조였어. 이때의 action URL 은 PUT method 인 /diary/{id} 이고 DiaryController 클래스에 구현되어 있지. 이 구조를 “저장” 버튼을 클릭했을 때 ajax 함수를 호출하여 데이터를 저장하는 Rest API 를 … Read more
diary 프로그램을 테스트하던 중에 내가 실수로 이메일 주소를 잘못 입력했었어. haha 가 아닌 hahaha 를 입력한거지. 그런데, 웹주소에 login?error 라고만 표시되고 왜 로그인이 안되는건지에 대한 이유가 표시되질 않는거야. 그래서 이번에는 로그인 실패시 사유를 표시하는 기능을 구현해보려고 해. 실패 사유 확인 실패 사유를 보여주려면 실패 사유부터 확인해야되겠지? 현재 로그인처리를 담당하고 있는 구현 코드가 LoginService 클래스에 아래와 … Read more