Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
취미나 스터디를 함께 할 수 있도록 쉽게 모집할 수 있는 크루크루를 소개합니다!🌈
#side_projects
1 month ago

<< 서비스명: 크루크루 >>

(1) 자기소개

  • 안녕하세요 프로젝트를 진행하는 것을 즐겨하고, 끊임없이 성장하는 것을 좋아하는 예비 프론트엔드 엔지니어 오쯔입니다.

  • 처음에는 django를 사용하면서 백으로 개발을 시작했지만, 노마드 코더의 React 마스터 클래스 강의를 들으면서 프론트로 전향했고, 이후 타플랫폼 등 여러 강의를 들으면서 빠르게 성장하고 있는 취준생입니다!

(2) 서비스 소개

  • 크루크루는 취미나, 스터디를 소개해 함께 할 수 있는 구성원들을 빠르게 모집할 수 있게하는 서비스입니다.

  • 가볍게 한다는 마음으로 시작했지만, 기획을 하고, 기능을 추가하면서 진행하다보니 진지하게 서비스를 고려하고 있습니다.

  • 현재는 부족한 점이나, 버그도 있겠지만 한번 사용해보셨으면 좋겠습니다.

(3) 시작하게된 계기

  • 개인적인 계기를 말하자면 노마드코더나 타플랫폼 강의를 듣고 개인프로젝트를 진행한 후 운좋게 취업을 했지만 협업경험이나 실력적으로 부족하다 느껴 퇴사를 한 후 협업 프로젝트를 꼭 한다는 일념아래 온라인에서 모집하는 글을 보고 빠르게 지원한 후 이 프로젝트의 팀원으로 합류했습니다.

(4) 개발 과정

  • 디자이너 1, 웹퍼블리셔1, 프론트2, 백3로 시작했지만 중간에 사정으로 프론트한분이 나가고 퍼블리셔분이 프론트로 전향하면서 디자이너1, 프론트2, 백3로 진행했습니다.

  • 프론트는 React, Recoil, SWR을 사용했고 백은 Java, Spring을 사용했습니다. 배포는 AWS로 배포한 후 nginx, s3, swagger 등 여러가지를 추가 이용했습니다.

  • 온라인으로 주 2회 회의를 하며, 디스코드로 화면공유로 소통하고, Figma로 디자인을 확인하면서 진행했습니다. 그 외 노션이나 깃이슈로 개발이나 기획, 규칙 부분 등을 정리해 공유했습니다.

  • 모집을 진행했던 팀원의 아이디어를 바탕으로 디자이너분이 처음 기획을 맡았고, 다같이 프론트와 백의 소통방식과 API 규칙 및 swagger 사용하면서, 전체적으로 기획 중 개발적으로 불가능한 점이나, 어려운 점을 말씀드리면서 기획을 수정하고 개발해나갔습니다.

(5) 개발 기술스택 사용 이유

  • Next.js라는 좋은 프레임워크를 사용해봤었고, 사용하면 좋은점이 많지만, 이번에 진행한 것은 순수 React(CRA없이)였습니다. 왜냐하면 웹팩을 실제로 사용해보고 공부도 하면서 웹팩의 개념을 이해하고, CRA와 Next.js의 필요성을 크게 느끼고 싶었습니다. (정말 후회하고 또 후회했습니다. ㅠㅠ)

  • 그리고 타입스크립트가 대세인데 왜 자스를 했냐면 진행할 때 프론트 팀원이 타스를 잘 모르기도 했고, 저도 자스에 더 집중해보고 싶어서 자스를 선택했습니다.(그런데 그냥 타스할껄)

(6) 회고 및 후기

  • 협업을 하면서 가장 크게 느낀 점은 '내가 생각한 것과 다른 사람이 생각한 것은 정말 다르다'였습니다. 기획을 하고 회의를 하면서 디테일적인 부분에서 생각의 차이가 있었고, 기능적인 부분에 대해 같이 이해를 하고 진행했는데, 이해를 서로 다르게 하는 신기한 경험이 있었습니다.

  • 이러한 이해와 생각들을 좁히도록 회의를 하면서 더 디테일하게 생각을 말로 전하도록 노력했습니다.

  • 개발적으로 어려웠던 점은 확장성 있는 컴포넌트였습니다. 공통으로 사용하는 Button, Modal, Textfield들을 확장성있게 만들기 위해 오픈소스를 찾아보고, 모달은 portal을 사용해서 컴포넌트가 어느 위치에 있든 나오도록 기능을 만들었습니다.

  • 그리고, 채팅 기능에서 어려웠는데 웹소켓을 처음 사용해보기도 했고, 채팅을 슬랙처럼 스크롤 할 때 채팅들에 대한 ~월 ~~일 등 상단에 sticky로 보이도록 하는 게 생각보다 어려웠습니다.

  • 아쉬웠던 점은 웹팩을 궁극적으로 더 사용할 수 있지 않을까 웹팩을 더 공부해야겠다는 생각을 했고, 위에 언급했듯 Nextjs와 TS를 사용했으면 좋지 않았을까 아쉬운 점도 있었습니다.

  • 그리고 모바일 반응형을 대응했지만, UX적으로는 많이 대응못한 점이 아쉽습니다.

(7) 그 외 기타

Repository: https://github.com/kimth007kim/crewcrew

사용하면서 버그나 피드백있으시면 메일주세요. 많은 이용부탁드려요

8 comments