프로젝트폴더/app/assets/stylesheets에 scaffolds.css.scss라는 파일이 있다.

이는 스캐폴드 생성시 자동으로 생겨나는 CSS파일이다.

  rails generate scaffold MODEL --no-stylesheets 라고 하면 이 파일이 안 생긴다.


이 파일안에는 다음과 같은 코드가 있다.



field_with_errors라는 아이디에 빨간색을 입혀주는 것이다.

레일스는 폼을 작성했을 때 model의 유효성에 어긋나는 곳을 

field_with_errors를 id로 갖는 태그로 감싼다.


다음과 같이 이메일 주소를 하지 않으면 빨간 테두리가 쳐진다.


코드를 봐보자.


눈여겨 보니 model의 유효성에 어긋나는 곳을 찾을 때 태그의 name속성을 이용하는 듯보인다.

근데 위에는 로그인 페이지, 밑에는 회원가입페이지를 설정하면

회원가입에 실패해도 로그인과 회원가입 둘다 빨간 테두리가 생겨서 문제다.




참고자료




Posted by 하남각목

모델 생성하기.

  rails generate model Product title:string description:text price:integer


product 모델이 생성된다. 테이블은 products로 모델의 복수형으로 쓰인다.


모델 컬럼 변화

  rails generate migration add_brand_to_products brand:string

brand 컬럼을 모델에 집어넣는다.


  rails generate migration remove_brand_from_products

brand 컬럼을 모델에서 제외시킨다.



  위의 변화를 실제 데이터베이스에 적용시킬려면

  rake db:migrate 를 실행해야 한다.





참고자료

1. 레일즈 가이드





Posted by 하남각목

WEBrick이 아니라 Thin으로 레일스 서버를 돌리는 방법이다.

우선 Gemfile에 다음 코드를 삽입한다.

  gem 'thin'





그런후 쉘에서 다음을 실행한다.

  bundle install



끝이다. 

쉘에서 레일스 서버를 실행하면 다음과 같이 Thin서버가 돌아가는 것을 확인할 수 있다.

  레일스 서버는 쉘에서 'rails s' 명령으로 실행할 수 있다. 'rails server'라고 해도 된다.




혹시나 계속 WEBrick으로 돌아간다면 다음을 더 확인해보자.

~/.rvm/gems/ruby-버전/gems/rack-버전/lib/rack/handler.rb 파일을 열어보자.



다음과 같이 40~44번째 줄에 Thin이 있으면 실행하고 로드 실패하면 WEBrick을 실행하라는 형식으로 바꿔주자.




참고자료

1. rack - github




Posted by 하남각목

  Bootstrap을 설치하지 않은 경우에는 '이곳'을 참고하여 설치하고 돌아오자.


ERB에서 Button을 꾸며보자.

ERB는 Embeded Ruby의 줄임말로 HTML에 루비코드를 삽입한 것이다.


  ERB(Embeded Ruby)보다 HAML(HTML Abstraction Markup Language)을 사용하라는 말이 있는데, 이에 대한 포스트는 나중에 HAML을 공부한 뒤 올리겠다.



부트스트랩을 이용하여 버튼을 꾸미는 것은 정말 간단하다.

그냥 다음 클래스를 html 태그에 삽입하면 된다.


다음과 같이 html코드에 클래스를 지정해준다.

  <button class="btn btn-primary">Large</button>

  <label class="btn btn-link">small</label>


결과물.



그런데 실제로 루비온레일즈로 개발하다보면 html코드에 클래스를 넣는 것보다는

erb코드에 클래스를 넣는 경우가 많다.



그런 경우 태그에 클래스를 넣지말고 

다음과 같이 erb메서드의 인자로 클래스를 넣어주면된다.


  <%= button_to 'Large', path, class: "btn btn-primary" %>

  <%= link_to 'small', path, class:"btn btn-link" %>




참고자료

1. Bootstrap




Posted by 하남각목

트위터에서 부트스트랩이란 걸 만들었다.

부트스트랩은 HTML5 & CSS3 UI Framework이다.


우선 bootstrap 사이트로 들어가 파일을 다운받는다.

컴파일 버전을 다운받는 것을 추천한다.

http://twitter.github.io/bootstrap/getting-started.html



다운받은 폴더를 열어보면 css, js, img 폴더가 있을 것이다.



