Ruby on Rails : assets, public 폴더 개념

해당 글은은 https://blog.naver.com/kbs4674/221336658095 로 부터 게시글이 이전되었습니다.

 

레일즈에서 css/js 파일 및 이미지 파일을 저장할 수 있는 방법은 크게 두 가지가 존재합니다.

바로 public, assets 폴더 입니다.

 

일단 이 둘의 가장 큰 차이점은 캐싱의 영향 유무 입니다.

 

 

• 캐싱

웹 사이트에는 캐시라고 해서 어떤 사이트를 접속하면 그 사이트의 이미지 파일, CSS/자바스크립트(JS) 등을 기억해내려는 속성이 있습니다.

한 번 기억을 해내면 다음에 접속할 때에도 좀 더 빠르게 사이트 접속을 할 수 있기 때문입니다.

 

 

• Public

public 폴더

Public 폴더는 레일즈 프로젝트 최상위에 존재합니다.

폴더속에 보면 다양한 파일들이 존재하는게 확인이 됩니다.

 

---

파일 설명

 

• 404.html / 422.html / 500.html

위 세개의 파일은 잘못된 사이트 접속 발생 시 해당 오류에 대해 알려주는 사이트입니다.

보통 404 에러를 많이 접하게 되고, 여러분들도 언젠간 404 에러를 한번 맞아본 적이 있을겁니다.

 

대표적으로 쉽게 확인가능한 Daum 404 에러 페이지

참고로 404 에러는 '잘못된 경로' 를 뜻합니다.

 참고1  404, 422, 500 에러라는 용어는 어디든 쓰이는 공통용어 입니다.

 참고2  public 폴더 내의 404, 422, 500 페이지에서는 레일즈 코드가 먹히지 않습니다.

 참고3   /app/layouts/application.html.erb  와도 연동이 안됩니다.

 

• apple-touch-icon-precomposed.png, apple-touch-icon.png, favicon.ico

솔직히 위 그림파일은 왜 존재하는지 모르겠네요..

사용 용도를 모르겠음..

 

• robots.txt

홈페이지 보안과 관련된 파일입니다.

검색엔진이 홈페이지의 자료를 수집할 때 robots.txt의 규칙에 의거하여 홈페이지 내의 자료를 수집하곤 하는데

여러분들은 robots.txt를 통해 검색엔진의 검색수집 제한범위를 설정할 수 있습니다.

(예 : 아예 수집을 못하게 막을 수 있거나, 일부 사이트만 열어서 검색수집을 허용한다던가..)

만약 정말 중요한 정보나 URL 위치(예 : 어드민 설정 사이트)가 검색 결과에 노출되면.. 큰일나겠죠?

 

검색엔진이 이런 수집작업을 거치고 비로소 네이버, 다음, 구글 등 검색결과에 검색결과를 띄우는 겁니다!

단,  robots.txt  파일은 반드시 홈페이지 루트위치에 존재해야 합니다.

참고로 네이버 등 유명 포털사이트에서도 robots.txt를 확인하실 수 있습니다.

※ 참고 - 네이버 robots.txt [클릭]

 도움자료  robots.txt에 대한 자세한 설명 및 설정법 [클릭]

 

---

파일 경로

 Public 폴더  에는 어떤 파일이든지 넣을 수 있습니다.

그리고 해당 파일의 위치는   /...   이렇게 시작됩니다.

 

 예시  사이트 주소가 http://wbb.com 이라 할 때

• public 폴더 속에 icebear.png 파일을 넣었을 경우, 파일 경로는 http://wbb.com/icebear.png
• public 폴더 속에 css 폴더를 또 만들고, css 폴더속에 font_collect.css 를 넣었을 경우, 파일 경로는 http://wbb.com/css/font_collect.css

 

---

단점

 

Public 는 캐시의 영향을 받는 폴더입니다.

그 때문에 개발자가 Public 폴더 속에 있는 이미지를 교체한다던지, CSS 혹은 JS 파일을 수정한다 해도 바로 적용이 안되는 경우가 있습니다.

 

이를 해결하는 방법은 크게 세가지 입니다.

1) 크롬 브라우저에서 강력 새로고침

  ① 캐시를 지우고자 하는 페이지에서 F12를 클릭해서 개발자도구를 킨다.

  ② URL 입력창 왼쪽에 보이는 새로고침 아이콘을 좌측 마우스로 1.5초이상 길게 꾹 누른다.

  ③ 세 가지 메뉴의 선택지가 생기는데 강력 새로고침 을 클릭한다.

 

2) 크롬 브라우저 : 시크릿 모드로 접속

 

3) 브라우저 내 방문기록, 캐시 등을 지우면 됩니다.

  * 대신 자동로그인 등 기록이 다 날라갑니다.

 

 

• Assets

assets 폴더 (app 폴더 내에 존재)

