Portfolio

🗣️

발표자료

같이 농구할 사람이 없다고? 나랑 슬램하러 가자 ⛹🏻‍♀️

프로젝트 소개

Slam은 길거리 농구인들이 쉽고 빠르게 게임할 수 있도록 주변 농구장의 인원 현황을 제공하는 커뮤니티 웹앱 서비스입니다.

기획 배경

길거리 농구를 하러 나가고 싶어도 현재 가려는 농구장에 사람이 몇 명인지 알 수 없다는 기존 문제점을 해결하기 위해 ‘슬램’ 프로젝트를 시작했습니다.

👉 slams.app👈

💁‍ 요구사항 명세 보러가기

기능 요약

사용자

지도 뷰에서 가려는 농구장을 찾아 원하는 시간대에 해당 농구장을 방문할 거라고 약속을 하고, 약속한 시간대에 본인 외에 몇 명이 더 예약했는지 이미지로 구분하여 현황을 알 수 있습니다.

사용자는 지도에 자주 가는 농구장 정보가 없다면 직접 새 농구장 정보를 추가할 수 있습니다.

자주 가는 농구장을 즐겨찾기에 등록할 수 있습니다.

슬램에서 만난 다른 유저들의 프로필을 확인할 수 있고, 팔로우해 친목을 다질 수 있습니다.

내 프로필에서 간단한 정보(숙련도, 선호 포지션 등)를 기입하여 자신을 나타낼 수 있습니다.

관리자

관리자는 사용자가 추가 제안한 새 농구장 목록 중 처리 대기 중인 항목, 처리 완료된 항목별로 편하고 빠르게 조회하고, 승인과 거절을 할 수 있습니다.

타겟 유저

동네 기반으로 길거리 농구를 즐기고 싶은 사람

혼자서도 쉽고 빠르게 농구를 하고 싶은 사람

내가 맡은 기능

1. 카카오 로그인 OAuth2.0 / 스플래시 / 로그아웃

유저유입을 위해 비교적 가입절차가 간단한 카카오 로그인 방식을 사용했습니다. jwt를 발급하여 저희 서비스 안에서의 권한을 부여하였습니다. 순서를 간략하게 설명해보자면 사용자가 로그인 버튼을 누르면 카카오 서버에서 백엔드로 인가코드, 액세스 코드, 사용자정보를 차례대로 받아오고 슬램에 가입됩니다. 그 후 서버에서 넘겨주는 슬램의 토큰을 받아 가입한 유저의 정보를 조회해 전역상태에 저장합니다.

카카오 토큰의 유출을 줄이기 위한 로그인 방식 변경

처음에는 클라이언트에서 인가코드, 카카오 토큰 사용자의 정보까지 받아와서 백엔드로 넘겨주겠다고 생각했지만 결론적으로 카카오 토큰의 유출가능성을 낮추기 위해서 서버측에서 인가코드 카카오토큰을 받아오는 방식을 채택하여 진행했습니다.

2. 즐겨찾기 추가,취소 목록 / 지도에 즐겨찾기 및 예약정보 표시

농구장의 게임 가능 상태를 지도에 직관적으로 표현

농구장의 게임 가능한 상태를 모션과 불 붙은 것으로 해당 시간대에 사람 수 정보를 직관적으로 구분해 보여줍니다.

즐겨찾기와 내 예약을 농구장과 엮어서 보여줌

앱 시작시 토큰으로 내가 한 예약, 즐겨찾기 정보를 서버에서 미리 받아오기 때문에 각 농구장데이터와 엮어서 지도에 별과 예약표시(녹색)으로 표시해 어디에 내 예약과 즐겨찾는 농구장이 있는지 직관적으로 알 수 있도록 함

즐겨찾는 농구장 제거 실수 방지

유저가 실수로 즐겨찾기를 제거했을 때 목록에서 바로 제거되지 않고 페이지를 나갔을 때에 없어지도록 처리

3. 웹소켓 활용 팔로우, 실시간 알림

Sockjs + STOMP(스트리밍 텍스트 지향 메시지 프로토콜)

SockJS는 WebSocket과 유사한 객체를 제공하는 브라우저 JavaScript 라이브러리입니다. 내부적으로 SockJS는 기본 WebSocket을 먼저 사용하려고 시도합니다. 실패할 경우 다양한 브라우저별 전송 프로토콜을 사용할 수 있으며 WebSocket과 같은 추상화를 통해 제공할 수 있습니다.

Websocket body를 객체로 변환하는 함수

개발을 용이하도록 text데이터를 Axios처럼 JSON.stringify와 JSON.parse를 해주는 함수를 제작했습니다.

알림을 HTTP와 WS을 모두 활용해 구현

앱에 실행시 토큰이 있는 경우 서버와 웹소켓으로 바로 연결 됩니다. 그렇다면 실시간으로 알림을 수신할 수 있는 상태가 됩니다.

사용자의 알림 데이터를 첫 앱 시작시에 미리 10개를 받아 놓습니다. (HTTP GET)

알림페이지에 들어가 무한 스크롤시 알림 5개씩 더 받아 옵니다. (HTTP GET)

실시간으로 알림을 1개를 수신하면 알림 전역상태에 (WS subscribe)


{
	notifications: [
		1. HTTP GET ...Initial UserDate’s Notification[], // 앱 시작시 알림 10개
		2. HTTP GET ...Infinite Scroll Notification[], // 무한 스크롤 5개 알림
		3. WEBSOCKET subscribe 실시간 Notification // 상대가 나를 팔로우시 1개 알림
	]
}

슬램 - 같이 농구할 사람이 없다고?