Q. 이미지는 어떻게 업로드 되고 저장되는가?

파일 업로드 기능을 구현하고 수정하는 도중에 든 의문이었다.

파일 업로드는 <input type="file"> 폼을 눌러서 파일을 선택하여 등록한다.

그 상태만으로 되는 것은 아니고 이미지를 담았으니 그것을 폼 객체에 담아야 한다.

이때 이미지를 표시하고자 하는 부분에는 data:base64 혹은 blob: 등으로 시작하는 이미지 주소가 담길 것이다.

그런 뒤에 정보를 입력하고 확인을 누르면 그 뒤로는 디렉토리 상 파일 경로가 보여진다.

 

나는 이 과정에서 이미지를 업로드하기 전인데 이미지 경로가 나올 수 있는지에 대한 의문과

이미지가 먼저 서버파일로 등록된다면 이미지에 대한 정보는 어떻게 되는 것인가에 대한 의문이 들었다.

이미지 정보는 DB에서 내가 등록한 다른 정보에 대한 종속성을 가질 것이기 때문이다.

 

만약에 어떤 포스트를 작성하고 이미지를 넣으면 그 이미지는 이 포스트 식별값에 종속될 것이다. 포스트 식별값이 이미지의 DB상 정보에도 들어가야 할 것이란 의미이다.

그런데 포스트가 등록되기도 전에 이미지 정보가 등록될 수는 없을 것이다.

그러므로 이미지가 서버에 저장되는 순간과 이미지의 정보가 DB에 저장되는 사이에는 공백이 발생할 것이라는 게 내 추론이었다.

 

그리고 다음은 그에 대해 생활코딩 Q&A 답변이다.

구글 검색 결과, temp폴더라는 임시폴더를 두어서 서버에 저장되기 전에 임시로 이미지를 저장하며 이 폴더는 자동으로 이미지를 지우는 것이 아니라, 스케줄러 같은 프로그램을 돌려서 주기적으로 청소해준다고 한다.

이미지만 업로드 되고 이미지가 들어갈 포스트나 글이 작성되지 않았다면, 이를 판별해서 지움으로써 저장소 용량을 관리한다는 의미였다.

글이 제대로 등록이 되었다면 이미지는 다른 폴더로 이동하여 저장될 것이다.

 

※ 여기서 드는 의문은

그럼 미리보기는 어떻게 구현하냐는 것이다

jstl <c:choose>문으로 이미지가 삽입된 후의 경로를 붙여주고 아닐 때는 그냥 div박스를 보여주려 했으나 뜻대로 되지 않았고... image를 바꿔주는 식으로 하는 것은 할 수 있지만 이미지를 붙여넣지 않았을 때(즉, 빈 src일 때)는 영역이 깨져보인다는 게 거슬렸다. 그러면 no image 이미지를 붙여넣는 방법도 있으나, 비율상 맞지 않아서 원치 않았다.

아이콘과 div박스로 만든 게 제일 예쁜데, 이걸 곧바로 src를 붙여넣을 수가 없으니;;;;;