본문 바로가기

전체 글187

25. 프로필 이미지 변경 프론트 라이브러리 설치 Cropper.js npm install cropper npm install jquery-cropper Cropper.js 사용하기 Profile DTO에 이미지 경로를 위해 필드 추가 package me.weekbelt.studyolle.settings; @NoArgsConstructor @Data public class Profile { // 기존코드 ........ private String profileImage; public Profile(Account account) { // 기존코드 ............ this.profileImage = account.getProfileImage(); } } /settings/profile.html에 이미지 폼 추가 메시지 x we.. 2020. 4. 21.
24. 프로필 수정 테스트 인증된 사용자가 접근할 수 있는 기능 테스트하기 실제 DB에 저장되어 있는 정보에 대응하는 인증된 Authentication에 필요하다. @WithMockUser로는 처리할 수 없다.(버그) 인증된 사용자를 제공할 커스텀 애노테이션 만들기 @WithAccount 커스텀 애노테이션 생성 @Retention(RetentionPolicy.RUNTIME) @WithSecurityContext(factory = WithAccountSecurityContextFactory.class) public @interface WithAccount { String value(); } SecurityContextFactory 구현 package me.weekbelt.studyolle; @RequiredArgsConstructo.. 2020. 4. 21.
23. 프로필 수정 처리 정말로 쉬운 폼 처리 비어있는 값을 허용한다. (기존에 있던 값을 삭제하고 싶을 수도 있기 때문에...) 중복된 값을 고민하지 않아도 된다. 확인할 내용은 입력 값의 길이 정도. 폼 처리 에러가 있는 경우 폼 다시 보여주기. 에러가 없는 경우 저장하고, 프로필 수정 페이지 다시 보여주기.(리다이렉트) 수정 완료 메시지. 리다이렉트시에 간단한 데이터를 전달하고 싶다면? RedirectAttributes.addFlashAttribute() https://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/servlet/mvc/support/RedirectAttributes.html RedirectAttributes (Spring Fr.. 2020. 4. 21.
22. 프로필 수정 컨트롤러 Bio, Link, Occupation, Location 정보만 입력받아서 Account 정보를 수정한다. SettingsController 추가 package me.weekbelt.studyolle.settings; @Controller public class SettingsController { @GetMapping("/settings/profile") public String profileUpdateForm(@CurrentUser Account account, Model model) { model.addAttribute(account); model.addAttribute(new Profile(account)); return "settings/profile"; } } 화면에 보여줄 정보를 담.. 2020. 4. 21.

티스토리툴바