듀얼라이프 커뮤니티 플랫폼 주말의 집🏡 1차 회고

주말의 집은 2022년 한국대학생 IT 경영학회 KUSITMS에서 진행했던 Duaily라는 프로젝트의 리뉴얼 프로젝트입니다. (듀얼리 보러가기)

프로젝트 개발 기간이 짧았던 탓에 최종 발표날까지 완전히 구현하지 못한 아쉬움이 있어 큐시즘 이후 팀원들과 이어서 리뉴얼하여 다시 기획하게된 프로젝트입니다.

기획 + 디자인 + 개발, 각기 다른 분야의 팀원들과 소통하며 개발하고 있습니다.

현재도 아직 개발중이며, 개발하면서 느꼈던 점을 공유하고자 1차 회고를 공유합니다

개발 외 다른 포지션과의 협업

지금까지 프로젝트를 하며 개발자들끼리 사이드 프로젝트를 진행한 경우가 대부분이었습니다.

따라서 개발하면서 중간에 기능을 추가하거나 UI를 임의로 수정하는 경우가 많았는데 이번 프로젝트에서는 기획팀이 기획한 기능, 디자인팀이 설계한 UI 요구사항에 맞게 개발하는 것이 중요했습니다.

그러다보니 기획 구성이나 콘텐츠, UI 적으로 기존 프로젝트보다 퀄리티있는 개발 경험을 할 수 있었던 것 같습니다.

프론트엔드 개발 특성 상, 백엔드 개발자 뿐만 아니라 디자이너와 기획팀 사이에서 소통을 하는 경우가 많습니다.

비개발 직군과의 소통을 얼마나 잘하느냐에 따라 커뮤니케이션 비용을 줄일 수 있고, 더 좋은 프로덕트를 개발할 수 있는 것 같습니다.

실서비스 개발의 조심성

실제 서비스를 기반으로 개발을 하는것이다 보니, 클라이언트가 경험하는 UI/UX, 보안 등 개발하는데 있어서 더욱 조심스럽고 신중하게 되는 것 같습니다.

사용자가 다양한 기기에서 접근하는 것을 고려해서 반응형 UI 구현에 조금 더 신경쓰게 되고 사용자의 정보와 토큰을 보관하는 방법에 있어서 더욱 보안적인 측면도 고려하게 되었습니다.

엑세스 토큰은 로컬스토리지에 저장하되 유효기간은 짧게 설정하고, 리프레쉬 토큰은 클라이언트에서 접근할 수 없도록 HttpsOnly 쿠키에 저장하는 방식을 채택했습니다.

개발속도가 살짝 느리더라도 사소한 부분까지 꼼꼼하게 생각해보게 되는 경험이었습니다. 🙂

새로운 경험

이번 프로젝트에서는 이전 프로젝트에서 적용해보지 못했던 텍스트 에디터를 사용한 게시판 작성 기능을 도입했습니다.

현재 개발중인 부분이기도 한데, 예전부터 언젠간 해봐야지 했던 스택이어서 굉장히 설레는 마음으로 개발을 시작했습니다.

react-quill 라이브러리를 기반으로 텍스트 에디터를 구현하고 있었는데, 몇 가지 이슈를 맞닥뜨리게 되었습니다.

❓ 이미지 삽입 시 base64로 변환된 이미지가 너무 길어 서버에 저장할 수 없다.

이를 해결하기 위해 이미지를 base64 형태가 아닌 URL로 바꾸는 과정이 필요했습니다.

react-quill 라이브러리에서 제공하는 모듈에 이미지 핸들러 함수를 적용하여, 이미지를 업로드할 시 프론트엔드에서 S3에 해당 이미지를 업로드하고 URL을 반환받아 이미지 태그에 src로 넣어주는 작업을 했습니다.

❓ 게시글 생성 API 요청을 보냈을 때, 서버에서 500에러가 발생했다.

이는 컨텐츠의 내용이 길어질경우 해당 에러가 발생했습니다.

그 이유는 SQL insert 쿼리 오류 때문이었습니다.

code와 content가 varchar (255)로 되어 있어서 length를 넘어선 것으로 인해 insert가 되지 않았습니다.

이를 해결하기 위해 varchar에 max_length(65535)를 넣었지만, 이것으로 해결되지 않았습니다.

백엔드팀의 긴급회의를 통해 테이블을 분리하는 쪽으로 해결을 시도해보기로 했습니다.

여러 포지션의 팀원들과 소통하며 개발하는 만큼 저도 서비스 결과가 기대되는 프로덕트입니다!

프론트엔드 개발을 혼자서 맡아 진행하고 있는데, 학교 스케쥴과 다른 프로젝트 및 활동도 겸해서 진행하고 있어 살짝 벅차지만 좋은 팀원들과 함께 즐겁게 프로젝트를 진행해나가고 있습니다.😊

점차 발전해나가는 모습 보여드리겠습니다. 감사합니다 !