🚀
Growth log
  • About me
  • I LEARNED
    • General
      • 개발자 꿀팁
      • 그로스해킹 기초
      • 개발자에게 도메인 지식은 얼마나 중요할까?
      • DTO 논쟁에 대하여
      • MSA란?
    • Seminar
      • 테스트 커버리지 100% - SLASH 21
      • TDD가 실패하는 이유 - by 이규원님
      • 대규모 트래픽 애플리케이션 성능 튜닝 노하우 다 알려 드림|라인개발실록
      • 결제 시스템의 SDK와 API 디자인 - SLASH 21
    • Web
      • SOP와 CORS
    • Spring & OOP
      • DTO vs VO
    • Ruby On Rails
      • Rails lib 디렉토리에 대하여
      • Rails의 concerns란?
      • Rails에서의 GC 작동원리
      • Eager loading vs Lazy loading
      • Rails 환경 구성
      • ActionCable
      • 📔Perfect ruby on rails
        • MVC 패턴인 Rails
        • Ruby on Rails 기본 - 컨트롤러
        • Ruby on Rails 기본 - 뷰
        • Ruby on Rails 기본 - 모델
        • 스캐폴딩 기능을 사용한 Rails 개발 기초
        • 뷰 개발
        • 모델 개발
        • 모델 개발 - 낙관적 동시 실행 제어
        • 모델 개발 - 유효성 검사 구현
        • 모델 개발 - Association
        • 모델 개발 - 콜백
        • 모델 개발 - 마이그레이션
        • 모델 개발 - 데이터 초기화
        • 컨트롤러 개발 - 요청 정보 추출
        • 컨트롤러 개발 - 응답
        • 컨트롤러 개발 - 상태 관리
        • 라우팅 - RESTful
        • 라우팅 - RESTful 인터페이스의 사용자 정의화
        • 라우팅 - RESTful 하지 않은 라우트 정의
        • 테스트
        • 테스트 - 준비
        • 테스트 - Unit 테스트
        • 테스트 - Functional 테스트
        • 테스트 - Integration 테스트
        • 클라이언트 개발 - Sprockets vs Webpacker
        • 클라이언트 개발 - Sprockets
    • Node.js & Express
      • 기본 개념
      • npx
    • Programing Language
      • Java
        • JavaDoc에 대해
        • invocation에 대해서
        • 어노테이션
        • 추상클래스 & 인터페이스
        • Package
        • 오버로딩 vs 오버라이딩
      • Javascript
        • TCP School 훑어보기
          • 타입
          • 형 변환
          • 변수
          • 연산자
          • 반복문
          • 배열(array)
          • 함수
          • 함수 - 스코프와 호이스팅
          • 함수 - 매개변수와 인수
          • 함수 - 미리 정의된 전역 함수
          • 객체
          • 프로토타입
          • DOM
          • BOM - Window 객체
          • 이벤트(event)
      • Ruby
        • 📔퍼펙트 루비
    • DB
      • Redis
        • Redis 개요
      • Index(인덱스)?
      • DB Transaction & Lock
      • 동시성 제어에 관하여
      • Lock(잠금)이란?
      • ActiveRecord lock vs with_lock
      • Table lock vs Row lock
      • WHERE 1=1 구문에 대하여
      • COUNT(*) vs COUNT(indexed column)
      • 📕관계형 데이터베이스 실전입문
      • 📔SQL 첫걸음
      • 📔모두의 SQL
    • Design Patterns
      • Observer pattern
      • Flyweight pattern
      • Singleton pattern
    • OOP
      • 📔오브젝트
        • 6장 메시지와 인터페이스
      • 클래스간 관계 간단 정리
    • Regex
    • Collaboration
      • Git
      • Sourcetree
  • DAILY REVIEW
    • 2021
      • August
        • 2021-08-25(Wed)
        • 2021-08-23(Mon)
        • 2021-08-11(Wed)
        • 2021-08-04(Wed)
        • 2021-08-03(Tue)
        • 2021-08-02(Mon)
      • July
        • 2021-07-29(Thu)
        • 2021-07-26(Mon)
        • 2021-07-23(Fri)
        • 2021-07-22(Thu)
        • 2021-07-21(Wed)
        • 2021-07-20(Tue)
        • 2021-07-19(Mon)
        • 2021-07-15(Thu)
        • 2021-07-14(Wed)
        • 2021-07-13(Tue)
        • 2021-07-12(Mon)
      • June
        • 2021-06-05(Sat)
        • 2021-06-04(Fri)
        • 2021-06-03(Thu)
        • 2021-06-02(Wed)
        • 2021-06-01(Tue)
      • May
        • 2021-05-31(Mon)
        • 2021-05-29(Sat)
        • 2021-05-28(Fri)
        • 2021-05-27(Thu)
        • 2021-05-26(Wed)
        • 2021-05-25(Tue)
        • 2021-05-24(Mon)
        • 2021-05-22(Sat)
        • 2021-05-21(Fri)
        • 2021-05-20(Thu)
        • 2021-05-19(Wed)
        • 2021-05-18(Tue)
        • 2021-05-17(Mon)
        • 2021-05-15(Sat)
        • 2021-05-13(Thu)
        • 2021-05-12(Wed)
        • 2021-05-11(Tue)
        • 2021-05-10(Mon)
        • 2021-05-03(Mon)
      • April
        • 2021-04-30(Fri)
        • 2021-04-29(Thu)
        • 2021-04-28(Wed)
        • 2021-04-27(Tue)
        • 2021-04-26(Mon)
        • 2021-04-24(Sat)
        • 2021-04-23(Fri)
        • 2021-04-21(Wed)
        • 2021-04-20(Tue)
        • 2021-04-19(Mon)
        • 2021-04-18(Sun)
        • 2021-04-16(Fri)
        • 2021-04-15(Thu)
        • 2021-04-14(Wed)
        • 2021-04-12(Mon)
        • 2021-04-11(Sun)
        • 2021-04-09(Fri)
        • 2021-04-08(Thu)
        • 2021-04-06(Tue)
        • 2021-04-05(Mon)
        • 2021-04-04(Sun)
        • 2021-04-03(Sat)
        • 2021-04-02(Fri)
        • 2021-04-01(Thu)
      • March
        • 2021-03-29(Mon)
        • 2021-03-28(Sun)
        • 2021-03-26(Fri)
        • 2021-03-25(Thu)
        • 2021-03-24(Wed)
        • 2021-03-23(Tue)
        • 2021-03-22(Mon)
        • 2021-03-21(Sun)
        • 2021-03-20(Sat)
        • 2021-03-17(Wed)
        • 2021-03-16(Tue)
        • 2021-03-15(Mon)
        • 2021-03-12(Fri)
        • 2021-03-11(Thu)
        • 2021-03-10(Wed)
        • 2021-03-09(Tue)
        • 2021-03-08(Mon)
        • 2021-03-07(Sun)
        • 2021-03-05(Fri)
        • 2021-03-03(Wed)
        • 2021-03-02(Tue)
        • 2021-03-01(Mon)
      • Feb
        • 2021-02-26(Fri)
        • 2021-02-25(Thu)
        • 2021-02-24(Wed)
        • 2021-02-23(Tue)
        • 2021-02-22(Mon)
        • 2021-02-19(Fri)
        • 2021-02-18(Thu)
        • 2021-02-17(Wed)
        • 2021-02-16(Tue)
        • 2021-02-15(Mon)
        • 2021-02-14(Sun)
        • 2021-02-13(Sat)
        • 2021-02-12(Fri)
        • 2021-02-10(Wed)
        • 2021-02-09(Tue)
        • 2021-02-08(Mon)
        • 2021-02-07(Sun)
        • 2021-02-05(Fri)
        • 2021-02-03(Wed)
        • 2021-02-02(Tue)
        • 2021-02-01(Mon)
      • Jan
        • 2021-01-29(Fri)
        • 2021-01-28(Thu)
        • 2021-01-27(Wed)
        • 2021-01-26(Tue)
        • 2021-01-25(Mon)
        • 2021-01-23(Sat)
        • 2021-01-22(Fri)
        • 2021-01-20(Wed)
        • 2021-01-19(Tue)
        • 2021-01-18(Mon)
        • 2021-01-12(Tue)
        • 2020-01-11(Mon)
        • 2021-01-08(Fri)
        • 2021-01-07(Thu)
        • 2021-01-06(Wed)
        • 2021-01-05(Tue)
        • 2021-01-04(Mon)
        • 2021-01-01(Fri)
    • 2020
      • Dec
        • 2020-12-30(Thu)
        • 2020-12-25(Fri)
        • 2020-12-24(Thu)
        • 2020-12-23(Wed)
        • 2020-12-22(Tue)
        • 2020-12-21(Mon)
        • 2020-12-18 (Fri)
      • Nov
        • 2020-11-30(Mon)
        • 2020-11-28(Sat)
        • 2020-11-26(Thu)
        • 2020-11-25(Wed)
        • 2020-11-24(Tue)
        • 2020-11-23(Mon)
        • 2020-11-22(Sun)
        • 2020-11-20(Fri)
        • 2020-11-19(Thu)
        • 2020-11-18(Wed)
        • 2020-11-17(Tue)
        • 2020-11-14(Sat)
        • 2020-11-13(Fri)
        • 2020-11-12(Thu)
        • 2020-11-11(Wed)
        • 2020-11-09(Mon)
        • 2020-11-07(Sat)
        • 2020-11-05(Thu)
        • 2020-11-04(Wed)
        • 2020-11-03(Tue)
        • 2020-11-02(Mon)
    • Good article 아카이빙
Powered by GitBook
On this page
  • Sprockets로 자바스크립트, 스타일시트 임포트
  • 에셋 파이프라인(Asset Pipeline)

Was this helpful?

  1. I LEARNED
  2. Ruby On Rails
  3. Perfect ruby on rails

클라이언트 개발 - 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(다이제스트 추가) 과정을 거친다.

Previous클라이언트 개발 - Sprockets vs WebpackerNextNode.js & Express

Last updated 4 years ago

Was this helpful?

📔