RubyOnRails
@켄타님이 위키 내용을 고쳤습니다.

ROR 101 - Ubuntu 16.04

ror101

해당 문서에서는 우분투 16.04에서 Ruby, Ruby on Rails를 설치하고 app을 만들어보는 내용을 담았습니다.

ROR 환경설정

  • rbenv 설치
    • rbenv?
      • ruby version managet tool
      • rbenv github : rbenv에서 사용가능한 옵션 정보
    • 레퍼런스 문서
    • 따라하면서 확인해야 할 사항들
      • 설치된 루비 버전 (ruby -v)
        • 현재 사용하는 루비 버전 : ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-linux]
      • rbenv를 이용한 사용할 루비 버전 선택 방법 (rbenv global ruby_version)
  • rails 설치
    • gem install rails
    • 설치된 레일즈 정보 확인하기
      • rails -v
      • 현재 ROR101에서 사용하는 레일즈 버전 : Rails 5.2.0

프로젝트 생성하기

rails 설치와 gem 설치

  • rails로 새로운 프로젝트 생성하기
    • rails new blog
    • rails new // 새로운 프로젝트 생성하는 명령어
    • blog // 생성할 프로젝트 이름
    • 결과
      • 프로젝트 이름으로 폴더가 생성됨(blog)
      • 해당 폴더로 이동해서 Gemfile을 열어보면 설치된 환경이 명시되어 있음
      • Gemfile을 통해서 gem(ruby 라이브러리)를 설치하고 관리함
  • Gemfile 수정하기(프로젝트에서 사용할 모듈 설치 및 삭제를 위해)
    • Gemfile?
      • 루비 프로그램의 의존성을 명시하는 파일
    • 추가할 모듈: mysql2, sass-rails, bootstrap-sass, jquery-rails, haml-rails
    • 삭제할 모듈: sqlite3
    • gem을 이용해서 추가하기 : Gemfile을 열고 gem을 추가
gem 'mysql2' 
                                                                                                                                                      gem 'sass-rails', '~> 5.0'
                                                                                                                                                      gem 'bootstarp-sass'
                                                                                                                                                      gem 'jquery-rails'
                                                                                                                                                      gem 'haml-rails'
                                                                                                                                                      
  • Gemfile에서 sqlite3를 삭제
  • gem 모듈 설치하기
    • bundle install
    • Gemfile에서 추가하거나 삭제한 내용을 적용

데이터베이스 생성, 프로젝트와 연결

레일스에서 연결할 데이터베이스 설정하기

  1. project_folder/config/database.yml 수정
development:
                                                                                                                                                        <<: *default
                                                                                                                                                        adapter: mysql2
                                                                                                                                                        encoding: utf8
                                                                                                                                                        database: blog2_development
                                                                                                                                                        pool: 5
                                                                                                                                                        username: root
                                                                                                                                                        password:
                                                                                                                                                        socket:
                                                                                                                                                      
  • adapter : 사용할 데이터베이스와 연결할 gem 이름
  • encoding : 데이터베이스 캐릭터 셋 지정
  • database : 연결할 데이터베이스 이름
  • pool : 하나의 레일즈 프로세스가 연결할 수 있는 데이터베이스 프로세스 수
  • username : 연결할 데이터베이스 아이디
  • password : 연결할 데이터베이스 패스워드
  • socket: 연결할 데이터베이스 소켓의 위치
    • 우분투에서 mysql 소켓 위치 찾기
      • /etc/mysql/mysql.conf.d/mysqld.cnf 파일을 열고 socket으로 검색
      • /var/run/mysqld/mysqld.sock
  1. 데이터베이스 만들기
  • mysql 구동
    • service mysql start
  • mysql 실행
    • mysql -u root -p
  • 데이터베이스 만들기
    • create database blog_development CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
    • blog_development 에 프로젝트 이름을 입력, PROJECTNAME_development
    • 뒤의 _development는 개발할 때 사용할 데이터베이스여서 이렇게 이름을 붙임
    • test는 _test 를 붙임, 일종의 사용하기 편하게 만든 룰

