Project/토이 프로젝트 30

[Cinemagram] Feed 페이지 렌더링 - (8)

이번 포스팅은 어떤 기능을 구현할까 고민이 있었습니다. 남은 기능 중 큰 꼭지인 팔로우 기능을 구현하고자 했지만 이번에는 조금 쉬운 기능을 구현하며 잠시 쉬어가는 챕터로 만들기로 결정했습니다. Feed 페이지 랜더링 Cinemagram의 Feed 페이지란? 로그인 한 유저가 팔로우한 유저들이 올린 이미지를 볼 수 있는 페이지입니다. 그럼 Feed 페이지로 갈 때 들고 가야 할 데이터는 어떤 게 있을까요? User 정보 Image 정보 Image caption (좋아요, 댓글은 나중에 구현) 어떤 쿼리를 짜야하는가? 관련 Repository에 nativeQuery를 짜려고 하는데, 이때 어떤 쿼리를 넣어야 할까요? ❗❗ 당장 어떤 쿼리를 짜야할까 생각하지 말고 다음의 스텝을 따라가 보자 ❗❗ 1. 과연 나..

[Cinemagram] Image 업로드 및 렌더링 (feat. OSIV) - (7)

팔로우 기능을 이어서 개발하고 브라우저에서도 테스트하고 싶지만 안타깝게도 이 기능은 유저의 프로필 페이지 안에 있습니다. 이러한 이유로 프로필 페이지를 우선 만들고 그 후에 팔로우 구현 및 Test를 해보도록 하겠습니다. Image 업로드 파일선택 클릭 → 이미지 선택 → 사진 설명 작성 후(caption) → 업로드 클릭 → DB 저장 지금까지 그래 온 것처럼 우선 모델부터 만들어 보겠습니다. Image & ImageRepository Image @NoArgsConstructor @Getter @Entity public class Image extends BaseTimeEntity { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private in..

[Cinemagram] JPA Native Query 팔로우 구현 및 예외처리 - (6)

팔로우에 대한 코드 구현에 바로 들어가기 앞서 용어 개념 정리부터 하겠습니다. 팔로우(Follow) : 내가 특정 유저의 게시물을 구독하겠다. 언팔로우(UnFollow) : 내가 구독한 유저를 더 이상 구독하지 않겠다. 팔로잉(Following) : 특정 유저를 구독하면 팔로잉으로 바뀌는데 현재 내가 이 유저를 구독하고 있다는 의미입니다. 팔로워(Follower) : 나를 구독하고 있는 유저 = 나의 팬 연관관계 매핑 1. 다대일, 일대다 관계 多쪽이 연관관계 주인으로 외래키(FK)를 관리합니다. 주인의 반대편은 단순 조회만 가능합니다. @OneToMany(mappedBy = "") * 만약 一쪽이 FK를 가진다면 정규화의 원자성이 깨지게 됩니다. ** 원자성 : 하나의 칼럼에는 하나의 데이터만 들어가야..

[Refactoring] Spring Data JPA Auditing - 시간 한 곳에서 관리

리팩토링 하게 된 이유 Cinemagram 토이 프로젝트를 하면서 엔티티마다 데이터의 생성시간, 수정시간이 칼럼으로 존재합니다. private LocalDateTime createDate; @PrePersist // DB에 insert되기 전 실행 public void createDate() { this.createDate = LocalDateTime.now(); } 지금은 User, Follow 두 엔티티만 있지만 앞으로 더 늘어날 텐데 그럼 불필요하게 코드 중복이 발생합니다. Spring Data JPA의 Auditing 사용하기 1. domain 패키지 안에 BaseTimeEntity abtract calss 생성 @Getter @MappedSuperclass @EntityListeners(Audi..

[Cinemagram] 회원 정보 수정, 필수 값 유효성 검사 및 예외처리 - (5)

이전 포스팅에서 세션을 생성하고 세션을 사용하기 전 어디에 있는지 확인하는 절차까지 하였습니다. 이번 포스팅에서는 세션을 사용하여 회원정보 변경을 해보겠습니다. (user/update) 회원정보 변경 버튼 클릭 시 나오는 화면입니다. input 정보는 update.html valule에 적어둔 내용입니다. 우리는 우선 input태그에 세션 정보가 나오면 됩니다. 말로 먼저 말씀드리고 실습 코드로 넘어가겠습니다. 세션 정보가 어디있나? UserController customUserDetails에 있습니다. 그럼 이 세션 정보를 어떻게 user/update.html에 넘길 수 있나? Model에 담아서 넘길 수 있습니다. 코드로 살펴보겠습니다. UserController @Controller public c..

[Trouble Shooting] ExceptionHanlder 예외처리를 통한 원하는 메세지 출력

Cinemagram 토이 프로젝트를 하다 ExceptionHanlder 예외처리를 통한 메시지 출력 부분에서 에러가 발생했습니다. 해당 부분이 발생한 이유와 해결해나가는 과정을 간단히 정리해보려합니다. 구현하고 싶은 내용과 예상 결과 회원가입하지 않은 사용자*가 회원정보 변경을 하고 제출 버튼을 클릭을 시 Exception이 터지면 ExceptionHandler가 낚아채서 처리 결과적으로 "해당 유저를 찾을 수 없습니다." 메세지를 alert 띄웁니다. * id = 100을 임의로 기입함 ** CustomValidationApiException : 직접 만든 + 유효성 관련 + API 통신 시 사용할 + Exception *** ControllerExceptionHandler : Controller에서 ..

[Cinemagram] 로그인(Spring Security - session 생성) - (4)

저번 포스팅에서 말씀드린 것처럼 유효성 검사에 실패할 시 화면에 Json 코드를 보여주는 게 아닌 간단하게 팝업 처리를 한 뒤 로그인 구현으로 넘어가도록 하겠습니다. 팝업 처리는 자바스크립트로 진행할 예정이며 별로 중요한 부분이 아니므로 바로 로그인 구현으로 넘어가셔도 괜찮을 것 같습니다. Popup package com.photo.util; public class Popup { public static String historyBack(String msg){ StringBuffer sb = new StringBuffer(); sb.append(""); return sb.toString(); } } Script코드를 짤 때 StringBuffer클래스를 이용했습니다. 위 코드를 ControllerExce..

[Cinemagram] 회원가입 유효성 검사(Validation)와 예외처리(ExceptionHandler, @ControllerAdvice) 적용 - (3)

이번 포스팅은 저번에 말씀드린 거와 같이 password 암호화부터 진행하도록 하겠습니다. password 암호화 AuthService @Transactional는 클래스나 인터페이스 또는 메서드 위에 붙여 함수가 실행되고 종료될 때까지 트랜잭션 관리를 해주며 insert, update, delete 할 때 사용합니다. import 주의 import org.springframework.transaction.annotation.Transactional; 회원 가입할 때 암호화 1. 빈으로 등록 @EnableWebSecurity @Configuration public class SecurityConfig extends WebSecurityConfigurerAdapter { @Bean public BCrypt..

[Cinemagram] 회원가입 기본 구현 - (2)

Security세팅 dependencies 추가 security 로그 확인용 log4j2 → 사용시 클래스 상단에 @Slf4j 붙임 plugins { id 'org.springframework.boot' version '2.7.5' id 'io.spring.dependency-management' version '1.0.15.RELEASE' id 'java' } group = 'com' version = '0.0.1-SNAPSHOT' sourceCompatibility = '1.8' configurations { compileOnly { extendsFrom annotationProcessor } all { exclude group: 'ch.qos.logback', module: 'logback-clas..

[Cinemagram] 프로젝트 생성, Thymeleaf 적용, 스프링부트 Controller 동작방식 - (1)

지금까지 조각조각 공부했던 개념들을 어떻게 하면 퍼즐처럼 잘 모을 수 있을까 고민을 하다 토이 프로젝트를 시작하게 되었습니다. 평소 영화를 좋아해서 영화 관련 포스팅을 모아 볼 수 있는 웹을 만들자!라는 마음에 프로젝트명을 Cinemagram으로 정했습니다. 기능 구현 부분은 스스로 구현하다 막히는 부분은 여러 블로그나 영상을 참고해서 만들었으며 디자인 요소는 다른 분께서 만들어 놓으신 부분을 가져왔습니다. (저도 디자인에 소질이 있고 싶습니다...) 기존 jsp코드를 thymeleaf로 바꾸면서 이론으로만 공부했던 문법을 실제로 적용해 볼 수 있는 시간이었습니다. 생각보다 이 부분에서 시간이 제일 많이 소요되어서 힘들었지만 전 괜찮습니다... 포스팅에는 코드 뿐만 아니라 시행착오를 기록할 예정이며 단순..