웹소켓을 이용한 타워디펜스 - <2>

역할과 목표

• 재설계한 와이어 프레임 ( 전체화면 / 게임화면 )

멀티 플레이어 및 유저 생성 과 관련한 기능을 제작하는 역할 맡게 되었다.

1. 회원가입 / 로그인

   • MySQL과 prisma를 이용해 회원가입/로그인 기능 구현하기

   • 클라이언트 회원가입 / 로그인 화면 제작 및 합치기

2. 멀티 플레이어 접속(연대책임) + 솔로 플레이 기능

   • 기본 멀티 플레이가 되도록 룸을 나눠 참여가능하도록 설계

   • 멀티 플레이 인원 중 탈주인원이 발생 시 게임 오버

3. 랭킹 ( 최고 점수 / (솔로,멀티))

   • DB 를 통해 기록된 랭킹 중 상위 10명 (솔로/멀티) 를 각각 출력해줄 수 있도록 설계

MySQL/Prisma 세팅

• MySQL/Prisma를 사용하기 위해선 연결할 DB가 필요하므로 이를 생성/연결 해주는 과정이다.

RDS 세팅

1. AWS의 RDS로 들어가 DB(데이터 베이스) 생성을 클릭
   ( 지역이 어딘지도 잘 확인하기! )

   

2. 사용할 RDS(Relational Database Service) 종류는 MySQL이므로 이를 선택!

   

3. DB 인스턴스 식별자를 프로젝트에 맞게 설정해주고, 사용자의 이름과 암호를 설정해준다!
   ( 이름/암호는 잘 기억해두세요! )

   

4. 연결 설정하기

   

   • 컴퓨팅 리소스: “EC2 컴퓨팅 리소스에 연결 안 함” 선택

   • 퍼블릭 액세스 기능: “예” 선택
     -> 이 설정이 되어있어야 우리 컴퓨터에서 **AWS RDS의 MySQL과 연결이 가능함!

   • VPC 보안 그룹**: “새로 생성” 선택
     ( 보안 그룹 설정이 필요하므로 )

   • 새 VPC 보안 그룹 이름도 프로젝트와 관련되도록!

5. 추가 설정 (초기 DB 이름 )

   • 초기 데이터베이스 생성 및 이름을 맞춰주기 위해 설정해준다

   

6. 보안 그룹 설정

   • db에 있는 보안 그룹에 들어가 인바운드 규칙으로 포트를 열어준다!

   

   

   

   • 위의 인바운드 규칙은 db에 쉽게 접근하기 위함으로 실제 서비스 환경에서는 보안 위험이 있을 수 있음!

프로젝트 세팅

• 우선 VScode 에서도 DB를 직접 확인할 수 있도록 MySQL 확장 프로그램을 이용한다!

  MySQL확장 프로그램

• 탐색기에서 나온 MYSQL의 + 버튼을 누르고 엔드 포인트를 입력해준다!

  • 엔드 포인트는 RDS에서 확인 가능!

    

    

  • 이후 위에서 설정한 이름, 비밀번호를 차례대로 입력해주고 enter를 누르면 된다

• MySQL/Prisma VScode 세팅

• 참고로 DATABASE_URL에 특수문자가 있는 경우 인코딩 방식으로 인해 아래의 표를 사용해 치환해주어야 한다
  ( @ 제외 )

특수 문자	Percent Encoding
!	%21
#	%23
$	%24
%	%25
&	%26
’	%27
(	%28
)	%29
*	%2A
+	%2B
,	%2C
/	%2F
:	%3A
;	%3B
=	%3D
?	%3F
@	%40
[	%5B
]	%5D
newline	%0A또는 %0D또는%0D%0A
space	%20
”	%22
%	%25
-	%2D
.	%2E
<	%3C
\>	%3E
\	%5C
\^	%5E
_	%5F
`	%60
{	%7B
OR(작대기)	%7C
}	%7D
~	%7E

Schema 설정

현재 SQL을 사용하는 테이블은 총 3개 이다

1. 유저 데이터

   Field	Type	Description
   id	STRING	유저 아이디
   password	STRING(HASH)	아이디 접속 시 비밀번호
   nickname	STRING	아이디 접속 시 사용할 닉네임
   highScoreS	INT	유저의 최고 점수 ( 솔로 )
   highScoreM	INT	유저의 최고 점수 ( 멀티 )

2. 랭킹

   Field	Type	Description
   id	INT	점수 기록의 고유 키
   userId1	STRING	유저 아이디(외래 키)
   userId2	STRING	추가 유저 아이디(외래 키)
   score	INT	최종 점수

3. 금칙어

   Field	Type	Description
   word	STRING	금칙어 단어

• 위의 테이블을 기준으로 형식(Schema)을 지정해준다!

model Users {
  id            String  @id @map("id")
  nickname      String  @unique @map("nickname")
  password      String  @map("password")
  highScoreS    Int     @map("high_score_single")
  highScoreM    Int     @map("high_score_multi")

// 아래에서 userId가 2번 연결되어 각 이름을 정해주어야 되었다
  Ranks1        Ranks[] @relation("User1Relation")
  Ranks2        Ranks[] @relation("User2Relation")

  @@map("Users")
}

model Ranks {
  id          Int     @id @default(autoincrement()) @map("id")
  userId1     String  @map("user_id_1")
  userId2     String  @map("user_id_2")
  score       Int     @map("score")

  user1       Users    @relation("User1Relation", fields: [userId1], references: [id], onDelete: Cascade)
  user2       Users?    @relation("User2Relation", fields: [userId2], references: [id], onDelete: Cascade)

  @@map("Ranks")
}

model Forbidden {
  word        String  @id @map("word")
 
  @@map("Forbidden")
}

회원가입 / 로그인 API

• 기존에 사용하던 API들을 변형하여 서버측은 빠르게 마무리할 것 같다

• 아마 서버보다 클라이언트와 연결 + 연동 하는 부분이 조금 까다로울 것 같다

한줄 평 + 개선점

• 회의가 잘 꽤나 순조롭게 진행되며 파일 병합을 시킬 수 있어서 좋앗다

---