클라이언트 개발 - Sprockets

Sprockets로 자바스크립트, 스타일시트 임포트

Sprockets는 에셋을 매니페스트, 즉 미리 준비된 리소스로 읽어들인다. app/assets 폴더를 확인하자.

매니페스트 정의는 각각 주석(//, /* ~ */)의 내부에 =<지시자> <매개 변수>의 현식으로 표기한다.

참고로 Rails는 클라이언트 사이드 개발 언어로 커피스크립트와 SCSS를 표준으로 지원하고 있다. 하지만 반드시 사용할 필요는 없다.

에셋 파이프라인(Asset Pipeline)

에셋 파이프라인은 Sprockets 라이브러리로 제공되는 구조로, 자바스크립트와 스타일시트, 이미지 등의 접근을 한꺼번에 관리하고 사용자에게 보다 효율적으로 응답해주는 기능을 제공한다.

책에서 묘사된 Rails4 기준 에셋 파이프라인은 아래 과정을 거친다.

1. 원래 소스 코드 ex) articles.js.coffee, photos.css.scss

2. 컴파일 ex) article.js, photos.css

3. 결합 ex) 각각 application.js, application.css 에 결합됨.

4. 압축

   원래 코드에서 주석이나 개행, 공백 등을 제거하는 것을 말한다. ex) 각각 application.js, application.css 에 압축됨.

5. 다이제스트 추가

   코드의 내용을 기반으로 해시(다이제스트)를 연산해서 파일의 마지막에 붙인다. 이는 브라우저에서 의도하지 않은 캐시 사용을 피하기 위해서이다. 코드가 변경될 때 파일 이름을 강제적으로 함께 변경하므로 브라우저가 이전의 에셋 코드를 재활용하는 일 없이 에셋 수정이 실시간으로 반영된다. ex) 각각 application-xxxx.js, application-xxxx.css로 다이제스트 추가됨.

이 때 개발 환경은 2번(컴파일) 과정을 거친 후에 바로 출력해버린다.

반면 배포 환경은 2번 과정을 건너뛰고 바로 3(결합), 4(압축), 5(다이제스트 추가) 과정을 거친다.