Ruby on Rails 새롭게 시작하기

심기일전

1년 만에 RoR을 보려니 역시 바뀐 것이 너무 많다. 이전에 써 놓은 개발환경 구성 글은 예전 버전용으로는 의미가 있겠지만 Ubuntu 14.04, Ruby 2.1.2, Rails 4.1에 맞춰서 다시 개발환경 설치기를 작성한다. 설치과정은 온전히 Gorails를 참조했다. [참조]

 

서버 셋팅

서버는 공부하는데 투자할겸 월 10불로 Digital Ocean에서 맞췄다. AWS도 써봤고 애저도 써봤지만 이것 저것 설정이 귀찮아서 간단히 바로 설정해 쓰기엔 이게 제일 편한 것 같다. 1분 이면 이렇게 하나의 서버 인스턴스가 생성된다. (참고로 Digital Ocean 에서는 Droplet란 용어를 쓴다.)

Digital Ocean Droplet

서버에 접속하면 먼저 update/upgrade를 해준다. 다음으로는 이후의 명령어들을 시행하기 위해서 루트가 아닌 새로운 유저를 생성해 주는게 좋다. “name” 부분에 자신의 이름을 넣고 다음과 같이 새로 사용자를 생성한다. 생성 후에는 패스워드를 넣어준다. [유저생성참고]

앞으로 사용할 sudo 명령어를 위해서 sudoers파일도 수정해 둔다. sudoers 파일은 쓰기가 잠겨 있으므로 사용할 때는 풀어주고 수정 후에 다시 원상복구를 해야 한다. 자세한 내용은 다른 블로그를 참고 [참고]

 

루비 설치

서버 준비는 끝났으니 이젠 Gorails를 따라가보자. 일단은 새로 설치했으니 update를 하고난 후 루비설치에 필요한 기본적인 의존 패키지들을 몽땅 설치하자.

루비가 처음이신 분들은 헷갈릴 수도 있지만 보통 루비는 바로 설치하지 않고 일종의 관리 프로그램(?)을 사용해서 설치하는게 버전 관리 등 여러 이유로 편하다고 한다. (나도 초보이므로 그냥 따라서 한다.) 마지막 커맨드까지 실행해서 루비 버전을 확인할 수 있다면 성공적으로 루비가 설치된 것이다!

Complete Installation of Ruby  with rbenv

다음으로, 루비에는 젬이라는 개념이 있는데 쉽게 생각하면 파이썬의 pip나 nodejs의 nfm 같은 패키지 매니저라고 보면 된다. 아래 명령어는 일일이 각 젬의 문서를 로컬에 다운받지 말라는 옵션이라는데 따라하자. 손해볼 것 없으니.

 

Git 설정 및 SSH 키 Github 등록

Gorails에서는 Git 설정과 공개키를 생성하여 Github에 등록까지 친절하게 알려주신다. 아래 그대로 따라하시면 된다. “YOUR NAME”, “YOUR@MAIL.com”은 정말 본인의 정보를 입력해야 한다. 마지막 명령어를 치면 몇가지 입력할 정보가 있는데 알아서 잘 넣어주면 된다.

이제 생성된 공개키를 아래 명령어로 출력해서 복사하고 Github의 설정에 들어가서 SSH Keys에 새로 키를 등록하면 된다.

등록이 정상적으로 이루어 졌는지지 “ssh -T git@github.com”을 입력하여, 위와 같은 메시지를 받으면 끝!

Git Configuration

 

레일스 설치

레일스에서 사용하는 의존 라이브러리가 많아서 nodejs도 설치가 필요하다고 한다. 그럼 설치하자! 아래 명령어는 nodejs가 정식 리파지토리에 없어서 PPA 리파지토리를 등록해서 리파지토리를 업데이트하고 nodejs를 설치하겠다는 의미이다.

드디어 레일스를 gem으로 설치!

새로운 gem을 설치했을 경우 이를 사용가능하게 해주는 리프레쉬 같은 느낌의 명령어를 한번 쳐줘야 한다.

자 이제 레일스 버전이 찍히는지 확인해 본다. 감격이다! 지금까지 이렇게 에러 없이 한 큐에 설치된 가이드 처음 본다.

Compleete Installation of Rails

레일스는 기본적으로 sqlite3를 사용하기 떄문에 데이터를 파일로 저장하지만, DB를 사용하고 싶으신 분들은 Mysql이나 PostgreSQL중 하나를 계속해서 따라가면 설치할 수 있다. 그대로 실행만 하면 될 것 같다. (여기서는 Postrgresql을 따라한다.) 다시 한번 참조한 사이트를 소개한다. 풀URL로~! https://gorails.com/setup/ubuntu/14.04

 

PostgreSQL 설치