HOME 작업하기

  • home 컨트롤러 만들기
    • rails g controller home
    • g : generate 의 줄임말 옵션
    • g controller : controller 를 생성
    • g controller home : home controller 생성
    • controller 생성 시 만들어 지는 중요 파일들
      • app/controllers/home_controller.rb : 컨트롤러 기능을 추가하는 곳
      • app/views/home : home과 관련된 뷰 파일이 위치하는 곳
  • 라우터 작업으로 home 컨트롤러와 연결하기
    • config/router.rb 파일 오픈
    • Rails.application.routes.draw do ~ end 사이에 root 'home#index' 입력
      • root 는 웹페이지의 전면페이지를 설정하는 예약어
      • 'home#index' : 전면페이지로 접속할 시에 연결할 뷰 파일
        • app/views/home/index.html.haml 로 연결
    • app/views/home/index.html.haml 생성
      • 해당 파일안에 <h1>Hello Rails</h1> 작성
      • 프로젝트 폴더에서 rails server로 서버 구동
      • 브라우저에서 http://localhost:3000로 접속, Hello Rails 문구 출력 화인

Post 작업하기

  • rails g scaffold Post title body
    • g: generate 줄임말 옵션
    • scaffold : 골격을 만드는 명령어 옵션
    • g scaffold Post : Post scaffold 를 만듦 (g scaffold SCAFFOLD_NAME)
    • g scaffold Post title body : Post 데이터베이스 테이블 칼럼으로 title, body 생성
    • g controller 와 g scaffold 차이점?
      • scaffold로 생성하면, model route view controller가 다 생성됨
        • active_record
          • db/migrate/에 파일 생성 (해당 파일에서 디비 속성 변경가능)
          • app/models/post.rb 에 모델 클래스 생성
        • resource_route
          • 생성된 posts가 resources로 지정됨
          • router.rb에 위의 내용이 추가됨
          • resources로 라우터를 설정하면 get, put 등의 http메소드가 해당 컨트롤러와 매칭이 됨(일일이 다 설정하지 않아도 됨)
        • controller 생성
        • view 생성
          • index, edit, show, new, _form
        • helper 생성
  • Post table 만들기(데이터베이스)
    • rails db:migrate
    • 데이터베이스에 posts 테이블이 생성됨
  • post path를 index.html.haml에 추가하기
    • app/views/home/index.html.haml 파일 오픈
  • post path를 index.html.haml에 추가하기
    • app/views/home/index.html.haml 파일 오픈, 아래 문구 작성
.page-container.container
                                                                                                                                                         = yield
                                                                                                                                                         %h1 Home#index
                                                                                                                                                         %p Find me in app/views/home/index.html.haml
                                                                                                                                                         = link_to "Posts", posts_path
                                                                                                                                                      
  • link_to "Posts", posts_path : post와 관련된 링크 태그를 생성
  • rails server 구동 후 posts 링크 클릭하면 localhost:3000/posts 넘어감

Category 작업하기

  • rails g scaffold Category name slug 골격생성
  • rails db:migrate 디비 마이그레이션
  • config/router.rb 를 오픈 : 라우터 작업
    • resources :categories 추가
  • views/home/index.html.haml 작업 - view 작업
    • = link_to "Categories", categories_path 추가
  • rails server 구동 후, 접속
    • categories 링크 클릭 시, categories로 이동

Post 와 Category 관계 맺기

  • app/models/post.rb 파일 오픈
    • belongs_to :category 추가
  • app/models/category.rb 파일 오픈
    • has_many :posts 추가
  • 마이그레이션 생성하기
    • rails g migration AddCategoryToPost category:references
    • AddCategoryToPost : 이름이 중요함!!!!!! Post 테이블에 카테고리 테이블 관계 매칭 (대문자!!!)
  • rails db:migrate

Post에서 Category 관련 작업하기

  • app/controllers/posts_controller.rb 오픈, 새로운 포스트를 작성할 때 꼭 필요한 파라미터로 category 추가하는 작업
    • post_params 함수안의
      • params.require(:post).permit(:title, :body) 를 아래와 같이 고침
      • params.require(:post).permit(:title, :body, :category_id)
