[노마드코더]인스타 클론코딩 사전 지식 쌓기

노마드 코더 인스타그램 클론코딩 3장 강의를 듣고 정리한 것(기록용!)

 

[준비]

1. gitignore을 vscode extension 을 설치해서 생성(매번 gitignore.io 에서 생성했는데 이런방법도 있구나!)
2. $ npm init 명령어를 통해 package.json 파일 생성
3. server.js 생성(처음엔 여기에 모든 기능을 다 넣고 나중에 분리)

[apollo server, graphql]

$ npm install apollo-server graphql

package.json 에서 scripts.dev에 "nodemon server.js" 추가

$ npm run dev (port 4000번으로 실행됨)

 

[babel]

const { ... } = require(...) ⇒ 옛날문법

import { ... } from { ... } ⇒ 최신문법

최신문법을 그대로 타이핑하면 오류가 발생한다

node 14 ver이상이라면 pacakge.json 에 "type" : "module" 을 추가하면 되지만(난 12 ver이었는데 type을 추가해도 해결되지 않음) node ver에 관계없이 사용하고싶다

→ babel 사용(github, 공식페이지에서 나와있는 대로 babel.config... 파일을 만들고, install 하고 package.json scripts.dev를 "nodemon —exec babel-node server"로 수정해준다

$ npm install @babel/node —save-dev

 

[prisma]

https://www.prisma.io/ 에 나온대로 명령어(2개-install, init) 입력

(윈도우에서는) pgadmin4 설치 후 instaclone database생성(owner : postgres)

이후에 .env 파일에서 DATABSE_URL username, pw, dbname 변경해주기

$ npx prisma migrate dev —preview-feature (dev:지금 테스트 용 이라는 뜻)

위의거 하니까 Error P1014 떠서

gpAdmin4에서 Login/Group Roles의 postgres에 비밀번호 설정 후 아래 두 명령어 입력

$ npx prisma migrate reset —preview-feature —force (—preview-feature은 아직 안정화 된 것이 아니라는 뜻)

$ npx prisma migrate dev —preview-feature (원래는 이것만 해줘도 됨)

db와 소통하기위해서는 client가 필요하다

client는 node module에 존재(node_module > prisma > client)

typedef와 스키마를 매치시켜야 함

$ npx prisma studio

.env 파일에서 환경변수를 받아오고, 스키마를 로드하고, prisma studio를 시작하고, client를 생성하고, port 5555에 들어가면 볼수있다

prisma studio : db를 브라우저로 볼 수 있다

모든것은 schema.prisma 파일을 기반으로 보여진다

위의 migrate, studio 같은 명령어를 계속 입력하기 힘드니까 package.json파일에 scripts부분에 정의해 둔다

 

[server.js 파일 분해하기]

typedef, resolver를 보통 한파일에 다 넣어놓지 않는다

파일들을 나눌때 domain(movie/user/ .... ) 별로 나눈다

파일명도 movies.queries.js 처럼 어떤 것에 대한 query인지 파일명만 봐도 알 수 있도록 하는게 좋다.

이렇게 query, mutation, typeDefs별로 나눈 것을 한꺼번에 schema.js 파일로 불러오고싶다(지금은 movie밖에 없지만 여러가지 생기겠지)

⇒ graphql-tools 사용해서 한꺼번에 가져온다

 

[graphql]

$ npm install graphql-tools

파일명 패턴을 가지고 파일을 가지고 올 수 있다

https://www.graphql-tools.com/docs/schema-merging

Schema merging | GraphQL Tools

[env 설정 - dotenv]

.env 파일을 읽어들이기 위해 dotenv라는 것을 설치

$ npm install dotenv

dotenv를 app의 모든 것 맨 위에서 즉시 실행(가장최우선으로)

server.js 맨위에 가져오는 동시에 실행될 수 있도록 추가(.config())

.env 파일에 환경변수 등 정의해주기

 

[코드]

github.com/ujin2021/Instaclone_basic