인프런 커뮤니티 질문&답변

김솔민님의 프로필 이미지
김솔민

작성한 질문수

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

다음으로

서버에 이미지와 텍스트가 혼재되어 있는 게시글 내용을 저장하고 싶습니다.

해결된 질문

작성

·

4.6K

0


=========================================
[질문 템플릿]
1. 강의 내용과 관련된 질문인가요? (예/아니오) 예
2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예
3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예

[질문 내용]
안녕하세요. 스프링 MVC 2편 강의를 전부 듣고 JPA 강의를 어느정도 공부한 상태에서 디테일한 게시판 기능을 제공하는 서버를 만들기 위해서 도메인을 설계 중입니다.

네이버 카페, 블로그 등 흔히 접할 수 있는 플랫폼에서 제공하는 게시판은 본문 작성 시 단순히 첨부 파일을 업로드할 수도 있지만, 본문 내에 이미지를 삽입하는 방식으로도 작성하는 방식으로 구현되어 있습니다. 실제로 제가 설계하려는 프로젝트에서도 위와 비슷한 기능을 제공하고 싶습니다. 이렇게 작성한 게시글을 전송하는 방식을 구상하는 부분에서 해결하기 어려운 점이 있습니다.

예를 들어, 다음과 같은 게시글 내용을 전달해야 한다고 가정해봅시다.

본문내용 1
<사진1>
본문내용 2
<사진2>
본문내용 3
....

위와 같은 상황에서 단순히 이미지를 업로드할 뿐만 아니라 각각의 이미지의 위치가 본문의 어느 부분에 존재하는지에 대한 정보까지도 알고 있어야 합니다. 여기서 저는 두 가지의 해결 방법과 문제점들을 떠올려봤습니다.

  1. 프론트단에서 본문내용 작성 시 사진과 text가 동시에 들어올 경우, 각각 image 등의 binary 형태로 전송할 수 있는 태그와 plain text를 담을 수 있는 tag로 구분하고 name에 접미사를 붙이는 등의 방법으로 여러 개의 구분되는 part로 보낸 후, 서버 단에서 각각의 file image를 resolve하여 저장 -> 그래서 content를 실제로 db에 어떻게 저장해야되는데?

  2. 이미지와 text가 포함된 html 정보 자체를 전송하여, 서버측에서 각 tag를 파싱하여 이미지 정보가 들어올 때만 별도로 file resolve 후 S3 등 스토리지 내에 저장된 경로로 재구성하여 전체 markup 문서를 clob형태로 저장 -> html을 직접 파싱하는 데에 어려움이 있을 것 같음, 로컬에 저장된 이미지파일을 url로 넘길 경우, 서버 측에서 어떻게 이미지 주소를 알 수 있지?

두 가지 방법 중 어느 것을 선택해도 한계점이 명확히 보여서 어떤 방식으로 접근해야 할지 조언을 구하고 싶습니다. 읽어주셔서 감사합니다.

답변 1

3

안녕하세요, 김솔민 님! 공식 서포터즈 codesweaver 입니다.

일반적인 에디터 기능을 구현할 때 사진 업로드는 별도의 프로세스로 분리합니다.

사용자가 특정 위치에 커서를 놓은 상태에서 이미지 업로드 버튼을 클릭하여 이미지를 업로드하면 대체로 다음과 같은 작업이 발생합니다.

  1. 이미지를 서버로 업로드 (Ajax 등으로 파일 업로드 처리)

  2. 서버는 이미지를 저장하고 이미지 경로를 결과로 반환 (http://server.com/image/url/imageName.jpg)

  3. 자바스크립트는 이를 <img src="반환값"> 형식으로 엘리먼트 생성.

  4. 사용자 현재 커서 위치에 이미지 태그 추가.

이렇게 작성한 본문을 하나의 문자열로 서버에 전송하는게 보통 에디터가 이미지를 처리하는 순서입니다.

 

만약 CDN 을 이용한다면 위의 과정중 서버에 2.번 과정이 바뀝니다. CDN서버로 파일을 전송하고, 이미지 경로를 반환값으로 받습니다.

감사합니다.

김솔민님의 프로필 이미지
김솔민
질문자

이런 방법이 있었네요 감사합니다!!!

김솔민님의 프로필 이미지
김솔민

작성한 질문수

질문하기