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

감사합니다