항해99 11주차 Weekly I Learn(실전 프로젝트 4주차)

What I Learned

- 웹에디터를 이용한 스터디 노트 기능을 만들어 보자

• Toast UI 라는 웹에디터를 이용해 스터디 노트를 작성할 수 있게 해서 스터디 내용을 기록하도록 기획했다.
• Floala, react quill, Toast UI 세 웹에디터를 비교했고 개발자 친화적이면서 공식문서를 좀 더 보기 쉬운 NHN에서 만든 Toast UI를 사용하기로 했다. 

- base64 형태의 데이터를 DB에 바로 저장할 때 문제

1. DB에 이미지를 넣는다면?

서버에 이미지를 직접 넣지 않는 이점이 있다. 경우에 따라 텍스트를 DB에 넣어놓고 불러와

화면에 <img> 형식으로 뿌리면 매우 간단한 구현이 가능하다.

 

2. 이미지 랜더링

  브라우저가 이미지 랜더링 시, base64로 표현할 경우 문서 로딩과 동시에 함께 로딩되기에 끊기는 증상이 사라진다.

 

3. BASE64 이미지를 많이 이용하면 오히려 문서 로딩시간이 길어진다.

 

4. 용량이 크다

  인코딩 후 용량이 증가된다.

 

5. 가독성이 떨어진다.

  사진의 크기가 크다면, 태그에 매우긴 텍스트가 보이기에 가독성에 어려움을 준다.

 

이러한 문제로 base64 형태의 데이터를 DB에 직접 저장하는 방법은 쓰지 않기로 했다. 그렇다면?

- 클라이언트에서 서버를 만들어 실제 데이터를 저장하고 URL 주소만 DB에 저장하기로 하자

• AWS S3를 이용해 이미지 파일을 저장할 수 있도록 서버를 구축하고 AWS SDK 를 이용해 S3를 제어하기로 함.

 

기능 개발을 하면서 기술적으로 막혔던 부분은?

- 만약 사용자가 이미지를 에디터에 추가하고 삭제 후 다시 이미지를 업로드하면 사용하지 않지만 S3 서버에는 파일 데이터가 계속 쌓일 수 밖에 없다.

• 검색을 통해 알아낸 방법은 다음과 같다. 배포가 시급하여 서비스 시 동작에는 문제가 없다고 판단하여 이후 업데이트 시 변경해볼 생각이다.

 

4주차를 진행하면서 느낀점

우리의 목표는 4주차에 배포하는 것이었다. 하지만 계획이란 그렇듯 항상 틀어지기 마련이었고, 팀내 불화없이 모두가 각자 맡은 바 최선을 다하고 있기에 점점 욕심이 났던것 같다. 4주차가 끝날 무렵에는 오프라인 관련으로는 서비스를 배포하여 유저 피드백을 받으며 온라인 기능을 추가로 버전업 할 계획이었으나 생각보다 속도가 잘 나지 않았고, 특히 많은 화면을 구성해야하는데 이제 막 개발을 시작한 프론트엔드 2명이 쳐내기에는 쉽지 않았다. 그 와중에 메인페이지는 전면 수정을 하여 퍼블리싱에 대한 작업이 추가로 늘었고, 그럼에도 우리는 한 목표를 향해 열심히 나아갔다.

 힘들고 예민하겠지만 서로 배려하며 프로젝트를 진행함에 있어 협업이란 무엇인지 조금은 알 것 같고, 결국 함께 하는 사람들과의 호흡이 프로젝트의 성과를 보여주게 되는 것이 아닐까? 하는 생각을 해보았다.