PostgreSQL도 기본 리파지토리에 없어서 아래와 같은 방법으로 추가해주고 설치하면 된다. 역시 오류없이 9.3 버전을 다음의 명령어로 설치할 수 있다.

이어서 “username”에 db에 사용할 사용자 이름을 넣고 사용자를 생성하면 된다.

레일스 App 생성

마지막으로 정상적으로 모든 과정이 마쳤는지를 점검하기 위해서 테스트용 myapp을 하나 생성한다. -d 옵션을 안 붙이면 레일스에서는 sqlite가 기본 DB가 된다. 아니면 아래와 같이 옵션으로 postgresql 또는 mysql을 상황에 따라 설정하면 된다. 그리고 나서 rake 명령어로 db를 생성후 서버로 돌려본다.

자신의 주소에 3000번 포트로 들어가서 아래와 같은 화면이 정상적으로 나온다면 성공이다! 자 이제 본격적인 RoR 개발을 시작해보자!

Rails app

IoC, 제어의 역전과 위임(Delegation)

딱히 스프링이 당장 필요해서라기 보다는 자바에 대한 개념을 견고히 하기 위해서 토비의 스프링 3.1 판을 보고 있는 중…

1.4.3장 제어권의 이전을 통한 제어관계 역전(92page)은 IoC(Inversion Of Control)을 설명한 챕터. 이해가 안 되면 책을 뒤져보라!

짧은 개발경험에서 그나마 IoC가 무엇인지 비교해 볼 수 있는건 Objective-C로 개발할 때의 애플리케이션의 라이프사이클에 따른 콜백 함수를 위임하여 구현하는 것이 아닐까 한다.

프로그램의 플로우 안에서 논리적으로 한 객체가 다른 객체의 메서드를 요청하고, 요청받은 메서드는 또 다른 메서드를 요청하는 단방향적인 흐름도 객체간의 결합도를 높이는 단점이 있다.

즉 객체 간의 결합도를 낮추고 독립성을 높이려면 객체의 생성과 소멸, 요청도 누군가에게 위임하는 팩토리 형태가 소프트웨어 공학적으로 좀 더 건강한 구조라고 할 수 있다는 걸 깨닫게 됨.

부족한 식견이지만 왜 다들 “토비의 스프링”을 극찬하는지 보면서 조금이나마 느끼게 된다.

 

만들면서 배우는 CodeIgniter 프레임워크 리뷰

코드이그나이터 표지3년 째 워드프레스를 다루다 보니 정식으로 공부하지 않았지만 PHP 코딩이 편해졌습니다. 물론 PHP가 가지고 있는 단순한 문법 떄문인지 모르겠습니다만, 이러한 배경하에 PHP를 가지고 좀 더 진지하게 웹서비스를 구현해 볼까 하는 마음이 늘 있었고 때 마침 “만들면서 배우는 CodeIgniter 프레임워크” 책을 선택해서 읽게 되었습니다.

최근의 웹서비스 구현은 거의 예외없이 개발 편의 및 생산성 향상 등의 목적으로 프레임워크를 사용하고 있으며 CodeIgniter역시 대표적인 PHP기반 프레임워크입니다. 제목에서 드러내듯이 “만들면서 배우는 CodeIgniter”(이하 CodeIgniter) 책은 프로젝트 기반으로 기능을 하나씩 구현하면서 CodeIgniter 프레임워크 학습을 도와줍니다.

책은 11개의 챕터로 구성되어 있지만 실습 프로젝트 주제에 따라  Todo, 게시판, SNS의 3가지로 나눌 수 있습니다. 3개의 주제는 각각의 챕터 내에서 점진적 개발을 통해서 CodeIgniter의 기능을 맛 볼 수 있도록 도와줍니다.

책의 소스코드를 직접 다운 받을 수 있지만, 저는 일일이 소스코드를 처읍부터 타이핑하면서 읽어나갔습니다. 그러다보니 예상 밖의 코드오류들이 심심찮게 보였습니다. 타이포도 있었지만 제가 만난 대부분의 코드오류는 점진적인 기능 추가에 따라 코드 변경된 부분이 제대로 적용되지 않아 발생한 것들이었습니다. 예를 들면, 라이브러리 사용을 위한 선언 코드가  빠져있다든지, 기능이 개선되면서 함수의 매개변수가 바뀐 부분들이 적용이 안 된채로 남아 있다든지 하는 코드 오류들이 종종 보였습니다. 따라서 유의깊게 보지 않으면 책에 있는 소스대로 실행이 되지 않는 부분을 볼 수 있습니다.