css 폴더에 있는 bootstrap.min.css파일을 프로젝트폴더/app/assets/stylesheets/ 폴더로 복사한다.


js 폴더에 있는 bootstrap.min.js파일을 프로젝트폴더/app/assets/javascripts/ 폴더로 복사한다.


   파일명에 min이 들어간 것은 들어가지 않은 것을 최대한 축약한 것이다.(띄어쓰기, 개행 등)





참고자료

1. 부트스트랩




Posted by 하남각목

Sublime Package Control이 없다면 '이곳'을 참고하여 Sublime Package Control을 먼저 다운받자.


ERB Insert and Toggle Commands는 ERB를 단축키를 사용하여 삽입 및 변경할 수 있는 플러그인이다.

이를 설치하기 위해 Shift + Ctrl + P 를 눌어 Sublime Package Control을 실행시키고

Package Control: Install Package를 선택한다.



ERB Insert and Toggle Commands를 검색하여 설치하자.



설치 후 Preferences에서 Key Bindings - User 파일을 열자.




Default (OSX).sublime-keymap 파일이 열린다.

이곳에 다음을 붙여넣자.

[

{ "keys": ["ctrl+shift+."], "command": "erb" }

]




Sublime Text에서 Shift + Ctrl + . 을 눌러보자.

<%= %>, <%# %>, <%= -%>, <% %>, <% -%>이 번갈아 생길것이다.




참고자료

1. SublimeERB - Github




Posted by 하남각목

 Sublime Package Control이 없다면 '이곳'을 참고하여 Sublime Package Control을 먼저 다운받자.


Alternative AutoComplete는 TextMate처럼 작동하는 플러그인으로 루비 자동완성기이다.

설치하는 방법은 간단하다.


Shift + Ctrl + P를 눌러서 Sublime Package Control을 실행시킨다.

그 다음에 Package Control: Install Package 를 검색하자.




alternative autocomplete를 검색하여 다운받는다.



끝.


참고자료

1. sublime_text_alternative_autocompletion - Github



Posted by 하남각목

   Sublime Package Control이 없다면 '이곳'을 참고하여 Sublime Package Control을 먼저 다운받자.


HAML은 HTML Abstraction Markup Language의 약자로 HTML을 쉽게 사용할 수 있게 하는 언어이고

SASS는 Syntactically Awesome Stylesheets의 약자로 CSS를 쉽게 사용할 수 있게 하는 언어이다.



이번에는 Sublime Text에 HAML과 SASS의 패키지를 설치해보자.

git clone 명령어로 git@github.com:n00ge/sublime-text-haml-sass.git을 복사한다.

성공시 다음과 같은 파일들을 볼 수 있다.


그 다음 Preferences -> Browse Packages... 로 Package folder를 띄운다.



이곳에 Ruby Haml과 SASS폴더를 복사한다.

Sublime Text를 재실행한다.



  여기까지 했을때 혹시나 SASS와 관련하여 오류가 생기면 다음을 진행하자.


우선 Shift + Ctrl + P를 눌러 Sublime Package Control 창을 띄운다.

Package Control: Install Package로 들어간다.



sass를 검색하여 설치해준다.



오류가 없어졌을 것이다.




참고자료

1. sublime-text-haml-sass -Github

2. HAML - 위키피디아

3. SASS - 위키피디아



Posted by 하남각목

View 에서 Show Console로 들어간다.




다음과 같은 콘솔창이 밑에 보인다.


다음을 그대서 복사하여 콘솔창에 붙여넣자.

  import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')



실행한다.

이는 Installed Package folder를 생성해주고 그 안에 Control.sublime-package를 다운받는 코드이다.





참고 자료

1. Sublime Package Control



Posted by 하남각목

  Sublime Package Control이 없다면 '이곳'을 참고하여 Sublime Package Control을 먼저 다운받자.


Sublime Text를 열고 Package Control 창을 연다.


  Package Control의 단축키는 Shift + Ctrl + P 이다.





Package Control:Install Package로 들어간다.



RailsCasts Colour Scheme을 검색하여 다운 받는다.





Preferences -> Color Scheme -> RailsCasts Colour Scheme으로 들어가서

 RailsCastsColorScheme을 적용한다.


  RailsCasts Colour Scheme이 없다면 Sublime Text를 재시작해보자.



결과. 아름답다.




참고자료




Posted by 하남각목