[RoR 학습] 6장 애플리케이션 생성하기

루비온 레일스 학습 사용 교재: 『레일스와 함께하는 애자일 웹 개발』

1부 시작하기의 1~4장까지 레일스 개발 환경 설정 및 기본 앱 생성과 루비언어에 대해서 간단히 다루었다. 본격적으로 2부에서 하나의 상점 애플리케이션을 Iteration을 여러번 거치면서 레일스에 대해서 하나씩 배우게 된다. 5장은 실습할 상점 애플리케이션에 대한 명세 설명과 모델을 간단하게 정의하는 단원이라 특별한 언급없이 넘어간다.
air jordan 23
이 포스팅에서 다룰 6장은 기본적으로 애플리케이션 생성과 DB 테이블과 모델 생성, 그리고 간단한 CSS 조작을 통한 화면 꾸미기를 한다.
griffey air max
첫 번째 순서는 rails new명령어를 통해서 애플리케이션을 하나 생성하는 것이다. 애플리케이션의 이름은 교재와 동일하게 “depot”으로 했다.

두번째로 생성된 애플리케이션 폴더로 이동한 후 이제 상점 애플리케이션에 필요한 모델을 생성한다. 레일스는 DB의 테이블과 애플리케이션의 모델을 “스캐폴드”라는 기능을 통해서 아주 손쉽게 만들 수 있다.(아래 명렁어에서 “\” 표시는 리눅스 커맨드에 한 줄에 입력하기 길 때 한 줄 띄우기 위한 명령어 임)

스캐폴드로 Product라는 상품 모델 이름과 함께 상품의 속성이름과 타입들 넣어주면 레일스는 자동으로 복수형인 products 테이블 1 을 생성하고 이를 모델과 매핑해 준다. 그리고 동시에 모델과 연관되는 뷰와 컨트롤러, 테스트 소스까지 알아서 주르륵 생성된다. 다음의 실행결과를 자세히 살펴보면 구체적으로 어떤 파일들이 자동으로 생성되었는지 알 수 있다.
ray ban sunglasses Low Price
스크린샷 2013-08-21 오후 8.31.47

잠깐 “스캐폴드”(scaffold)란 단어가 무슨 뜻인지 짚고 넘어간다. “스캐폴드”는 다음의 그림처럼 건물에 덧대는 골조 등을 의미하는 말이다. 우리 말로는 비계라고 하는데 실제 건물의 기둥역할을 하는 것은 아니고 건물 건축과정에서 임시적으로 활용하는 것이다. 데이터 모델을 건물에 비유한다면 스캐폴드 역할 역시 데이터를 잘 구축하기 위한 도구라고 생각하면 좋겠다.
ray ban logo
scaffold

다시 돌아와서 스캐폴드를 통해서 생성된 여러 파일 중에 DB 테이블 생성과 연관된 내용이 저장된 소스파일이 있다. db/migrate 폴더 안에 긴 숫자를 접두어로 가지고 있는 “2013XXXX.pre._create_ product.rb”이 실제 DB 테이블 생성 코드를 가지고 있다. 파일의 네이밍은 UTC타임스탬프가 접두어로 붙는다.
ray ban usa
사용자의 필요에 따라 이 파일을 수정하여 모델의 데이터 속성을 변경할 수 있다. 교재의 수정지시대로 price의 decimal 타입의 유효숫자와 소수점 자리 설정을 추가해보자. 일단 이 파일을 에디터로 불러온 후 “t.decimal :price” 라인을 아래와 같이 수정하면 된다.
ray ban black sunglasses
스크린샷 2013-08-21 오후 8.33.24
Switzerland Oakley sunglasses
세번째로 수정을 마친 후 처음 등장하는 “rake” 명령어를 통해서 DB 테이블을 생성한다.

실행을 하고나면 자동으로 Product의 DB 테이블이 생성된다. 결과는 다음 그림과 같다. 따라서 이제 서버를 실행시켜서 생성한 Product 모델에 대한 뷰를 확인할 수 있다. 서버 실행 후 localhost:3000/product로 들어가서 상품리스트 화면과 새로운 상품을 입력할 수 있는 링크를 확인하면 제대로 작동하는 것이다.
Oakley sunglasses Low Cost
스크린샷 2013-08-21 오후 8.38.11 네번째로 이제 지금까지 작성된 애플리케이션을  “rake test”를 통해 테스트 한다. 따로 테스트 코드를 작성한 적이 없지만 레일스에서는 애플리케이션과 스캐폴드를 생성하면서 자동으로 테스트코드를 만들어 주기 때문에 테스트가 가능하다. 그래서 레일스를 활용하면 “애자일”하게 개발이 가능한 것이다. 아래 화면을 보면 아무런 문제가 없음을 확인할 수 있다.

