20200911

오늘은 프로젝트 시작에 앞서 기획이 좀 변경하게 되어 와이어프레임과 db 설계를 변경하게 되었다. 

어제 일정을 관리하기 위해 notion에서 찾아본 템플릿이 좋아 보여 그 템플릿을 바탕으로 기획을 수정하기로 결정했다. 

 

이 템플릿이다. 1주일 단위로 todo를 관리할 수 있도록 되어있다. 

그래서 크롬 확장 프로그램의 뷰는 

이렇게 구성될거 같다 (완전히 따라 하지는 않을 것이다)

이렇게 된다면 하루 동안 해야 되는 Todo,  그리고 일정 이렇게 변경된다. 

 

그래서 이 템플릿을 변경하여 크롬 확장 파일의 화면 구성을 생각해보았다

비율은 안 맞지만 이렇게 진행하려 한다. 

토글을 사용하여 (html의 detail을 사용) 보고 싶은 것들을 위주로 볼 수 있게 구성하려고 한다. 

이 일정관리 앱의 핵심은 Todo를 관리하는 방향으로 나가려 한다. 

 

상단부터 오늘의 날짜. 그리고 이 날짜를 이동하면 해당하는 날짜의 일정을 볼 수 있다.

Most IMportant Tasks는 꼭 해야 되는 Todo를 의미한다. 어디서 가지고 온 Todo인지 볼 수 있도록 한다. 이 순서도 변경할 수 있도록 한다. (drag & drop, 우선순위 변경)

Schedules는 일정을 의미한다. 하루가 넘어가는 일정은 해당 기간 동안 상단에 이름만 표시한다. 만약 이 일정이 Todo를 가지고 있으면 이 역시 토글 방식으로 생성한다. drag drop으로 순서를 변경할 수 있다. 

하루 동안 진행되는 일과는 좌측에 시작시간, 끝 시간이 표시되고, 우측에 일정의 이름이 표시된다. 이것 역시 Todo를 가지고 있으면 토글 방식으로 생성한다. 

Schedules와 하루의 일정을 클릭하면 세부사항을 볼 수 있고, 수정 버튼, 삭제 버튼이 있다. 

Todo는 정해진 시간은 없지만 오늘 내에 해야 되는 일을 나타낸다. 

Note는 메모해야 되는 메모사항을 작성할 수 있다. (Mark down을 사용할 수 있다.)

구글 캘린더를 연동할 수 있다. 

아사나를 연동할 수 있다. 

 

위와 같이 요구사항을 만들어주었다. 

확실히 좀 더 프로젝트가 명확해지는 느낌이 들었다

 

이제는 변경된 내용에 맞게 스키마를 변경해주었다. 

이제 이 스키마대로 typescript와 sequelize를 이용하여 DB를 만들어주려 했지만 어제 찾은 블로그로는 충분치 않아 다른 자료를 찾아보게 되었고 

github.com/RobinBuschmann/sequelize-typescript

RobinBuschmann/sequelize-typescript

이 Github 레포를 찾게 되었다. 

 

따라서 진행해보느라 블로그를 작성하면서 진행한다는 사실을 잊어버렸다...

 

각 테이블마다 폴더를 만들어서 그 안에 모델들을 정의하고 있다. 

sequelize-typescript는 클래스를 정의하는 방식으로 모델을 정의하기 때문에 직관적이다. 

현재는 각 모델들을 정의해주고 각 테이블마다 관계를 코드로 나타내고 있다. 

하지만 잘 안된다... 

 

일단 각 모델들의 코드는 아래와 같다 (관계는 연결하지 X)

/**
 * 유저 정보 테이블에 관한 코드
 * id: int pri  // -> Model에서 상속받아 사용하는 경우 없어도 됨
 * name: varchar //이름
 * google_id: varchar    //구글 아이디
 * keycode: varchar  //구글 고유 코드
 */
import {Model, Table, Column, HasMany} from 'sequelize-typescript';

@Table({
    timestamps: false,  //createdAt updatedAt은 사용하지 않음
})
class User extends Model<User> {
    @Column name!: string;
    @Column google_id!: string;
    @Column keycode!: string;
} 

/**
 * Todo에 관한 테이블
 * user_id: int <- users(id)
 * parent: int <- scheduels(id) or milestones(id)
 * name: varchar
 * memo: varchar
 * is_important: boolean
 * is_done: boolean
 * priority: int
 */
import {Model, Table, Column, HasMany} from 'sequelize-typescript';

@Table({
    timestamps: false,  //createdAt updatedAt은 사용하지 않음
})
class Todo extends Model<Todo> {
    @Column user_id!: number;
    @Column parent!: number; 
    @Column name!: string;
    @Column memo!: string;
    @Column is_important!: boolean;
    @Column is_done!: boolean;
    @Column priority!: number;
} 

/**
 * schedules 관한 테이블
 * user_id: int <- users(id)
 * name: varchar
 * memo: varchar
 * start: varchar
 * end: varchar
 */
import {Model, Table, Column, HasMany} from 'sequelize-typescript';

@Table({
    timestamps: false,  //createdAt updatedAt은 사용하지 않음
})
class Schedule extends Model<Schedule> {
    @Column user_id!: number;
    @Column name!: string;
    @Column memo!: string;
    @Column start!: string;
    @Column end!: string;
} 

/**
 * milestone 관한 테이블
 * user_id: int <- users(id)
 * name: varchar
 * memo: varchar
 * start: varchar
 * end: varchar
 * priority: int
 */
import {Model, Table, Column, HasMany} from 'sequelize-typescript';

@Table({
    timestamps: false,  //createdAt updatedAt은 사용하지 않음
})
class Milestone extends Model<Milestone> {
    @Column user_id!: number;
    @Column name!: string;
    @Column memo!: string;
    @Column start!: string;
    @Column end!: string;
    @Column priority!: number;
} 

각 테이블의 관계는 다음에 이어서 하기로 했다. (시간도 좀 늦었고, 좀 더 알아봐야겠다.)