• Assets 폴더 역시 App 폴더속에 존재하는 파일입니다.
• Assets 폴더에도 이미지, javascripts(자바스크립트), stylesheets(CSS) 등을 넣고 홈페이지에 적용할 수 있습니다.
• Assets 폴더에는 파일을 넣으실 때 확장자를 잘 구분해서 넣으셔야 합니다. (예 : stylesheets 폴더에 자바스크립트 파일을 넣으면 안됨.)

---

파일 설명

 

• config/manifest.js

image, javascript, stylesheets 경로를 정의합니다.

 

• images

이미지 파일들을 넣는데 쓰이는 폴더입니다.

 

• javascripts

자바스크립트 및 Coffee 스크립트를 넣는 폴더입니다.

이에 더불어, application.js는 Gem이 가진 javascript 컴포넌트를 연동하는 데에도 쓰입니다.

 

• stylesheets

CSS 및 SCSS 파일을 넣는 폴더입니다.

scaffold 및 controller을 생성할 때 마다 해당 폴더에 scss 파일이 생겨납니다.

 

---

파일 경로

 

<link rel="stylesheet" type="text/css" href="/menu_bar/menu.css"/>
<script type="text/javascript" src="/wow/wow.min.js" charset="utf-8"></script>

이런 형식의 css/js 정의를 안해줘도 됩니다.

css/js 파일 정의는  app/views/layouts/application.html.erb  에 있는

<%# app/views/layouts/application.html.erb %>

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

위 두 코드가 자동으로 assets 폴더 안에 있는 css/js 파일을 불러옵니다.

 

하지만 이미지 같은 경우는 사용을 원할 시 정의를 내려줘야 합니다.

만약  /app/assets/images  에  kitty.png  라는 파일을 넣었고, 해당 이미지 파일의 사용을 원한다면

<%= image_tag(asset_path 'kitty.png') %>
<img src="<%= asset_path 'kitty.png' %>">

View 파일에 위와같은 코드를 입력해주면 됩니다.

 

---

Assets의 특이한 점

 

Assets 파일은 파일이름 끝에 난수가 붙습니다.

그리고 파일 내부 내용이 바뀔 때 마다 난수 또한 바뀝니다.

 But  이미지 파일은 이미지 파일을 교체하지 않는 한 이름 뒤의 난수는 변하지 않습니다.

 

이러한 방식을 통해 Assets은 캐싱을 방지할 수 있습니다.

(난수가 바뀐다는 것은, 컴퓨터 입장에서는 새로운 파일을 본다는 것)

assets/image와 public 폴더 내 이미지 이름 차이

 

---

파일 단점

 

Assets 파일의 단점은 딱히 없습니다.

캐시도 유지되는게 아니다보니 잦은 코드변경이 요구되는 작업에 있어선 오히려 큰 장점이라 볼 수 있겠죠.

 

다만 조금이라도 빠른 홈페이지를 보여주고자 캐시가 요구되거나, 이름이 바뀌어서는 안되는 파일 이름이 있다면 Assets의 장점이 곧 단점이 될 수 있습니다.

 

 

• 정리

1) Public 폴더

· 파일 경로 위치는 /...

· 최소한 오류 페이지 디자인, robots.html 설정 때 필요

· robots.html 파일은 보안에 중요한 역할

· 웹 페이지가 가진 캐시 속성 때문에 CSS, 자바스크립트(JS) 코드 변경을 해도 바로 적용이 안됨.

· 자바스크립트, CSS를 업로드 후 사용 시, 정의를 내려야 함.

 

2) Assets

· 파일 이름 뒤에 난수가 붙음, 파일을 수정하면 난수가 바뀜 (이를 통해 캐시문제 해결)

· Gem 의 모듈연동 때에도 사용됨. (assets/javascripts/application.js)

· 자바스크립트, CSS를 업로드 후 사용 시, 따로 정의를 안해줘도 됨.

 

 

• 웹에서 보여지는 결과는?

레일즈에서는 서버 환경이 크게 Development, Test, Production 환경이 존재합니다.

현재 대부분 여러분들은 Development 환경으로 레일즈 연습을 하고 있을 것으로 예상되는데요,

 참고  레일즈 서버 환경은 위에 '아~ 저렇게 3가지 종류가 있구나' 하고 지금은 가볍게만 알고 넘어가세요~^^

 

Assets 폴더속에 파일을 넣고, 보게 되면 다음과 같은 결과를 보실 수 있습니다.

• Environment : Development

Development 환경 서버에서 돌리게 될 시, 위 사진과 같이 css, js 파일을 하나하나 정의해주는 형식입니다.

 

• Environment : Production

반면에 Production 모드에서는 assets파일이 정의된게 application.css, application.js 외에는 아무것도 없습니다.

 

그럼 그 내용들이 어디갔냐고요?

assets파일에 있는 모든 css는 application.css에, js는 application.js에 통째로 있는 상태입니다.

 

 참고  Production 환경에서 Assets파일을 최신화 시킬 때는 다음 명령어를 입력해주세요

rake assets:precompile RAILS_ENV=production

 

 

• 자료 참고

1. Assets 개념 [클릭]

 

루비온 레일즈 Ruby on Rails ROR