Getting started with Ruby on Rails for front-end development

1. Front-end Development
with
Ruby on Rails
fallroot @ LEZHIN Entertainment

2. 문추근 秋根
@fallroot
레진엔터테인먼트
프론트엔드 개발자

3. DRY
Don't Repeat Yourself

4. Grunt Gulp

7. 레진코믹스
2013. 4. 20 개발 시작
2013. 6. 7 서비스 오픈

8. 레진코믹스
• 하이브리드 앱
• 폰갭 적용 전 마크업, 스크립트 작업
• Grunt, Gulp 등의 도구를 널리 쓰기 전
• 백엔드, 프론트엔드 동시 개발 시작
• 개발 서버 및 초기 데이터 부재

9. App Engine Java

10. 앱엔진 + 자바
• 실제 서비스 환경에서 작업하는 방법이 이상적
• 수정 → 빌드 → 배포 과정이 번거로움
• 실제 서비스 데이터를 사용할 수 없음
• 데이터 CRUD가 불편

11. index.html

12. index.html
• 아주 간단한 작업
• 단일 페이지에 적합
• 단순한 스타일시트 또는 스크립트 테스트

13. CORS
• Cross-Origin Resource Sharing
• 원격 자원 접근 제한
• AJAX 호출 시 발생

14. CORS
• JSONP
• JSON 데이터를 인자로 받는 콜백 함수
• 브라우저 옵션

15. CORS
security.fileuri.strict_origin_policy
Disable Local File Restrictions
--disable-web-security
Access data sources across domains

16. 간단한 웹 서버

17. 간단한 웹 서버
python -m SimpleHTTPServer
python3 -m http.server
ruby -run -e httpd . -p 3000
php -S 127.0.0.1:8080

18. 간단한 웹 서버
• HTML 파일 분리 불가능
• 코드의 분리 / 재활용 어려움
• 복사 / 붙여넣기
• 수정 시 같은 작업 반복
• 데이터베이스 사용 불가능
• 임시 HTML 태그 반복 사용

19. 정적 사이트 생성기

20. 정적 사이트 생성기
• https://staticsitegenerators.net/
• 레이아웃 지원
• HTML 분리 / 재활용
• YAML, JSON, CSV 등 데이터 사용
• 마크다운 등 블로그 포스팅에 특화
• 환경 설정, 프레임워크 구조 학습

21. 웹 서버

22. 웹 서버
Apache Nginx Tomcat

23. 웹 서버
• 레이아웃 분리 / 재활용
• 사용 프로그래밍 언어 학습
• 서버 환경 설정 이해
• 데이터베이스 사용 가능
• 데이터베이스 설치, 환경 설정

24. 앱 엔진 + 자바
• 실제 서비스 환경에서 작업하는 방법이 이상적
• 수정 → 빌드 → 배포 과정이 번거로움
• 실제 서비스 데이터를 사용할 수 없음
• 데이터 CRUD가 불편

26. 루비 온 레일즈
• 간단한 설치
• 루비는 스크립트 언어
• 빌드 / 배포 과정이 필요없음
• 수정 / 확인 과정이 간편
• 기본 기능만으로도 유용
• 추가 젬 설치로 기능 확장

27. 설치
$ gem install rails

28. 데이터 배포코딩
jQuery
CoffeeScript
Sass
SQLite Uglifier
Scaffold
Sprockets

29. 프리프로세서
CoffeeScript Sass

30. 프리프로세서
• 원래 언어의 부족한 문법 보완
• 간결하고 효율적인 코드 작성
• 최종 결과물은 원래 언어로
• 추가 젬 설치를 통해 확장 가능
• Less, Stylus

31. Sprockets
• Rack based asset packaging
• 스타일시트 / 자바스크립트 파일 관리
• 코드 분리 / 모듈화
• 배포 시 파일 자동 합치기
Rack
루비 웹 서버 인터페이스

32. 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

33. CSS
/*= require reset */
/*= require base */
/*= require home */

34. JavaScript
//= require base
//= require util
//= require home

35. Scaffold

36. https://www.flickr.com/photos/jbgoblin/16174114320

37. 스캐폴드
• 건축에 사용하는 임시 구조물
• 작업 시 편의 제공
• 건물 완성 후 철거

38. 스캐폴드
• 레일즈로 15분 만에 블로그 만들기
• 사기!!!
• 레일즈 기본 구조 학습
• 프로토타입 / 초기 데이터 관리

39. 스캐폴드
$ rails g scaffold comic title:string artist:string

40. 스캐폴드
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

41. 시드
# db/seeds.rb
Comic.create title: '나쁜 상사', artist: '네온비'
Comic.create title: '먹는 존재', artist: '들개이빨'
$ rake db:seed

42. 픽스쳐
# test/fixtures/comics.yml
one:
title: 나쁜 상사
artist: 네온비
two:
title: 먹는 존재
artist: 들개이빨
$ rake db:fixtures:load

43. 배포
$ rails assets:precompile RAILS_ENV=production

44. home.js
//= require base
//= require util
//= require comic
Sprockets
base.js
home.js Uglifierutil.js
comic.js
home.js
(minified)

45. 루비 가족

46. Pow
• 랙 기반 서버 관리
• 웹 서버 포트 충돌 방지
• http://myapp.dev/

47. Anvil
• Pow의 맥 전용 앱

48. xip.io
• 동적 DNS 도구
• http://myapp.10.0.0.1.xip.io
• 같은 네트워크 환경에서 사용
• 서버 배포없이 공유
• 여러 기기 테스트
• 빠른 피드백

49. 유용한 젬

50. 유용한 젬
• RailsCsvFixtures
• CSV 파일을 데이터베이스로 가져오기
• https://github.com/bfolkens/rails-csv-fixtures
• YamlDb
• 현재 데이터베이스 내용을 YML로 내보내기
• https://github.com/yamldb/yaml_db

51. 실제 개발 절차

52. http://web.192.0.0.1.xip.io
android.dev web.dev ios.dev
Ruby

53. DRY
Don't Repeat Yourself

54. 감사합니다