[RoR 학습] 8장 메인 페이지 레이아웃 작업

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

8장에서는 웹페이지 전체에 반복적으로 사용되는 레이아웃을 코딩하고, 경로 설정을 조정하여 첫 페이지에 상품 목록을 띄우는 작업 등을 한다.

우선 rails 명령어로 store 컨트롤러와 index 액션메서드를 생성한다. 여기서 생성되는 index.html에 접근하기 위해서는 http://localhost:3000/store/index를 입력해야 한다. 하지만 index를 이 사이트의 첫페이지가 되도록 경로를 변경할 수 있다. 레일스에서 애플리케이션의 경로설정을 담당하는 파일은 config/route.rb이다.  이 파일을 열어서 루트페이지를 “store#index”로 설정하면 된다.

그리고 교재에서는 public/index.html 파일을 지우라고 하는데, 레일스 4.0 에서는 이러한 파일이 보이지 않아서 그냥 무시해도 정상적으로 생성된 index뷰가 루트경로로 보인다.

다음으로 index 뷰에 상품목록을 보여주기 위해 코드를 수정한다. index 뷰를 변경하기 전에 먼저 index 액션 메소드에서 아래와 같이 상품 정보를 받아 와야 한다.

products 변수에 상품 목록을 이름순으로 정렬된 배열로 받아 왔다. 이제 이 변수를 index 뷰에서 가져다가 보여주면 된다.

이 코드에서 사용한 레일스 메서드는 image_tag(), sanitize()이다. image_tag() 는 매개변수로 받은 경로를 바탕으로 img 태그를 자동으로 생성해 준다. sanitize는 매개변수로 받는 문자열 안에 포함된 태그들을 그대로 사용할 수 있게 해준다. 이렇게 한 후 꾸미기 위한 용도로 assets/stylesheets/store.css.scss 파일을 수정하면 1 첫 페이지의 상품목록이 나타난다.

다음은 현재의 상품 목록 뿐 아니라 전체 애플리케이션이 공통적으로 갖게될 페이지 레이아웃인 헤더와 사이드바를 적용한다. 일반적으로 웹페이지에서 헤더와 사이드바는 반복되므로 코드 중복을 방지하기 위해서 레일스에서는 views/laysout/application.html.erb 안에서 전체 페이지에 레이아웃을 정의한다. 이 파일을 수정하면 모든 페이지에 공통적으로 적용이 된다. 헤더와 사이드바를 변경하고, application.css.scss도 교재와 같이 꾸미게 되면 다음과 같이 웹페이지가 보인다.

상품목록 페이지

한 가지 위 이미지랑 다르게 금액 표시에 $사인이 없을 것이다. price를 나타내는 코드에 가서 “number_to_currency()” 헬퍼 메서드의 도움을 받으면 위 그림과 같이 통화 기호를 나타낼 수 있다.

여기까지가 이번 장에서 한 일이다. 다만 교재에서는 코드가 변경되었기 때문에 테스트를 한다. 지난 장에서 설명했던 테스트를 복습하자면 “rake test”라는 명령을 통해서 사전에 정의된 테스트 시나리오들을 점검한다. 좀더 세부적인 테스트를 하고 싶다면 “rake test:units”와 “rake test:functionals”를 사용하면 각각 단위테스트와 기능 테스트로 분류해서 테스트할 수 있다.

단위테스트를 실행하게 되면 test/model 폴더 안에 있는 테스트 케이스들을 점검하고, 기능테스트는  test/controllers 폴더에 있는 테스트 파일들을 실행한다. 소스코드는 Github에 third-iter 태그 버전을 참조하면 된다.

 

 

 

Notes:

  1. 이 부분의 코드는 생략, 필요할 경우 Github을 참조