#0.0 사용할 기술

• 프론트엔드: Apollo, React, React Hook Form, Styled Components, React Hooks
• 백엔드: Apollo Server, GraphQL, Prisma Studio, Prisma Migrate, Prisma Client
• 앱: iOS & Android: React Native, Expo, React Native CLI, React Navigation, React Native Web

#1.0 Backend Setup

1. 프로젝트 폴더를 생성한다.
2. git init과 npm init -y를 실행한다.
3. git repository를 생성하고 연동한다.
4. VSC에서 해당 폴더를 열고 package.json에서 main은 사용하지 않으므로 지워주고 script에서 test도 지워주고 dev만 빈칸으로 추가해준다.

---

#1.1 Apollo Server Setup

1. npm i apollo-server graphql apollo와 graphql을 설치해준다.
   여기서graph-yoga는 사용하지 않아도 쉬게 할 수 있기 때문에 사용하지 않을 것이다.

2. server.js 파일을 생성후 양식에 맞게 작성한다.

//server.js
const { ApolloServer, gql } = require("apollo-server");

const typeDefs = gql`
    type Query{
        hello: String
    }
`;

const resolvers = {
    Query: {
        hello: () => "babe",
    },
}

const server = new ApolloServer({
    typeDefs,
    resolvers,
})

server.listen().then(() => console.log("Server is running on http://localhost:4000/"));

graphql-yoga에서와는 달리 직접 package.json에서 명령어를 설정해줘야한다.

3. 아까 package.json의 script에 비워두었던 dev에 node server.js를 넣어주고 터미널에 npm run dev를 실행하고 http://localhost:4000/으로 가게되면 grpahql-playground가 나오게 된다.

4. 우리는 js가 변화하고 저장됨에 따라 자동으로 서버를 재시작하게 해주는 nodemon을 설치할 것이다. npm i nodemon --save-dev로 개발자 라이브러리에 설치해준다.

5. package.json의 script의 dev에 nodemon의 명령어를 추가해준다.

"scripts": {
    "dev": "nodemon --exec node server.js"
  },

---

#1.2 Babel

최신 자바스크립트 문법을 사용하기 위해 babel(javascript compiler)을 설치한다.
노드 버젼에 관계없이 코딩 할 수 있게 도와준다.
babel reference

• npm install --save-dev @babel/core
• npm install @babel/preset-env --save-dev
• npm install @babel/node --save-dev
• babel.config.json 파일을 만들고 아래처럼 추가한다.

// babel.config.json
{
    "presets": [
        "@babel/preset-env"
    ]
}

• package.json의 script의 dev를 아래와 같이 수정한다.

// package.json
"scripts": {
    "dev": "nodemon --exec babel-node server.js"
  },

---

#1.3 Prisma Setup

Prisma는 ORM이다. 즉 SQL코드를 쓸 필요 없이 자바스크립트 코드를 작성하면 Priisma가 데이터베이스와 대신 소통해준다.
Prisma가 migration을 적용하고 DB를 동기화해준다. 그 이후 Prisma는 Client를 생성할 것이다. 그리고 이 client를 통해 자바스크립트로 DB와 대화할 수 있게 된다.

1. npm install prisma --save-dev 터미널에서 prisma를 설치한다.

2. npx prisma init을 하면 새로운 파일들이 생긴다. prisma는 default로 postgresql과 대화하게 되어있다.

3. postgresql을 설치하고 실행한다.
   윈도우는 pgadmin4, mac은 postgresApp을 설치한다.

4. pgadmin4에서 Login/Group Roles에서 우클릭-create로 사용자를 만들어준다. 이 때 Privileges로 들어가서 모든 권한을 Yes로 해준다.

5. Database에서 우클릭-create하고 db이름을 정하고 owner를 만든 사용자로 해주고 생성해준다.

6. VSC로 돌아와 .env파일에서 username과 db이름을 자신걸로 바꿔준다. randompassword는 localhost에서 작업할 때, 위도우나 mac에서 작업할 때 PostgreSQL에서 비밀번호 없이 연결할 수 있도록 지원하기 때문에 그대로 둬도 된다.

---

#1.4 Prisma Migrate

Prisma Migrate는 schema.prisma 파일의 데이터 모델을 사용하고 설명할 수 있게 해준다.
Prisma schema reference

// schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Movie { //model은 type중 하나
  id       Int      @id @default(autoincrement())//숫자하나씩 증가
  title    String
  year     Int
  genre    String? //?가 붙으면 required가 아니라는 말이다. 나머지는 required
  createAt DateTime @default(now()) //DateTime도 prisma가 가지고 있는 type
  updateAt DateTime @updatedAt
}

prisma migrate를 실행해서 데이터베이스에 위의 모델을 넣는다.

npx prisma migrate dev를 실행한다

• prisma migrate는 자체적으로 prisma client를 생성하지 않는다.
  prisma migrate는 데이터베이스의 형태를 변형시켜준다.
  하지만 dev로 실행하면 자동으로 생성된 prisma client를 얻게 된다.