TIL2(2020.12.07)

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. 변수의 사용
  • 2. 조건문과 반복문
  • 3. Import
  • 4. Nesting
  • 5. Mixin
  • 6. Extend / Inheritance
• sass의 장점은?
  • css보다 심플한 표기법으로 css를 구조화하여 표현 가능
  • 스킬 레벨이 다른 팀원간에 구문 수준 평준화
  • sass만의 mixin 등의 기능을 활용해 css 유지보수 편의성 향상

3. less

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

4. 컴파일

• 어떤 언어에서 다른 언어로 바꿔주는 과정 ex. c++ ->기계어