그러나, 위와 같은 문제를 보완할 수 있는 방법들이 다행이 있습니다. 우선은 코드이그나이터 한국 커뮤니티의 존재입니다. 이 책의 저자분께서 코드이그나이터 커뮤니티에서 활동중이시며 궁금한 질문들을 책 전용 게시판에 올리면 빠르게 저자로부터 직접 답변들이 올라오며, 이미 비슷한 문제들에 대해서 검색을 통해서 해결방법들을 확인할 수 있습니다. 또한 다음 그림처럼 책의 방대한 코드에서 중요한 라인에 일일이 넘버링을 하고 설명을 하고 있어 길을 헤매지 않고 차근히 이해하는데 도움을 주고 있습니다.

코드이그나이터 코드예제

이 책에서 제대로 설명해주지 않는 부수적 효과(장점)은 트위터 부트스트랩의 활용입니다. 책 전반에서 트위터 부트스트랩을 사용하기 때문에 부트스트랩에 경험이 없는 분들도 자연스럽게 트위터 부트스트랩에 익숙해 질 수 있습니다. 다만 책에서 사용하는 부트스트랩은 버전이 2.x이므로 최근에 개편되 버전3와는 코드 호환이 되지 않습니다.

결론적으로, 이 책은 PHP에 대한 기본적인 이해와 웹서비스(HTML, javascript, ajax)에 대한 어느정도의 지식을 가지고 있어야 읽는데 지장이 없습니다. PHP를 가지고 한번 웹서비스를 제대로 구현해 보고 싶으신 분들께 실제적인 학습을 위한 도구로서 이 책을 주저없이 추천할 만 합니다.

Angular JS 기초편 eBook 리뷰

제목: Angular JS 기초편

한빛미디어에서 받은 Angular JS 기초편 eBook을 읽고 난 뒤에 느낌을 먼저 한 문장으로 요약해 보겠습니다.

요약: Angular JS 기초편은 마실 겸 뒷동산에 올랐다가 가파른 경사와 언덕을 만나 탈진할 수도 있는 책

AngularJS기초편 표지

책은 총 4장으로 구성되어 있습니다. 1장은  몇 가지 짧은 코드의 예제를 통해서 Angular JS만의 장점을 보여주는데 그다지 어렵지 않게 Angular JS의 기능들을 맛볼 수 있습니다. 짧은 1장의 내용에서 다음 장에 대한 기대를 주지요. 기존에 웹 프레임워크를 활용해서 개발해 본 적이 없는 분들도 1장은 쉽게 따라하실 수 있습니다.

2장에서 좀 더 깊게 Angular JS만의 기능들을 설명합니다. 데이터 바인딩, 지시어와 같이 Angular JS의 멋진 기능들을 설명하는데요. 이 부분은 다소 내용이 어렵습니다. 기능에 대한 설명보다 Angular JS의 장점을 설명하는데 포커스가 있다는 듯한 느낌이 강합니다. 저처럼 웹프레임워크를 이용한 개발이 익숙치 않은 분들에게는 조금 어려운 내용들이 많습니다. ajax나 자바스크립트에 대한 선이해도 필요합니다. 그래도 2장까지는 집중해서 여러 번 읽으면 Angular JS를 맛보는데는 좋은 역할을 합니다.

3장에서 본격적으로 anuglar를 활용해서 웹 어플리케이션을 개발하기 위한 도구와 방법을 안내합니다.  그러나 여기서부터 문제가 발생합니다. ㅠ 일단 이 책에서는 angular를 활용하기 위해서 yeoman이라는 툴을 사용합니다. 그런데 책이 쓰여진 시점 이후로 yeoman이 상당히 많이 바뀌었습니다. 따라서 책의 쉘명령어가 작동하지를 않습니다.

우선 yeoman을 설치하려면 107쪽에 나와있는 curl을 통한 설치는 더이상 제공되지 않고 npm이 필요하므로 Node.js를 먼저 설치해야 합니다. 자세한 설치 방법은 공식사이트를 참고해야 합니다. yeoman을 설치하고 나서 책과 달라진 명령어를 몇 개 소개하면 다음과 같습니다.

  • (angular 프로젝트 생성) yeoman init angular -> yo angular
  • (루트 추가) yeoman init angular:route home -> yo angular:route home
  • (테스트 실행) yeoman test -> grunt test
  • (프로젝트 빌드)yeoman build -> grunt build

마지막으로 4장에서는 하나의 예제를 통해서 angular JS를 활용한 앱의 숲을 볼 수 있도록 해줍니다. 하지만 역시 아쉽게도 1~3장에서 angular에 대해서 수박 겉핡기 식으로 훑고 나서 갑자기 4장에서 앱 하나를 통쨰로 설명하는 내용이 나타나니 이 역시 조금 버거운 느낌입니다.

