[React/GraphQL/Prisma] 로그인 만들기 #1.setting

Prisma2가 나와 Prisma의 데모서버는 사용할 수 없게 되었습니다

 

 

간단한 로그인화면

그냥 만들면 재미없으니까 그린포털사이트를 따라해본다

 

 

 

 

일단은 이런느낌으로 가는데 더 간단하게 만들자

이름은 NEIGHBER

 

기본 개발환경

yarn 아니면 npm 둘중 하나

git에 저장하려면 git 이랑 git 저장소(github,Bitbuckit...) 아이디

vsc(Visual Studio Code) - 코드편집

 

Frontend Setting

 

 

 

 

원하는 폴더로 이동후 npx create-react-app 으로 다운받는다 뒤에 이름은 오직 로그인만 구현해 볼것이기 때문에

대충 직독직해로 only-login

npx를 안쓰려면 npm이나 yarn 으로 create-react-app을 전역으로 설치해준다

npx를 쓰는 이유는 npx로 다운을 받으면 따로 최신버젼을 신경쓰지 않고 다운 당시 최신으로 다운이 되기 때문에 npx를 사용

 

 

 

 

vsc를 열어서 위에서 다운받은 폴더를 연다

public 이랑 src 파일을 확인해본다

 

 

 

 

src 안에 기본적으로 세팅되어있는 부분을 다 삭제하고 App.js 와 index.js만 남겼다

 

 

 

 

터미널창에서 yarn start쳐서 잘 작동하는지 확인

 

 

 

 

yarn add 나 npm install 으로 

apollo-boost

graphql 

react-apollo-hooks

prop-types 

react-router-dom 

styled-components 

위에 3개는 백엔드와 통신하기위한 패키지

아래 3개는 페이지를 꾸미기 위한 패키지

 

Backend Setting

prisma는 orm으로 쉽게 말해 데이터베이스와 내가만든 앱이 통신하는 과정에 중간다리 역할이다 sql문을 사용하지 않고 쓰고있는 언어로 쉽게 통신할 수 있다

맨 처음으로는 prisma에 회원가입을 한다

 

 

 

 

회원가입 후 로그인을 하면 위에같은 화면을 볼 수 있다

ADD A SERVICE 를 눌러 진행한다

 

 

 

 

prisma를 전역으로 설치한다

yarn 은 yarn global add prisma 로 하면 된다

전역으로 설치 후 아래에 prisma login -k ~~~ 이 부분을 복사하여 enter를 누르면 아래와 같이 뜬다

 

 

 

 

정상적으로 진행했다면 위에 사진과 같이 나온다

CREATE A NEW SERVICE를 눌러 진행한다

 

 

 

 

프로젝트를 생성하고 싶은 폴더에 가서 prisma init 프로젝트이름 으로 생성을 해준다

 

 

 

 

prisma init login-back 으로 만들었다

prisma init 을 하게되면 처음으로 데이터베이스 서버를 정하게 되는데 

 

 

 

 

가지고 있는 서버가 없으므로 prisma에서 무료로 제공하는 데모서버를 사용한다

데모서버를 정하고 enter

 

 

 

 

데모 서버는 다 MySQL이다 어느 서버를 하든 사실 아무런 상관이없다

말그대로 그냥 데모 서버

 

 

 

 

다 enter를 누르다가 마지막에 사용언어를 정하는 곳에서 TypeScript, JavaScript, flow, go 중에서 고를 수 있다

 

 

 

 

만든 폴더로 이동해서 보면 세가지로 되어있다

.prisma 파일은 데이터베이스 테이블(?) 

.yml 파일은 prisma 의 환경설정

 

 

 

 

prisma deploy로 실행하게 되면

 

 

 

 

VIEW THE SERVICE 를 눌러 진행하면 오른쪽 화면이 나온다 login-back을 눌러 들어가보면

 

 

 

 

만든테이블을 prisma에서 볼 수 있다

 

 

 

 

이제 다시 폴더로 돌아와서 yarn init 이나 npm init을 한다 그냥 싹 다 enter 

git에 저장할것이 아니기 때문에 url 이나 author, license 없어도 무방하다

 

 

 

 

폴더를 보면 package.json이 생긴것을 확인 할 수 있다

 

 

 

 

 

이어서 개발환경에서 필요한 nodemon을 설치해준다

개발환경에만 필요하니 yarn -D add nodemon으로 설치한다

nodemon은 저장할때마다 서버를 다시시작하는 번거로운 작업을 알아서 해준다

 

 

 

 

계속 패키지를 추가해야하지만 일단은 graphql 관련(아래 3개)과 최신자바스크립트를 해석(babel)하는 패키지를 설치한다

 

 

 

 

설치 후 graphql서버를 작동시키기 위해 src와 src안에 server.js를 만든다

 

 

 

 

server.js 는 이렇게 구성한다

설치했던 graphql-yoga 에서 GraphQLServer를 가져와서 만들어 주고 server.start 만 하는 기본서버다

이 server.js를 실행하기 위해서 package.json으로 간다

 

 

 

 

package.js를 보면 main 이 index.js로 되어있는 부분을 없애고 scripts를 추가한다

yarn dev로 서버를 실행할 수 있는 것이다

 

 

 

 

yarn dev로 서버를 시작하면 이러한 오류가 나온다

import 구문을 이해하지 못하는 오류이다

 

 

 

 

폴더에다 .babelrc 를 만들어 오른쪽의 코드를 넣어준다

 

 

 

 

그래도 오류는 남아있다 스키마가 없다는 오류인데 서버는 정상작동 하는거 같다

typeDefs resolvers 를 설정해줘야 한다  graphql-yoga github 페이지를 보면 설정하는 법이 나와있다

하지만 지금은 서버가 잘 동작 하는지를 알아보기 위해

graphql-yoga에서 빠른 시작을 위한 예시코드를 가져온다

 

 

 

 

고대로 복사해서 붙여넣기를 해준다

위에서 했던코드와 별 차이는 없다 typeDefs와 resolvers를 넣어준것이다

typeDefs에는 hello라는 쿼리 resolvers에는 hello 쿼리가 들어왔을때 동작 방식이다

 

 

 

 

yarn dev로 서버가 정상작동하는지 확인하고

http://localhost:4000 으로 들어가 확인해본다

콘솔창에있는 것을 ctrl을 누른 채로 클릭해도 되고 주소창에 localhost:4000을 쳐도 된다

 

 

 

 

localhost:4000 에 들어가서 위에 예시코드에서 넣어준 hello쿼리를 실행하면 정상작동을 확인할 수 있다

 

이제 프론트와 백  초기설정을 했다

다음에은 백엔드예시코드를 다시 지우고 typeDefs 와 resolvers 파일들을 하나로 다 모아서 한번에 server.js 에 넣어주는 작업과 간단한 테이블 수정 login 기능을 만들어 본다