Embedded

서버에서 이메일을 보내는 기능을 위해서 nnodemailer와 sendgrid를 사용하자.

https://nodemailer.com/about/

이메일을 보내는것은 아주 간단하다. 아래링크를 참조

sendgrid transport를 이용해 몇몇 옵션으로 transport를 만들고 그것을 nodemail의 sendmail()로 요청하면 끝.

sendgrid 홈페이지에서 회원가입하자.

https://sendgrid.com/

yarn add nodemailer

yarn add nodemailer-sendgrid-transport

명령을 통해 설치하자.

src/utils.js에 아래와같이 작성한다.

중요한 코드는 아래 두줄이다.

    const client = nodemailer.createTransport(sgTransport(options));

    return client.sendMail(email);

transport를 만들때는 options가 필요하다.(api_user는 sendgrid username , api_key는 sendgrid 비밀번호)

email변수에는 emil 주소 뿐만아니라 from, to, subject, html 등을 기입한다.

이후 server.js에서 sendSecretMail()펑션을 불러보자.

아주 잘된다!

이제 우리서버에서 createUser resolver를 만들어보자.

src/api/User 폴더안을 아래와 같이 구성하자.(기존꺼 다 삭제)

createAccount를 위해서 무엇이 필요할지 prisma를 확인해보자.

username,email,firstName,lastName bio가 필요한것을 확인하였다.

prisma에서 확인 한대로 src/createAccount/createAccount.graphql을 아래와 같이 코딩한다.

모두 String 타입이고 User타입을 리턴한다.

type Query는 실제 사용되지 않는 가짜쿼리이다. Mutation만 있으면 에러가 난다.

src/createAccount/createAccount.js파일을 아래와 같이 작성한다.

firstName, lastName, bio같은 경우는 !(필수기입)이 아니기때문에 비어있을수도있다.

null방지를 위해 기본값으로 빈 문자열을 선언한다.

서버 playground에서 Mutation을 실행해보자.

playground, prisma 관리페이지에서 정상적으로 생성된것을 확인할 수 있다!!

README.md 파일에 User Stories를 작성해보자.

이제 prisma를 실제 api에서 사용 해보자

만약 git repository를 public으로 설정했다면 prisma.yml파일은 커밋하면 안된다. 

prisma.yml에 prisma url이 있기 때문이다. .gitignore에 추가해주자. 

generate/prisma-schema 폴더에 

index.js , prisma-schema.js 파일이 있다.(우리가 이전에 prisma에 작성한 모델과 그에 따른 schema들)

이 파일들을 통해 prisma와 정보를 주고받게 된다.

서비스를 배포(deploy)할 때마다 prisma cloud에서 무언가를 생성하는데, 그것을 서버프로젝트에서 다운받아야한다.

prisma 서버와 정보를 주고받으려면 prisma client를 설치해야 한다.

먼저, 

package.js에 관련 명령어를 추가하자

scripts에 

"generate": "prisma generate",

"prisma": "yarn run deploy && yarn run generate"

이 후 터미널에 yarn prisma를 실행시키면 deploy가 실행되고 변경사항들이 업로드 될것이다. 그다음 client가 generate 된다

prisma와 상호작용할 client는 javascript다 prisma client가 추가되었다.

yarn add prisma-client-lib

이전에 작성했던 /src/api/Hello/sayHello/sayHello.js 를 아래와 같이 변경해보자.

yarn dev

서버 graphql play ground에서 sayHello Query를 실행해보자.

동시에 모든 사용자에 대한 정보를 console log에서 확인할 수있다.

이런식으로 서버는 prisma와 정보를 주고받게 된다.

prisma가 자동으로 client를 만들어준다(?) 이 client는 사용자 정보를 체크할 수 있다.(??????)

frontend에서 서버에 정보를 요청하면 서버는 prisma에 정보를 요청하는것이다.

이렇게 하는 것이 사람들이 서버에 직접 요청하도록 하는 것보다 안전하다.

prisma가 생성해준 resolver를토대로 

사용자를 추가해보자

잘된다!

관리자 페이지에도 사용자가 생성되었다.

정리하자면

prisma를 이용해 graphql파일만 작성하면 

resolver, sever, 관리 페이지도 만들어준다.

username kimjeongho가 username belovedsahra를 팔로우 하게 해보자.(mutation 작성)

이후 관리페이지를 보면 belovedsahra의 팔로워에 kimjeongho가 자동으로 추가된것을 볼 수 있다.

이는 데이터 모델 작성 시 User의 following과 follower를 relation으로 묶었기 때문에 prisma에서 자동으로 갱신을 해준것이다.

즉 A가 B를 following한다면 자동으로 B의 follower에 A가 등록되는 것이다.

양팡향 relationdl 잘 작동되는것을 확인하였다.