본래 이 책은 Angular JS 원서를 두 번에 나누어 1~4장은 기초편으로 5~8장은 활용편으로 분리되어 국내에 출판된 것으로 압니다. 기초편에서는 angular JS에 대한 이해를 돕는데 초점을 두고 자세한 설명은 활용편으로  넘기고 있습니다. 따라서 기초편만 가지고는 angular JS를 온전하게 이해하는 데는 어려움이 다소 따릅니다. 따라서 이 책 하나로 angular JS를 이해하려는 기대는 조금 접어두시기를 부탁드립니다. 대신 angular에 대해서 잘 설명해 준 블로그 하나를 안내합니다.(클릭!)

개인적으로 웹에 관심이 없다가 최근에 웹 프레임워크가 다양해지고 발전하게 된 것을 보면서 조금씩 다시 배우고 있는데, angular는 최근 웹 프레임워크의 경향을 이해하는데 도움을 주었습니다. 물론 제가 위에서 평한대로 이 책 하나로는 angular를 온전하게 이해할 수 없습니다. 제안드리는 것은 한글로 먼저 이 책을 빠르게 훑어보고 angular의 공식 사이트의 튜토리얼을 차근히 따라가는 것을 제안해 봅니다. 마지막으로 대우정보통신 블로그에서 정리한 angular JS를 활용한 대규모 웹 개발 관련 블로그도 함께 링크를 남깁니다.(클릭!)

[RoR 학습] 9장 장바구니 기능

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

지금까지 레일스에 기본적인 폴더 구성, 레이아웃, 테스트에 대해서 점진적으로 개발하면서 맛을 봤다. 이제 매장마다 기능이 하나, 둘씩 추가되면서 상점 애플리케이션 다운 모습을 찾아간다. 빠르게 따라가본다.

9장은 장바구니 기능을 추가한다. 현재까지 가지고 있는 데이터는 상품인 Product 밖에 없었다. 따라서 여기서는 장바구니인 Cart와 장바구니에 포함된 상품인 Line_item을 더한다. 교재를 따라가면서 잠깐 잊어버릴 뻔 했는데 Rails는 ORM을 사용한다. 따라서 장바구니의 해당하는 테이블 스키마나 품목에 대하 테이블 스키마를 어떻게 설계할까 생각하지 않는다. 직관적으로 필요한 객체인 장바구니와 품목을 떠올렸다면 이 객체 에 해당하는 모델을 생성하면 된다.

이렇게 장바구니와 품목 그리고 상품 사이의 모델을 생성한 후에 모델간에 관계를 설정해 준다. 모델 간의 관계는 간단히 다음 그림과 같다.

Object 관계장바구니 안에는 여러 개의 품목들이 포함될 수 있고 마찬가지로 하나의 상품이 복수의 품목으로 존재할 수 있기 때문에 위와 같은 관계가 성립된다. 자연스럽게 품목은 장바구니와 상품 모델에 종속되고 레일스에는 belong_to로 표현한다. 관계를 표현하는 코드는 아래와 같이 모델 폴더 안에 각 모델에 해당하는 파일에 넣어두면 된다.

장바구니 모델 코드에 포함된 “dependent” 조건은 장바구니가 삭제 될 때에 연결된 품목까지 함께 삭제한다는 의미이다.

상품 모델에는 조금 더 복잡한 내용이 포함된다. “before_destory”는 훅메서드라고 하여 레일스에서 자동으로 객체가 사용되는 흐름 과정에 따라 해당하는 단계에서 자동으로 실행시켜 주는 메소드이다. 여기서는 “before_destory” 즉 상품 객체가 삭제 될 때에 뒤에 따라오는 메서드를 실행하게 한다. 이어지는 메서드는 상품과 연결된 메서드가 있는지 확인한다. 만약 참이면 상품 객체는 정상적으로 삭제되겠지만 품목이 하나라도 있다면 거짓이 반환되어 상품은 삭제될 수 없다.

모델을 생성하고 관계를 설정했으므로 장바구니에 상품을 입력할 수 있도록 페이지에서 장바구니에 넣기(Add to Cart) 버튼을 넣고 메서드를 구현한다. 버튼은 “button_to” 메서드를 사용한다. 이 메서드는 폼을 생성해서 알아서 버튼까지 멋지게 생성해 준다. 8장에서 작업한 index.html에 한 줄만 추가하면 된다.

버튼 입력 상품의 아이디를 매개변수로 넘겨주고 있음을 코드에서 확인한다. 이 한 줄짜리 코드가 자동으로 다음과 같이 늘어난다.

button_to 메서드 html 코드

다음 작업은 button_to 메서드를 통해서 전달되는 상품객체를 처리하는 코드를 품목의 컨트롤러에서 작업해줘야 한다. 품목에서는 장바구니가 기존에 있는지 없는지를 확인하여 없으면 새로 생성하고 여기에 품목을 하나 만들어서 넣어준다.

