1. 시작

한달전 저는 react에 대해 각잡고 공부해보려는 시점이었습니다. 그리고 선택지는 2가지.

1. 인터넷 강의로 공부.
2. 사이드 프로젝트로 직접 만들면서 공부.

같이 일했던 동료분이 사이드 프로젝트를 하자는 제안을 주셨고 고민끝에 '역시 공부는 실전이지!' 라는 생각으로 넘블에서 진행하는 지역 기반 커뮤니티 만들기 프로젝트에 참여하게 되었습니다.

2. 우리 댕메이트는요!

강아지를 키우는 견주들을 위한 지역 기반 커뮤니티 입니다. 같은 동네에서 우리 댕댕이와 산책할 친구를 구할 수 있고 정보를 공유할 수도 있어요. 서비스 컨셉이 더 궁금하다면 아래 링크를 참고해주세요😀
댕메이트 소개

3. 구현 기능

✨ 지역 인증을 통한 회원가입

현재 위치에서 6km 이내에 있는 동,읍,면을 자동으로 검색하여 간편하게 자신의 동네를 선택해 회원가입을 할 수 있습니다.

모든 버튼은 사용자가 input창에 입력한 정보의 유효성 검사를 통과했을 때 활성화 되도록 처리했구요.

이메일은 중복 검사가 필요하기 때문에 이메일 형식 유효성 체크가 통과된 뒤부터 중복 체크 api를 호출하여 검사할 수 있도록 만들었습니다.

닉네임 또한 중복 체크를 통해 동일한 닉네임으로 가입할 수 없도록 제한했습니다.

✨ 로그인

로그인은 이메일, 비밀번호 형식 유효성 체크뿐만 아니라, 존재하지 않는 아이디일때, 비밀번호만 틀렸을 때 각각에 대해 에러 핸들링을 추가 했습니다.

로그인에 성공하면 귀여운 스플래시화면이 환영해줘요🥰

✨ 댕메이트 메인

메인에는 인피니트 스크롤과 스켈레톤 ui를 넣어 부드러운 ux로 게시글 리스트를 볼 수 있도록 했습니다.

✨ 게시물 업로드/수정/삭제

원하는 카테고리칩을 선택하고 이미지와 본문을 작성하여 업로드할 수 있습니다.

본인의 게시물은 자유롭게 수정하고 삭제할 수 있습니다.

✨ 댓글/대댓글 작성/수정/삭제

댓글, 대댓글을 작성하고 본인의 댓글은 자유롭게 수정하고 삭제할 수 있습니다.

✨ 좋아요 기능

내가 관심있는 게시물에 좋아요를 누르고 관심 목록에서 확인할 수 있습니다.

✨ 내가 쓴글

내가 쓴 글과 댓글들을 확인할 수 있습니다.

✨ 프로필

내 프로필사진과 닉네임을 변경할 수 있습니다. 그리고 프로필 정보 오용 및 남용을 막기 위해
프로필 정보는 수정 후 7일 이내에 다시 변경할 수 없도록 했습니다.

4. 댕메이트 제작 상세

• 도메인 : https://dangmate.com(현재는 서비스 종료상태입니다😭)

• 제작 기간 : 2022.10.21~2022.12.1 (6주)

• 팀원

  • 프론트엔드 : 세영
  • 백엔드 : 제우스
  • 디자인 : 제민규

• 프론트엔드 기술 스택 : Vite, React, Typescript, Recoil, Emotion

• 사용 서비스 및 협업 툴

  • 이용 서비스 : Kakao map api, 주소 오픈 api
  • 배포 : AWS S3
  • 협업툴 : Figma, Github, Notion, Slack

• 개발 깃허브 : https://github.com/dangmate

6. 회고

배운 점

• 서비스의 기본 기능들을 구현해보면서 유의해야하는 점들을 깨달을 수 있었습니다.
  • 비용적 측면에서 api 제어(throttling/debouncing, 댓글/대댓글 data fetch 없이 리렌더링 시키기)
• 라이브러리는 잘 알고 써야 잘 쓸 수 있습니다.
  • form 라이브러리를 초반에 사용했다가 커스텀이 안돼서 삽질하다 결국 삭제하고 스스로 구현했습니다.
• 모바일 반응형에서 주의해야될 점과 ios에서 발생하는 크로스브라우징 문제들을 파악하고 개선할 수 있었습니다.
  • 키패드가 올라왔을 때 컨텐츠 가림 문제 및 버튼 처리
  • ios input 그림자 및 zoom 이슈/ 사파리 주소창 이슈
• react 숙련도를 올릴 수 있었습니다. (물론... 현재 코드는 리팩토링이 시급합니다🫠)

아쉬웠던 점

시간은 부족하고 혼자하기에 작업량이 정말 많았기에... 그 과정에서 생긴 개발 이슈들은 해결하면 넘어가기 급급했고 제대로 정리를 못한 점들이 너무 아쉬웠습니다. 천천히 곱씹으며 이해를 할 시간이 없었달까...🥲

그리고 충분히 컴포넌트로 묶어서 사용할 수 있던 부분들을 하드코딩으로 하게 된것도 있고, react로 렌더링 최적화 시킬 수 있는 훅들도 많이 사용하지 못했습니다. 코드에 대한 고민을 해볼 수 있는 시간이 적었던 점이 많이 아쉽습니다...

마지막으로...

짧은 시간이었지만 한 서비스의 기본 기능들을 혼자서 모두 구현해볼 수 있었고 그 과정에서 어떤 점들을 유의해야하는지 깨달을 수 있었기에 좋았습니다.

그리고 모바일 반응형, 크로스 브라우징 등을 신경썼고 깔끔하게 구현된 것 같아 뿌듯했습니다.

친절하고 맡은 일을 잘 해냈던 팀원들 덕분에 힘들어도 재밌게 작업할 수 있었고, "나중에 함께 일해보고 싶다!"라는 생각이 들었습니다. 그리고 내가 느끼는 것처럼 과연 나는 같이 일하고 싶은 동료였을까?라는 생각을 하며 스스로를 되돌아보는 시간도 가질 수 있었습니다.