Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luciuschoi/welcome_rails6
레일스 6를 영접하자.
https://github.com/luciuschoi/welcome_rails6
boostrap jquery popper rails6 sweetalert2 toastr tui-editor webpack
Last synced: 8 days ago
JSON representation
레일스 6를 영접하자.
- Host: GitHub
- URL: https://github.com/luciuschoi/welcome_rails6
- Owner: luciuschoi
- Created: 2019-05-04T16:07:49.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T21:00:22.000Z (almost 2 years ago)
- Last Synced: 2024-10-29T14:15:18.011Z (17 days ago)
- Topics: boostrap, jquery, popper, rails6, sweetalert2, toastr, tui-editor, webpack
- Language: Ruby
- Homepage:
- Size: 1.02 MB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Rails 6를 영접하자.
`Stimulus`, `Bootstrap`, `jQuery`, `Popper`, `Font-awesome`, `SweetAlert2`, `Toastr`
## 0. 준비작업
- 레일스 젬 6 버전을 설치한다.
```sh
$ gem install rails --pre # pre-release 버전을 설치할 때
$ gem install rails -v 6.0.0.rc1 # 특정 버전을 설치할 때
```
- 레일스 프로젝트 **blog** 를 생성한다.
```sh
$ rails new blog --webpack=stimulus # 디폴트 데이터베이스 sqlite3를 사용할 때
$ rails new blog --webpack=stimulus -d postgresql # postgresql을 사용할 때
$ rails new blog --webpack=stimulus -d mysql # mysql을 사용할 때
```
- 프로젝트 폴더로 이동
```sh
$ cd blog
```
- 데이터베이스를 생성한다.
```sh
$ bin/rails db:create
```
- tmux를 실행한 후 터미널 위도우를 두개로 분할하여 아래의 명령을 각각 실행한다.
```sh
$ tmux new -s blog_session
$ bin/rails server # 로컬 웹서버를 시작
$ bin/webpack-dev-server # 리소스 변경시 자동으로 브라우저를 갱신한다.
```
- 홈 페이지 생성하기
- home 컨트롤러 index 액션 작성하기
```sh
$ bin/rails g controller home index
```
- 루트 라우트 지정하기
```rb
root to: 'home#index'
```
## 1. Bootstrap
- 패키지 추가
```sh
$ yarn add bootstrap jquery popper.js
```
- **config/webpack/environment.js**
```js
const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
}))
module.exports = environment
```
- **app/javascript/stylesheets/application.scss**
```scss
@import "~bootstrap/scss/bootstrap";
```
- **app/javascript/application.js**
```js
import 'bootstrap'
import '../stylesheets/application'
document.addEventListener('turbolinks:load', () => {
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="popover"]').popover()
})
```
- 애플리케이션 레이아웃 파일의 **body** 태그 시작부분에 **navbar** 추가하고 `<%= yield %>`를 **`container`** 클래스로 감싸 준다.
```erb
<%= yield %>
```
아래의 bootstrap **navbar** 코드를 붙여넣기 한다.
```erb
Navbar
```
**navbar** 에 `fixed-top` 클래스를 추가하면 **body**의 상단 부분이 **navbar**에 가려 안보이게 된다. 이를 해결하기 위해서 **body** 태그의 `padding-top` 값을 `6rem` 으로 설정해 준다. **app/javascript/stylesheets** 폴더에 **styles.scss** 파일을 생성하기 아래의 내용을 붙여넣기 한다.
```css
body {
padding-top: 6rem;
}
```
**app/javascript/stylesheets/application.scss** 파일을 열고 방금 작성한 **styles.scss** 파일을 **import** 한다.
```scss
@import "~bootstrap/scss/bootstrap";
@import "./styles.scss";
```
## 2. Font-awesome
- 패키지 추가
```sh
$ yarn add @fortawesome/fontawesome-free-webfonts
```
- **app/javascript/stylesheets/application.scss**
```scss
$fa-font-path: '~@fortawesome/fontawesome-free-webfonts/webfonts';
@import '~@fortawesome/fontawesome-free-webfonts/scss/fontawesome';
@import '~@fortawesome/fontawesome-free-webfonts/scss/fa-regular';
@import '~@fortawesome/fontawesome-free-webfonts/scss/fa-solid';
@import '~@fortawesome/fontawesome-free-webfonts/scss/fa-brands';
```
- 무료로 사용할 수 있는 아이콘 리스트 :
```html
Style
Icon Font
Class
Solid
fas fa-adress-book
Regular
far fa-address-book
Brands
fab fa-fort-awesome
Solid
fas fa-ambulance
Regular
far fa-gem
Brands
fab fa-apple
Solid
fas fa-arrows-alt
Regular
far fa-trash-alt
Brands
fab fa-chrome
```
## 3. SweetAlert2
- Post 리소스를 scaffolding 한다.
```sh
$ bin/rails g scaffold Post title content:text
$ bin/rails db:migrate
```
- 패키지 추가
```sh
$ yarn add sweetalert2
```
- **app/javascript/controller/confirm_controller.js**
```js
import { Controller } from 'stimulus'
import Swal from 'sweetalert2'
export default class extends Controller {
dialog(event) {
event.preventDefault();
let originLink = event.target.href
let target_id_attr = event.target.closest('tr').id
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.value) {
let promise = $.ajax({
type: 'DELETE',
url: originLink + '.json'
})
promise.fail(cancelFunc)
promise.done(confirmFunc)
function confirmFunc(){
$(`#${target_id_attr}`).slideUp(1000)
Swal.fire("Successfully deleted.")
}
function cancelFunc(){
Swal.fire("Error occurred.")
}
}
})
}
}
```
- **app/views/posts/index.html.erb**
```erb
...
<%= link_to 'Destroy', post, data: { action: "click->confirm#dialog" } %>
```
- app/views/posts/_form.html.erb 파일을 열고 아래와 같이 bootstrap 용 클래스를 적용한다.
```erb
<%= form_with(model: post, local: true) do |form| %>
<% if post.errors.any? %>
<%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:
<% post.errors.full_messages.each do |message| %>
- <%= message %>
<% end %>
<% end %>
<%= form.label :title %>
<%= form.text_field :title, class: 'form-control' %>
<%= form.label :content %>
<%= form.text_area :content, class: 'form-control' %>
<%= form.submit class: 'btn bnt-primary' %>
<% end %>
```
16, 21, 25 라인을 위와 같이 업데이트한다.
- app/views/posts/index.html.erb 파일을 열고 table 태그(5행)와 하단(31행)의 "New Post" 링크에 클래스를 추가한다.
```erb
····
<%= link_to 'New Post', new_post_path, class: 'btn btn-primary' %>
```
## 4. Toastr.js
- 패키지 추가
```sh
$ yarn add toastr
```
- 전용 컨트롤러 생성하기
**app/javascript/controller/flash_controller.js**
```js
import { Controller } from 'stimulus';
import toastr from 'toastr';
export default class extends Controller {
static targets = []
connect(){
let messages = this.data.get("messages")
if(messages) {
console.log(messages)
toastr.success(messages)
}
}
}
```
- 스타일시트 추가하기
**app/javascript/stylesheets/applictation.scss**
```scss
@import "~toastr/toastr.scss";
```
- HTML 코드작성
**app/views/layouts/application.html.erb**
레이아웃 파일의 **body** 태그 내의 최상단에 아래의 코드를 붙여 넣는다.
```erb
```