TIL2(2020.12.07)

skwlalsl93·2020년 12월 10일
0

TIL

목록 보기
4/28

1. Gulp란?

  • js에서 반복적이고 자주 사용되는 작업을 자동화해주는 툴(또는 빌드 시스템)
  • 작업시간을 줄일 수 있어 생산성 향상에 큰 도움이 됨
  • Grunt 또는 webpack과 비교됨

1) Gulp의 기능

  • js 라이브러리, 서드파티 앱 등을 모으고 축소/압축
  • 단위테스트(unit test) 수행
  • less/css 컴파일링
  • 브라우저 Refresh에 도움

2. Sass(css pre-processor)

  • 전처리기 : 다른 프로그램의 입력으로 사용되는 출력을 생성하기 위해 그 입력 데이터를 처리하는 프로그램
    -sass는 css의 확장 언어로, css의 한계와 단점을 보완해 보다 가독성이 높고 코드의 재사용이 유리하게 구성된 css의 확장임.
  • css는 배우기 쉬우며 명확해 프로젝트 초기엔 문제가 없어보이지만 규모가 커짐에 따라 쉽게 지저분해지고 유지보수도 어려워짐.
  • 아직 해결하기 위해 sass는 다음과 같은 추가기능 보유
      1. 변수의 사용
      1. 조건문과 반복문
      1. Import
      1. Nesting
      1. Mixin
      1. Extend / Inheritance
  • sass의 장점은?
    • css보다 심플한 표기법으로 css를 구조화하여 표현 가능
    • 스킬 레벨이 다른 팀원간에 구문 수준 평준화
    • sass만의 mixin 등의 기능을 활용해 css 유지보수 편의성 향상

3. less

  • css에 script의 특성(변수, 함수, 연산, 중첩, 스코프 등)을 덧붙여 확장한 언어.
  • 클라이언트 또는 서버환경(node.js)에서 모두 실행 가능
  • sass와 마찬가지로 전처리기로서 css를 변수나 nested rules를 이용해 쉽고 빨고 체계적으로 프로그래밍할 수 있게 만듦.
  • css의 확장 버전으로 하위 호환성이 뛰어나며 css의 기존 문법을 그대로 사용하기 때문에 익히기 쉽다.

4. 컴파일

  • 어떤 언어에서 다른 언어로 바꿔주는 과정 ex. c++ ->기계어
profile
wishing is not enough, we must do.

0개의 댓글