스크린샷 2013-08-21 오후 8.43.12

다섯번째 레일스는 테스트 데이터를 개발자가 수동으로 마이그레이션 하는 것을 못 보는 것 같다. 레일스에서는 테스트 데이터를 자동으로 마이그레이션 해줄 수 있는 기능이 있다. 처음 애플리케이션 생성 시에 이미 자동으로 db 폴더 내에 seeds.rb라는 파일이 있다. 이 파일 안에 원하는 DB table의 값을 미리 seed로 작성해 두고, 필요할 때마다 데이터를 소스 파일에 있는 데이터로 복원이 가능하다.

실습을 위해서 교재에서 제공해주는 소스를 인터넷에서 다운 받아 기존 파일을 덮어 쓴다(소스는 여기 참조  2, 교재에서 사용하는 상품 이미지는 여기 ). 위의 명령을 실행하고 상품 리스트 페이지를 refresh하면 데이터가 변경되었음을 확인할 수 있다.

여섯번째 이번에는 상품리스트를 꾸미기 위해 CSS를 변경한다. ~/app/assests/ 폴더를 살펴보면 이미지, 자바스크립트 소스, CSS등 정적인 데이터들을 다 이곳에 보관 할 수 있다.

우리는 스타일시트를 수정할 것이기 때문에 stylesheet 폴더 내에서 products.css.scss파일을 연다. scss 확장자는 레일스에서 스타일시트 작성의 편의를 위해서 지원하는 문법 확장형 CSS라고 생각하면 좋을 것 같다. 자세한 내용은 SCSS 관련 사이트를 참조하길 바란다. 교재의 예대로 CSS를 다음과 같이 고쳐본다.

일곱번째, 상품 리스트가 출력되는 뷰 파일의 소스를 수정한다. 상품 리스트 뷰 파일은 app/views/products/index.html.erb이다. 이 파일을 열어보면 아니 지금까지 뷰를 담당했던 html 소스에서 우리가 놓치고 있던 것이 있다. 그것은 헤더나 타이틀 같은 태그가 보이지 않는다는 점이다. 레일스에서는 html 소스 내에서 중복되는 코드를 막기 위해 반복되는 틀을 views/layout 이라는 폴더 내에 application.html안에다 두고 있다. 아래 그림을 보면 body 태그 안에 “yield”라는 메소드를 통해서 해당하는 뷰의 소스코드가 삽입 될 것이라는 것을 추측할 수 있다.

스크린샷 2013-08-24 오전 12.08.41

자 다시 돌아와서 뷰의 소스(index.html.erb)를 교재대로 다음과 같이 수정한다. 아래 소스를 보면 5라인에서 cycle이라는 메소드는 입력 받는 매개변수를 번갈아 출력하는 역할을 하고 있다. 14번 라인에서는 title이 너무 길어지지 않게 길이를 조절하는 truncate 메소드, title에 붙은 html 태그들을 제거하는 strip_tag 메소드가 사용된 것을 확인할 수 있다.

스크린샷 2013-08-24 오전 12.10.52

끝이다. 지금까지 설명한 대로 따라했다면 아래와 같은 상품리스트를 확인할 수 있을 것이다.

스크린샷 2013-08-21 오후 9.06.59

오늘까지 학습한 내용 역시 분량은 많지 않다. 첫째 “스캐폴드” 를 통해 데이터 모델 생성과 파일을 직접 수정해서 모델을 수정하였다. 둘째 rake를 통해서 애플리케이션을 테스트 했다. 셋째 seeds.rb 파일을 통해서 언제든지 미리 저장된 데이터로 덮어 쓸 수 있었다. 넷째 html 소스 중복을 막기 위해 기본 소스 골격은 layout 폴더 내에 application.html.erb를 활용한다는 점이 오늘 학습한 것 중에 중요한 것이다.

앞으로 실습하는 내용은 깃헙 리포지토리에 공유한다. https://github.com/jwj0831/rails-practice

Notes:

  1. 레일스는 1부에서 설치한 sqlite를 기본 DB로 사용한다.
  2. 다운 받은 파일에서 이미지 url에서 앞에 image 폴더 패스는 제거한다.