[shortly-mvc] Sequelize와 mvc의 이해

https://sequelize.org/
📍 공식 문서를 통해 스프린트를 진행한다.
📍 공식 문서 읽는 법을 익힌다.

완성된 urls 테이블의 스키마

mysql> describe urls;
+-----------+--------------+------+-----+---------+----------------+
| Field     | Type         | Null | Key | Default | Extra          |
+-----------+--------------+------+-----+---------+----------------+
| id        | int          | NO   | PRI | NULL    | auto_increment |
| url       | varchar(255) | YES  |     | NULL    |                |
| title     | varchar(255) | YES  |     | NULL    |                |
| visits    | int          | YES  |     | NULL    |                |
| createdAt | datetime     | NO   |     | NULL    |                |
| updatedAt | datetime     | NO   |     | NULL    |                |
+-----------+--------------+------+-----+---------+----------------+

Part 1 - Sequelize 및 CLI 도구 이용

이번 스프린트는 bitly 처럼 긴 url을 짧게 축약해주는 사이트의 로직에 대해서 학습한다.

urls 라는 테이블을 만들어, 원본 URL과 단축 URL의 방문 횟수를 기록한다. SQL문이 아닌 ORM을 이용해 아래와 같은 테이블을 만든다.

사전 준비: sequelize 및 sequelize-cli 설치

 🚀 (1-1) ORM 설정
    ✓ cli를 통해 필요한 파일이 자동으로 만들어졌는지 확인합니다
    ✓ model/index.js 파일이 유효한지 확인합니다
Executing (default): SELECT 1+1 AS result
    ✓ mysql에 접속할 수 있는지 확인합니다 (140ms)

1. sequelize 설치

sequelize는 promise 기반의 Node.js ORM으로서 우리가 쓰는 MySQL을 위한 프로그램이다. ORM은 Object Relational Mapping의 약자로 객체 지향 언어에서 관계형 데이터베이스에 접근할 수 있도록 도와주는 중간 다리 역할로 보면된다. 쉽게 말해 데이터 베이스와 소통할 수 있게 해준다.

명령어 : npm i sequelize

2. sequelize-cli 설치

sequelize-cli가 마이그레이션을 할 수 있도록 돕는 툴로, CLI에서 모델을 생성해주거나, 스키마 적용을 할 수 있도록 돕는다고 한다. 공식문서를 통해 좀 더 살펴보자.

마이그레이션은 Git과 같은 버전 컨트롤 시스템처럼 데이터베이스의 변경 사항을 추적하고 알 수 있게 한다. 또한 마이그레이션은 자바스크립트 파일로서 두 개의 함수를 밖으로 내보내는데 하나는 마이그레이션을 수행하는 up이고, 다른 하나는 마이그레이션 실행을 취소하는 down이다.

명령어 : npm i —save-dev sequelize-cli

Project bootstrapping

1. Bootstrapping (초기 단계 설정)

cli를 통해 ORM을 잘 사용할 수 있도록 bootstraping(프로젝트 초기 단계를 자동으로 설정할 수 있도록 도와주는 일)을 해줘야 한다.

빈 프로젝트를 만드는 명령어 : npx sequelize-cli init

이 명령어를 사용하면 다음과 같은 폴더가 만들어진다.

1) config : 데이터베이스에 연결하는 방법을 CLI에 알려주는 구성 파일이 포함되어 있습니다.
2) models : 프로젝트의 모든 모델을 포함합니다.
3) migrations : 모든 마이그레이션 파일 포함
4) seeders : 모든 시드 파일을 포함합니다.

2. Configuration

먼저 cli와 데이터베이스를 연결하는 방법을 알아야 한다.
config/config.json 파일을 열면 다음과 같이 보인다.

