front-end development with ruby on rails
TRANSCRIPT
Front-end Development with
Ruby on Rails
fallroot @ LEZHIN Entertainment
문추근 秋根
@fallroot
레진엔터테인먼트
프론트엔드 개발자
DRYDon't Repeat Yourself
Grunt Gulp
레진코믹스
2013. 4. 20 개발 시작
2013. 6. 7 서비스 오픈
레진코믹스
• 하이브리드 앱
• 폰갭 적용 전 마크업, 스크립트 작업
• Grunt, Gulp 등의 도구를 널리 쓰기 전
• 백엔드, 프론트엔드 동시 개발 시작
• 개발 서버 및 초기 데이터 부재
App Engine Java
앱엔진 + 자바
• 실제 서비스 환경에서 작업하는 방법이 이상적
• 수정 → 빌드 → 배포 과정이 번거로움
• 실제 서비스 데이터를 사용할 수 없음
• 데이터 CRUD가 불편
index.html
index.html
• 아주 간단한 작업
• 단일 페이지에 적합
• 단순한 스타일시트 또는 스크립트 테스트
CORS
• Cross-Origin Resource Sharing
• 원격 자원 접근 제한
• AJAX 호출 시 발생
CORS
• JSONP
• JSON 데이터를 인자로 받는 콜백 함수
• 브라우저 옵션
CORS
security.fileuri.strict_origin_policy
Disable Local File Restrictions
--disable-web-security
Access data sources across domains
간단한 웹 서버
간단한 웹 서버
python -m SimpleHTTPServer python3 -m http.server
ruby -run -e httpd . -p 3000
php -S 127.0.0.1:8080
간단한 웹 서버
• HTML 파일 분리 불가능
• 코드의 분리 / 재활용 어려움
• 복사 / 붙여넣기
• 수정 시 같은 작업 반복
• 데이터베이스 사용 불가능
• 임시 HTML 태그 반복 사용
정적 사이트 생성기
정적 사이트 생성기
• https://staticsitegenerators.net/
• 레이아웃 지원
• HTML 분리 / 재활용
• YAML, JSON, CSV 등 데이터 사용
• 마크다운 등 블로그 포스팅에 특화
• 환경 설정, 프레임워크 구조 학습
웹 서버
웹 서버
Apache Nginx Tomcat
웹 서버
• 레이아웃 분리 / 재활용
• 사용 프로그래밍 언어 학습
• 서버 환경 설정 이해
• 데이터베이스 사용 가능
• 데이터베이스 설치, 환경 설정
앱 엔진 + 자바
• 실제 서비스 환경에서 작업하는 방법이 이상적
• 수정 → 빌드 → 배포 과정이 번거로움
• 실제 서비스 데이터를 사용할 수 없음
• 데이터 CRUD가 불편
루비 온 레일즈
• 간단한 설치
• 루비는 스크립트 언어
• 빌드 / 배포 과정이 필요없음
• 수정 / 확인 과정이 간편
• 기본 기능만으로도 유용
• 추가 젬 설치로 기능 확장
설치
$ gem install rails
데이터 배포코딩
jQuery
CoffeeScript
Sass
SQLite Uglifier
Scaffold
Sprockets
프리프로세서
CoffeeScript Sass
프리프로세서
• 원래 언어의 부족한 문법 보완
• 간결하고 효율적인 코드 작성
• 최종 결과물은 원래 언어로
• 추가 젬 설치를 통해 확장 가능
• Less, Stylus
Sprockets
• Rack based asset packaging
• 스타일시트 / 자바스크립트 파일 관리
• 코드 분리 / 모듈화
• 배포 시 파일 자동 합치기
Rack 루비 웹 서버 인터페이스
Sprockets
/* Multi-line comment blocks (CSS, SCSS, JavaScript)
*= require foo
*/
// Single-line comment blocks (SCSS, JavaScript)
//= require foo
# Single-line comment blocks (CoffeeScript)
#= require foo
CSS
/*= require reset */
/*= require base */
/*= require home */
JavaScript
//= require base
//= require util
//= require home
Scaffold
https://www.flickr.com/photos/jbgoblin/16174114320
스캐폴드
• 건축에 사용하는 임시 구조물
• 작업 시 편의 제공
• 건물 완성 후 철거
스캐폴드
• 레일즈로 15분 만에 블로그 만들기
• 사기!!!
• 레일즈 기본 구조 학습
• 프로토타입 / 초기 데이터 관리
스캐폴드
$ rails g scaffold comic title:string artist:string
스캐폴드
GET /comics(.json) comics#index
POST /comics comics#create
GET /comics/new comics#new
GET /comics/:id/edit comics#edit
GET /comics/:id comics#show
PATCH /comics/:id comics#update
PUT /comics/:id comics#update
DELETE /comics/:id comics#destroy
시드
# db/seeds.rb
Comic.create title: '나쁜 상사', artist: '네온비'
Comic.create title: '먹는 존재', artist: '들개이빨'
$ rake db:seed
픽스쳐
# test/fixtures/comics.yml
one:
title: 나쁜 상사
artist: 네온비
two:
title: 먹는 존재
artist: 들개이빨
$ rake db:fixtures:load
배포
$ rails assets:precompile RAILS_ENV=production
home.js
//= require base
//= require util
//= require comic
Sprockets
base.js
home.js Uglifierutil.js
comic.js
home.js (minified)
루비 가족
Pow
• 랙 기반 서버 관리
• 웹 서버 포트 충돌 방지
• http://myapp.dev/
Anvil
• Pow의 맥 전용 앱
xip.io
• 동적 DNS 도구
• http://myapp.10.0.0.1.xip.io
• 같은 네트워크 환경에서 사용
• 서버 배포없이 공유
• 여러 기기 테스트
• 빠른 피드백
유용한 젬
유용한 젬
• RailsCsvFixtures
• CSV 파일을 데이터베이스로 가져오기
• https://github.com/bfolkens/rails-csv-fixtures
• YamlDb
• 현재 데이터베이스 내용을 YML로 내보내기
• https://github.com/yamldb/yaml_db
실제 개발 절차
http://web.192.0.0.1.xip.io
android.dev web.dev ios.dev
Ruby
DRYDon't Repeat Yourself
감사합니다