웹에서 구동하는 sails 프로젝트 예제입니다. 내용이 길어질 거 같아 여러번의 포스팅으로 나눠서 올릴 예정입니다. 저 같이 처음 sails접하시는 분들에게 도움이 되었으면 좋겠습니다.
Sails’js 프로젝트 생성
프로젝트명을 kails(k+sails)라 했다. 딱히 생각나는 이름이 없었다. ;(
sails new kails |
완료 메시지가 뜨고 kails라는 디렉토리가 생성되었다. 디렉토리 구조를 보면 아래와 같다.
centumpark-MacBook-Pro:kails:% tree -d -L 2 . ├── api │ ├── controllers │ ├── models │ ├── policies │ ├── responses │ └── services ├── assets │ ├── images │ ├── js │ ├── styles │ └── templates ├── config │ ├── env │ └── locales ├── node_modules │ ├── ejs -> /usr/local/lib/node_modules/sails/node_modules/ejs │ ├── grunt -> /usr/local/lib/node_modules/sails/node_modules/grunt │ ├── grunt-contrib-clean -> /usr/local/lib/node_modules/sails/node_modules/grunt-contrib-clean │ ├── grunt-contrib-coffee -> /usr/local/lib/node_modules/sails/node_modules/grunt-contrib-coffee │ ├── grunt-contrib-concat -> /usr/local/lib/node_modules/sails/node_modules/grunt-contrib-concat │ ├── grunt-contrib-copy -> /usr/local/lib/node_modules/sails/node_modules/grunt-contrib-copy │ ├── grunt-contrib-cssmin -> /usr/local/lib/node_modules/sails/node_modules/grunt-contrib-cssmin │ ├── grunt-contrib-jst -> /usr/local/lib/node_modules/sails/node_modules/grunt-contrib-jst │ ├── grunt-contrib-less -> /usr/local/lib/node_modules/sails/node_modules/grunt-contrib-less │ ├── grunt-contrib-uglify -> /usr/local/lib/node_modules/sails/node_modules/grunt-contrib-uglify │ ├── grunt-contrib-watch -> /usr/local/lib/node_modules/sails/node_modules/grunt-contrib-watch │ ├── grunt-sails-linker -> /usr/local/lib/node_modules/sails/node_modules/grunt-sails-linker │ ├── grunt-sync -> /usr/local/lib/node_modules/sails/node_modules/grunt-sync │ ├── include-all -> /usr/local/lib/node_modules/sails/node_modules/include-all │ ├── rc -> /usr/local/lib/node_modules/sails/node_modules/rc │ ├── sails -> /usr/local/lib/node_modules/sails │ └── sails-disk -> /usr/local/lib/node_modules/sails/node_modules/sails-disk ├── tasks │ ├── config │ └── register └── views 36 directories |
크게 프로젝트 설정 파일들이 모여 있는 config, 실제 비지니스/모델/라우팅 부분인 api, 프로젝트의 스태틱 리소스가 위치하는 assets, 그리고 화면 뷰 영역 파일(Sails.js에서는 EJS를 기본 포맷으로 사용 한다.)이 위치하는 views가 있다.
데이터베이스 연결이 준비되지 않았을 경우에도 기본으로 sails-disk라는 데이터베이스 어댑터를 이용해서 자체 제공하는 파일 기반 데이터베이스를 사용할 수 있다. config/connections.js파일을 열어보면 어댑터를 설정할 수 있고 개발/운영 모드에 따라서 별 개의 데이터베이스를 설정할 수 있다. 그리고 sails-disk(local disk storage)는 개발모드에서만 사용해야 한다. 실제 서비스용으로 사용하기에는 무리가 크다.
config/models.js 아래 2라인을 찾아서 주석을 해제 한다.connection: 'localDiskDb',
migrate: 'alter'
sails 프로젝트를 기동할 시에 데이터베이스 migration 되는데 migrate옵션은 총 3가지다.
- safe : 마이그레이션 하지 않음. 사용자가 직접 데이터베이스를 수정해야 한다.
- alter : 기존에 생성된 데이터는 두고 sails에서 자동으로 마이그레이션.(완벽하지 않음)
- drop : 스키마/데이터 모두 삭제하고 다시 생성.
sails프로젝트를 운영모두로 기동할 경우에는 safe만 가능 하고 개발모드에서 3가지 모두 사용할 수 있다.
env/development.js에서 연결 정보를 local disk storage로 설정 한다.module.exports = {
models: {
connection: 'localDiskDb'
}
};
이젠 프로젝트를 기동해 보자.
centumpark-MacBook-Pro:kails:% sails lift |
터미널 로그에 돛단배가 보이고 http://localhost:1337 로 접속해서 안내 페이지가 뜨면 정상적으로 sails를 lift한 것이다.
사용자(User) 모델 추가
로그인 행위를 할 사용자에 대한 모델을 추가해보자.sails generate api user
api/controllers/UserController.jsapi/models/User.js
2개의 파일을 추가 되었다. 사용자(User)모델이 로그인을 하기 위해 필요한 속성인 email주소와 password를 추가해 보자.
User.jsmodule.exports = {
attributes: {
email : {
type : 'email',
requird : true,
unique : true
},
passowrd : {
type : 'string',
required : true,
minLength : 6
}
}
};
수정 후에 sails를 기동할 시에 migrate작업이 수행되면서 실제 되면서 mysql의 경우에는 실제 테이블이 생성 된다.
부트스트랩 테마 화면 구성
sails에서 프론트엔드로 사용될 웹페이지(화면)을 구성해 볼려고 한다. 퍼블리싱을 못하는 이유로 쉽게 카피해서 사용할 수 있는 Bootstrap 기반의 Bootswatch의 Simplex테마를 사용하기로 했다.
2편에서 다시 만나요!