def post_params
                                                                                                                                                        params.require(:post).permit(:title, :body)
                                                                                                                                                      end
                                                                                                                                                      
  • app/views/post/_form.html.haml 오픈, 새로운 포스트를 만들 때 카테고리 추가할 수 있게 폼 양식 변경
= form_for @post do |f|
                                                                                                                                                        - if @post.errors.any?
                                                                                                                                                          #error_explanation
                                                                                                                                                          %h2= "#{pluralize(@post.errors.count, "error")} prohibited this post from being saved:"
                                                                                                                                                          %ul
                                                                                                                                                            - @post.errors.full_messages.each do |message|
                                                                                                                                                              %li= message
                                                                                                                                                        .field
                                                                                                                                                          = f.label :title
                                                                                                                                                          = f.text_field :title
                                                                                                                                                        .field
                                                                                                                                                          = f.label :body
                                                                                                                                                          = f.text_field :body
                                                                                                                                                        .field
                                                                                                                                                          = f.label :category
                                                                                                                                                          = f.collection_select :category_id, Category.all, :id, :name, include_blank:true
                                                                                                                                                        .actions
                                                                                                                                                          = f.submit 'Save'
                                                                                                                                                      
  • app/views/post/show.html.haml 오픈, 포스트를 볼 때 카테고리가 보이게 변경
%p#notice= notice
                                                                                                                                            
                                                                                                                                                      %p
                                                                                                                                                        %b Category:
                                                                                                                                                        = @post.category.name
                                                                                                                                                      %p
                                                                                                                                                        %b Title:
                                                                                                                                                        = @post.title
                                                                                                                                                      %p
                                                                                                                                                        %b Body:
                                                                                                                                                        = @post.body
                                                                                                                                            
                                                                                                                                                      = link_to 'Edit', edit_post_path(@post)
                                                                                                                                                      \|
                                                                                                                                                      = link_to 'Back', posts_path
                                                                                                                                                      

HOME에서 Category 관련 작업하기

  • index.html.haml 에 category 별 링크 생성하기, 파일을 열고 마지막 줄에 아래 코드 추가
Category.all.each do |category|
                                                                                                                                                        %li= link_to category.name, posts_path(category: category)
                                                                                                                                                      
  • posts_path안의 파라미터로 category를 넘겨줌, 해당 링크 클릭 시 post?category=1 링크로 넘어감
  • post 패스에 category 쿼리가 있을 경우, 해당 category의 post만 출력되게 변경
    • app/controllers/post_controller.rb를 오픈, 아래와 같이 index 함수에 변경
def index
                                                                                                                                                          if params[:category].presennt?
                                                                                                                                                            @category = Category.find(params[:category])
                                                                                                                                                            @posts = @category.posts
                                                                                                                                                          else
                                                                                                                                                            @posts = Post.all
                                                                                                                                                          end
                                                                                                                                                      end
                                                                                                                                                      
  • post path에 쿼리로 category가 있을 경우 category 출력
    • app/views/post/index.html.haml 오픈, 상단에 아래 코드 추가
-if @category
                                                                                                                                                        %h3= @category.name
                                                                                                                                                      

로그인 기능과 User 테이블

devise 설치하기

  • devise gem을 사용해서 구현함
    • devise를 사용하는 이유?
  • Gemfile에 gem 'devise' 를 추가
  • bundle 콘솔에서 입력, Gemfile을 읽어 추가된 devise를 설치 (bundle 과 bundle install 같음)
  • rails g devise install - devise 생성??
    • config/initializer.rb, config/locales/devise.en.yml 생성됨

User model 만들기

  • devise를 사용해서 USER모델 생성
    • rails g devise User
      • migration 파일, user.rb, router에 devise_for :users 생성됨
    • rails db:migrate

Home에 로그인 관련 기능 구현하기

  • app/views/home/index.html.haml 오픈
