{"id":14955445,"url":"https://github.com/luciuschoi/welcome_rails6","last_synced_at":"2025-09-30T13:30:54.725Z","repository":{"id":39548151,"uuid":"184916722","full_name":"luciuschoi/welcome_rails6","owner":"luciuschoi","description":"레일스 6를 영접하자.","archived":false,"fork":false,"pushed_at":"2023-01-03T21:00:22.000Z","size":1074,"stargazers_count":10,"open_issues_count":32,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-14T11:20:17.063Z","etag":null,"topics":["boostrap","jquery","popper","rails6","sweetalert2","toastr","tui-editor","webpack"],"latest_commit_sha":null,"homepage":"","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luciuschoi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-04T16:07:49.000Z","updated_at":"2021-10-16T15:37:18.000Z","dependencies_parsed_at":"2023-02-01T10:00:34.218Z","dependency_job_id":null,"html_url":"https://github.com/luciuschoi/welcome_rails6","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luciuschoi%2Fwelcome_rails6","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luciuschoi%2Fwelcome_rails6/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luciuschoi%2Fwelcome_rails6/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luciuschoi%2Fwelcome_rails6/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luciuschoi","download_url":"https://codeload.github.com/luciuschoi/welcome_rails6/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234737856,"owners_count":18879180,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boostrap","jquery","popper","rails6","sweetalert2","toastr","tui-editor","webpack"],"created_at":"2024-09-24T13:11:10.114Z","updated_at":"2025-09-30T13:30:49.318Z","avatar_url":"https://github.com/luciuschoi.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rails 6를 영접하자.\n\n`Stimulus`,  `Bootstrap`, `jQuery`, `Popper`, `Font-awesome`, `SweetAlert2`, `Toastr`\n\n\n\n## 0. 준비작업\n\n- 레일스 젬 6 버전을 설치한다.\n\n    ```sh\n    $ gem install rails --pre   # pre-release 버전을 설치할 때\n    $ gem install rails -v 6.0.0.rc1    # 특정 버전을 설치할 때\n    ```\n\n- 레일스 프로젝트 **blog** 를 생성한다. \n\n    ```sh\n    $ rails new blog --webpack=stimulus  # 디폴트 데이터베이스 sqlite3를 사용할 때\n    $ rails new blog --webpack=stimulus -d postgresql       # postgresql을 사용할 때\n    $ rails new blog --webpack=stimulus -d mysql            # mysql을 사용할 때\n    ```\n\n- 프로젝트 폴더로 이동\n\n    ```sh\n    $ cd blog\n    ```\n\n- 데이터베이스를 생성한다. \n\n    ```sh\n    $ bin/rails db:create     \n    ```\n\n- tmux를 실행한 후 터미널 위도우를 두개로 분할하여 아래의 명령을 각각 실행한다. \n\n    ```sh\n    $ tmux new -s blog_session\n    $ bin/rails server           # 로컬 웹서버를 시작\n    $ bin/webpack-dev-server     # 리소스 변경시 자동으로 브라우저를 갱신한다.\n    ```\n\n- 홈 페이지 생성하기\n\n  - home 컨트롤러 index 액션 작성하기\n\n    ```sh\n    $ bin/rails g controller home index\n    ```\n\n  - 루트 라우트 지정하기\n  \n    ```rb\n  \troot to: 'home#index'\n    ```\n\n  \n\n## 1. Bootstrap\n\n- 패키지 추가\n\n    ```sh\n    $ yarn add bootstrap jquery popper.js\n    ```\n\n- **config/webpack/environment.js**\n\n    ```js\n    const { environment } = require('@rails/webpacker')\n    const webpack = require(\"webpack\")\n\n    environment.plugins.append(\"Provide\", new webpack.ProvidePlugin({\n      $: 'jquery',\n      jQuery: 'jquery',\n      Popper: ['popper.js', 'default']\n    }))\n\n    module.exports = environment\n    ```\n\n\n- **app/javascript/stylesheets/application.scss**\n\n    ```scss\n    @import \"~bootstrap/scss/bootstrap\";\n    ```\n\n- **app/javascript/application.js**\n\n    ```js\n    import 'bootstrap'\n    import '../stylesheets/application'\n\n    document.addEventListener('turbolinks:load', () =\u003e {\n      $('[data-toggle=\"tooltip\"]').tooltip()\n      $('[data-toggle=\"popover\"]').popover()\n    })\n    ```\n    \n- 애플리케이션 레이아웃 파일의 **body** 태그 시작부분에 **navbar** 추가하고 `\u003c%= yield %\u003e`를 **`container`** 클래스로 감싸 준다.\n\n    ```erb\n    \u003cbody\u003e\n      \u003c!-- 여기에 navbar 삽입 --\u003e\n      \u003cdiv class='container'\u003e\n        \u003c%= yield %\u003e\n      \u003c/div\u003e\n    \u003c/body\u003e\n    ```\n\n    아래의 bootstrap **navbar** 코드를 붙여넣기 한다.\n\n    ```erb\n    \u003cnav class=\"navbar fixed-top navbar-expand-lg navbar-dark bg-dark\"\u003e\n      \u003ca class=\"navbar-brand\" href=\"#\"\u003eNavbar\u003c/a\u003e\n      \u003cbutton class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\"\u003e\n        \u003cspan class=\"navbar-toggler-icon\"\u003e\u003c/span\u003e\n      \u003c/button\u003e\n    \n      \u003cdiv class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\"\u003e\n        \u003cul class=\"navbar-nav mr-auto\"\u003e\n          \u003cli class=\"nav-item active\"\u003e\n            \u003ca class=\"nav-link\" href=\"#\"\u003eHome \u003cspan class=\"sr-only\"\u003e(current)\u003c/span\u003e\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link\" href=\"#\"\u003eLink\u003c/a\u003e\n          \u003c/li\u003e\n          \u003cli class=\"nav-item dropdown\"\u003e\n            \u003ca class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdown\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\u003e\n              Dropdown\n            \u003c/a\u003e\n            \u003cdiv class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\"\u003e\n              \u003ca class=\"dropdown-item\" href=\"#\"\u003eAction\u003c/a\u003e\n              \u003ca class=\"dropdown-item\" href=\"#\"\u003eAnother action\u003c/a\u003e\n              \u003cdiv class=\"dropdown-divider\"\u003e\u003c/div\u003e\n              \u003ca class=\"dropdown-item\" href=\"#\"\u003eSomething else here\u003c/a\u003e\n            \u003c/div\u003e\n          \u003c/li\u003e\n          \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\"\u003eDisabled\u003c/a\u003e\n          \u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cform class=\"form-inline my-2 my-lg-0\"\u003e\n          \u003cinput class=\"form-control mr-sm-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\"\u003e\n          \u003cbutton class=\"btn btn-outline-success my-2 my-sm-0\" type=\"submit\"\u003eSearch\u003c/button\u003e\n        \u003c/form\u003e\n      \u003c/div\u003e\n    \u003c/nav\u003e\n    ```\n\n    **navbar** 에 `fixed-top` 클래스를 추가하면 **body**의 상단 부분이 **navbar**에 가려 안보이게 된다. 이를 해결하기 위해서 **body** 태그의 `padding-top` 값을 `6rem` 으로 설정해 준다. **app/javascript/stylesheets** 폴더에 **styles.scss** 파일을 생성하기 아래의 내용을 붙여넣기 한다.\n\n    ```css\n    body {\n      padding-top: 6rem;\n    }\n    ```\n\n    **app/javascript/stylesheets/application.scss** 파일을 열고 방금 작성한 **styles.scss** 파일을 **import** 한다. \n\n    ```scss\n    @import \"~bootstrap/scss/bootstrap\";\n    @import \"./styles.scss\";\n    ```\n\n    \n\n## 2. Font-awesome\n\n- 패키지 추가\n\n    ```sh\n    $ yarn add @fortawesome/fontawesome-free-webfonts\n    ```\n\n- **app/javascript/stylesheets/application.scss**\n\n    ```scss\n    $fa-font-path: '~@fortawesome/fontawesome-free-webfonts/webfonts'; \n    @import '~@fortawesome/fontawesome-free-webfonts/scss/fontawesome';\n    @import '~@fortawesome/fontawesome-free-webfonts/scss/fa-regular';\n    @import '~@fortawesome/fontawesome-free-webfonts/scss/fa-solid';\n    @import '~@fortawesome/fontawesome-free-webfonts/scss/fa-brands';\n    ```\n\n- 무료로 사용할 수 있는 아이콘 리스트 : \u003chttps://fontawesome.com/icons?d=gallery\u0026m=free\u003e\n\n    ```html\n    \u003ctable class=\"table table-bordered table-sm\"\u003e\n      \u003cthead class='thead-dark'\u003e\n        \u003ctr\u003e\n          \u003cth\u003eStyle\u003c/th\u003e\n          \u003cth\u003eIcon Font\u003c/th\u003e\n          \u003cth\u003eClass\u003c/th\u003e\n        \u003c/tr\u003e\n      \u003c/thead\u003e\n      \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eSolid\u003c/td\u003e\n          \u003ctd\u003e\u003ci class=\"fas fa-address-book\"\u003e\u003c/i\u003e\u003c/td\u003e\n          \u003ctd\u003efas fa-adress-book\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eRegular\u003c/td\u003e\n          \u003ctd\u003e\u003ci class=\"far fa-address-book\"\u003e\u003c/i\u003e\u003c/td\u003e\n          \u003ctd\u003efar fa-address-book\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eBrands\u003c/td\u003e\n          \u003ctd\u003e\u003ci class=\"fab fa-fort-awesome\"\u003e\u003c/i\u003e\u003c/td\u003e\n          \u003ctd\u003efab fa-fort-awesome\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eSolid\u003c/td\u003e\n          \u003ctd\u003e\u003ci class=\"fas fa-ambulance\"\u003e\u003c/i\u003e\u003c/td\u003e\n          \u003ctd\u003efas fa-ambulance\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eRegular\u003c/td\u003e\n          \u003ctd\u003e\u003ci class=\"far fa-gem\"\u003e\u003c/i\u003e\u003c/td\u003e\n          \u003ctd\u003efar fa-gem\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eBrands\u003c/td\u003e\n          \u003ctd\u003e\u003ci class=\"fab fa-apple\"\u003e\u003c/i\u003e\u003c/td\u003e\n          \u003ctd\u003efab fa-apple\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eSolid\u003c/td\u003e\n          \u003ctd\u003e\u003ci class=\"fas fa-arrows-alt\"\u003e\u003c/i\u003e\u003c/td\u003e\n          \u003ctd\u003efas fa-arrows-alt\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eRegular\u003c/td\u003e\n          \u003ctd\u003e\u003ci class=\"far fa-trash-alt\"\u003e\u003c/i\u003e\u003c/td\u003e\n          \u003ctd\u003efar fa-trash-alt\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eBrands\u003c/td\u003e\n          \u003ctd\u003e\u003ci class=\"fab fa-chrome\"\u003e\u003c/i\u003e\u003c/td\u003e\n          \u003ctd\u003efab fa-chrome\u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/tbody\u003e\n    \u003c/table\u003e\n    ```\n\n    \n\n## 3. SweetAlert2\n\n- Post 리소스를 scaffolding 한다.\n\n    ```sh\n    $ bin/rails g scaffold Post title content:text\n    $ bin/rails db:migrate\n    ```\n\n- 패키지 추가\n\n    ```sh\n    $ yarn add sweetalert2\n    ```\n\n- **app/javascript/controller/confirm_controller.js**\n\n    ```js\n    import { Controller } from 'stimulus'\n    import Swal from 'sweetalert2'\n\n    export default class extends Controller {\n      dialog(event) {\n        event.preventDefault();\n        let originLink = event.target.href\n        let target_id_attr = event.target.closest('tr').id\n\n        Swal.fire({\n          title: 'Are you sure?',\n          text: \"You won't be able to revert this!\",\n          type: 'warning',\n          showCancelButton: true,\n          confirmButtonColor: '#3085d6',\n          cancelButtonColor: '#d33',\n          confirmButtonText: 'Yes, delete it!'\n        }).then((result) =\u003e {\n          if (result.value) {\n            let promise = $.ajax({\n              type: 'DELETE',\n              url: originLink + '.json'\n            })  \n\n            promise.fail(cancelFunc)\n            promise.done(confirmFunc)\n\n            function confirmFunc(){\n              $(`#${target_id_attr}`).slideUp(1000)\n              Swal.fire(\"Successfully deleted.\")\n            }\n            function cancelFunc(){\n              Swal.fire(\"Error occurred.\")\n            }\n          }\n        })\n      }\n    }\n    ```\n\n- **app/views/posts/index.html.erb**\n\n    ```erb\n    \u003ctr id='post-\u003c%= post.id %\u003e'\u003e\n      ...\n      \u003ctd data-controller='confirm'\u003e\n        \u003c%= link_to 'Destroy', post, data: { action: \"click-\u003econfirm#dialog\" } %\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e  \n    ```\n    \n- app/views/posts/_form.html.erb 파일을 열고 아래와 같이 bootstrap 용 클래스를 적용한다.\n\n    ```erb\n    \u003c%= form_with(model: post, local: true) do |form| %\u003e\n      \u003c% if post.errors.any? %\u003e\n        \u003cdiv id=\"error_explanation\"\u003e\n          \u003ch2\u003e\u003c%= pluralize(post.errors.count, \"error\") %\u003e prohibited this post from being saved:\u003c/h2\u003e\n    \n          \u003cul\u003e\n            \u003c% post.errors.full_messages.each do |message| %\u003e\n              \u003cli\u003e\u003c%= message %\u003e\u003c/li\u003e\n            \u003c% end %\u003e\n          \u003c/ul\u003e\n        \u003c/div\u003e\n      \u003c% end %\u003e\n    \n      \u003cdiv class=\"field\"\u003e\n        \u003c%= form.label :title %\u003e\n        \u003c%= form.text_field :title, class: 'form-control' %\u003e\n      \u003c/div\u003e\n    \n      \u003cdiv class=\"field\"\u003e\n        \u003c%= form.label :content %\u003e\n        \u003c%= form.text_area :content, class: 'form-control' %\u003e\n      \u003c/div\u003e\n    \n      \u003cdiv class=\"actions\"\u003e\n        \u003c%= form.submit class: 'btn bnt-primary' %\u003e\n      \u003c/div\u003e\n    \u003c% end %\u003e\n    ```\n\n    16, 21, 25 라인을 위와 같이 업데이트한다. \n\n- app/views/posts/index.html.erb 파일을 열고 table 태그(5행)와 하단(31행)의 \"New Post\" 링크에 클래스를 추가한다.\n\n    ```erb\n    \u003ctable class=\"table table-bordered\"\u003e\n    ····\n    \u003c%= link_to 'New Post', new_post_path, class: 'btn btn-primary' %\u003e  \n    ```\n\n    \n\n## 4. Toastr.js \n\n- 패키지 추가\n\n    ```sh\n    $ yarn add toastr\n    ```\n\n- 전용 컨트롤러 생성하기\n\n    **app/javascript/controller/flash_controller.js**\n\n    ```js\n    import { Controller } from 'stimulus';\n    import toastr from 'toastr';\n\n    export default class extends Controller {\n      static targets = []\n\n      connect(){\n        let messages = this.data.get(\"messages\")\n        if(messages) {\n          console.log(messages)\n          toastr.success(messages)\n        }\n      }\n    }\n    ```\n\n- 스타일시트 추가하기\n\n    **app/javascript/stylesheets/applictation.scss**\n\n    ```scss\n    @import \"~toastr/toastr.scss\";\n    ```\n\n- HTML 코드작성\n\n    **app/views/layouts/application.html.erb** \n레이아웃 파일의 **body** 태그 내의 최상단에 아래의 코드를 붙여 넣는다. \n    \n    ```erb\n    \u003cdiv data-controller='flash' \n         data-flash-messages='\u003c%= flash[:notice] || notice %\u003e'\u003e\u003c/div\u003e\n    ```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluciuschoi%2Fwelcome_rails6","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluciuschoi%2Fwelcome_rails6","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluciuschoi%2Fwelcome_rails6/lists"}