활동/롤 한글판 밴픽사이트9 [밴픽사이트] 싱글 모드, 멀티 모드 구분하기 모드 구분에 따른 코드 리팩토링 실시간 통신으로 밴픽 정보를 공유하는 기능을 추가하기 전에, 혼자 밴픽을 진행하는 모드와 둘 이상이 밴픽을 함께 하는 모드를 구별하기로 했다. 이를 위해서는, 모드 별로 공통적으로 사용하는 컴포넌트나 기능을 정하고, 각 모드별로 다른 기능은 따로 코드를 적도록 해야 한다. 따라서 코드를 좀 정리해보기로 했다. 먼저 모드와 상관없이 공통적으로 사용할 컴포넌트는 다음과 같다. 타이머, 팀명 선택할 수 있는 챔피언 리스트 각 팀이 밴픽으로 선택을 완료한 챔피언 이미지 선택 완료 버튼 각 모드별로 다른 점은 아래와 같다. 싱글 모드: 서버에 밴픽 정보를 보내지 않고, 상태관리를 통해서만 밴픽 정보를 관리한다. 멀티 모드: 서버에 밴픽 현황과 정보를 주고 받는다. 현재 코드는 zu.. 2023. 6. 26. [밴픽사이트] 실시간 밴픽을 위한 서버 개발 1 실시간 통신 구현 먼저, 2명 이상의 유저가 같은 게임을 두고 실시간으로 밴픽을 진행할 수 있도록, 서로 정보를 주고받는 것을 구현해야 했다. 지난번까지는 redis를 통해서 이를 구현하려 했으나, 방도를 찾지 못했다. Next.js로 실시간 채팅을 구현하는 클론 코딩 영상에서, pusher라는 플랫폼과 라이브러리를 활용해서 실시간 통신을 구현하는 것을 봤다. 나도 이를 적용해보고자 테스트를 진행했다. 먼저 pusher에 가입해야 한다. 본인은 구글 계정으로 간편하게 가입했다. 이후 채널을 하나 생성한다. 그리고 아래처럼 해당 채널의 App Key를 확인해준다. 이 키가 있어야 내 프론트엔드에서 접속/연결 등이 가능하다. 이제 Next.js로 돌아와서, 아래와 같이 .env에 작성해준다. 이러한 키는 노.. 2023. 6. 9. [밴픽사이트] redis 연결하기 ioredis로 redis와 연결하기 먼저 redis 서버와 연결이 잘 되는지 확인하기 위해 아래와 같은 사전 확인과정을 거쳤다. 아래와 같이 redis와 통신하기 위한 client를 생성하는 코드를 짜준다. nextjs 백엔드에서 redis 서버로 요청을 보내는 간단한 코드를 짜준다. 그리고 요청이 잘 갔는지 확인한다. 본인은 redislabs에서 제공하는 클라우드에 있는 무료 redis 서버를 사용했으므로, 서버에 입출력이 발생했는지 지표로 확인할 수 있었다. 이제 신나게 활용하는 일만 남았다! Pub/Sub 에서 막히다... 신나게 활용하고 싶은데, 여기서 막혀버렸다. 대략적으로 파악한 문제는 다음과 같다. client side에서 DB를 수정하는 코드를 사용할 수 없다. (redis도 마찬가지) .. 2023. 6. 5. [밴픽사이트] 게임페이지 레이아웃 레이아웃을 정하다. 며칠 CSS를 만지작거리다가 느낀 것은, Wrapper의 역할을 하는 div태그를 두는 것이 디자인하기에 수월하다는 것이다. 가로세로, 배치 순서와 같은 큼직한 틀을 잡아주는 div태그를 최상단에 두고, 그 밑에 기능이나 색과 같은 디테일한 것들을 정하는 태그들을 배치하는 것이 수월하다고 느꼈다. 아래 사진은 대강 배치가 완료되었다 느꼈을 즈음 게임페이지의 모습이다. 가장 큰 골치였던 화면을 벗어나는 자식 태그들을, 벗어나지 않도록 적절히 꿰맨 느낌이다. 하지만 아직 갈길이 멀다. 좌우 양쪽에 각 팀이 선택한 챔피언을 보여주는 빈 박스들의 크기를 적절히 조정해줘야 한다. 어느 정도 정리한 후에는 아래와 같이 그럴듯한 레이아웃이 완성되었다. 다음 할 일 이제 1인이 적당히 밴픽을 할 수.. 2023. 6. 4. 이전 1 2 3 다음
