😀 개요

• 당근마켓 기능을 클론코딩한 와플마켓 클라이언트 입니다.
• 당근마켓은 단순 게시판 기능 외에 예약, 거래, 채팅 등의 부가 기능이 더해진 서비스로, 이를 구현해보면서 개발 실력 성장을 이루고자 했습니다. 또한 서비스 기획에 인풋을 줄이기 위해 기존에 있는 서비스를 기반으로 클론코딩했습니다. 앱 기반의 서비스를 웹에서 사용하기 위해 사용자에게 필요한 요소는 무엇일지, 사용자가 더 편리하게 사용하려면 어떻게 구현해야할지 등 유저 입장에서 고민하며 프로젝트를 진행했습니다.
• 프론트엔드 3명, 서버 3명으로 구성하여 진행한 팀 프로젝트입니다.

👩🏻‍💻 맡은 부분 (Frontend)

• 초기 진입 시 마주하는 랜딩 페이지를 구현했습니다.
• 중고거래 게시판 전반을 맡으며 게시판 기능, 예약, 거래 기능 등을 구현했습니다.
• 웹소켓을 이용한 채팅방 생성, 채팅방 내 메시지 전송 등을 구현했습니다.
• 유저 프로필 전반을 맡아 프로필 이미지 & 상세 정보 작성 및 수정, 카카오지도 API를 이용한 위치 정보 표시 등을 구현했습니다.

📚 기술 스택

🏛️ 클라이언트 & 서버 구조

---

🖍 기술적인 이슈, 개발 과정을 겪으며 정리한 글 요약 및 링크

💡 페이지별 접근제어 설정 로직 통일화

• 커스텀 훅, Private Route을 통한 개선작업

  문제 상황

  • 유저의 권한에 맞게 페이지별로 접근을 제어해야 할 상황이 생기게 되었습니다.
  • 각각 페이지 자체에서 접근이 불가능한 경우 돌려보내고 있었는데 동일한 내용이 분산되어 있어서 코드의 중복이 발생하고, 유지보수에 어려움이 있었습니다.

  해결 방법

  • 라우터 차원에서 제어할 수 있게 private route 를 구현하게 되었고, 이제 페이지 내에서는 접근이 가능한 상황을 가정하고 로직을 진행할 수 있게 됩니다.
  • 접근 권한 판별은 useAuth 커스텀 훅으로 분리했습니다.

  과정에서 깨달은 점

  • 라우팅, 인증, 권한의 각각의 관심사를 분리하는 것을 통해 코드의 재사용성을 높일 수 있다는 점을 알게 되었습니다. 코드를 모듈화하고 구조를 개선하는 작업을 통해 코드의 가독성과 같은 로직을 통일되게 처리하는 것이 협업 및 유지 보수성 측면에서 유리하다는 점 또한 깨닫게 되었습니다.
  • 😀 더욱 자세한 내용을 읽어보고 싶으시다면 아래 링크를 눌러주세요!
  • 🛠 react-router에서 Private Route 구현을 통한 권한별 접근제어 설정

---

💡 랜딩 페이지 성능 개선을 위한 리팩토링

• 코드 분할, 이미지 확장자 변환, 사전 로딩 적용

  문제 상황

  • 사이트에 접속 했을 때 요소들이 보이기(First Painting)까지 시간이 걸렸는데, 이러한 점은 사용자의 이탈로 이어지기 쉽다고 생각했습니다.

  원인 분석

  • 랜딩 페이지에는 이미지가 많았고, 이 파일들을 가져오는데 시간이 오래 걸렸습니다. 또한 초기 번들이 분리되어있지 않아 사용자가 처음 접속했을 때 모든 파일을 가져와야 했습니다.

  해결 방법

  • 코드 분할 및 지연 로딩으로 초기 번들 파일 크기 줄이기, 이미지 확장자 변환을 통한 용량 감소, 사전 로딩을 통해 모듈의 필요 순간을 예측하고 미리 로드하기 등을 통해 문제를 해결하였습니다.

  과정에서 깨달은 점

  • 사용자 경험 향상과 성능 개선에 여러 지표가 있다는 것을 알게 되었고, 프론트엔드의 로딩/렌더링 최적화 정도가 서비스의 첫인상과 인식에 큰 영향을 줄 수 있겠다고 생각했습니다.
  • 😀 더욱 자세한 내용을 읽어보고 싶으시다면 아래 링크를 눌러주세요!
  • 🛠 랜딩페이지 성능 개선하기 (코드 분할, 지연 로딩, 이미지 파일 용량 감소, 예측 로드)

---

그 외 정리한 글

• 💬 채팅 기능을 위해 웹소켓 도입하기
• 🧇 기술적인 이슈 및 개발 과정을 겪으며 적은 TEAM NOTE