[인프런 강의] zerocho Slack 클론 코딩 (1) - 기본 세팅

인프런의 slack 클론 코딩

 

https://www.inflearn.com/course/slack클론코딩

Slack 클론 코딩[실시간 채팅 with React] - 인프런 | 강의

 

최근에 인프런에서 강의를 결제하였다. 프론트엔드 개발자로 유명한 zerocho님의 강의이다.

Slack 클론 코딩을 따라 해 보며 정리를 하려고 한다.

 

개발 환경은

프론트 엔드 : React

백엔드 : nest , typeorm

 

강의는 프론트엔드부분을 먼저 완료하고, 백엔드 부분을 구현한다.

프론트엔드는 Redux 대신 swr을 사용한다.

 

 

강의는 https://github.com/zerocho/sleact 에서 git clone을 사용해 진행한다.

프론트엔드 강의이기 때문에 백엔드는 이미 만들어져 있다 가정을 하고 진행한다.

 

---

backend - 기본 세팅

 

1. 우선 백엔드를 실행해야 하기 때문에 받은 소스에서 back폴더로 이동하여 npm i로 설치를 진행한다.

 

 

나는 npm i를  진행하였더니 다음과 같은 오류가 나왔다.

 

/d /s /c node-gyp rebuild 키워드로 검색해보니

npm update --force 이후 npm install을 진행하면 된다고 하였다.

실제로 그렇게 설치하니 설치가 되었다.

 

 

2. back 폴더 안에. env 파일을 만들고 다음과 같이 작성하면 된다.

 

.env

COOKIE_SECRET=sleackcookie
MYSQL_PASSWORD=[mysql 패스워드]

 

mysql_password는 자신의 컴퓨터의 mysql 패스워드를 입력하면 된다.

mysql과 node 가 기본적으로 설치되어 있어야 한다.

 

config.js  파일을보면

//config.js

require('dotenv').config();

module.exports = {
  "development": {
    "username": "root",
    "password": process.env.MYSQL_PASSWORD,
    "database": "sleact",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "test": {
    "username": "root",
    "password": process.env.MYSQL_PASSWORD,
    "database": "sleact",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "production": {
    "username": "root",
    "password": process.env.MYSQL_PASSWORD,
    "database": "sleact",
    "host": "127.0.0.1",
    "dialect": "mysql"
  }
}

process.env.MYSQL_PASSWORD 이 부분에 .env 파일에 설정한 값이 들어가게 된다.

 

3. 반드시 back 폴더 디렉토리에서 다음과 같은 명령어를 쳐준다.

 

npx sequelize db:create

이 명령어를 사용하면 mysql안에 sequelize 라는 데이터베이스가 생성된다.

 

4. npm run dev 명령어로 실행하면 'DB 연결 성공' 이라는 문구가 뜨게된다.

 

5. 현재 터미널에서 작업을 종료 한 후 다음의 명령어를 입력한다.

 

npx sequelize db:seed:all

이 명령어는 seeders 폴더에 있는 .js 파일을 보면 

 

20201019065847-sleact.js 

"use strict";

module.exports = {
  up: async (queryInterface, Sequelize) => {
    /**
     * Add seed commands here.
     *
     * Example:
     * await queryInterface.bulkInsert('People', [{
     *   name: 'John Doe',
     *   isBetaMember: false
     * }], {});
     */
    await queryInterface.bulkInsert("workspaces", [
      {
        id: 1,
        name: "Sleact",
        url: "sleact",
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ]);
    await queryInterface.bulkInsert("channels", [
      {
        id: 1,
        name: "일반",
        private: false,
        createdAt: new Date(),
        updatedAt: new Date(),
        WorkspaceId: 1,
      },
    ]);
  },

  down: async (queryInterface, Sequelize) => {
    /**
     * Add commands to revert seed here.
     *
     * Example:
     * await queryInterface.bulkDelete('People', null, {});
     */
  },
};

workspace와 channels이 있다. 이들을 기본적으로 만들어 주는 것이 seed라는 명령어이다.

 

명령어를 입력하면 seed가 만들어진다.

 

6. npm run dev 명령어로 다시 실행한다.

 

아까 실행 했던 npm run dev는 db를 만들어주기 위해 하였고, 지금은 backend 서버를 실행하기 위해 실행한다.

 

7. http://localhost:3095 로 접속해본다.

 

로그인화면이 제대로 나온다면 backend 서버가 잘 구동이 되어있는것이다.

 

다음과 같은 화면이 보여지면 백엔드가 잘 구동된 것이다.

 

 

 

출처 : 슬랙 클론 코딩 zerocho
https://www.inflearn.com/course/클론코딩-실시간채팅