첫 프로젝트를 끝내고...

작년부터 프리랜서로 일하면서 블록체인 관련 프로젝트를 계속 해보고 싶었는데 좋은 기회에 맡게 되어서 설레는 마음으로 프로젝트를 시작하게 되었다. 3개월이라는 짧은 데드라인을 알고 시작하는만큼 힘든 과정이 될꺼라고 짐작했지만 막바지에는 정신적인 압박이 상당했다. 다행히 함께 일하게 된 시니어 개발자님과 함께여서 서로 으싸으싸하면서 험난한 고난들을 이겨낼 수 있었다.

함께 일하는 분들 모두 도와주셔서 좋은 분위기에서 일 할 수 있었으나 외주 기획과 외주 디자이너와의 커뮤니케이션 미스로 인한 일정 딜레이 및 미비한 기획으로 인한 추후 수정 및 개선사항 상당히 많았다.

특히 이번 프로젝트에서 퍼블리싱까지 함께 맡게 되면서 반응형을 하게되었는데.. 기획이며 디자인에 반응형이 제대로 적용되어있지 않아서 굉장히 곤란했다. 계속 커뮤니케이션이 가능한 상주인원이라면 괜찮았겠지만 외주이다보니 그것 또한 여의치 않았다.
다행인건 이런 상황에서 모든 경우의 수를 생각하신 경험많고 유능한 팀장님 덕분에 제시간에 서비스 테스트까지 모두 진행 할 수 있었다는 것이다.
그래서 힘든 과정이었음에도 커뮤니케이션과 일정 관련 부분에 있어서도 많은 걸 얻어 갈 수 있는 프로젝트였다.

물론 기술적인 부분에서 가장 성장 할 수 있게 해준 프로젝트이기도 했다. 그 부분은 아래서 더 자세한 설명 할 것이다.

---

커뮤니티 서비스에 대하여...

프론트엔드 기본 스펙

• Nuxt3 SSR
• Typescript
• Pinia
• Vite
• Eslint/Prettier

커뮤니티 서비스는 처음이였고 SSR과 Typescript는 토이프로젝트로 만들어보았지 직접 서비스를 만드는 건 처음이라 정말 막막했다. 거기다가... nuxt3을 사용하면서 처음 사용해보는 Composition API는 나를 더 혼란스럽게 만들었다.

물론 React로도 작업을 해봤기 때문에 금방 적응하긴 했지만...이전 Vue2에 익숙해져있던 생각회로가 가끔 오작동으로 엉키는 건 어쩔 수 없었다.
위의 시행 착오와 개발 과정에 대해서는 회고록 Version2에서 자세히 다루도록 하겠다.

커뮤니티에는 어떤 기능들이?

Basic CRUD

기본적인 CRUD기능을 가지고 Rest API로 API통신을 하는 게시판 형태의 서비스이다.
Api 통신에 있어서 백엔드와 협의한 내용은 Paginaion 정보를 header로 받고 Wrapper가 있는 response가 갈 수 있다는 것이었다. 기획이 완료되지 않은 시점이라서 유연하게 만들어야해서 간략하게 Wrapper로 response를 보낼때 형식을 협의했다. Api interceptor를 이용해서 협의한 형식의 에러코드를 읽어 실제 에러로 변환해서 내려줄 수 있도록 셋팅했다. 이유는 디버깅이 용의하도록 하기 위해서 이와 같이 셋팅하였다.

Editor

에디터 기능 구현을 위해 "Tiptap"라이브러리를 커스터마이징하여 제작되었다. 예를들어 기본적으로 사진이나 동영상이 구분되어 올라가야 했고 기존 라이브러리의 파일을 올리는 방법이 다소 생소해서 익숙한 방법으로 수정했다. 또한 백엔드 개발자분들과 기능 협의 또한 필요했다.
이미지 업로드에 대해서 한번에 보내는것은 시간이 많이 걸려서 회의 후에 사진을 올릴때마다 API를 날려 디비에 임시로 저장하고 S3 이미지 주소를 가지고 에디터에 삽입하는 방법을 택했다. 이와 같이 기획에 맞춰 기능 수정이 들어갔다.

Recycler view

다양하고 많은 양의 포스팅(데이터)이 리스트업 되어야하므로 성능이슈를 최소화하기 위해서 Recycler view 구현하게 되었다.

Share / Open Graph

Share를 위해서도 Meta태그에 OG를 삽입하여 각 소셜에서 공유 가능하도록 구현했다.
또한 우리 포스팅 안에도 Open Graph기능을 구현하여 넣었다. 이 과정에서 몇가지 시행착오가 있었다.

SEO

각 포스팅마다 상세페이지를 따로 만들어서 SEO가 가능하도록 만들었다.

GA/NA

1차 제작으로 간단한 GA와 NA만 구현하고 추후에 늘려가는 방향으로 정해졌다.