Spring Boot/프로필 페이지 만들기
-
프로필 페이지 9Spring Boot/프로필 페이지 만들기 2021. 12. 18. 22:03
사용자 2명을 만든다. hi, hello 현재 사용자를 hi 라고 한다. 그래서 만약 본인 프로필 화면이라면, 아래와 같이 사진등록 버튼이 뜨고, 구독하기 버튼은 안나오도록, 다른 사람(hello) 의 프로필 화면으로 이동했다면, 사진등록 버튼이 뜨지 않지만, 구독하기 버튼은 나오도록 할 것이다. 본인이 아니기 때문. 그러려면, 로그인한 사용자가 프로필 페이지의 주인인지 판단해야 한다. 즉, 한 명의 사용자는 다른 사람의 프로필 화면으로 이동 가능한데, 이 수 많은 프로필 화면 중 본인의 프로필 화면으로 이동한 것인지 알아야 한다. 그때만 사진등록 버튼이 나오도록. 그럴 때 다음과 같은 방법이 있다. 프로필 화면으로 이동 시 /user/id번호 로 주소 요청한다. 1번 사용자의 프로필 화면 이동 : /u..
-
프로필 페이지 8Spring Boot/프로필 페이지 만들기 2021. 12. 18. 21:24
이제 게시물 개수를 표시하도록 해보자. 즉 아래와 같이 업로드한 이미지 개수가 3개이면 게시물 옆에 숫자가 3으로 표시되도록 하는 것이다. 아래에서 3이 표시된 것은, 3이라고 적어놔서 반영된 것이지, 실제 코드가 완성된 게 아니다. 간단히 해결할 수 있다. 프로필 화면을 나타내는 profile.jsp파일에서, 아래와 같이 입력하면 된다. User.java 파일에 images 변수가 있으므로, 이를 사용해서 크기(size) 를 계산한다. 게시물${user.images.size()} 그러면 아래와 같이 변경된다. 내가 현재 이미지를 8개 업로드 해놨다. 참고 자료 : 이지업 강의 사이트 "스프링부트 SNS프로젝트 - 포토그램 만들기"
-
프로필 페이지 7 - @JsonIgnorePropertiesSpring Boot/프로필 페이지 만들기 2021. 12. 18. 13:08
회원정보를 수정해서 프로필 화면에 그 정보들이 나타나는지 확인해보겠다. 일단 아래와 같이 회원정보 변경 페이지로 이동한다. 이곳의 빈 칸에 자신이 변경하고 싶은 정보들을 입력한 뒤 제출 버튼을 누르면 sts(이클립스) 콘솔창에 에러가 뜬다. 그 이유는 다음과 같다. UserApiController.java 파일에서 회원정보 수정하는 update 메서드에 @RequiredArgsConstructor @RestController public class UserApiController { private final UserService userService; @PutMapping("/api/user/{id}") public CMRespDto update( @PathVariable int id, @Valid Us..
-
프로필 페이지 5Spring Boot/프로필 페이지 만들기 2021. 12. 16. 21:23
이제 실제로 프로필 화면에 업로드한 이미지를 뿌려보도록 한다. UserController.java 에서 profile.jsp 파일에 Model 객체로 넘겨준 userEntity 를 사용하기만 하면된다. 파일 @GetMapping("/user/{id}") public String profile(@PathVariable int id, Model model) { User userEntity = userService.회원프로필(id); model.addAttribute("user", userEntity); return "user/profile"; } UserController.java 파일에서 model.addAttribute("user", userEntity); 이렇게 profile.jsp 파일에 데이터를 전..
-
프로필 페이지 4Spring Boot/프로필 페이지 만들기 2021. 12. 16. 17:49
사진 업로드 사이트에서 업로드 하면, 프로필 화면에 그 사진이 나타나도록 하겠다. - profile.jsp 파일 UserController.java 파일에서 profil 메서드가 return "user/profile"; 할 때 Model 객체에 이미지들을 담아서, 같이 리턴해주면 된다. 요청 주소를 /user/{id} 로 해서 /user/1 이런식으로 오면, 1번 유저의 프로필 화면이(profile.jsp) /user/2 이런 식으로 오면, 2번 유저의 프로필 화면(profile.jsp ) 이 나오도록 하겠다. 파일 @GetMapping("/user/{id}") public String profile(@PathVariable int id, Model model) { User userEntity = use..
-
프로필 페이지 3Spring Boot/프로필 페이지 만들기 2021. 12. 15. 21:28
업로드 이미지 유효성 검사 caption(이미지설명) 은 없어도 되지만, 이미지 파일은 꼭 입력받도록 그런데 ImageUploadDto.java 파일에서 validation 체크로 @NotBlank 와 같은 유효성 검사가 안된다. MultipartFile 타입에서는 불가함 그래서, ImageController.java 파일에서 이미지 업로드 메서드에 아래 코드 추가 if(imageUploadDto.getFile().isEmpty()) { throw new CustomValidationException("이미지가 첨부되지 않았습니다.", null); } 더보기 파일 public class CustomValidationException extends RuntimeException{ private static..
-
프로필 페이지 2Spring Boot/프로필 페이지 만들기 2021. 12. 15. 20:47
이미지 파일 경로와 caption 부분을 데이터베이스에 넣기 파일 @RequiredArgsConstructor @Service public class ImageService { private final ImageRepository imageRepository; @Value("${file.path}") private String uploadFolder; @Transactional public void 사진업로드(ImageUploadDto imageUploadDto, PrincipalDetails principalDetails) { UUID uuid = UUID.randomUUID(); String imageFileName = uuid+"_"+imageUploadDto.getFile().getOriginal..
-
프로필 페이지 1Spring Boot/프로필 페이지 만들기 2021. 12. 14. 17:00
사진 업로드 업로드 실제사이트 화면 upload.jsp 파일에서 1) 이미지 첨부 이 부분이, 위 그림에서 "파일선택" 부분. 즉, "파일선택"을 클릭하면 창이 하나 뜨면서 컴퓨터에 있는 자료를 선택할 수 있게 된다. 더보기 참고 자료 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/file 2) 사진 설명 글 이 부분은 아래의 "사진설명" 이라고 써있는 칸이다. 여기에 사진 설명을 적고 업로드 버튼 누르면 됨. 특히, "파일선택" 을 누른 뒤 home.jpg 라는 파일을 선택했더니, 아래와 같이 home.jpg 그림으로 화면이 바뀌었다. 이는 update.js 라는 파일에 구현되어 있다. function imageChoose(obj) { ..