20200910

프로젝트의 아이콘을 추가해주었다. 

thenounproject.com/

Noun Project

위 사이트에서 받아온 아이콘이다. 

간단하고 깔끔한, 저작권 상관없는 아이콘이 필요하면 사용하는 사이트이다. (생활코딩 크롬 확장프로그램 수업을 통해 알게되었다)

 

오늘은 어제에 이어서 DB의 스키마를 작성하기 시작했다. 

사용한 툴은 dbdiagram.io/home 

dbdiagram.io - Database Relationship Diagrams Design Tool

요  사이트를 이용하여 DB의 스키마를 작성해주었다. 

간단한 코드로 깔끔하게 스키마를 만들수 있어 자주 사용하는 사이트이다. 

 

 

만들어본 스키마이다 (변경될 가능성이 상당히 많다)

유저의 정보는 구글 소셜 로그인만 사용하여 받을 예정이므로 저렇게 만들어주었다. 

가장 많이 고민한 것은 일정을 저장하는 schedules이다. 

 

원래는 (리뉴얼 전 2주 프로젝트 당시) 년, 월, 주, 일 별로 일정이 다 나뉘어 있었고 년, 월, 주 는 목표로 취급해줬었다. 일정은 하루 단위로 있는 일정만을 의미했었다. 

지금은 그렇게 하지 않고 어떤 기간으로 설정하든 상관없이 일정으로 저장하게 되었다. 

위에서부터, 일정의 고유 아이디, 해당 일정 주인의 아이디(DB기준), 만약 이 일정이 이미 있는 일정의 세부 일정인 경우 그 부모 일정의 아이디(역시 DB의 아이디), name은 일정의 이름, memo는 일정에 기록하고 싶은 사항, start는 일정의 시작 시간, end는 일정의 끝 시간, isdone은 일정의 완료 여부를 나타낸다. (쿼리문 작성이 두려워진다..)

 

start와 end를 varchar로 설정한 이유는 sequelize를 통해 db를 생성하는 경우 datetime에 대해서 핸들링하기가 상당히 까다롭기 때문이다. (이 때문에 2주차 당시에도 varchar로 사용해주었다.) 저장되는 형식은 2020년 9월 10일 10시 30분 -> 2020 09 10 10:30 처럼 저장될 예정이다. 

 

스키마를 작성했으니 이제는 sequelize를 사용하여 본격적으로 프로젝트를 시작했다. 

sequelize는 시작할 때 한번은 보는 (아직 익숙치 않아서...) 블로그 글이 있다.

medium.com/graphql-seoul/%EB%B2%88%EC%97%AD-%EB%A7%88%EC%9D%B4%EA%B7%B8%EB%A0%88%EC%9D%B4%EC%85%98%EA%B3%BC-sequelize-cli-%ED%8A%9C%ED%86%A0%EB%A6%AC%EC%96%BC-3926c0a9eae6

[번역] 마이그레이션과 Sequelize-CLI 튜토리얼

정말 따라만 하면 seqeulize로 쉽게(?) DB를 제작할 수 있다.

 

하지만 이번 프로젝트의 목적중 하나가 typescript를 사용해 보는 것이기 때문에 sequelize역시 typescript로 작성할 수 있는지 확인이 필요했다.

sequelize.org/master/manual/typescript.html

Manual | Sequelize

정말 있었다... 

 

그러므로 일단 typescript와 express의 기본적인 세팅을 완료하기로했다.

velog.io/@devzunky/TIL-no.91-TypeScript%EB%A1%9C-Express-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-zdk3x0xq0v

TIL no.91 - TypeScript로 Express 시작하기

이 블로그를 따라서 기본 세팅을 해봤다.

express서버를 typescript로 해본것은 처음이라 낫설었다. 

모듈을 express만 받는게 아닌 @types/express도 받는게 신기했다. 

위 블로그대로 해보니 바로 될 줄 알았지만 에러가 발생했다. 

stackoverflow.com/questions/53142239/typescript-express-type-typeof-e-has-no-compatible-call-signatures

Typescript + Express : Type 'typeof e' has no compatible call signatures

import 부분을 수정해주었더니 정상적으로 작동되는 모습을 확인할 수 있었다.

// import * as express from 'express'
import express from "express";
const app = express();

app.get('/', (req: express.Request, res: express.Response) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

실행시켰을 때 화면

여기서 의문이 하나 들었다.

github로 push할 때 빌드한 파일도 넣어야 하는 건가? (dist 안의 js파일)

다른 사례를 찾아보니 빌드한 파일은 .gitignore에 넣어서 push를 하지 않는 경우를 찾았다. 

package.json에 npm start 명령을 하면 자동으로 빌드되는 파일이 생기므로 .gitignore에 넣어도 무방할 것으로 보인다. 

 

express와 typescript의 기본적인 세팅이 끝났으니 이제 sequelize 차례다.

공식문서를 보며 따라하기를 시도해봤지만 공식문서가 잘 이해되지 않았다. (일단 sequelize는 typescript 3.1d이상 버전부터 지원한다는 것은 이해했다. @types/sequelize를 받지 않아도 된다는 것도 이해했다. 근데 그 이후 갑자기 코드만 적혀있다. 역시 seqeulize...)

 

kimsejune.github.io/2019/02/27/ts-connect-sequelize/

TypeScript Connect Sequelize

좋은 블로그를 찾아서 올렸다. 

이 블로그를 따라서 seqeulize를 typescript로 만들고 있는 중이다. 나머지는 내일 이어서 (생각보다 시간이 늦어서...)

 

일단 오늘은 seqeulize의 config.ts만 작성해주었다.

module.exports = {
  development: {
    username: 'root',
    password: process.env.DATABASE_DEV_PASSWORD,
    database: 'dldev',
    host: '127.0.0.1',
    dialect: 'mysql',
    logging: false,
    define: {
      underscored: false
    },
  },
  test: {
    username: 'root',
    password: process.env.DATABASE_TEST_PASSWORD,
    database: 'dltest',
    host: '127.0.0.1',
    dialect: 'mysql',
    logging: false,
    define: {
      underscored: false
    },
  },
  production: {
    username: 'root',
    password: process.env.DATABASE_PROD_PASSWORD,
    database: 'dlprod',
    host: '127.0.0.1',
    dialect: 'mysql',
    logging: false,
    define: {
      underscored: false
    },
  },
}

원래 typescript를 사용하지 않고 작성했을 때와 같아서 바로 작업해주었다. (공식문서에는 config.ts같은거 없던데...)