프로그램/유저 이미지 업로드

 이미지를 프론트 쪽에서 보내는 방식은 다음과 같다.

 

1. Multipart/form-data 형식으로 모든 정보를 한 번에 보낸다.

2. 사진만 별도로 Mutlipart로 먼저 요청 보내서 서버에 사진 저장 후 응답받은 사진 정보를 JSON에 담아 다른 정보와 함께 보낸다.

3. Base64로 인코딩해서 JSON으로 한 번에 보낸다.

 

  이미지를 저장하는 방식은 다음과 같다.

 

1. DB에 직접 저장

2. 서버 컴퓨터에 저장 후 DB에는 저장 경로를 저장

3. 프로젝트 서버와 별도의 서버에 저장

 

 일단 사진이 주 컨텐츠였다면 3의 방식을 골랐겠지만, 사진이 많지 않을거라 생각했고 처음 구현해보는 기능이라 이미지 저장을 1번 방식으로 진행하기로 했다. 트래픽이 늘었을 때 DB에서 직접 사진을 저장하고 조회하는 방식이 DB에 부담을 유의미하게 준다고 생각하면 2번, 더 나아가 3번 방식으로 변경할 예정이다.

 

 보통 유저는 프로필  사진 한개만 저장하기 때문에 유저 테이블에 image_url 컬럼을 추가해서 저장하고, 게시판 이미지 같은 경우는 여러 이미지를 저장해야하니 일대다 관계의 게시판 이미지 테이블을 만든다.

 

 일단 DB에 직접 사진을 저장하는 방식으로 하려다 보니 originalName, size, 확장자 등의 사진에 대한 정보도 같이 저장해야 할 듯 해서 유저-유저사진이 일대일 관계더라도 테이블을 따로 떼내야 한다고 생각했다. 프로그램 이미지도 한 개만 저장하도록 해서 일대일 관계이지만 사진 관련 여러 정보를 저장하기 위해 테이블을 따로 떼내야 한다.

 

https://yongkyu-jang.medium.com/jpa-%EB%8F%84%EC%9E%85-onetoone-%EA%B4%80%EA%B3%84%EC%97%90%EC%84%9C%EC%9D%98-lazyloading-%EC%9D%B4%EC%8A%88-1-6d19edf5f4d3

 

 보통 1:N관계에서는 N쪽에 foreign key를 둔다. ('1'이 부모, 'N'이 자식) 하지만 일대일 관계일 때는 Foreign Key를 어디다 두어도 상관이 없기 때문에 애매할 수가 있다. 보통 그래서 일관성있게 1:1에서도 1:N과 같게 자식테이블에 foreign key를 두게 된다. 하지만 이렇게 되면 일반적인 비즈니스 로직을 수행하기 위해서 양방향으로 연관관계를 맺어야 한다. 그러면 위 글 내용처럼 일대일 양방향 연관관계에 의해 lazyloading 이슈가 발생한다. 그래서 부모테이블에 foreign key를 두면 해결된다.

 

 하지만 나중에 1:N으로 발전할 여지가 있으면 foreign key 위치를 바꿔야 하는 큰 일이 생긴다.

 

 프로그램 - 프로그램 이미지 관계는 1:N으로 발전할 여지가 있으니 처음부터 1:N으로 설정하고 프로그램 이미지쪽(자식)에 foreign key를 두기로 했다. 근데 유저 - 유저 이미지는 1:N으로 발전할 가능성이 낮아보이긴 했다. 하지만 그렇다고 유저(부모)쪽에 foreign key를 두자니 일관성이 없어 보였다.

 

 그래서 결론은 유저 - 유저이미지, 프로그램 - 프로그램이미지 모두 1:N 관계로 진행하기로 했다. 일단 프로그램 - 프로그램 이미지는 양방향 연관관계로 진행했다.

---

참고

 

https://velog.io/@alswl689/SpringBoot-with-JPA-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8MN-4.%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C%EC%8D%B8%EB%84%A4%EC%9D%BC%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%82%AD%EC%A0%9C

 

https://gilssang97.tistory.com/43

 

https://bohyeon-n.github.io/deploy/web/image-upload.html

 

https://galid1.tistory.com/721

 

https://velog.io/@totw5701/HTML-파일-전송에-사용되는-multipart-form-data-란

 

https://thisisprogrammingworld.tistory.com/171?category=916897