하단의 respond_to ~ 이하의 내용들은 line_item의 스캐폴드 생성시 자동으로 작성된 코드다. 장바구니에 품목이 제대로 들어갔는지 여부에 따른 성공 및 에러처리 하는 부분이다. 교재에서 자세한 내용은 뒤로 미룬다. 다만 8~9라인은 성공적으로 품목이 장바구니에 들어갈 경우 출력할 문자열과 이동할 페이지를 설정한 것으로 교재를 따라 변경한다.

2번 라인에서 현재 카트가 있는지 없는지를 확인하기 위해서 “current_cart”라는 메서드를 사용했다. 이 메서드는 레일스가 제공해주는 것이 아니라 직접 작성을 해야 한다. 카트의 식별은 세션을 활용하는 자세한 내용은 뒷장으로 미루고 있다. 해당 코드는 아래와 같다.

품목의 컨트롤러를 변경하였기 때문에 테스트 코드도 변경이 필요하다. 레일스 4에서는 테스트 폴더의 구조와 3.2와 다르다는 것을 한번 더 확인한다. 1

마지막이다. 장바구니에 상품을 넣었을 때 어떤 상품들이 있는지 출력해 줘야 한다. 자동으로 생성된 show.html.erb를 수정한다.

 소스코드는 Github에 있으며 9장 코드는 “chapter-9″의 태그버전으로 확인 가능하다.

 

Notes:

  1. 3.2에서는 test/functional/ 밑에 있고 4.0에서는 test/controllers/ 밑에 있다.

