5월도 지난달에 이어 관리자 페이지 리뉴얼 프로젝트를 진행했기 때문에 이번 일지도 관리자 페이지 리뉴얼을 진행하며 새롭게 배운 것들에 대해서 작성해보았다.
[첨부파일 관리]
이미지, pdf 등 첨부 파일은 데일리펀딩 사이트뿐만 아니라 어느 웹 사이트를 이용하든 글쓰기 기능에서 빼놓을 수 없는 필수적인 요소일 것이다. 그런 부분을 맡게 된 만큼 이번 기회에 첨부파일 저장 및 관리법에 대해서는 확실히 알아가야겠다고 생각했다.
글쓰기 + 첨부 파일 저장 기능을 구현하게 되면서 처음으로 웹에디터도 다뤄보았다. 웹에디터란 흔히 네이버 블로그와 같은 곳에서 글을 작성할 때 사용하는 편집기를 말한다. 에디터는 CKEditor5를 사용했는데 다양한 버전이 있어 공식 문서(https://ckeditor.com/docs/ckeditor5/latest/index.html)를 살펴보고 필요한 기능이 있는 버전으로 선택하면 된다. 나는 그중에서도 Document editor를 선택했다.
CKEditor5로 작성한 데이터는 html 형태(ex. <p>안녕하세요</p>)로 저장된다. 이미지의 경우도 마찬가지다. 에디터의 사진 아이콘을 클릭하고 사진을 선택하면 선택한 사진이 <img src=’URL’>로 변환된다.
여기서 첫 번째 고민이 시작됐다. 그 전까지는 게시물 저장 버튼을 클릭해야 게시물과 함께 파일 정보가 저장될 것이라고 막연히 생각했었다. 하지만 조금 더 고려해야 할 부분이 있었다. 이미지 태그에는 src라는 속성이 존재한다. src 속성은 이미지 소스의 URL을 명시한다. 브라우저는 명시된 URL 위치에서 해당 이미지를 가져온다. 즉, URL은 실제 파일이 저장되어 있는 위치를 의미한다.
위의 예시 이미지처럼 글을 저장하기 전에도 에디터 상에 첨부한 이미지가 보이도록 하려면 그 파일의 정보가 데이터베이스에 저장되어 있어야 한다. 따라서 이미지를 첨부하는 즉시 서버에 파일의 정보를 저장하고 응답으로 파일이 저장된 위치를 받아와 img 태그의 src에 삽입하는 코드를 작성했다.
첫 번째 시도 후 이미지 태그를 살펴보면 위의 사진과 같이 src에 파일의 실제 위치를 드러내고 있었다. 이런 방식에 대해 정기 리뷰 당시 MIT님께서 피드백해 주셨는데 내 방식은 파일이 저장된 위치뿐만 아니라 폴더를 어떻게 관리하고 있는지 노출이 되어 별로 좋지 않은 방법이라고 하셨다. 그러면서 guid와 같은 유니크한 키값을 생성한 뒤 이를 이용해 엔드포인트를 생성하면 파일의 물리적인 위치를 노출하지 않고도 파일을 불러올 수 있다는 조언을 추가로 해 주셨다. 참고로 엔드포인트는 리소스에 접근할 수 있게 해 주는 URL을 말한다.
리뷰가 끝난 후 정확히 어떤 엔드포인트를 생성해야 할지 구체적으로 알아보기 위해 데일리펀딩 사이트에 접속해서 관리자 개발 도구로 이미지 태그를 살펴보았다.
