25. 프로필페이지 - Image 모델링하기

아직 '구독하기 기능'은 postman으로 로직이 실행되는것만 확인했지, 실제 서비스를 제공하진 않았다.

그런데 갑자기 '프로필페이지'로 왜 넘어왔는가?

user가 user를 구독하기 위해선 해당 유저의 profile page로 접속하여 '구독하기 버튼'을 클릭해야 한다.

그리고 '구독정보'를 확인할 수 있는 model 창에서도 마찬가지로 데이터를 받아와야 한다.

이 데이터들은 Image와도 연관관계가 있기 때문에, 우선적으로 '프로필 페이지'를 만들어주어야 하는것이다.

 

현재 /user/{userId} 경로로 가면 '프로필 페이지'에 접속이 가능하지만,

우리가 DB에 INSERT한 데이터가 view에 뿌려지진 않았다

여기서 구현해야할 기능들이 많은데 하나씩 처리해보도록 하자

 

우선 게시물(Image)을 올리는 기능을 구현해보자

프로젝트명이 photogrammmmm인 만큼 '게시물'의 메인은 사진(Image)이다.

image/upload.jsp 파일을 찾아서 열어보자

form태그안에 2개의 input태그가 존재하는데 위는 Image를 전송할 영역이고, 아래는 Image의 설명란이 될것이다.

<!--사진업로드 Form-->
<form class="upload-form" >
    <input  type="file" name="file"  onchange="imageChoose(this)"/>
    <div class="upload-img">
        <img src="/images/person.jpeg" alt="" id="imageUploadPreview" />
    </div>
    
    <!--사진설명 + 업로드버튼-->
    <div class="upload-form-detail">
           <input type="text" placeholder="사진설명" name="caption">
        <button class="cta blue">업로드</button>
    </div>
    <!--사진설명end-->

 

'Image 모델링'을 해주자

domain/image 폴더에 Image 클래스를 만들어준다

그리고 '모델링'할 때마다 꼭 넣어주었던 어노테이션들과 id를 걸어주자

또 필요한것이 '사진'에 대한 설명과, 사진이 저장된 '경로', 누가 올렸는지에 대한 '유저정보', '데이터가 INSERT된 시간'이다.

package com.cos.photogramstart.domain.Image;


import com.cos.photogramstart.domain.user.User;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

import javax.persistence.*;
import java.time.LocalDateTime;

@Builder
@AllArgsConstructor
@NoArgsConstructor
@Data
@Entity
public class Image { //N:1

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;
    
    private String caption; //해당 Image를 설명하는 영역
    private String postImageUrl; //Image을 전송받아서 그 사진을 서버의 특정 폴더에 저장 - DB에 그 저장된 경로를 INSERT

    @JoinColumn(name = "userId")
    @ManyToOne
    private User user; //1명의 User는 여러개의 Image를 만들어낼수 있다. - Image를 누가 올렸는지 알기위해 받은 USerObject

    //이미지 좋아요 기능 (추후에 업데이트)
    
    //이미지 좋아요 카운팅 (추후에 업데이트)

    //댓글 기능 (추후에 업데이트)
    private LocalDateTime createDate; //모든 DB에는 시간정보가 필요하다 - 데이터가 입력된 시간

    @PrePersist
    public void createDate() {
        this.createDate = LocalDateTime.now();
    }


}

-> 추가로 이미지를 누가 좋아요했는지, 좋아요 개수는 몇개인지, 이미지에 달린 댓글정보들도 필요하지만, 현재는 해당정보들의 기능을 시작하지 않았으므로 나중으로 미뤄주겠다.

-> USer 오프젝트를 받았기 때문에 Image와 User간에 '연관관계'를 걸어주어야 한다.

1명의 User는 Image를 몇개를 올릴 수 있을까? 당연히 여러개를 올릴 수 있기 때문에 1:N이 된다.

반대로 하나의 이미지는 몇명의 유저가 작성을 하게 되는가? 하나의 이미지는 '몇명의 유저'가 작성을 하게 되는가? 하나의 이미지는 한명이 게시할 수 있기 때문에 1:1 이 되므로 '이미지'가 N(ManyToOne)의 연관관계를 가지게 된다

따라서 @ManyToOne 어노테이션을 걸어주자.

-> 그런데 DB에 있는 테이블에 또 다른 테이블이 들어갈 수 없다. 따라서 이 User 오브젝트는 FK키로써  INSERT되기 때문에 전 시간에 했던것처럼 '컬럼명'을 직접 지정해주자.

 

서버를 실행시키면 VS콘솔에 정상적으로 해당 '테이블'을 만들어주는 쿼리가 실행된것을 확인할 수 있고, MariaDB에서도 정상적으로 테이블이 생성된것을 볼 수 있다. 

모델을 만들었으니 Repository도 만들어주자.

package com.cos.photogramstart.domain.user;

import org.springframework.data.jpa.repository.JpaRepository;

//어노테이션이 없어도 IOC 등록이 자동으로 된다 JpaRepository를 상속하였기때문에
public interface UserRepository extends JpaRepository<User, Integer> {

    //JPA Query method
    User findByUsername(String username); //찾아서 user Object를 return 해줄것이다

}