Bootstrap 디자인 적용하기

TO DO :: 각 단계 결과 스크린샷 + 프로젝트 소스코드 GITHUB 연결

[TIP] https://getbootstrap.com

부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크입니다. 우리는 앞서 css와 html으로 나의 웹서비스의 디자인이 적용되는 원리를 배웠습니다. 부트스트랩은 그 원리를 이용하여 이미 만들어진 프론트엔드 컴포넌트 라이브러리입니다. 우리는 부트스트랩 홈페이지를 참조하며 내가 필요한 디자인의 클래스명 단어만 입력하면 멋진 view를 만들 것 입니다. 각 요소의 디자인들은 부트스트랩 홈페이지에서 documentation 탭에서 찾아 볼 수 있습니다.

설치

[TIP] google: bootstrap4 gem

레일즈에서는 간단하게 gem 설치로 바로 이용할 수 있습니다. 먼저 Gemfile에 bootstrap gem을 추가합니다. 최신버전인 4로 진행합니다. (레일즈 버전이 5.1 이상인 분들은 jquery-rails gem도 함께 추가합니다. 이미 있다면 추가하지 않아도 됩니다.)

5-2-1

#Gemfile
gem 'bootstrap', '~> 4.0.0.beta'
gem 'jquery-rails' # Rails 5.1+

5-2-2

서버에 설치 명령어를 입력합니다.

$ bundle install

gem 설치가 완료되었으면 서버를 재시작 한 뒤 application.scss와 application.js 파일 설정을 해야합니다. 먼저 app/assets/stylesheets/application.css 파일명의 확장자를 css에서 scss로 변경하여 저장합니다. 그 안의 모든 코드를 지운 후에 다음 한 줄을 입력합니다. 반드시 *= require 코드들을 모두 삭제합니다.

[TIP] 파일명 변경 단축키 F2

5-2-3

# app/assets/stylesheets/application.scss
@import "bootstrap"

5-2-4

다음으로 appication.js의 디펜던시를 설정합니다. 위아래 순서를 꼭 지켜주세요.

#app/assets/javascripts/application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets

이것으로 우리의 사이트에 부트스트랩 디자인을 적용할 준비가 완료되었습니다. 미리 생성해두었던 index 페이지의 디자인 변화를 확인해보세요.

네비게이션

[TIP] Bootstrap4 Documentation : Components - Navbar

우리 사이트에 네비게이션 바를 만들기 위해 부트스트랩의 documantation에서 Navbar 항목을 찾아 들어갑니다. 수많은 예제와 함께 여러모양의 네비게이션 바를 만들 수 있습니다. 클래스명을 구분하며 어떤 클래스명이 어떤 특성을 나타내는지 읽어보도록 하세요. 외울 필요는 없습니다. 우리는 application.html.erb 파일의 부분에 다음과 같이 코드를 작성합니다.

5-2-5

# app/views/layouts/application.html.erb
...
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <a class="navbar-brand" href="/">SNS</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="/posts">Posts</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="<%=new_user_session_path%>">Sign in</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="<%=new_user_registration_path%>">Sign up</a>
          </li>
        </ul>
      </div>
  </nav>
  <%= yield %>
</body>
...

네비바가 생겼습니다. 네비바의 색상과 디자인은 documentation을 참조하여 얼마든지 각자가 원하는대로 바꿀 수 있습니다.

부트스트랩은 단일 코드 베이스로 CSS 미디어 쿼리를 이용하여 휴대폰에서부터 태블릿, 데스크탑까지 알아서 크기를 조절해줍니다. 인터넷 창을 바꿔가면서 확인해보세요. 또한 크롬에서 F12를 눌러 개발자도구에서 디바이스별 다양한 크기로 미리 볼 수 있습니다. [TIP] google: chrome F12 device toolbar

지금은 네비바 항목이 Posts 하나만 있는데, sign in 과 sign up을 추가해보도록 합시다. 우리는 이미 devise gem을 이용하여 기능들을 만들었습니다. 이에 대한 자세한 주소규칙을 확인하기 위해 서버에서 라우트규칙을 조회합니다.

$ rake routes

이 중에서 sign in과 sign up에 해당하는 prefix나 uri pattern을 참조하여 href를 변경하며 nav-item을 추가합니다. 

# app/views/layouts/application.html.erb
...
<ul class="navbar-nav mr-auto">
  <li class="nav-item">
    <a class="nav-link" href="/posts">Posts</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="<%=new_user_session_path%>">Sign in</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="<%=new_user_registration_path%>">Sign up</a>
  </li>
</ul>
...

5-2-6. link_to 헬퍼 사용하

a 태그는 link_to 태그로 바꾸어 쓸 수도 있습니다. 다음 sign in 예시를 보고 Posts와 Sign up도 바꿔보세요. [TIP] google: link_to tag

# app/views/layouts/application.html.erb
...
<li class="nav-item">
  <%= link_to 'Sign in', new_user_session_path,  class: 'nav-link'%>
</li>
...

그럴듯한 네비바가 완성되었습니다. 다음으로 로그인 했을 때의 네비바를 구현해보도록 하겠습니다. 사용자가 사이트에 로그인한 경우에는 Sign in과 Sign up 메뉴가 필요하지 않습니다. 대신 Sign out 메뉴가 있으면 좋겠네요. 사용자가 로그인했는지 판단하기 위해 이미 devise 으로 구현된 user_signed_in? 함수를 활용하여 if-else문을 작성합니다.

[TIP] 2-1-3 조건 상황에 따라 일시키기

# app/views/layouts/application.html.erb
<% if user_signed_in? %>
  <!--로그인 상태에 보여줄 것들-->
<% else %>
  <!--로그아웃 상태에서 보여줄 것들-->
<% end %>

5-2-7.

위 코드의 구조에 맞게 각 항목들을 모두 작성한 코드는 다음과 같습니다. 로그인 한 상태에 nav-item으로 sign out을 구현하고 navbar-text를 이용하여 사용자의 아이디도 보여줄 수 있도록 하였습니다.

# app/views/layouts/application.html.erb
...
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <a class="navbar-brand" href="/">SNS</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <% if user_signed_in? %>
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <%= link_to 'Sign out', destroy_user_session_path, method: 'delete', class: 'nav-link'%>
            </li>
          </ul>
          <span class="navbar-text"><%= current_user.name%></span>
        <% else %>
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="/posts">Posts</a>
            </li>
            <li class="nav-item">
              <%= link_to 'Sign in', new_user_session_path,  class: 'nav-link'%>
            </li>
            <li class="nav-item">
              <%= link_to 'Sign up', new_user_registration_path, class: 'nav-link'%>
            </li>
          </ul>
        <% end %>
      </div>
    </nav>
  <%= yield %>
</body>

...

네비게이션 바가 완성되었습니다. 방금 우리가 작성한 app/views/layouts/application.html.erb 파일은 모든 view 페이지에 적용됩니다. 이를 통해 매번 html 파일을 작성 할 때마다 반복되는 코드를 줄일 수 있습니다. 에 있는 <%= yield %> 부분에 각 view의 html 코드가 합쳐져 페이지를 구성합니다. 우리는 방금 구현한 네비바와 <%= yield %>의 위치 정도만 알고 있으면 됩니다. 사이트에 접속하여 네비바를 통해 페이지를 이동해보세요.

results matching ""

    No results matching ""