Instagram-clone#1-Setting

Seo·2020년 5월 25일
1

InastagramClone

목록 보기
1/15

이 글은 nomadcoder instagram clone 강의를 듣고 개인적으로 정리하는 글입니다.

Preview

Instagram clone with express, prisma, react

Setup

1. Make project repository

  1. create new git repository
    repository name : instagram-clone
  2. pull git reopsitory to local place
    git clone {repository-url}
  3. project profile init
    yarn init

2. Add Modules

  1. yarn add graphql-yoga
    graphql-yoga는 graphql 서버를 quick start 할 수 있게 도와주는 모듈
    GraphQLServer는 express 서버가 내장되어 있다.
  2. yarn add nodemon
    파일 생성, 수정, 삭제를 감지하여 server를 자동을 재기동 시켜주어 개발 시에 편리함을 주는 모듈
    nodemon --exec your/source/path
  3. yarn add babel
    babel은 공통된 하나의 언어의 의미를 가진 바벨처럼 최신의 코드를 구형,신형,종류등 상관없이 모든 브라우저에서도 잘 동작 할 수 있도록 공동으로 정의한 코드로(현재 잘 지원되는 코드형태로) 변환해주는 모듈
  4. yarn add dotenv
    .env 파일을 생성하고 사용할 수 있게 해주는 모듈
  5. yarn add morgan
    log를 지원하는 express middleware 모듈 중에 하나
  6. yarn add graphql-tools
    많은 typeDef와 resolver를 하나의 schema로 만들어주는 모듈
  7. yarn add merge-graphql-schemas
    많은 graphql과 관련된 파일들을 하나의 데이터로 모아주는데 필요한 기능들을 가진 모듈
    - fileLoader : graphql 기반 소스파일들을 다룰 수 있는 모듈
    - mergeTypes : fileLoader에 의해 모아진 type들을 merge해주는 모듈
    - mergeResolvers : fileLoader에 의해 모아진 resolver들을 merge해주는 모듈

Project Design

graphQLserver를 사용할 때 props로 typeDefs, resolvers를 구현해서 사용한다.

기본지식

query and mutation

graphQL에서 CRUD를 하는 구문

  • query : GraphQL 조회 시에 사용되는 구문(아래 이미지 왼쪽)
  • mutation : GraphQL 삽입, 수정, 삭제 시에 사용되는 구문(아래 이미지 오른쪽)

schema/type

graghQL에서 자료구조 형태를 명시하는 구문

type Character {
  name: String!
  appearsIn: [Episode!]!
}

resolver

graphQL에서 query, mutation을 이용해 구제적인 과정을 담당하는 구문

Query: {
  allUsers: () => prisma.users(), // 기본적으로 prisma는 promise 함수를 return 한다.
}
Query: {
  userById: async (_, args) => {
    const { id } = args;
    return await prisma.users({id})
  }
}
  

GraphQLServer props

typeDefs

사용되는 schema/type, query/mutation를 모아놓은 것

resolvers

사용되는 resolver를 모아놓은 것

사용할 패턴

├─🗂api
│  └── 🗂Hello
│      └── 🗂sayHello
│          ├─sayHello.graphql <- typeDef
│          └─sayHello.js      <- resolver
├─schema.js
└─server.js

api 폴더 :

typeDefs files + resolvers files

schema.js

api 폴더내에 있는 모든 typeDefs, resolvers들을 import해서 server.js에서 schema.js만 import하여 관리

  • 모듈 : graphql-tools, merge-graphql-schemas

Database

DB : Mysql

prisma에서 제공하는 demo db로 my sql을 사용한다.

ORM : Prisma

graphql을 통해 Database와 커뮤니케이션 할 수 있도록 해주는 ORM

  • GraphQL Schema를 기반으로 한 Database 자동생성
  • GraphQL Schema를 기반으로 ORM Client 자동생성
  • data model 또한 graphql을 사용하여 관리
  • Admin(관리자) 페이지를 통해 손쉽게 데이터 제어 가능 (근데 버그가...)
  • 러닝 커브가 생각보다 높음

