<aside> 👉 우리 모두의 프로젝트

프로젝트 모집글을 작성하고 공유하며, 원하는 프로젝트에 참여할 수 있는 서비스 입니다.

</aside>

👩🏻‍💻 기술 스택

react.js typescript recoil sass quill babel express.js multer mysql

🚀 기능 소개

• 메인 기능

  • 멤버 모집
    • 프로젝트 멤버를 모집할 수 있는 게시글을 작성할 수 있음
    • 각 게시글에는 모집 역할군(프론트엔드, 백엔드, 디자인 등)과 필수 기술 스택을 명시할 수 있음
    • 프로젝트 개요를 통해 프로젝트를 소개할 수 있고, 질문 사항을 댓글로 남길 수 있음
    • 북마크 기능을 통해, 관심이 가는 프로젝트들을 저장할 수 있음
    • 사이트 이용자를 프로젝트 참여자로 추가할 수 있음
  • 프로젝트 공유
    • 완성된 프로젝트를 커뮤니티에 공개할 수 있음
    • 깃허브 링크를 추가하여 바로 이동할 수 있음
    • 북마크 기능을 통해, 흥미로운 프로젝트들을 저장할 수 있음
    • 공유하기 기능을 통해, 카카오톡, 페이스북, 트위터, 링크 공유를 진행할 수 있음

• 서브 기능

  

🎯 트러블 슈팅

• 문제: useCallback, useMemo 함수 자바스크립트의 기존 함수 선언으로 선언한 함수들은 상태 값을 의도대로 반영하지 못함. 데이터 호출 시 API 요청의 횟수가 많아짐
• 해결 과정
  • 각 함수의 훅을 통해 상태 값을 의존시켜 함수 내용이나 결과를 업데이트 할 수 있음
  • 훅을 이용하여 메모이제이션에 맞게 구현하면 불필요한 요청을 줄일 수 있음
  • 의존 관계를 확실히 하여 의도치 않은 수행이 일어나지 않게 유의해야 함.

• 문제: 카카오 OAuth Redirect URL 클라이언트와 서버 각각의 환경변수에 카카오 로그인 페이지 redirection에 사용할 클라이언트 로그인 페이지 URL 경로를 저장. 하지만 배포 환경에서는 Redirect URI mismatch 에러가 발생
• 해결 과정
  • 서버가 카카오로 Redirect URI를 보내는 경우에만 해당 Redirect URI가 인코딩 된 것을 확인 서버 측에서 POST 요청 시에 URLSerachParams 객체에 URI 값을 추가하여 전송하는데, 이 때 자동으로 인코딩이 발생
  • 로컬 환경에서는 이 과정이 생략되어 정상 작동했던 것
  • 로컬 및 배포 환경 모두 클라이언트 환경변수에 인코딩된 Redirect URI를 할당하여 문제 해결