.page-container.container
                                                                                                                                                        = yield
                                                                                                                                                        %h1 Home#index
                                                                                                                                                        %p Find me in app/views/home/index.html.haml
                                                                                                                                                        = link_to "Posts", posts_path
                                                                                                                                                        = link_to "Categories", categories_path
                                                                                                                                                        - Category.all.each do |category|
                                                                                                                                                          %li= link_to category.name, posts_path(category: category)
                                                                                                                                                        - if user_signed_in?
                                                                                                                                                          = current_user.email
                                                                                                                                                          = link_to 'Sign Out', destroy_user_session_path, method: :delete
                                                                                                                                                        - else
                                                                                                                                                          = link_to 'Sign in', new_user_session_path
                                                                                                                                                          = link_to 'Sign up', new_user_registration_path
                                                                                                                                                      

User 모델과 Post모델 관계 맺기

  • app/models/post.rb오픈
class Post < ApplicationRecord
                                                                                                                                                        belongs_to :category
                                                                                                                                                        belongs_to :user
                                                                                                                                                      end
                                                                                                                                                      
  • rails g migration AddUserToPost user:refenrences 실행
    • 두 모델 관계 마이크레이션 생성
  • rails db:migrate
Post 작성 시 현재 User 등록
  • app/controller/post_controller.rb 오픈
  • create 함수 안에 아래와 같이 작성
def create
                                                                                                                                                          @post = Post.new(post_params)
                                                                                                                                                          @post.user = current_user
                                                                                                                                                          respond_to do |format|
                                                                                                                                                            if @post.save
                                                                                                                                                              format.html { redirect_to @post, notice: 'Post was successfully created.' }
                                                                                                                                                              format.json { render :show, status: :created, location: @post }
                                                                                                                                                            else
                                                                                                                                                              format.html { render :new }
                                                                                                                                                              format.json { render json: @post.errors, status: :unprocessable_entity }
                                                                                                                                                            end
                                                                                                                                                          end
                                                                                                                                                        end
                                                                                                                                                      
  • post_params 함수 수정
params.require(:post).permit(:title, :body, :category_id, :user_id)
                                                                                                                                                      
  • app/views/post/index.html.haml 수정
%table
                                                                                                                                                          %tr
                                                                                                                                                            %th Title
                                                                                                                                                            %th Body
                                                                                                                                                            %th Category
                                                                                                                                                            %th User
                                                                                                                                                            %th Function
                                                                                                                                            
                                                                                                                                                        %tbody
                                                                                                                                                          - @posts.each do |post|
                                                                                                                                                            %tr
                                                                                                                                                              %td= link_to post.title, post
                                                                                                                                                              %td= raw post.body
                                                                                                                                                              %td= post.category.name
                                                                                                                                                              %td= post.user.email if post.user
                                                                                                                                                              %td= link_to 'Edit', edit_post_path(post)
                                                                                                                                                              %td= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' }
                                                                                                                                            
                                                                                                                                                      %br
                                                                                                                                            
                                                                                                                                                      = link_to 'New Post', new_post_path
                                                                                                                                                      = link_to 'HOME', root_path
                                                                                                                                                      

Post edit시에 현재 유저 등록

  • app/controllers/posts_controller.rb 수정
  • update 함수
def update
                                                                                                                                                          respond_to do |format|
                                                                                                                                                          @post.user = current_user
                                                                                                                                                            if @post.update(post_params)
                                                                                                                                                              format.html { redirect_to @post, notice: 'Post was successfully updated.' }
                                                                                                                                                              format.json { render :show, status: :ok, location: @post }
                                                                                                                                                            else
                                                                                                                                                              format.html { render :edit }
                                                                                                                                                              format.json { render json: @post.errors, status: :unprocessable_entity }
                                                                                                                                                            end
                                                                                                                                                          end
                                                                                                                                                        end
                                                                                                                                                      
  • 유저가 설정되지 않은 포스트의 경우, edit링크 화면에서 저장하면 현재 유저로 설정됨

----------------------------------------------------------------- 7월 10일

Database 와 모델 생성하는 곳에서 연결하는 곳에서 시간이 많이 걸렸음

