backend 기본 셋업 (1)

목표 

<backend 기본 설치에 대해 A-Z까지 알아보자>

---

🍔 핵심 내용

 

🥑 nodejs 설치

nodejs 홈페이지 가면 최신버전으로 쉽게 다운 받을 수 있다.

 

🥑 git 연결

이 부분은 따로 설명 하지 않아도 될 것 같다.

 

🥑 npm init -y

프로젝트 폴더 생성 후 시작해보자! (너무 기초적인 거는 pass)

 

🥑 npm i apollo-server graphql

apollo 서버 모듈 설치, 해당 모듈을 통해 쉽게 graphql 과 연동 시킬 수 있다.

 

🥑 npm i nodemon --save-dev

nodemon을 통해 코드 내용이 바뀌면 자동적으로 서버 재시작 

 

🥑 부가 내용

gitignore 확장 프로그램 설치하여, 관련 언어에 대해 쉽게 gitignore 파일을 생성해 줄 수 있다.

 

 

🍔 코드 리뷰

 

파일 트리

 

 

🥑 server.js

import { ApolloServer, gql } from "apollo-server";

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

const resolvers = {
  Query: {
    hello: () => "하하호호",
  },
};

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

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

 

1) typeDefs는 스키마 타입을 정의 하는 부분이다.

2) resolvers는 기존 정의된 타입에 대해 호출을 하게 되면 어떻게 응답을 할지에 대해 정의해놓은 것이다.

위 두가지는 필수 요소이기 때문에, ApolloServer를 만들때 아래 const server에 들어가는 것이다.

 

 

🥑 package.json

{
  "name": "kimstagram",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "nodemon --exec node server.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rlawpgud86/kimsta_clone.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/rlawpgud86/kimsta_clone/issues"
  },
  "homepage": "https://github.com/rlawpgud86/kimsta_clone#readme",
  "dependencies": {
    "apollo-server": "^2.19.2",
    "graphql": "^15.5.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
}

 

scripts는 npm run "xxx" 을 했을 때, 실행되는 부분을 적는 곳이다. 따라서, npm run dev를 하게 되면 nodemon이 실행되면서, server.js 파일을 재시작하게 된다.

 

 

 

---

 

🍔 핵심 내용

 

🥑 babel 이란?

 

babel의 역할은, nodejs 문법에 대해 최신 언어 -> 구형 언어로 컴파일러 해주는 것이다. nodejs는 js의 최신 문법이 적용 안되는 것들이 많기 때문에 babel의 도움을 받아야 한다. ex) 위에 import ~~ from 구문도 최신 js 문법임

 

아래 3개 모듈 설치

npm install --save-dev @babel/core
npm install @babel/preset-env --save-dev
npm install @babel/node --save-dev

 

🍔 코드 리뷰

 

🥑 babel.config.json

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

 

위 파일을 새로 생성 한다.

 

🥑 package.json

  "scripts": {
    "dev": "nodemon --exec babel-node server"
  }

 

scripts 부분 수정 - babel-node를 통해서, server.js를 실행 해라 라는 뜻이다.

 

---

 

🍔 핵심 내용

 

🥑 typeDefs - query와 mutation의 이해

query는 단순 db 데이터를 호출할 때, mutation은 db 데이터에 변화(생성,수정,삭제 등)를 줄 때 사용 한다. 

 

🥑 resolver 함수의 인수 활용 (root, args, context, info)

root는 거의 활용 되지 않는다. 보통 args만 사용 된다. 아래 내용 참고 (출처 : graphql 공식 사이트)

 

 

🥑 typeDefs와 resolvers는 나중에 별도 파일로 구분해야 한다.

1개 파일 안에 여러 로직이 들어가 있으면 안된다. 너무 복잡해진다.🤢 (분할해서 정복하자)

 

typeDefs와 resolver는 계속 활용 될 것이기 때문에 지금 잘 이해가 안되더라도, 진도가 나가면서 자연스레 이해될 것이다.

 

🍔 코드 리뷰

🥑 server.js (일부)

const typeDefs = gql`
  type Movie {
    title: String
    year: Int
  }
  type Query {
    movies: [Movie]
    movie: Movie
  }
  type Mutation {
    createMovie(title: String!): Boolean
    deleteMovie(title: String!): Boolean
  }
`;

const resolvers = {
  Query: {
    movies: () => [],
    movie: () => ({ title: "Hello", year: 2021 }),
  },
  Mutation: {
    createMovie: (_, { title }) => {
      console.log(title);
      return true;
    },
    deleteMovie: (_, { title }) => {
      console.log(title);
      return true;
    },
  },
};

 

resolvers의 Mutation을 보자.

_ 는 root대신에 사용하는 것이고 (프로그램에서 무시할때 보통 _ 를 사용), { title }은 원래 args를 넣어야 하는 곳이다.

args를 넣게 되면 console값에 { title : "hello" } 와 { title : "goodBye"} 가 출력 된다. 이때 바로 value값만 보기 위해서는

args부분에 { title }를 넣어주면 된다.