더블리의 12층

• API에서 username, page, tag 값을 쿼리 값으로 넣어서 사용
• qs 라이브러리를 사용하여 쿼리 값을 생성
• qs를 사용하면 쿼리값을 더 편하게 JSON으 형태로 변환이 가능

$ yarn add qs

Front

src/lib/api/posts.js

export const listPosts = ({ page, username, tag }) => {
  const queryString = qs.stringify({
    page,
    username,
    tag,
  });
  return client.get(`/api/posts?${queryString}`);
};

• 요청시에는 /api/posts?username=tester&page=2와 같이 주소를 호출
• redux 모듈은 modules/posts.js에 생성
• modules/index.js에 만든 리듀서와 saga를 등록
• containers/posts/PostListContainer.js를 생성
• 기존 pages/PostListPage.js에 Container로 변경
• components/posts/PostList.js에 props 결과를 보여주도록 수정

Server

sanitize-html 을 추가

yarn add sanitize-html

mongoose

• mongoose는 node.js 환경에서 사용하는 라이브러리
• ODM (Object Data Modeling)

dotenv

• 환경변수들을 파일에 넣고 사용할 수 있게 하는 개발 도구
• mongoose를 사용해서 id/password를 스크립트에 작성하지 않고 환경병수로 관리.env

yarn add mongoose dotenv

ROOT에 .env 파일 생성

PORT=4000
MONGO_URI=mongodb://localhost:27017/<database>

src/index.js

require('dotenv').config();
(...)
const { PORT } = process.env;
(...)
const port = PORT || 4000;
app.listen(port, () => {
  console.log('Listening to port %s', port);
});

• 만약 nodedemon으로 자동 재시작을 하고 있다면, .env의 파일을 변경해도 재시작을 하지 않으니 수동으로 재시작

mongoose로 서버와 데이터베이스 연결

(...) 
const { PORT, MONGO_URI } = process.env;
(...)

 mongoose
  .connect(MONGO_URI, { useNewUrlParser: true, useFindAndModify: false })
  .then(() => {
    console.log('Connected to MongoDB');
  })
  .catch(e => {
    console.error(e);
  });

• 화면에 Connected to MongoDB가 출력되면 연결 완료.

코드를 수정하고 반영하기 위해서는 서버를 재시작을 해야하는데 nodemon을 이용하면 코드를 변경할때마다 자동으로 서버를 재시작을 해준다. yarn을 통해 설치가 가능하다

$ yarn add --dev nodemon

• 패키지를 설치한 이후에는 package.json에 아래와 같이 추가

{
  (...)
  ,
  "scripts": {
    "start": "node src",
    "start:dev": "nodemon --watch src/ src/index.js"
  }
}

서버시작하기

$ yarn start # 재시작이 필요 없을때
$ yarn start:dev # 코드 변경시 재시작 하도록

const Koa = require('koa');

const app = new Koa();

app.use(ctx => {
  ctx.body = 'hello word';
});

app.listen(4000, () => {
  console.log('Listening to port 4000');
});

$ node src

미들웨어

• Koa App은 미들웨어의 배열로 구성
• app.use 함수를 이용해 미들웨어 함수를 app에 등록
• 파라미터 ctx는 조금 전에 사용한, 두번째 파라미터는 next
• ctx는 Context의 줄임말
  • 웹요청과 응담에 대한 정보
• next는 현재 처리중인 미들웨어의 다음 미들웨어를 호출하는 함수
  • next 함수를 호출하지 않으면 다음 미들웨어 처리를 하지 않음

const Koa = require('koa');

const app = new Koa();

app.use((ctx, next) => {
  console.log(ctx);
  console.log(1);
  next();
});

app.use((ctx, next) => {
  console.log(2);
  next();
});

app.use(ctx => {
  ctx.body = 'hello world';
});

app.listen(4000, () => {
  console.log('Listening to port 4000');
});

• next를 중간에 뺀다면 그 이후의 미들웨어는 모두 무시
• 특정 조건으로 미들웨어를 처리하도록 가능

app.use((ctx, next) => {
  console.log(ctx);
  console.log(1);
  if (ctx.query.authorized !== '1') {
    ctx.status = 401; // Unauthorrized
    return;
  }
  next();
});

• http://localhost:4000/?authorized=1로 조회해야지만 hello world의 결과가 나옴
• 웹 요청의 쿠키 혹은 헤더를 통해 처리가 가능
• next 함수는 Promise를 반환
  • Express와 차별되는 부분
  • next 함수가 반환하는 Promise는 다음에 처리해야하는 미들웨어가 끝나야 완료

node 프로젝트 시작하기 전에 아래와 같이 환경을 구성하고 구현하자

yarn init -y  
yarn add koa  
yarn add --dev eslint  // dev는 개발용 의존 모듈로 설치, package.json에서 dev dependencies 쪽이 모듈의 버전 입력
yarn run eslint --init // javascript 문법 검사, 깔끔한 코드 작성

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

을 추가하고 Prettier에서 관리하는 코드 스타일은 ESLint에서 관리하지 않도록 설치

$ yarn add eslint-config-prettier 

.eslintrc.json의 파일은 아래와 같이 설정

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": ["eslint:recommended", "prettier"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "no-unused-vars": "warn", // 설정하지 않으면 사용하지 않는 변수에 대해서 Error
    "no-console": "off" // console.log를 사용하는것을 지양함.
  }
}