belongs_to :category, has_many: posts (post로 오타내고 한참 삽질함)

db, migration, model 좀 더 보기

기존 문서에서 Post등록 시 user 부분 수정, update 수정함

---------------------------------------------------------------------------

이미지업로드와 에디터 추가하기

  • CARRIERWAVE + CKEDITOR 사용함
    • carrierwate : 파일 업로드
    • ckeditor : 에디터

carrierwave 설치하기

  • Gemfile을 열어서 carriewave, mini_magick 추가
    • mini_magick : 이미지 업로드에 사용
gem 'carrierwave'
                                                            gem 'mini-magick'
                                                            
  • bundle
  • rails g uploader Image
    • app/uploaders/image_uploader.rb 생성

이미지 업로드 기능 구현

  • Post 모델에 이미지 업로드를 이용하는 featured 필드 생성
    • app/models/post.rb 열기
    • model에서 mount_uploader는 무엇???
class Post < ApplicationRecord
                                                              belongs_to :category
                                                              belongs_to :user
                                                              mount_uploader :featured, ImageUploader
                                                            end
                                                            
  • 마이그레이션 만들기

    • rails g migration AddFeaturedToPosts featured
    • rails db:migrate
  • Post 작성 시, 업로드 부분 추가하기

    • app/views/posts/_form.html.haml
.field
                                                              = f.label :featured, '이미지'
                                                              = f.file_field :featured
                                                            
  • Post 접근 시, 이미지 파일 노출
    • app/views/post/show.html.haml
%p
                                                              = image_tag @post.featured_url(:thumb) if @post.featured?
                                                            
  • featured_url(:thumb) 작업
    • app/uploaders/image_uploader.rb
    • 아래 사항 주석 해제 하기
include CarrierWave::MiniMagick
                                                            version :thumb do
                                                              process :resize_to_fit => [100,100]
                                                            end
                                                            
  • app/controller/posts.rb의 params 작업해주기
def post_params
                                                            	params.require(:post).permit(:title, :body, :category_id, :user_id, :featured)
                                                            end
                                                            
  • rails server 구동 후, 확인
    • mysql에서 확인

Ckeditor 추가하기

  • Gemfile에 gem 'ckeditor' 추가
  • bundle
  • rails g ckeditor:install -orm=active_record -backend=carrierwave
  • app/assets/javascripts/application.js 오픈
    • //= require ckeditor/init 추가 (해당 파일에 명시된 라이브러리는 모든 웹페이지에 추가됨???)
  • 인스톨시에 생성된 db/migrate/~~~~_assets.rb를 오픈
    • class CreateCkeditorAssets < ActiveRecord::Migration[5.2]로 변경
  • config/initializers/ckeditor.rb 오픈
    • cdn 주석 제거 config.cdn_url = '//cdn.ckeditor.com/4.7.1/standard/ckeditor.js'
  • rails db:migrate
  • app/view/layouts/application.html.erb 오픈 -<%= javascript_include_tag 'application', Ckeditor.cdn_url %> 추가하기
  • config/intializers/assets.rb 오픈 -Rails.application.config.assets.precompile += %w( ckeditor/config.js )
  • Post 작성 시 ckeditor로 작성하게 하기
    • app/views/post/_form.html.haml 오픈
  .field.emoji-picker-container
                                                                = f.label :body
                                                                = f.cktext_area :body, id:'ckeditor', data: { emojiable: true }
                                                            
  • Post body를 raw로 변경하기
    • app/views/posts/show.html.haml
      • = raw @post.body

권한설정하기

  • cancancan gem 사용
  • Gemfile에 gem 'cancancan' 추가
  • bundle
  • rails g cancan:ability
  • app/models/ability.rb 오픈
def initialize(user)
                                                                if user
                                                                  can: manage, Post, user_id: user_id
                                                            end
                                                            
  • Post를 리스트로 출력할 때 권한에 따라 edit, destory 달리 보이게 하기
  • app/views/posts/index.html.haml
 %tbody
                                                                - @posts.each do |post|
                                                                  %tr
                                                                    %td= link_to post.title, post
                                                                    %td= raw post.body
                                                                    %td= post.category.name
                                                                    %td= post.user.email if post.user
                                                                    %td= link_to 'Edit', edit_post_path(post) if can? :edit, post
                                                                    %td= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } if can? :edit, post
                                                            

