👉 Settings

• node.js, npm
• npx
• git

node.js, npm

• Installation
  👉 https://nodejs.org/ko/download/
• v
  node -v
npm -v
  

npx

• Installation
  npm install npx -g
• v
  npx -v

git

• Installation
  👉 https://git-scm.com/
• v
  git --version

---

📌 React

React

페이스북이 개발한 프레임워크
state 관리가 핵심

• Quick Start
  npx create-react-app 파일이름

참고

• 리액트란 무엇인가? 👉 https://react-anyone.vlpt.us/01.html
• 리액트 이해하기 👉 https://medium.com/hivelab-dev/react-js-tutorial-part1-c632e34fc32
• React - Hook 개요 👉 https://ko.reactjs.org/docs/hooks-overview.html
• useEffect 완벽 가이드 👉 https://rinae.dev/posts/a-complete-guide-to-useeffect-ko

---

📌 GraphQL

페이스북이 개발한 데이터 질의어

• Start
  yarn init

graphql-yoga

• Install
  yarn add graphql-yoga

• Usage
  https://github.com/prisma-labs/graphql-yoga

• Quickstart

import { GraphQLServer } from 'graphql-yoga'
// ... or using `require()`
// const { GraphQLServer } = require('graphql-yoga')

const typeDefs = `
  type Query {
    hello(name: String): String!
  }
`

const resolvers = {
  Query: {
    hello: (_, { name }) => `Hello ${name || 'World'}`,
  },
}

const server = new GraphQLServer({ typeDefs, resolvers })
server.start(() => console.log('Server is running on localhost:4000'))

참고

• KakaoTech 👉 GraphQL 개념잡기

---

📖 Library / package / tool ...

• prop-types
• axios
• nodemon
• babel
• node-fetch
• dotenv
• graphql-tools

prop-types

type 유효성 검사

• Installation
  npm install --save prop-types
yarn add prop-types --save

• Importing

import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm

• Usage

myComponent.propTypes = {
  props1: PropTypes.string.isRequired,
  props2: PropTypes.number.isRequired,
}; ...

• Error
  Typo in static class property declaration react/no-typos
  👉 myComponent.PropTypes = ... → myComponent.propTypes = ...
  (대문자를 소문자로)

---

axios

Performing GET / POST request

• Installation
  npm install --save axios
yarn add axios --save

• Importing

import axios from 'axios';
const axios = require('axios');

//CommonJS usage
import defaultAxios from "axios";
const axios = require('axios').default;

• Usage

참고

• Axios 러닝가이드 👉 https://xn--xy1bk56a.run/axios/guide/install.html

---

nodemon

A tool restarting server

• Installation
  npm install --save-dev nodemon
yarn global add nodemon --save-dev

• Usage

//add to package.json

 "scripts": {
    "start": "nodemon"
  }

// yarn start

---

babel

A tool for transpiling (compiling) ES6/ES7 code to ECMAScript 5 code.

• Install
  npm i @babel/cli @babel/core @babel/node @babel/preset-env
yarn add @babel/cli @babel/core @babel/node @babel/preset-env

• Usage

// package.json
{
  "type": "module",
  // Add if error : Cannot use import statement outside a module
  "name": "file_name",
  "version": "1.0.0",
  .
  .
  .

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

참고
about babelJS 👉 https://kleopetrov.me/2016/03/18/everything-about-babel/

---

node-fetch

A light-weight module that brings window.fetch to Node.js

• install
  npm install --save-dev node-fetch
yarn add node-fetch --save-dev

• Usage

const fetch = require('node-fetch');
import fetch from "node-fetch";

//JSON
fetch('https://api.github.com/users/github')
    .then(res => res.json())
    .then(json => console.log(json));

---

dotenv

.env 파일을 읽어주는 모듈

• install
  npm install --save dotenv
yarn add dotenv --save

• Usage

require('dotenv').config()

const db = require('db')
db.connect({
  host: process.env.DB_HOST,
  username: process.env.DB_USER,
  password: process.env.DB_PASS
})

//.env
DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3

---

morgan

HTTP 로그 및 에러를 확인하는 미들웨어
express와 함께 사용하면 좋음.

• install
  npm install morgan --save
yarn add morgan --save

• Usage

//index.js

const app = express();

app.use(morgan('tiny'));

---

graphql-tools

많은 graphql schema, resolvers 를 제어하는 패키지

• install
  npm install graphql-tools --save
yarn add graphql-tools --save

• Usage
  👉 https://github.com/ardatan/graphql-tools

---