본론에 들어가기 앞서 package.js파일 scripts에 아래 항목을 추가하자

 "deploy": "prisma deploy"

아래와 같이 datamodel.prisma를 작성하자.

prisma docs에서 datamodel 관련 부분을 살펴보자

https://www.prisma.io/docs/datamodel-and-migrations/datamodel-MYSQL-knul/

prisma 언어에는 몇몇 기능이 있는데, 

@unique

@default

self-relation도 가능하다.

self-relation은 양방향으로도 관계를 설정할 수 있다.

이제 yarn deploy를 해보자.

해당 에러가 발생하는데

UserQuery의 name을 username으로 변경후 SAVE Query를 눌러준 후 새로고침하자.

정상적으로 반영된 것을 확인할 수 있다.

관리페이지 우측 하단에 endpoint 주소가 있다( 타인 발설 절대금지 )

들어가 보면 아래와 같이 우리가 작성한 데이터 모델에 대한 graphql 서버 및 모든 쿼리에 대한 resolver들을 자동으로 만들어준다.

이것이 prisma의 좋은점이다.

Prisma는 ORM(Object-relational mapping)이다.

Prisma는 데이터베이스 관련한 어려운 문제들을 해결해준다.

Prisma는 어플리케이션에서 필요한 모델을 graphql로 정의할 수 있다는 점에서 

다른 ORM과 비교해 특별하다.

prisma를 하기 위해서는 우선 회원가입이 필요하다.

https://prisma.io 

터미널에 npm install -g prisma 로 설치 후 ( global로 설치하지 않으면 에러가 난다 정확한 이유는 모르겠다.)

Log into Prisma CLI 코드를 복사해서 프로젝트 터미널에 붙여넣자.

인증을 성공했고 이제 서비스를 이용할 수 있다.

prisma init 명령어로 서비스를 시작할 수 있다.

기존 데이터베이서를 사용할지, 새로만들지 선택할수 있다.

Demo server를 선택하자. 데모 환경에서 호스팅 되는것이다.

서비스 이름은 kimgram-backend

stage는 dev

client는 javascript

코드가 generated 폴더에 생성된다 . (기본적인경우 이 폴더는 .gitignore에 등록해주자)

모델은 아래와 같다 datamodel.prisma

모델을 prisma에 추가하고 싶다면

prisma deploy를 입력하자.

prisma 계정에 반영됨

logging 전용 미들웨어 모듈인 morgan을 설치하자

yarn add morgan

server.js에 

import logger from "morgan" 추가

GraphQLServer에는 express 서버가 내장되어 있다. 따라서

server.express라고 입력하면 GraphQLServer 내의 express서버에 접근할 수 있다

express 서버에서 morgan미들웨어(logger모듈)을 사용하기로한다.

server.js에 서버 생성 후 

server.express.use(logger("dev"));를 입력 // "dev"는 옵션이다.

sever.js에 기존에 입력된 것처럼 typeDefs와 resolvers를 추가하지 않고 더 프로페셔널하게 추가해보자.

src/api 경로에 모든 graphql과 resolvers파일들을 추가한후 

src/schema.js에서 해당하는 모든 graphql, resolvers 파일들을 import한다.

src/server.js에서는 schema.js 파일 하나만 import한다.

이를 위해서는 graphql-tools / merge-graphql-shemas를 설치하자.

yarn add graphql-tools merge-graphql-shemas

테스트를 위해 

src/api/Hello/sayHello 디렉토리에 

sayHello.graphql

sayHello.js 파일을 추가한 후 

sayHello.graphql에

sayHello.js에

src/schemas.js에

src/server.js에

import schema from "./shema";

const server = new GraphQLServer( {schema } ); 

추가한다.    

localhost:4000에서 검증해보자

잘된다!

graphql-yoga를 이용해 서버를 세우고,

그 다음에 prisma를 서버 코드에 추가할 계획( what is prisma?)

graphql-yoga는 graphql서버를 쉽게 설치하게 도와줌. 

https://github.com/prisma-labs/graphql-yoga

.babelrc파일을 추가하고 아래처럼 작성,

yarn add @babel/{node,preset-env,core}

위 두 작업을 하지 않으면 import인식 에러뜸

dotenv 모듈을 설치하자. dotenv모듈은 .env 파일을 읽는다.

yarn add dotenv

src/server.js파일을 아래와 같이 작성한다.

서버를 만들때 GraphQLServer()를 이용한다 이때 파라미터로

typeDef와 resolver들이 필요함. 

dotenv config 에서 포트를 읽어오게 할 수 있다. 

.env파일에 PORT를 추가하자. 

yarn dev를 실행하면 

콘솔 로그 가 출력되는것을 볼 수 있따.

***만약 Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3".  에러 발생시 

    yarn remove babel-cli 를 해주도록 하자 ***