[React/GraphQL/Prisma] 로그인 만들기 #2.Backend 회원가입

단순하게 로그인 화면만 하려고 했지만 로그인을 하려면 회원가입이 있어야 하니까

로그인과 1+1이라고 할 수 있는 회원가입을 먼저 해본다

 

   

 

역시 동일 하게 그린포털사이트를 따라한다 

아이디, 비밀번호,이름만 가지고 회원가입을 해본다 

그린포탈사이트에는 위에 네가지 말고 핸드폰번호,성별,이메일(선택)이 더 있다 하지만 NEIGHBER는 안한다

Backend 테이블

 

 

기존 User에는 id 와 name뿐 이지만 email과 password가 필요하니 넣어준다

datamodel 의 형식은 prism docs에 나와있다 간단하게 설명하면 String은 문자열이고 !(느낌표)는 "필수" 라는 뜻이다

 

 

prisma 의 datamodel 말고도 graphql 모델도 만들어야 한다 그래야 서버에서 알아들으니까

api 폴더 안에 models.graphql 파일을 만든다

 

 

prisma와 똑같지만 @ 뒤에나오는 것은 빼준다

 

 

package.json으로 가서 스크립트에 명령어를 추가해준다

prisma가 볼 수 있게 deploy를 해주고
prisma의 기능을 사용할 수 있게 generate를 해줘야 한다

 

 

deploy, generate 명령어를 동시에 사용하는 prisma 명령어를 만든다

yarn prisma 하나의 명령어로 두가지 명령어를 한번에 할 수 있다

 

 

터미널에서 package.json 에서 설정한 yarn prisma를 친다

오류가 난다면 datamodel에서 틀린게 있다는 뜻이다

오류말고 버젼이 안맞다는 경고가 나오는데 무시해도 된다

 

 

prisma 사이트에 가서 확인해보면 email이랑 password가 생긴것을 확인할 수 있다

 

typeDefs resolvers

 

 

typeDefs와 resolvers 를 만들기 전에 하나로 모아서 서버에 전달해 주는 기능이 선행 되어야 한다

src 폴더에 schema.js를 만들고 거기에 파일을 하나로 모으는 작업을 하고 server.js로 보내줄 것이다

 

 

allTypes 에는 .graphql 파일을 모으고

allResolvers 에는 .js 파일을 모은다

모은 파일을 schema에 makeExecutableSchema에 뿌려준다

 

 

그렇게 저장한 schema를 서버에서 넣어준다

 

 

typeDefs와 resolvers를 생성하기 전에 nodemon한테 해줄 것이 있다

폴더에 nodemon.json 파일을 생성하고 오른쪽 사진처럼 해준다

nodemon ext 검색해본 결과 nodemon한테 파일형식 graphql이랑 js만 지켜보라 하는것이다

 

 

혹은 package.json에 이런형식으로 해도 무방하다

 

 

src안에 api를 만들고 User를 만들고 user를 활용한 기능을 만들면 된다 (회원생성,로그인,유저보기 ...)

여기서는 User폴더만 만들지만 다른 테이블이 있으면 똑같이 활용하면 된다

 

 

Mutation은 회원가입, 로그인, 팔로우, 삭제하기 등등 기능을 만드는 것이고

Query는 유저보기, 글보기,친구목록, 카테고리목록 등등 데이터를 불러올때 쓰인다

.graphql 파일은 너무 쉽게 괄호 안에 받고 싶은 인자를 나열하고 : 뒤에는 return 하고 싶은 값을 넣으면된다

create는 email, password, name을 받고 return으로는 참,거짓을 받으려고 한다 정상적으로 만들어진다면 true가 나올 것이다

 

 

GraphQL의 resolver의 인자 는 총 4개를 받는다 (parent,args,context,info) 가 있는데 

create.js는 args만 필요하다

일단 이 상태로만 해서 yarn dev로 실행해본다

 

 

당연히 오류가 나왔다 prisma-client-lib 이 없다는 오류다

 

 

바로 yarn add prisma-client-lib으로 추가해주면 해결

 

 

또 오류가 나온다 Query가 없다는 거 같다

 

 

회원가입과 로그인은 Query가 필요없다 그래서 지금은 임의로 hello를 만들어 놓았다

이제 정상작동이 되고 포트4000에서 graphql서버가 작동하고 있다

 

 

localhost:4000에 들어가서 만든 Mutation이 있는지 확인한다

 

 

아직 미완성이기 때문에 다시 create.js 로 돌아와서 generated폴더에 있는 prisma를 직접 불러온다

generated폴더는 prisma generate로 생성되는 폴더이다

 

 

await prisma 하고 . 을 찍으면 vsc에서는 prisma로 할 수 있는 기능이 쫘르륵 나온다

 

 

당연히 createUser를 사용할 것이다 

이렇게 바로 인자로 받은것을 넣어 만들어 주면 좋겠지만 중복방지, 비밀번호보안, 리턴값으로 참.거짓이 나와야한다

중복방지를 알기 위해서는 prisma 에서 제공해주는 $exists 이용한다

 

 

user 에서 name 이나 email 이 겹치면 const exists의 값은 true 가 된다

 

 

if문으로 exists가 true 면 중복이 있다는 뜻이고 Error를 내보낸다

 

 

 

비밀번호를 보안하기 위해 bcryptjs패키지를 추가한다

 

 

create.js에 bcryptjs를 추가한다

 

 

비밀번호를 hash값으로 만들기 위해서는 bcrypt.hash 함수를 사용한다 두번째 인자 5는 횟수같다

자세한내용은 bcryptjs github를 확인하면 된다

이제 hash값으로 된 hashedPassword로 저장하면 관리자도 볼 수 없는 hash 비밀번호로 저장된다

 

 

마지막으로 정상적으로 작동했을때 true를 리턴하게 한다

 

 

이렇게 회원가입 하는 코드가 끝났다

 

 

4000서버로 가서 mutation을 직접해본다 임의값으로 막 입력해준다

create가 true를 리턴했다

 

 

다시 prisma에 콘솔로 들어와서 확인을 한다

정상적으로 계정이 생겼고 비밀번호가 관리자도 볼 수 없는 hash 값이다 good

 

다음은 로그인하는 기능을 만들어 보려고 한다 로그인에는 회원가입에서 bcryptjs의 hash를 이용해 해쉬값으로 저장한 비밀번호를 다시

bcryptjs 의 compare 로 비교시 동일하면 토큰이 나오는 방식으로 한다