댓글기능 추가하기(ajax사용)

  • Gemfile에 gem 'record_tag_helper추가
    • bundle
  • comment 모델 만들기, body:text column 생성
    • rails g model Comments body:text
  • app/models/comments.rb 오픈
    • post,user 모델 관계 설정(comment 모델은 post와 user 모델과 일대다 관계를 갖음, 두 모델과 연관성)
class Comment < ApplicationRecord
                                                              belongs_to :user
                                                              belongs_to :commentable, polymorphic: true
                                                              validates :commentable, presence: true
                                                            end
                                                            
  • commentable 과 연관이 있게 만들고 post 모델에서 has_many: commentabl 로 설정해야, 두 모델이랑 관계가 맺어짐

  • comment에 대한 라우터 설정

    • config/router.rb
resources :posts do
                                                                resources :comments
                                                            end
                                                            
  • comments에 대한 컨트롤러 생성하기 -rails g controller Comments
    • app/controllers/comments_controller.rb
class CommentsController < ApplicationController
                                                              def index
                                                                @commentable = find_commentable
                                                                @comments = @commentable.comments
                                                              end
                                                        
                                                              def create
                                                                @commentable = find_commentable
                                                                @comment = @commentable.comments.new(comment_params)
                                                                @comment.user = current_user
                                                                if @comment.save
                                                                  redirect_to post_path(params[:post_id])
                                                                else
                                                                  flash.now[:danger] = "comment error"
                                                                end
                                                              end
                                                        
                                                              def update
                                                              end
                                                        
                                                              def destroy
                                                                @comment = current_user.comments.find(params[:id])
                                                                @comment.destroy
                                                        
                                                              private
                                                                def find_commentable
                                                                   params.each do |name, value|
                                                                     if name =~  /(.+)_id$/
                                                                       return $1.classify.constantize.find(value)
                                                                     end
                                                                   end
                                                                end
                                                        
                                                                def comment_params
                                                                  params.require(:comment).permit(:body)
                                                                end
                                                            end
                                                            
  • comments모델과 post, user 모델 관계 생성하기 -rails g migration AddForiengnKeyToComments post:references user:references

    • comment모델에 post_id, user_id 생성, 두 모델과 관계맺음 -rails g migration AddVariableToComments commentable_id:integer commentable_type:string
    • polymorphic 관계를 맺기 위해, commentable_id, commentable_type이 꼭 테이블에 존재해야함 -rails db:migrate
  • post를 볼 때 관련한 comments가 보이게 작업하기

    • app/views/posts/show.html.haml
%p
                                                              %b
                                                                  Comments
                                                                      = render "comments", commentable: @post
                                                            
  • app/views/application/_comments.html.haml 작성(위의 render함수가 해당 파일을읽음)
%div
                                                              %hr
                                                              %div{:class => "comments"}
                                                                = render commentable.comments
                                                              %div
                                                              = form_for [commentable, commentable.comments.build], remote: true do |f|
                                                                %div{:class => "form-group"}
                                                                  = f.text_area :body,  class:'ckeditor'
                                                                  = f.submit class: 'btn btn-default'
                                                            
- app/views/comments/_comments.html.haml 작성
                                                            - 위의 render 함수는 해당 파일을 부름
                                                            - render 사용법???
                                                            
%div
                                                              %hr
                                                              %div{:class => "comments"}
                                                                = render commentable.comments
                                                              %div
                                                              = form_for [commentable, commentable.comments.build], remote: true do |f|
                                                                %div{:class => "form-group"}
                                                                  = f.text_area :body,  class:'ckeditor'
                                                                  = f.submit class: 'btn btn-default'
                                                            
- post모델에서 comment 관계설정하기(has_many)
                                                            	- app/models/post.rb
                                                            