[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을 참조

[RoR 학습] 7장 검증과 테스트

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

긴 가방끈을 메고 공부하는 입장이라 일반 사용자들을 대상으로 하는 서비스를 운영해 본 경험이 없기에 테스트라는 이슈는 사실 내게 그리 중요한 이슈로 다가온 적이 거의 없다. 다만 책과 풍문을 통해 얻는 간접적 지식을 통해 테스트의 중요성을 인식하고 있는 수준이다. 어찌 됬든 솔직한 내 개발 습관은 당장의 수업 텀프로젝트 목표를 위한 개발에 집중하는 일이 주였을 뿐 테스트는 사실 거리가 멀었다.air jordan retro

하지만 이 교재에서는 아직 제대로 레일스에서 배운 것도 없는 것 같은데 벌써부터 테스팅에 대해서 이야기를 한다. 실상 레일스가 가지고 있는 장점 중 하나는 개발 초기부터 테스트를 할 수 있는 완벽한 서포트를 하고 있다는 점이다. 7장을 통해서 레일스의 테스트 기능을 깊숙히 경험할 수 있다.

가장 기본적인 테스트의 대상은 사용자로부터 입력 받는 데이터가 모델에 적합한지를 검증하는 것이다. 책의 표현을 빌리자면 데이터는 자신이 정착하게 될 DB와 UI단 사이에 지키고 서 있는 모델을 반드시 통과하게 된다. 따라서 우리는 이 모델을 통해서 입력 데이터의 검증을 할 수 있다.
nike air jordan 16
본 학습에서 사용하는 모델은 “app/models/products.rb” 에 있다. 이 파일을 열면 아주 썰렁한 모델 클래스에 대한 선언만이 존재한다. 우리는 여기에 입력 데이터에 대한 검증 코드를 삽입한다.

 이 코드가 교재에 있는 검증 코드를 일단 주르륵 쓴 것이다. 코드를 보면 대충 감이 온다. 일단 “validataes”가 검증하기 위한 키워드가 된다. 그리고 뒤에 이어 검증하고자 하는 모델의 속성을 한 개 이상 나열하면 된다. 예를 들면 위 코드에서 2번째라인에 “:title, “description, :image_url”이 이에 해당한다. 그리고 바로 뒤에 검증을 위한 조건을 역시 하나 이상 나열할 수 있다.  5번째 라인을 보면 image_url 속성 뒤에 allow_blank와 format이라는 검증 조건이 붙어 있는 것을 확인할 수 있다.

검증 조건들의 키워드의 의미로부터 대강 무엇을 체크하는지 확인할 수 있다. 다음이 레일스에서 제공하는 검증 조건들의 일부 목록이다.ray ban wayfarer sizes

  • presence : 속성의 존재여부를 체크하는 것이다. (DB에서 not null과 같다고 보면 된다.)
  • uniqueness : 새로 입력될 속성값이 기존의 데이터 가운데 겹치는지를 확인한다.
  • numericality : 정수여부부를 체크한다.
  • length : 길이를 체크한다.
  • allow_blank: : 공백을 허용한다.

물론 위에서 열거한 목록 외에도 더 많은 검증 조건들이 있다. 또한 위와 같은 방식 말고 “validates of presence~”로 시작하는 다른 형태의 문법도 있다.

그런데 위의 코드들을 보면서 조금 혼동되는 부분이 있다. :presence 와 presence: 의 차이가 있는지 하는 점이다. 결론부터 말하자면 똑같다 다만 값을 대입하는 방법이 다르다. 전자와 같은 경우에는 예를 들면 “:presence => true”로 표현해야 하고 후자에는 “presence: true”로 표현해야 한다. 어떻게 해도 결과는 같다. 전자는 기존의 루비 문법으로 해쉬 형태로 값을 할당하는 것이고, 후자는 루비1.9에 오면서 새롭게 지원되는 문법형태라고 한다.

위의 검증 코드 중에서 가장 난해한 부분은 마지막이다. 마지막 검증은 이미지의 파일 경로의 마지막 확장자를 정규표현식을 통해서 검증하는 것이다. 위의 정규표현식을 간단히 해석해 보면 다음과 같다. 우선 정규표현식을 나타내기 위해서 “%r{정규표현식}” 과 같은 템플릿을 사용한다. 내용에서 백슬래쉬는 뒤에 나오는 .을 표현하기 위한 것이다. 정규표현식은에서 . 은 모든 문자에 해당되는 예약된 키워드이기 떄문에 순수하게 .을 매칭하기 위해서는 백슬래쉬를 반드시 붙여야 한다. 1그리고 뒤에 나오는 각각 jpg, gif, png는 파일 확장자이고 | 표시는 “또는”(or)을 표시하는 것이다. ‘\Z’는 문자열의 맨 마지막을 가리키게 하는 특수한 기능이다. 마지막으로 맨 뒤에 붙은 i는 대소문자 구분을 무시하라는 뜻. 결국 요약하면 입력된 이미지 경로 문자열의 끝이 “.jpg”, “.gif”, “.png” 가운데 대소문자 구분 없이 확인하는 표현식이다.

책에서는 ‘\Z’ 대신 $ 표시를 썼는데 똑같은 기능을 한다. 다만 $표시를 쓸 경우 “multiline” 옵션을 true로 반드시 추가 하지 않으면 에러가 뜬다. 이제 실제 애플리케이션을 서버 상에서 실행하고 나서 새로운 상품을 추가할 때 위 조건들을 지키지 않으면 아래와 같이 실시간으로 에러처리를 해준다.nike air max Low Cost

검증조건 확인

여기까지 하고 나서 “rake  test”를 하면 에러가 뜬다.  이유인 즉슨 레일스가 사전에 생성한 기능 테스트 케이스에서 위의 검증 조건을 맞추지 못한 경우가 있기 때문이다.  따라서 “test/controlles/products_controller_test.rb” 2 에서 위의 검증 조건을 맞출 수 있도록 코드를 수정해야 테스트에 문제가 없다. 코드를 들여다 보면 여러 기능 테스트들이 나열되어 있다. 문제가 된 부분은 상품 객체를 “생성(shoud create product)”, “갱신(shoud update product)”하는 테스트이다.  우선 위에서 설정한 검증 조건을 맞출 수 있도록 객체를 생성하고 이를 각각 생성, 갱신 테스트에 적용해야 한다. 적용한 후에 테스트를 실행하면 문제 없이 테스트를 통과할 수 있다.

다음은 단위테스트이다. C에서의 assert 문과 같이 루비에서도 동일한 키워드가 있다. assert 다음에 참인 조건이 나와야 한다. 만약 조건이 거짓일 경우 에러를 띄우게 된다. 단위테스트 코드는 책에서 설명하는 “test/units” 폴더와 달리 레일스 4에서는 test/model 안에서 확인할 수 있다.

ray ban sunglasses 3025

 test라는 키워드 뒤에 테스트에 대한 설명이 담긴 문자열이 뒤따라 온다. 그리고 do~end 구조 안에 테스트를 위한 코드가 있다. 첫번째 테스트 “Products attributes must not be empty”를 한 번 보자. 아무런 속성값 할당 없이 Products를 생성하였다. 당연히 유효하지 않은 생성이기 때문에 바로 이어지는 assert문에서 invalid? 조건을 통과한다는 것을 알 수 있다. 이어지는 assert문은 errors 배열 안에 각 속성 값에 대한 에러 값이 있는 지를 확인하는 any?를 사용하고 있다. 만약 위에 Products 객체를 초기값을 할당한 후에 “rake test:units”로 단위테스트를 실행하면 다음과 같은 에러메시지를 발견하게 될 것이다.

단위테스트 에러문구

세번째 테스트는 이미지 경로의 검증 조건을 실제 단위 테스트로 확인 한다. 미리 객체의 템플릿을 image의 경로 속성 값만 비워둔 채 이를 매개변수로 받는 함수 형태로 만들어 놓고, 조건에 맞는 이미지 경로와 맞지 않는 경로를 직접 테스트하는 코드이다.air jordan Sale

마지막으로 픽스쳐에 대해서 정리해보자. 픽스쳐는 레일스에서 테스트를 위해 준비해 둔 테스트 전용 데이터라고 생각하면 된다. 매번 테스트를 할 때 마다 임의의 값을 DB에 넣었다가 뺐다 하는 일은 참 번거로운 일이다. 레일스는 미리 “test/fixtures” 폴더 내에 모델의 테스트용 데이터를 입력할 수 있게 도와준다. 본 실습에 해당하는 Products 데이터 역시 YAML형식으로 products.yml 파일로 데이터가 저장되어 있음을 알 수 있다. “test/fixtures” 안에 픽스쳐를 만들어 두고서 단위테스트 파일 안에 “fixtures :(파일명)”을 표기하면 픽스쳐 데이터를 단위테스트에 활용할 수 있는 놀라운 기능이다.

7장에서는 오로지 테스트만 실습했다. Validates를 통한 모델 데이터 검증, assert를 활용한 단위테스트, 그리고 테스트를 돕기 위한 픽스쳐가 핵심이다. 이번 실습에 해당되는 소스는 깃헙에서  “second-iter” tag 로 확인할 수 있다.

https://github.com/jwj0831/rails-practice

Notes:

  1. http://blog.daum.net/creazier/15309380
  2. 교재에서는 test/functionals~ 였다. 아무래도 내가 사용하는 레일스4와는 폴더 구조가 다른 듯하다.

[한빛리더스 7기 활동] Angular JS 기초편 Ebook 받다!

한빛미디어에서 수행하는 한빛리더스 7기 활동을 이번 가을에 하게 되었습니다.
oakley protective eyewear
이전에도 한빛미디어에서 이북을 두권 구매해서 읽은 경험이 있어서 그런지, 이번에 “스마트 미디어 그룹”에 소속되어 한빛미디어에서 출판되는 이북을 읽고 리뷰를 남길 수 있는 기회를 얻었네요 ^^
air max 90s
AngularJS기초편 표지
prescription oakley sunglasses
첫 번째 미션도서로 받은 이북은 바로 “Angular JS 기초편“입니다. 이 책을 선택한 이유는 첫째는 웹프레임워크에 대한 관심 때문이었고, 둘째는 어떻게 하면 생산성 높은 개발을 할 수 있을지에 대한 고민 때문입니다.
air max 95
이전에도 한빛미디어의 Realtime 시리즈 이북을 구매했을 때와 같이 이북으로 보기 적절한 분량과 시원시원한 폰트 구성 등 이북에 최적화된 출판이 맘에 듭니다. 오라일리 출판사하면 떠오르는 특유의 온갖 생물체(?) 표지 디자인처럼  Realtime 시리즈가 표지디자인이 통일성을 갖추고 있어서 소유욕도 불러 일으키네요.
oakley script sunglasses
자 이제 앞으로 AngularJS 기초편을 차근 차근히 읽어보면서 학습 겸 리뷰를 진행해 보고자 합니다.

[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 폴더 패스는 제거한다.

[RoR 학습] 4장 루비언어 2/2 그리고 루비온레일스 학습과 개발환경

(아래 내용은 거의 일기 같은 글이라 타인에게는 도움이 안 될 듯 하다. 루비 공부 방법이 궁금한 분들은 바로 링크 목록 아래로~)
black ray ban sunglasses
아 방학동안 개인적인 공부할 시간이 충분히 있으리라 예상한 것과 달리 꽤 바쁜 시간을 보냈다. 우선 석사 첫 학기를 마치고 방학 동안 감사하게 첫 국내 저널에 논문을 제출하고 리뷰를 대기중이고, 지금도 급작스럽게 동료 논문의 해외저널 투고를 돕기 위해서 거의 논문의 30% 정도 되는 부분을 내가 다시 작성하고 있다. ㅠ 어찌 되었든 방학 동안 두 군데 저널에 논문을 쓸 수 있는 것을 감사하게 생각하고 그 동안 미진했던 루비온레일스 공부를 재개해보자!
ray ban round sunglasses
지금까지 학습한 내용은 사실 정말 별거 없다. 그래서 슬프다. ㅠ 레일스를 활용할 수 있는 기본 셋팅을 마쳤을 뿐이다. 그리고 잠깐 루비언어의 맛을 봤다. 사실 이 교재 4장의 후반부에서는 “모듈”과 “먀샬링 객체”라는 주제를 간단하게 다룬다.  그런데 문제는 짧은 몇 장의 내용에 피상적으로 다루다 보니 무슨 개념인지 머리로는 이해가 되지만 실제 어떻게 활용하는지 잘 모르겠다. 따라서 간단히 패스하기로 했다.

거두절미하고 이번 파트에서는 루비언어를 간단하게 휙 맛 볼 수 있는 사이트를 소개한다. 우선 주소부터 공개한다!

http://www.tryruby.org

Code School이라는 온라인 유료 강의 사이트에서 제공하는 무료 강좌 중에 하나이다. 15분 정도 아주 간단하게 루비의 기초 문법을 실시간으로 타이핑하면서 배울 수 있다는 점에서 좋다. 하지만 말 그대로 15분 정도에 루비를 시험해 보는 수준. 따라서 클래스나 메서드 같은 부분은 전혀 다루지 않는다는 단점이 있다.
nike air jordan 11
레일스 프레임워크를 공부할 때 다행인 점은 처음부터 루비의 문법을 달달 외고 공부할 필요가 없다는 점이다. 프로그래밍 언어를 조금이라도 접해봤다면 레일스를 공부해가면서 그때 그때 필요한 루비 문법을 익혀나가는 것이 오히려 효과적인 공부 방법인 것 같다.
ray ban sunglasses review
운 좋게도 Code School은 레일스 강좌도 하나 무료로 제공한다(여기를 클릭). 이 무료 강좌를 다 들었는데, 딱 “레일스와 함께와는 애자일 웹 개발” 5장부터의 내용의 이해가 훨씬 더 쉽다. 병행해서 공부하면 좋을 것 같다.

얼마 전까지 버추얼로 우분투 상에서 공부하던 레일스를 하스웰 맥북에어를 구매하면서 이제 맥 상에서 레일스를 학습할 수 있게 되었다. 다음은 검색을 통해 찾은 맥에서 레일스 개발환경을 꾸미기 위한 좋은 가이드라인이다.

http://createdbypete.com/articles/ruby-on-rails-development-with-mac-os-x-mountain-lion/

참고로 위 가이드 라인은 패키지 관리 툴로 macports를 대체해 가고 있는 homebrew라는 툴을 쓴다. 이게 필요한 이유는 rails 설치 시에 상당히 많은 의존 라이브러리들을 설치해야 하기 떄문이다.
ray ban sports sunglasses
또한 지금 학습하는 “레일스와 함께와는 애자일 웹 개발” 은 초기 개발환경 구축 시 RVM을 통해 루비 버전 관리를 권유하는데 위 가이드라인은 RVM대신 rbevn을 사용한다. 짧은 시간 구글링 해 본 결과 RVM은 시간이 갈수록 설정이 번거롭고 말썽을 좀 부리는 모양인데 rbenv는 그런 문제가 해결된 녀석인 듯 하다. 결론적으로 위 가이드라인을 따라하면 맥에서 레일스를 사용할 수 있다는 점!
air jordan vi
맥이 없다면 지금으로선 버추얼로 리눅스를 깔고 실습하는게 제일 낳은 듯 싶은데… 요즘 눈에 하나 들어 온 것이 있으니 그것은 바로 클라우드 IDE이다. 웹 상에서 라이브로 코딩하고 바로 실행해서 볼 수 있고 직접 서버호스팅과 연결할 수 있는 기능들도 있다. 최근에 눈독들이고 있는 것 중에 잠깐 테스트 겸 사용해 본 세 가지 사이트를 아래 소개한다.

  • https://www.nitrous.io
  • https://c9.io
  • https://codenvy.com

위 사이트 다 짧게 맛만 보았는데 일단 가장 마음에 드는 건 두 번째 클라우드 나인이다. 아래는 실제로 루비를 공부하면서 실습한 화면을 캡쳐한 것이다.
Germany air jordan
스크린샷 2013-08-22 오후 10.19.08

바로 바로 코딩한 것을 아래 터미널에서 확인할 수 있다. 물론 다른 사이트들도 동일한 기능을 제공하지만 UI나 사용 편의성은 간단하게 사용해 본 것 치고 이게 제일 맘에 든다. 시간이 되면 다른 두 사이트도 좀 더 자세히 사용해 볼 요량이다.
ray ban brasil
나 스스로 복습도 하면서 공대생으로서 정보 전달성 글의 작문실력도 키우려고 포스팅을 하는데, 요즘 느낌은 글의 사족이 많다는 점이다. 글의 날카로움과 전달하고자 하는 내용의 포커스를 잘 맞추는 훈련이 필요한 둣 하다. ㅠㅠ

 
nike air jordan 5