1. SteamPlus 🎮
ㄱ. 소개 👋
- SteamPlus는 Steam게임을 하는 유저들을 위한 실시간 소통 플랫폼 입니다 :)
- SteamPlus를 만들게된 이유는 다른게임(롤, 블리자드 등)들과는 다르게 유명하지 않은게임을 즐기는 유저들이 있고 그러한 유저들이 소통할수 있는 플랫폼이 없기에 서로 소통을하고 실시간으로 화상 및 음성채팅을 하면서 서로 정보를 공유하고 함께 게임을 즐길수 있게하기 위해 만들게 되었습니다 :)
ㄴ.아키텍처
ㄷ. 기술적 의사결정
- Recoil : 리코일은 매우 간단한 코드로 상태를 관리할 수 있습니다. 리덕스와 비교해 상태를 업데이트하기 위해 액션 타입, 액션 생성자, 리듀서를 작성할 필요가 없으며, 상태 업데이트 로직을 작성할 때도 상태 객체 자체를 직접 수정할 수 있었습니다.👍
- socket.io : Socket.io는 다양한 이벤트를 지원하여 클라이언트에서 서버로 데이터를 전송하고 서버에서 클라이언트로 데이터를 전송할 수 있습니다. 이러한 특징으로 인해, Socket.io는 실시간 채팅기능을 구현하는 데 매우 유용합니다.
- WebRTC : WebRTC는 브라우저에서 P2P(peer-to-peer) 통신을 가능하게 하는 기술입니다. 이 기술은 별도 플러그인 없 브라우저 내장 기능으로 제공되며, 브라우저 간에 영상 및 음성 데이터를 실시간으로 전송할 수 있습니다.
- json-server, glitch : db.json 파일을 사용하면 데이터베이스 서버를 구축하지 않아도 되고 Glitch에서는 개발자가 손쉽게 프로젝트를 공유하고, 팀원과 함께 작업할 수 있기 때문에 개발 프로세스가 편리해집니다.
2. 내가 맡은 기능 🔥
ㄱ. 메인페이지
ㄱ-1. 세션스토리지
- 로그인중인지 게임중인지를 세션스토리지를 통해서 확인을 해서 메인페이지에 출력되는 게임의 정보를 조정합니다.
ㄱ-2. Steam Game API
- Steam API를 이용하여 게임의 정보(게임동영상, 게임이미지, 게임타이틀 등)를 메인페이지에 출력
ㄴ. 로그인 및 프로필
ㄴ-1. Steam 프로필 API
- SteamId와 APIKEY를 저장해두고 parms로 가져온뒤
ㄴ-2. 세션스토리지
- 로그인한 정보를 1차로 SessionStorage에 저장해줌(SessionStorage를 사용한이유는 웹페이지 닫기시 로그아웃 시키기위함)
ㄴ-3. db에 저장
- 그후 유저의정보를 db에 저장해줍니다.
ㄴ-3. 로그인여부
- 로그인 여부를 SessionStorage에 정보가 있는지 없는지를 확인하여 프로필의 정보를 다르게 보여줍니다.
ㄴ-4. Steam 최근게임 API
- 그리고 프로필에서 보여줄 최근활동게임 관련 SteamAPI를 useQuery를 이용하여 저장해주고
- 삼항연산자를 통해서 최근활동 게임여부를 판단하여 다른 정보를 보여줍니다.
- 로그인을 했고, 최근활동한 게임이 있을때의 화면입니다.
ㄴ-5. 프로필 정보
- Steam API를 이용하여 스팀아이디와 연동하여 별도의 회원가입 없이 서비스 로그인기능 구현
- Steam API를 이용하여 프로필 정보(프로필닉네임, 프로필이미지, 최근활동게임)를 출력
- 사용자의 상태(온라인 ,오프라인)조절 및 로그아웃 기능 구현
ㄷ. 커뮤니티
ㄷ-1. 커뮤니티 목록조회
- 커뮤니티의 등록된 글을 db에서 가져와서 페이지네이션에 보내서 최신등록된 글부터 번호가 0번이 받게끔합니다.
ㄷ-2. 카테고리별 목록조회
- 커뮤니티의 카테고리별 필터를 걸어서 카테고리 선택시 다른 게시글을 보여주게합니다.
ㄷ-3. 게시글 작성
- 로그인 여부를 확인후 로그인을 했으면 글작성 페이지로 이동시켜줌
- 타이틀과 컨텐츠 카테고리의 조건을 통과하면 useMUtation으로 작성된 게시글을 db에 보내줌
ㄷ-4 게시글 수정
- db에 저장된 게시글을 전부 가져온뒤 parm의 아이디와 맞는 게시글의 아이디가 같은것을 find()를 사용해서 찾은뒤 state에 제목과 내용을 넣어줍니다.
- 그리고 수정조건들을 거친후 다시 db에 수정된 내용을 useMutation을 사용해보내줍니다.
ㄷ-5 게시글 삭제
- 게시글 수정과 마찬가지로 db에 저장된 게시글을 전부가져와서 find로 찾아낸뒤 db에서 삭제를 합니다.
ㄷ-6 게시글 검색
- 인풋값안에 검색하고싶은 게시글의 제목을 입력하면 입력된 값을 새로운 state에 넣어주고 필터로 입력된 값으로 출력해줍니다.
ㄷ-7 페이지네이션
- toggle안에 저장된 게시글들을 Slice와 map을 이용해서 Pagination을 만들었습니다.
ㄷ-8 기타기능
- 해당게시글에 등록된 댓글갯수
- 게시글 등록한 시간
- 게시글 등록한 시간에서 얼마나 지났는지 체크
- 게시글 등록후 30분 까지 게시글 옆에 N이라는 뱃지 달아주기
3. 어려웠던 경험과 해결방법 🛠
ㄱ. 로컬스토리지, 쿠키 그리고 세션스토리지
- 처음에는 로컬스토리지를 이용하거나 디비에 있는정보만으로 로그인을 유지하려고 했지만, 스팀의 프로필 정보를 받아와서 로그인을 유지하고, 새로고침시에도 유지가 되지만 웹페이지를 끄면 로그인을 유지하지 않아야하는데
- 로컬스토리지의 경우 웹페이지를 닫아도 로그인을 유지한다.
-쿠키는 어차피 스팀에서 프로필 API를 받아와서 로그인을 하기때문에 굳이 로그인 정보를 따로 저장할 필요가 없어서 패스하고, 찾아보니 로컬과 비슷한 세션스토리지라는게 있길래 알아보니 내가찾던 딱 그녀석 이길래 바로 적용해보니 이용도쉽고 아주 만족스럽게 해결했다!!ㄴ. 온라인 오프라인상태 변경
- 세션스토리지와 연결된 내용!! 세션스토리지를 사용한 이유가 웹페이지를 닫을때 세션에 정보가 없어지는걸 원하고 사용했다고 바로위에서 말했지만 그 이유가 바로 웹페이지를 닫을때 디비에 유저정보를 전달하지않게되면 - 유저의 상태를 온라인상태에서 오프라인상태로 변경하게끔 하기위해서였습니다. (물론 웹페이지를 닫지않아도 유저의 상태를 조절할수 있습니다) 이런부분을 고려하기까지 친구기능을 맡은 정근님과 얘기를 많이했다(친구의 상태를 친구탭에서 확인이 가능하게끔 하기위해).
- 그결과 해결책으로 나온게 새로고침할때마다 db에 유저정보를 수정해주는것과 useEffect와 polling을 사용해서 30초마다 유저정보를 불러와서 수정해주는 방법으로 진행해서 해결하였다!
ㄴ. 커뮤니티 게시글 등록후 상세페이지로 이동
- 커뮤니티의 게시글을 등록한후 useNavigate를 이용하여 방금작성한 포스트의 상세페이지로 이동하게끔 하려고 했는데 작성되고 db에 들어갔다가 다시불러오는 과정보다 useNavigate가 실행되는게 더 빨라서 useNavigate로 잘 이동은하지만 작성된 게시글이 불러오지 않는 문제가 생겼다
- 해결방법으로는
ㄷ. 커뮤니티 카테고리 & 페이지네이션
- 커뮤니티 게시글을 등록할때 카테고리를 선택하고, 커뮤니티 메인페이지에서 카테고리를 선택하면 해당 카테고리의 게시글만 불러오는데 전체카테고리의 게시글의 수가 3이라고 할때 페이지를 3까지 이동후 자유카테고리를 누르면 자유카테고리는 페이지가 1이 끝인데도 3에서 머물고 게시글도 보이지가 않는 문제가 있었음
- 해결방법은 카테고리를 선택할때마다 페이지의 state의 setState(1)로 지정해줘서 문제를 해결함
ㄹ. 메인페이지 추천게임 렌더링 속도 해결
- 메인페이지의 추천게임을 90개중 10개를 렌더링 하는게 너무느려서 문제를 찾다가 하나씩 console.log를 찍어보는 중에 게임을 10가지를 하나하나씩 다 가져온뒤 렌더링 하는걸 발견함
- 해결방법은 하나씩 불러오는 렌더링 방법을 Promise.all을 이용하여 10개를 한번에 렌더링 하는 코드로 변경하여서 문제를 해결해줌!
4. 느낀점 😃
- 내배캠 마지막 프로젝트였던 SteamPlus는 5주라는 기간동안 진행을 했지만
실제로 초반에 원래 계획이었던 GPT를 이용한 ChatGame을 한번엎고 프로젝트 회의를 한 10일정도를 빼면 3주정도에 기간동안 하루 12시간 이상으로 집중해서 끝마쳤던 프로젝트라서 가장 기억에 남을 프로젝트 일거같다.- 다행히 팀원들의 공통취미가 게임이라 그런지 프로젝트 주제를 정하고나니 회의가 아주 순조롭게 진행이 되었다. 다들 프로젝트를 진행하면서 재밌어하면서 프로젝트를 끝마쳐서 정말 다행이다라는 생각이 든다!!
- 이번 프로젝트를 하면서 리엑트쿼리와 친해지고 db와 통신을 하고 API를 다루는 법등 정말 많은것을 배웠다고 생각이 든다!! 아주 아주 만족스러운 나의 마지막 내배캠 프로젝트 :)
- 가장 실력이 많이늘었고 협업도 가장 만족했고 이번프로젝트에서 가장 중요한 핵심기능은 맡아서 하지 못했지만 충분히 1인분의 역할을 했다고 생각되는 프로젝트였다!
개발작