class Post < ApplicationRecord
                                                              belongs_to :category
                                                              belongs_to :user
                                                              mount_uploader :featured, ImageUploader
                                                              has_many :comments, as: :commentable, dependent: :destroy
                                                            end

--------------------------------------------------------------------------

7월11일 - 댓글 기능 작업

이 번에도 comment 모델 만들고 post, user와 연결할 때 rails g migration에서 헤매서 시간이 오래걸림

render를 사용시 불러오는 함수의 위치가 헷갈려서 찾아보느라 시간이 꽤 걸림

--------------------------------------------------------------------------

Design 작업하기 (bootstrap, scss)

  • app/assets/javascripts/applications.js 에 추가
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
  • app/assets/stylesheets/application.scss 에 추가
    • app/assets/stylesheets/application.css 삭제(삭제하지 않으면 우선선위가 이 파일이 더 높음)
@import "bootstrap-sprockets";
@import "bootstrap";
@import "home";
  • app/assets/stylesheets/home.scss 에 아래 문구 추가(page-container css작업)
.page-container{
  padding-top: 50px;
  word-break: keep-all;
  @media (max-width: $screen-xs-max) {
    padding-top: 52px;
  }
}
  • app/veiws/layouts/application.html.haml 화면 작업
!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type" }/
    %title Blog1
    = csrf_meta_tags
    = csp_meta_tags
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track':'reload'
    = javascript_include_tag Ckeditor.cdn_url
    %meta{:charset => "utf-8"}
    %meta{:content => "IE=edge", "http-equiv" => "X-UA-Compatible"}/
    %meta{:content => "width=device-width, initial-scale=1.0, maximum-sacle=1.0, user-scalable=0", :name => "viewport"}/
  %body
    = render 'home/header'
    .page-container.container
      = yield
  • header 작업하기
    • app/views/home/_header.html.haml 작성
/ Fixed navbar
.navbar.navbar-default.navbar-fixed-top{:role => "navigation"}
  .container
    .navbar-header
      %button.navbar-toggle{"data-taget" => ".navbar-collapse", "data-toggle" => "collapse", :type => "button"}
        %span.sr-only Toggle navigation
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar
      %a.navbar-brand{:href => "#"}Blog
    .navbar-collapse.collapse
      %ul.nav.navbar-nav
        %li.active
          %a{:href => "#"} Home
        %li
          %a{:href => "#about" } About
        %li
          %a{:href => "#contact" } Contact
        - if user_signed_in?
          %li
            %a{:href => "#"}
              = current_user.email
          %li
            = link_to 'Sign Out', destroy_user_sesstion.path, method: :delete
        - else
          %li.dropdown
            %a.dorpdown-toggle{"data-toggle" => "dropdown", :href => "#"}
              Dropdown
              %b.caret
            %ul.dropdown-menu
              %li
                %a{:href => "#"} Action
              %li
                %a{:href => "#"} Another action
              %li
                %a{:href => "#"} Something else here
              %li.divider
              %li.dropdown-header Nav header
              %li
                %a{:href => "#"} Separated link
              %li
                %a{:href => "#"} One more separated link
      / /.nav-collapse

---------------------------------------------------------------------------

7월 12일 - render 함수에서 헤맸는데 render 사용 시 첫 번째 파라미터의 위치가 어디에 있는지 헷갈림 그리고 _를 사용해서 파일을 작성해야 한다는 점 그리고 erb파일이 있을 경우 같은 파일명이 있는 다른 파일보다 우선 시 한다는 점! 예를 들면 applicatoin.html.haml 과 application.html.erb가 있을 경우, 뒤의 erb를 읽어들인다는 점 주의!

--------------------------------------------------------------------------

작성
공감해요
기술 가이드 채널의 다른 게시글 더 보기
기술 가이드 채널의 다른 게시글 더 보기
기술 가이드 채널은? 자세히 보기
빠띠에 쓰이는 기술을 소개하고 그 기술을 익히기 위한 가이드를 모읍니다.
기술 가이드 채널에 가입해서 흥미진진한 소식을 받아보세요.
가입하기