Week7 회고

서론

이번주엔 당근마켓을 클론코딩 해보는 시간을 가져보았다.
클론코딩이라고 해서 코드를 어느정도 받아서 개발하는줄 알고있었는데, 그냥 무작정 어떤 사이트를 모방해서 만들어보는것이였다...

본론

당근마켓을 클론코딩하고자 우리가 구현목표로 한 기능들은 다음과 같다.

핵심기능

• 회원가입 및 로그인 🏃‍♂️🏃‍♀️

  • 기본적인 회원가입과 로그인은 jwt라이브러리를 사용하여 로그인 권한 관리를 했다.
  • 회원가입시 아이디가 중복되는지 검사하고 중복되면 에러메세지를 반환했다.

• 사용자 위치기반 검색기능 🔎

  • 카카오 api를 활용하여 사용자의 위치를 기준으로(자기 동네에서만 거래를 한다는 컨셉이 있기때문이다.) 일치하는 키워드를 검색하는 기능을 구현하였다.

• 마이페이지 기능 🙍‍♂️

  • 사용자의 프로필사진과 닉네임, 동네주소를 수정할 수 있는 마이페이지를 구현했다.

• 게시글 CRUD 기능 🧾

  • 게시글의 기본적인 CRUD 기능을 구현하였다.

• 좋아요 기능 👍

  • 로그인을 한 사용자가 특정 게시글에 좋아요를 누를 수 있도록 기능구현했다.

• 실시간 전체대화 기능 📫

  • socket.io를 활용해서 사이트에 접속하신 모든 유저들이 서로 이야기를 나눌 수 있도록 구현했다.
  • 사실 이 기능은 판매자와 구매자간 1대1 대화로 구현을 해야했지만 우리의 기술력 부족으로 구현하지 못했다...

실행화면

https://youtu.be/R10XYIzl1kA

트러블 슈팅

• Q1. 실시간 사용자의 위치를 기반으로한 검색기능을 어떤식으로 구현할 수 있을까?
  • A1. Geolocation이라는 함수를 사용해서 현재위치의 좌표를 응답받고, axios를 이용해 카카오mapAPI를 연동시켜 주소로 변환하여 기능구현 했다.

• Q2. 검색자의 위치를 너무 좁게 잡아서 동으로 검색시 구에 있는 물건이 검색되지 않는 문제가 있었는데 해결 할 수 없을까?
  • A2. DB에 사용자 주소를 저장할 때 구와 동을 모두 저장하기위해서 Gu, Dong이라는 이름으로 DB에 따로 저장을해주어 검색자가 어떻게 검색을 하든 불편함을 느끼지 않도록 했다.

• Q3. 하나의 라우터에서 2가지 기능을 수행하게 되는 상황이 왔는데 어떻게 해결해야 할까?
  • A3. 하나의 라우터에 너무 많은 기능을 넣으려고 했던거같아 2개의 라우터로 기능을 쪼개서 구현했다.

• Q4. 깃으로 협업할때 잦은 충돌이 개인마다 코딩 스타일이 달라서 매번 시간을 크게 할애하는데 이걸 해결할수 없을까?
  • A4. 코딩스타일을 모두 변수명은 카멜스타일로 통일을 하고, DB관련 변수명은 파스칼스타일로 통일을 했으며, prettier라는 플러그인을 사용해서 코드의 format을 통일 했다.

• Q5. 협업을 위해 어떤 노력을 할 수 있을까??
  • A5-1. API명세서 작성은 깃북을 활용하였고, 와이어프레임 작성은 figma를 활용해서 협업을 했다.
  • A5-2. 업무중 수시로 접속해야했던 사이트를 한글문서로 남겨두었고, 업무 현황을 공유 및 관리하기위해 nortion을 활용했다.

• Q6. 새로고침시 화면이 상태유지가 안되는 현상을 어떻게 해결할 수 있을까?
  • A6. useEffect를 사용하여 각 페이지별로 데이터를 할당시켜주고 optionalChaining을 활용해 값이 먼저 불러와지지 않을 경우 기존값이 리턴되도록 했다.

• Q7. FormData에 이미지를 map method를 사용하여 입력하였을경우 서버에 body로 string타입으로 전달되어 이미지파일전달에 어려움을 어떻게 해결할까?
  • A7. map method를 사용하지 않고 제한된 이미지만을 넣을 수 있도록 3장의 고정된 배열을 사용하여 정해진 값을 할당했다.

결론

결국 1대1 채팅을 실시간소켓통신으로 구현하지 못한게 찝찝하지만 추후 좀더 공부를 해보면 구현할 수 있을거같다. 그래도 나름 당근마켓 비스무리하게 작품이 나온거 같아서 만족스러운 프로젝트였다.