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