{
  "development": {
    "username": "root",
    "password": null,
    "database": "database_development",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "test": {
    "username": "root",
    "password": null,
    "database": "database_test",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "production": {
    "username": "root",
    "password": null,
    "database": "database_production",
    "host": "127.0.0.1",
    "dialect": "mysql"
  }
}

3개의 데이터베이스가 존재하는데 각각 개발, 테스트, 배포용이라는 의미를 가지고 있다. 우리는 기본적으로 development 즉, 개발용 데이터베이스를 쓰고 있는데 models 폴더의 index.js 파일을 보면 알 수 있다.

const env = process.env.NODE_ENV || 'development';

변수 env는 다른 값이 주어지지 않으면 기본 값으로 'development'를 가지고 있다. 따라서 우리가 여기서 다른 데이터베이스를 선택하지 않으면 기본 값인 'development'가 설정이 된다.

다시 config.json 파일로 돌아와서 데이터베이스 명과 비밀번호를 입력해 주었다. 참고로 데이터베이스가 아직 존재하지 않는 경우 db:create명령을 호출하면 된다. 적절한 액세스가 있으면 해당 데이터베이스가 생성된다.

Creating the first Model (and Migration)

1. 모델 생성

CLI config file을 제대로 설정하였다면 이제 첫 모델과 마이그레이션을 생성해야 한다.

모델 생성
  ✓ url 모델이 존재해야 합니다
  ✓ url 모델은 요구하는 필드를 갖고 있어야 합니다
  ✓ url 모델의 각 필드는 정해진 타입으로 생성되어야 합니다
  ✓ url 모델의 visits 필드는 기본값이 0이어야 합니다

테스트 케이스에 맞게 작성해준다.

model:generate명령어를 통해 생성할 수 있다.

• url, title, visits 필드를 생성해야 합니다.
• id, createdAt, updatedAt 필드는 자동으로 생성됩니다.

완성된 urls 테이블의 스키마를 보면 필요한 필드 이름과 속성을 알 수 있고, 어떻게 적어야 하는지는 공식 문서를 참고하였다.

npx sequelize-cli model:generate --name url --attributes url:string,title:string,visits:integer

migrations와 models 폴더에도 각 파일이 잘 생성된 것을 확인할 수 있다.

model name

이때 중요한 점은 모델 명을 단수로 표기한다. 마이그레이션 후에는 알아서 복수로 바뀌기 때문이다.

밑의 테스트 케이스가 있는데

✓ 마이그레이션을 했다면, urls 테이블이 존재해야 합니다 (87ms)

실제로 모델명을 url로 정해서 생성해주면, 마이그레이션 파일에서 자동으로 urls로 바뀌어 작성되어 있는 걸 확인할 수 있다.

2. 마이그레이션/모델 파일의 값 설정

• 필드가 가지는 특별한 요구사항(기본값 등)은 모델 파일을 직접 수정해서 정의해야 합니다.

테스트 케이스의 조건에 url 모델의 visits 필드는 기본값이 0이어야 한다. 어디서 값을 정해줘야 하냐면, 마이그레이션 폴더가 아니라 모델의 실제 데이터가 담겨있는 모델 폴더에서 입력해줘야 한다. 그래서 models의 url.js 파일에 들어가서 visits 값에 defaultValue를 추가해준다. 그리고 실제로도 유어클래스에 써져있다.

공식 문서를 보고 이렇게 수정했는데 나는 처음에 단순히

url<.init({
	... : ...,
	visits : DataTypes.INTEGER,
  	defaultValue:0
	}, ...)

라고 적었다. 그랬더니 통과가 되지 않았다.

Q. 왜 속성값을 객체로 묶어줘야 할까?
A. 객체로 묶어주지 않고 밖에 빼면 그 친구가 visit을 위한 친구인지 어떻게 알 수 있을까? defaultValue라는 이름의 컬럼으로 인식하지 않을까?

Q. 왜 배열이 아니고 굳이 객체인가?
A. []은 문자열 키를 가질수 있나?

3. 모델과 마이그레이션은 어떻게 다를까?

시퀄라이즈로 모델을 생성하면 마이그레이션이 생긴다. 마이그레이션은 데이터베이스의 설계도(스키마 디자인같은)라고 생각하면 된다. 그럼 마이그레이션만 필요하지 않을까? 왜 모델까지 만드는 걸까?

자바스크립트 문법에서 DB에서 정보를 가져오거나 추가하거나 삭제하는 로직을 작성해야 되는데(DB를 컨트롤할 수 있는 문법) 그걸 사용할 수 있게 모델이 매개체가 되는 것이다. 따라서 모델은 데이터 베이스랑 관련된 로직을 자바스크립트 언어로 처리하는 곳이라고 볼 수 있다.

4. Running Migration

npx sequelize-cli db:migrate
마이그레이션에 있는 크레이트 테이블을 실행한다. 이걸 하기 전 데이터베이스에는 아무것도 없다. 러닝 마이그레이션을 하게 되면 데이터 베이스에 테이블이 생성된다. 즉, 마이그레이션을 실행시켜야 실제로 데이터베이스에 테이블 데이터가 들어가는 것이다. 이미 모델 파일이 만들어져있다면 running migration을 해서 데이터 베이스와 연결해준다.

Part 2 - MVC 이해와 Controller 작성

데이터베이스의 준비가 완료되었으니, MVC 패턴을 적용하여 Short.ly의 백엔드 부분을 완성합시다. 라고 한다.

  🚀 (2-3) controller 구현
    5) POST /links은 url을 받아 단축 url로 만듭니다
    6) GET /links는 urls 테이블의 목록을 JSON의 형태로 반환합니다
    7) GET /links/:id 을 요청하면 url 필드값으로 리디렉션합니다
    8) GET /links/:id 을 요청하면, 해당 레코드의 visit count가 1 증가해야 합니다

