9/2 TIL : 전개 구문, yarn, postman, express router

🔎 전개구문

🚩 객체 합치기

const bulsokData = {
  name: 'ebulsok',
  gender: 'F',
};

const bulsokInfo = {
  nickName: 'bulsok',
  email: 'leebulsok@gmail.com',
};

const bulsok = {
  ...bulsokData,
  ...bulsokInfo,
};

console.log(bulsok);

 

🚩 배열 합치기

const arr1 = [1, 2, 3, 4, 5];
const arr2 = ['6', '7', '8'];
const merge = [...arr1, ...arr2];
console.log(merge); // [1, 2, 3, 4, 5, '6', '7', '8']

 

🚩 나머지 연산자, 객체

const bulsokData = {
  name: 'ebulsok',
  gender: 'F',
  nickName: 'bulsok',
  email: 'leebulsok@gmail.com',
};

const { name, ...bulsokInfo } = bulsokData;
console.log(name, bulsokInfo); // ebulsok { gentder: 'F', nickname: 'bulsok', email: 'leebulsok@gmail.com' }

---

🔎 Yarn: facebook에서 만든 노드 패키지 관리자 도구

• 속도: 패키지 데이터를 캐시에 저장하여 중복된 데이터는 다운받지 않고 설치하기 때문에 속도가 더 빠름
• 안정성/보안성: 이전에 npm이 제공하지 않던 yarn.lock 파일을 제공. 간단한 정보만 포함하던 package.json이 아니라 각 패키지의 세부 정보를 전부 포함하기 때문에 어느 환경에서나 같은 패키지를 설치할 수 있도록 보장함 => npm도 package-lock.json을 도입하여 문제 해결

• [터미널] npm install -g yarn
• [터미널] yarn init -y / npm init -y

 

• [터미널] yarn add -D prettier / npm install --save-dev prettier
• .prettierrc 파일 설정

{
    "semi": true,
    "singleQuote": true
}

• .vscode/settings.json 설정

{
    "[javascript]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

 

• [터미널] yarn add -D eslint / npm install --save-dev eslint
• [터미널] yarn add -D eslint-config-airbnb-base eslint-plugin-import / npm install --save-dev eslint-config-airbnb-base eslint-plugin-import
• .eslintrc.js 파일 설정

module.exports = {
  extends: ['airbnb-base'],
  rules: {
    'linebreak-style': 0, // 윈도우 필수
    'no-console': 'off', // 콘솔로그 사용
    'prefer-destructuring': 'off', // 구조분해할당문법
  },
};

 

• [터미널] yarn add -D typescript / npm install --save-dev typescript
• [터미널] yarn add -D @types/node / npm install --save-dev @types/node
• 사용 시 // @ts-check 추가

 

• [터미널] yarn add express / npm install express
• [터미널] yard add -D @types/express / npm install --save-dev @types/express

 

• [터미널] yarn add -D nodemon / npm install --save-dev nodemon
• package.json에 스크립트 추가

"scripts": {
    "server": "nodemon src/main.js",
    "dev": "nodemon --watch \"./src/*.js\" --exec \"npm run server\""
  },

 

🔎 Node.js 내장 객체 사용하기

• 해당 파일의 위치 정보: __dirname
• 해당 파일의 위치+파일명 정보: __filename

 

🔎 Postman: 서버 요청을 테스트하는 프로그램

https://www.postman.com/downloads/

 

🔎 Middleware: 서로 다른 어플리케이션(프로그램)이 서로 통신을 하는데에 사용되는 소프트웨어

• express에서의 미들웨어는 서버에 들어온 요청이 들어와서 응답으로 나갈 때까지 거치는 모든 함수 또는 기능을 의미
• app.use 또는 app.method 함수를 이용 app.use('요청주소', (req, res, next) => { });

// @ts-check
const express = require('express');

const app = express();
const PORT = 4000;

app.use('/', async (req, res, next) => {
  res.send('Hello, Express world!');
});

app.listen(PORT, () => {
  console.log(`The express server is running at port: ${PORT}`);
});

 

🚩 next: callback 함수로서 해당 함수가 호출되면 현재 미들웨어를 종료하고 다음 미들웨어를 실행시킴

• res.send로 통신이 종료되도 next는 실행됨
• 이전 미들웨어에서 처리한 값을 전달하고 싶을 때 req 객체에 필드를 추가해서 전달하는 방법이 많이 사용됨

// @ts-check
const express = require('express');

const app = express();
const PORT = 4000;

app.use('/', async (req, res, next) => {
  console.log('미들웨어 1번');
  next();
});

app.use((req, res, next) => {
  console.log('미들웨어 2번');
  res.send('res.send!');
  next();
});

app.use((req, res, next) => {
  console.log('미들웨어 3번');
  res.send('통신 종료');
});

app.listen(PORT, () => {
  console.log(`The express server is running at port: ${PORT}`);
});

 

🚩 req.params: 받을 url에서 :파라미터명 을 미리 정의 하면 data를 받을 수 있음

app.get('/id/:id/name/:name/gender/:gender', (req, res) => {
  console.log(req.params);
  res.end(req.params);
});

 

🚩 req.query: url에 ? 를 붙인 뒤 필드명=값 으로 사용하면 정의되지 않은 형태로도 데이터를 받을 수 있음

• ex. localhost:4000?test=test&id=1

 

🔎 express.router

express의 routing을 위한 미들웨어를 이용

// @ts-check
const express = require("express");

const app = express();
const PORT = 4000;
const userRouter = express.Router();

app.use("/users", userRouter);

const USER = [
  {
    id: "bulsok",
    name: "ebulsok",
  },
  {
    id: "test",
    name: "테스트",
  },
];

userRouter.get("/", (req, res) => {
  res.end("회원 목록");
});

userRouter.get("/:id", (req, res) => {
  res.end("특정 회원 정보");
});

userRouter.post("/", (req, res) => {
  res.end("회원 등록");
});

app.use("/", (req, res) => {
  res.end("Hello, express world!");
});

app.listen(PORT, () => {
  console.log(`The express server is running at port: ${PORT}`);
});