농구에 의한 , 농구를 위한 농구경기 서비스, 🏀 HOOPS 🏀입니다.
📍 2024.04.18 ~ 2024.05.30 📍
- 1주차: 프로젝트 기획, 와이어프레임 제작
- 2주차: front-end init setting, 공통 컴포넌트 UI 생성
- 3주차: UI 구현, 사용자 맟 일정 mock API 연동
- 4주차: 채팅 기능 / 소셜로그인 구현 및 기타 세부 UI 정리 및 수정
- 5주차: 백&프론트 연동 및 리팩토링 오류 버그 수정
- 6주차: 백&프론트 연동 및 리팩토링 오류 버그 수정
| 🛠️ FE 오신웅 🛠️ | 🛠️ FE 이솔 🛠️ |
|---|---|
 |
 |
| 🏀 회원가입 및 이메일 인증 🏀 | 🏀 카카오톡 로그인 🏀 |
|---|---|
 |
 |
| 🔅 회원가입 후 이메일 인증을 통해 더 안전하게 사용할 수 있어요 🔅 | 🔅 카카오톡 로그인을 하여 더욱 간단하게 로그인이 가능해요 🔅 |
| 🏀 경기 생성 🏀 | 🏀 경기 필터링 🏀 |
|---|---|
 |
 |
| 🔅 경기 일정을 생성하고 팀원을 모집할 수 있어요 🔅 | 🔅 지역, 성별, 실내외, 경기형식 등을 선택해서 경기를 볼 수 있어요 🔅 |
| 🏀 경기 초대 및 수락 🏀 | 🏀 경기 신청 및 수락 🏀 |
|---|---|
 |
 |
| 🔅 경기에 친구를 초대하고 수락할 수 있어요 🔅 | 🔅 참가하고 싶은 경기에 신청을 하고 수락할 수 있어요 🔅 |
| 🏀 매너 점수 평가 🏀 | 🏀 블랙리스트 🏀 |
|---|---|
 |
 |
| 🔅 경기에 참여했던 팀원의 매너점수를 평가할 수 있어요 🔅 | 🔅 비매너인 사용자를 신고할 수 있어요 🔅 |
| 🏀 친구 검색 및 친구신청 🏀 | 🏀 채팅 🏀 |
|---|---|
 |
 |
| 🔅 친구를 검색하고 친구신청을 할 수 있어요 🔅 | 🔅 경기에 참가하는 팀원들끼리 채팅할 수 있어요 🔅 |
#1
카카오 로그인 시도 후 redirect될 때 , 사용자 정보와 인가 토큰 등을 한번에 받아오려 했으나 해당 정보들이 화면에 뿌려지게 구현된 것이 아니라 정보만이 화면에 나오게 되는 오류가 발생.
이에 새로운 콜백 페이지를 만들고 , 정보를 한번에 받는 방식이 아니라 기본적으로 많이 사용하는 방식인 파라미터 형식으로 오는 code 값을 다시 백엔드에 전해 주고 이후 토큰을 받아 와서 화면이 리다이렉트 될 수 있도록 로직을 다시 재구성!
#2
리액트 프로젝트에서 SockJS를 사용할 때 글로벌 객체에 접근하려고 하면 아래와 같은 오류가 발생
처음에는 코드 문제인 줄 알고 여러 가지 방법을 시도해보았지만 실패했습니다. 콘솔에 어떠한 에러 메시지도 출력되지 않아 원인 파악 이 안됐다.
결국 여러 정보를 찾아보던 중 이 문제가 브라우저와 Node.js 환경 차이 때문이라는 것을 알게 됨!
SockJS는 Node.js 환경을 위해 만들어져 전역 객체로 global을 사용하지만, 브라우저에서는 window가 전역 객체이기 때문! 따라서 Vite 설정 파일에서 global을 window로 매핑!
