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을 말한다.
리뷰가 끝난 후 정확히 어떤 엔드포인트를 생성해야 할지 구체적으로 알아보기 위해 데일리펀딩 사이트에 접속해서 관리자 개발 도구로 이미지 태그를 살펴보았다.
그 결과 내 방식과의 차이를 알아차릴 수 있었고, 무엇을 수행해야 할 지 감이 잡혔다.
이후 수정은 다음 3단계로 진행되었다.
- File 모델 수정 (uuid 컬럼 추가)
- url이 직접적으로 노출되지 않도록 Serializer 수정
- 다운로드 기능 추가
단계별로 차근차근 진행하니 목표한 ‘실제 파일이 저장된 물리적인 위치가 노출되지 않도록 하기’를 해낼 수 있었다.
특히 첨부 파일 관리 모델은 Whowho님이 많은 도움을 주셨다. 내가 작성한 코드를 보시고는 각각 다른 카테고리의 게시글에 첨부된 파일을 어떻게 구분하여 저장해야 하는지 무엇을 어떻게 추가해야 할지 단계별 가이드를 주셨는데 정말 명쾌했다. 멘토님 덕분에 헤매지 않고 생각보다 빨리해 낼 수 있었던 것 같다.👍
[5월 느낀점]
처음에는 요구 사항대로 다 구현할 수 있을까 걱정이 많았다. 하지만 그런 걱정이 무색하게 MIT님과 멘토님들께서 꼼꼼하게 검토해 주셔서 새로운 것들도 많이 배웠고 내가 나름대로 고민하고 구글링해서 코드를 짠 다음 검토를 요청드린 적이 있는데 한 번에 통과를 받았을 때는 큰 성취감도 느낄 수 있었다. 순조롭게 진행되는 시간보다 잘 풀리지 않아 고민하는 시간이 더 많긴 했지만 이제는 그런 것마저도 스트레스라기보다는 과정 중에 하나 일뿐이라는 생각이 든다.
[6주년 행사]
5월에는 데일리펀딩의 6주년 행사가 있었다. 이런 빅 이벤트는 처음이라 어떨지 너무 궁금했는데 출근하니까 입구에 마련된 포토부스부터 시작해 회사가 평소와는 아예 다른 분위기여서 6주년 행사를 한다는 것이 실감 났다. 특히 단체전 게임이 정말 재미있었다. 단체전은 핸드폰 타자 게임, 주제 별 초성 맞추기, 침묵 속의 외침 등이 있었는데 내가 속한 팀이 연속 상위권이었다. 다들 게임을 엄청 잘한다👍🏻 침묵 속의 외침은 티비에서 볼 때는 쉬워 보였는데 막상 하니까 하나도 안 보이고 안 들려서 답답했다.🤐 그래도 기적적으로 몇 개 맞췄다(ㅋㅋ). 마지막으로는 아침에 각자 뽑은 번호표로 경품 추첨하는 시간이 있었는데 나는 비록 광탈..이었지만 정말 즐거웠던 시간이었다.