Ruby on Rails - 프레임워크 CSS Classless 또는 Classlight의 프론트엔드 빠른 속도

새 Rails 애플리케이션 시작

• rails 명령 이전 시간은 명령 실행이 끝날 때 실행 시간을 표시하는 데 사용됩니다. 아래 예에서는 47초가 걸렸습니다.

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

VSCode 또는 선호하는 편집기를 사용하여 프로젝트를 엽니다.

$ cd classless-css && code .

 

Rails 표준 마스터 레이아웃 알아보기 app/views/layouts/application.html.erb.

더보기…

• CoC(Convention over Configuration)에 따라 Rails는 application.html.erb를 마스터 레이아웃으로 사용하여 모든 페이지를 렌더링합니다.
• Rails 8.0.0의 원본 파일에는 아래 복사된 파일과 동일하거나 유사한 내용이 있어야 합니다.

  
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    
    

    

    
    

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    
    
    
  

  
    
  

• … 페이지가 올바르게 렌더링되고 작동하는 데 중요한 구조적 요소가 있습니다. 헤드 태그는 페이지 동작(자바스크립트 사용), 모양(CSS 사용), 다른 시스템 및 서비스와의 관계, CSRF 및 CSP 보호와 같은 보안 설정을 구성하는 데 도움이 되는 중요한 메타데이터 및 리소스를 포함하는 데 사용됩니다.
• 페이지의 주요 콘텐츠는 , ERB 태그를 통해 . 이 태그는 Rails가 동적으로 렌더링한 뷰의 콘텐츠를 포함하는 통합 지점 역할을 합니다.

 

컨트롤러 페이지와 html_test_1, html_test_2, html_test_3 및 html_test_4 작업을 사용하여 테스트 페이지 생성

더보기…

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

• 위의 컨트롤러 및 작업을 생성하는 동안 경로도 추가되어 링크에서 생성된 모든 작업에 액세스할 수 있습니다.
  • localhost:3000/pages/html_test_1
  • localhost:3000/pages/html_test_2
  • localhost:3000/pages/html_test_3
  • localhost:3000/pages/html_test_4

 

VSCode에서 config/routes.rb 파일을 엽니다.

• 페이지 루트를 이전에 생성된 컨트롤러 페이지와 html_test_1 작업으로 연결하려면 파일 끝에 아래 줄을 포함하세요. 따라서 웹 사이트나 시스템에 액세스할 때 표시되는 첫 번째 페이지는 컨트롤러 페이지의 html_test_1 페이지가 됩니다. 그렇지 않으면 기본 레일 페이지가 표시됩니다.

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

• 컨트롤러를 생성할 때 --skip-routes 매개변수를 전달했다면 생성된 작업에 경로 추가를 무시했을 수 있습니다. 전체 명령은 다음과 같습니다. 레일스 g 컨트롤러 페이지 html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

 

Rails 경로 표시

더보기…

터미널을 사용하면 예를 들어 컨트롤러 페이지에서 컨트롤러를 지정하여(-c 사용) 경로를 표시할 수 있습니다

$ cd classless-css && code .

또는 다음을 사용하여 모든 경로를 표시할 수도 있습니다

  
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    
    

    

    
    

    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">

    
    
    
  

  
    
  

http://127.0.0.1:3000/rails/info/routes 주소를 사용하여 브라우저를 통해 경로에 액세스하는 것도 가능합니다. bin/dev를 사용하여 개발 서버를 시작하거나 프로젝트 루트 디렉터리에서 레일 서버를 사용하여 표준 레일 서버를 시작하는 것을 잊지 마십시오. 개발 서버는 사용자가 사용할 수 있도록 필요한 처리를 수행하기 위해 javascript 파일 및 CSS 파일의 변경 사항을 "수신"합니다. 이러한 파일을 변경하고 브라우저에서 즉시 확인하려면 Rails Livre Reload와 같은 gem을 설치해야 합니다.

CSS 스타일을 테스트하기 위해 HTML 콘텐츠가 포함된 4개의 페이지를 만들어 보겠습니다.

 

html_test_1 작업에 대한 페이지 콘텐츠 삽입

더보기…

https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html 링크에 접속하여 아래와 같이 기본 태그의 모든 내용을 복사하세요

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

Rails 서버를 시작하고 Ugly Pure HTML을 보시겠습니까?

더보기…

• bin/dev로 Rails 개발 서버를 시작하거나 Rails 서버로 표준 서버를 시작하고 127.0.0.1:3000에서 브라우저를 엽니다.

root "pages#html_test_1"

• 페이지를 열면 상단에 이전에 생성한 html_test_1, html_test_2, html_test_3 및 html_test_4 페이지에 추가한 4개의 링크가 표시됩니다.
• 지금까지 일이 너무 많았습니다. 각각을 열면 HTML이 아직 CSS로 스타일이 지정되지 않았음을 알 수 있습니다. 다음 작업을 수행하겠습니다.

CDN을 통해 클래스 없는 CSS 스타일을 포함하려면 app/views/layouts/application.html.erb 페이지를 다시 엽니다.

더보기…

• 아래 내용 이후

$ rails -v
Rails 8.0.0

$ time rails new classless-css --asset-pipeline propshaft --skip-test
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

• 앞에 다음 내용을 붙여넣으세요. 이러한 스타일이 모두 필요한 것은 아니며 다양한 옵션을 테스트할 수 있도록 삽입되었습니다.

$ cd classless-css && code .

• Normalize CSS 및 Pico CSS를 제외한 대부분의 스타일은 주석 처리되어 있습니다.
• 파일을 저장하고 페이지를 새로 고치거나 서버를 다시 시작하세요.

이제 예, 스타일이 포함된 HTML이요?

위 스타일시트를 저장한 후

다크 모드

일부 스타일에는 어두운 모드 옵션이 있습니다. 확인하려면 개인화 옵션에서 컴퓨터 테마를 변경하세요

다음 단계

• 선호도에 따라 스타일을 구성하세요.
• 프런트엔드에 좀 더 시간을 보내고 싶다면 좋아하는 스타일에 대한 사용자 정의 옵션을 확인하세요.
• Rails Live Reload를 사용하여 브라우저에서 프로젝트 변경 사항을 동적으로 업데이트합니다.
• CDN을 사용하지 않고 프로젝트 CSS 파일의 스타일을 사용합니다.
• Tailwind를 사용하여 클래스 없는 CSS 프레임워크의 기능을 복제합니다.

참고자료

• 테스트

위 내용은 Ruby on Rails - 프레임워크 CSS Classless 또는 Classlight의 프론트엔드 빠른 속도의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!