MVC

브라우저는 뷰랑 소통을 해서 파싱한 후 사용자한테 뷰를 보여준다.
어떻게 동작하는 걸까?

먼저, 브라우저에 이벤트가 발생하면 서버에 요청을 한다. 이때 라우터를 먼저 거친다. 그 후 라우팅 된 요청들이 컨트롤러를 통해서 흘러간다. 이 컨트롤러는 이제 데이터 베이스와 연결이 되어야하기 때문에, 데이터 베이스랑 관련된 로직을 처리하는 곳인 모델(DB와 소통 = sequelize ORM)과 소통을 한다.

Controller 작성 및 Router 연결

  🚀 (2-1) controller 작성
    1) links controller 파일이 존재해야 합니다
    2) links controller에는 get, post 메소드가 각각 존재해야 합니다
    
================================================================================

  🚀 (2-2) router 연결
    3) "before all" hook for "POST /links는 links controller의 post 메소드를 실행합니다"
    4) "after all" hook for "GET /links는 links controller의 get 메소드를 실행합니다"

테스트 케이스 파일을 보고, controllers 폴더 안에 links 폴더가 있어야 하고 그 안에 index.js파일을 작성해야 된다는 걸 파악했다. 폴더와 파일 생성 후 get, post 메소드를 추가해줬다. router를 연결해주기 위해서 export해준 후 links 폴더에서 import해주고 테스트 케이스에 맞게 연결해주었다.

controller 구현

  🚀 (2-3) controller 구현
    5) POST /links은 url을 받아 단축 url로 만듭니다
    6) GET /links는 urls 테이블의 목록을 JSON의 형태로 반환합니다
    7) GET /links/:id 을 요청하면 url 필드값으로 리디렉션합니다
    8) GET /links/:id 을 요청하면, 해당 레코드의 visit count가 1 증가해야 합니다

controller 로직

bitly
긴 url을 짧게 축약해주는 사이트! 리다이렉트를 통해 연결
1. 줄이고 싶은 URL을 넣는다.
2. Shorten을 누른다
3. 축약된 링크가 생성된다
4. 해당 링크를 누르면 원본 URL로 이동한다

POST links 컨트롤러 로직
1. URL을 포스트 요청으로 받는다 { url :codestate.com}
2. 요청에 있는 주소를 db에 레코드로 생성
3. 2-1) 코드스테이츠 url이 저장
4. 2-2) url에 id가 저장 -> get 요청에 쓰임
5. 2-3) 홈페이지에 타이틀이 저장
6. 2-4) 방문 횟수가 저장(visits필드)-> 누군가 리다이렉트 할 때마다 업데이트가 된다
7. 만약 이미 존재하는 url이라면 그냥 넘어간다

GET links/:id 컨트롤러 로직
1. Links/1 get 요청이 오면 레코드를 생성하는 게 아니라 레코드를 조회한다 (id를 가지고)
2. 해당 레코드 url을 컨트롤러에서 리다이렉트 시킴
3. 그리고 visits 필드 값을 1 추가