import Prisma

  1. https://app.prisma.io 로그인
  2. Add new service
  3. 해당 페이지에서 나오는 순서대로 진행하면 됨
  4. prisma login
  5. prisma init
    Prisma Database, script언어, 등등 셋팅하고 generated 폴더와 datamodel.prisma파일을 생성함
  6. prisma deploy
    위 생성된 파일들을 prisma server로 배포하여 database 모델을 만든다.
  7. 모델 변경 시 prisma deploy를 통해 prisma update를 하면 됨
  8. prisma generate를 통해서 prisma-client 파일 내려받기 하면 됨

Prisma 프로젝트 구조

├─🗂generated
│  └── 🗂prisma-client
│      ├── index.d.ts
│      ├── index.js
│      └── prisma-schema.js
├─ prisma.yml
└─ datamodel.prisma

prisma.yml

prisma init 명령어로 생성 시에 만들어지는 yml 파일
prisma 서버 값, datamodel, generate 경로, generate type 등을 저장하는 파일

endpoint: {database server}
datamodel: datamodel.prisma

generate:
  - generator: javascript-client       
    output: ./generated/prisma-client/

datamodel.prisma

database model 정의 하는 파일(sql에서 create or replace table에 대항함)
prisma가 계속해서 나은 버전으로 개발되면서 v1.x 버전이랑 v2.x 버전 등 syntax부터 다른데 헷갈리지 말고 버전과 맞춰서 코드 작성해야함
(점점 더 sql 문법에 가까워 지는거 같은 건 내 느낌인가...)

🆅1.34.8
type User {
  id: ID! @id
  name: String
  email: String! @unique
}
🆅2.x
model User {
  id	Int	@id	@default(autoincrement())
  name	String?
  email	String	@unique
}

graphql

fragment

모델에 재귀적 호출이 가능한 타입들은 prisma-client에 제공되지 않는다.
(서버에 취약점을 가질 수 있기 때문에, 무한 재귀로 공격할 수 있음)
그래서 graphql에서는 $fragment을 사용하여 더 깊게 데이터를 접근하고 사용할 수 있다.

https://www.apollographql.com/docs/react/data/fragments/

Data Model

sql로 치자면 table에 해당한다.

  • User
  • Post
  • Like
  • Comment
  • File
  • Room
  • Message

VSCode and Prisma1

vscode에서 prisma plugin(syntax lint 등)을 설치하고 사용하려 하는데 prisma 2.0 업데이트 되었다고 plugin 자체를 2.0에 맞춰서 내버리고 1.x prisma는 아예 syntax를 이해하지를 못한다.
1.x prisma를 강제로 쓰더라도 계속 lint error가 나면서 사용할 수 없게 만들어버렸다.
문제는 npm에 prisma를 찾으면 version 이 1.x가 나온다.
공식 홈페이지에 따르면 @prisma/client를 사용해서 prisma2를 이용하라고 적혀있다.
npm에 가보면 reamde에는 이미지도 깨져서 나오기도 하고 업데이트가 자주 일어나고 있다.
어째뜬 vscode plugin에 버전 별로 .prismarc라던지 설정파일로 설정할 수 있게 해줘야 할거 같은데. 만약 지금 prisma1을 사용하고 plugin을 통해서 code lint를 이용하려면 지금은 사용할 수 없다.
(https://github.com/prisma/vscode/issues/26, https://github.com/prisma/vscode/issues/11) 이런 글이 올라오는 걸 보면(근데 답변조차 없다. 앞에 글은 작년 11월에 올라온 글인데) 댓글에 보면 이런 글 조차 있다.

I have a temporary solution:
In your prisma.yml file change datamodel.prisma to datamodel.graphql
and finally change your datamodel.prisma filename to datamodel.graphql
whalaaa!

.prisma 파일을 .graphql로 바꿔놓고 prisma.yml에서 아예 .graphql파일을 바라보게 하는건데 굳이 이렇게 쓸 수는 있겠다.

profile
개발관심자

0개의 댓글