인스타그램클론
-
#3.4~3.6 passport JWT인스타그램 클론 코딩/#3 GraphQL API 2019. 12. 22. 17:27
- passport 설치 - 설치하고 설정만 해주면 모든 인증기능을 사용할 수 있어서 편리 - passport는 인증 관련한 모든 일을함. jwt 토큰이나 쿠키에서 정보를 가져와서 사용자정보에 serialize(저장)함 - passport-jwt를 사용, yarn add passport-jwt passport - passport jwt - https://randomkeygen.com/에서 암호화된 키 문자열 하나 복사해서 .env에 기입 - yarn add jsonwebtoken ( node.js에서 jwt를 생성하기위해 설치하는 모듈) - jwt이란? - https://victorydntmd.tistory.com/116 [Node.js] JWT 기반으로 사용자 인증 구현하기 ( jsonwebtoken ..
-
# 3.3 Nodemailer를 이용한 sendMail 기능인스타그램 클론 코딩/#3 GraphQL API 2019. 12. 20. 18:33
.env 설정 다시 import dotenv from "dotenv"; import path from "path"; dotenv.config({ path: path.resolve(__dirname, ".env") }); import { GraphQLServer } from "graphql-yoga"; import logger from "morgan"; import schema from "./schema"; const PORT = process.env.PORT || 4000; const server = new GraphQLServer({ schema }); server.express.use(logger("dev")); server.start({ port: PORT }, () => console.log(`✅..
-
#3.2 requestSecret Resolver인스타그램 클론 코딩/#3 GraphQL API 2019. 12. 20. 00:23
비밀값 요청 기능 https://www.randomlists.com/nouns?dup=false&qty=500 라는 사이트에서 형용사 , 명사 500개씩 복사해서 붙여준다. 1. src 폴더 안에 utils.js , words.js파일 생성 (utils.js은 시크릿 코드 작성파일, words.js은형용사,명사 붙여넣을파일) 2. words.js파일안에 다음과 같이 작성 export const adjectives = []; //형용사 export const nouns = []; //명사 // []안에 형용사 , 명사 500개 붙여넣고 alt+ shift + i 를 활용해서 "" , 추가하여 문자열로만들기 3. utils.js파일안에 다음과 같이 작성 import { adjectives, nouns } f..
-
#2.2 프리즈마 테스팅인스타그램 클론 코딩/#2 Prisma 소개 및 설정 2019. 12. 18. 20:27
// 유저 생성은 이런식으로 mutation { createUser(data:{username:"정준식",email:"wndtlr@tlrdl.com"}){ id } } connect: {id}의 사용자가 where:{id}의 사용자를 팔로잉하고 where문 이후에 오는건 조회 한다는 뜻 mutation{ updateUser(data:{following:{ connect:{ id:"ck4b70b3idxl40993lu7gpdj2" } }}where:{id:"ck4b6wz3ri6f00922id0t735e"}){ username firstName lastName following{ id username } followers{ id } } }
-
#3.1 계정 확인자 만들기 (Create Account Resolver)인스타그램 클론 코딩/#3 GraphQL API 2019. 12. 18. 07:00
회원 로그인 체크하는 폴더, 파일, 쿼리 만들기 .graphql은 스키마 타입 , .js는 함수 datamodel.prisma는 prisma의 데이터모델 (스키마), models.graphql은 datamodel.prisma의 언어를 graphql로 바꾼 파일 (@id , @unique,@default(value: ""), @relation(name: "FollowRelation") 는 prisma언어라 graphql파일에 적을땐 삭제해줘야함) prisma.createUser => prisma가 서버와 정보를 공유하기위해서 필요한것
-
#2.3~2.4 서버에 프리즘 통합,Resolvers with Prisma인스타그램 클론 코딩/#2 Prisma 소개 및 설정 2019. 12. 17. 21:52
실제 api에서 어떻게 prisma를 사용할까? generated 폴더에있는 index, prisma-schema 파일이 있는데, 이 파일들을 통해 prisma와 정보를 주고받게됨 서비스를 배포(deploy)할 때 마다 prisma cloud에서 뭔가를 생성하는데, 그걸 다운받아야함 prisma 서버와 정보를 주고받으려면 prisma client를 다운받아야함 여기서 generate는 prisma와 상호작용할 client인데, javascript다. (generate 폴더 안에 prisma-client폴더가있음)
-
#1.2 전문가처럼 서버 설정인스타그램 클론 코딩/#1 설정 2019. 12. 15. 22:32
yarn add morgan logger(로깅 전용 모듈)임 GraphQLServer 엔 express 서버가 내장되어있는데,아래와 같이 express 미들웨어를 설정해줄수있다. logger괄호안의 dev는 옵션임 require("dotenv").config(); import { GraphQLServer } from "graphql-yoga"; import logger from "morgan"; const server = new GraphQLServer({ typeDefs, resolvers }); server.express.use(logger("dev")); src>api 폴더를 만든후 폴더 안에 schema.js파일 및 resolver.js (여기선 .js파일)파일을 만듦 yarn add graphq..
-
# 1.1 GraphQL 서버 생성인스타그램 클론 코딩/#1 설정 2019. 12. 15. 21:37
yarn add dotenv - dtenv 모듈은 .env 파일을 읽음 src .env 파일을 만듦 (PORT = 4000 작성) server.js require("dotenv").config(); import { GraphQLServer } from "graphql-yoga"; const PORT = process.env.PORT || 4000; const typeDefs = ` type Query{ hello:String! } `; const resolvers = { Query: { hello: () => "Hi" } }; const server = new GraphQLServer({ typeDefs, resolvers }); server.start({ port: PORT }, () => consol..