[멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] Node.js, PostCSS, Sass

Today I Learn - 2024-05-20

* Node.js

- javascript를 돌릴 수 있는 실행환경

- 웹만이 아닌 브라우저가 아닌 Node라는 환경에서도 스크립트를 구동할 수 있다.

- 패키지를 npm을 통해 설치할 수 있다.

- Node를 설치하면 npm은 자동으로 설치된다.

- npm / yarn / pnpm

- npm install > 패키지를 관리하는 package.json의 dependencies

(1) 전역으로 설치 추천 : degit, add-gitignore 등

(2) 지역으로 설치 추천 : fiveserver, Sass 등 협업으로 할 땐 지역으로 까는게 좋음

- 설치가 제대로 안 될 경우

> echo '{}' > package.json
> npm install 설치할package

---

* PostCSS

- JavaScript를 사용하여 CSS를 변환하는 도구

- 후처리기(Post Processor) 도구

(1) PostCSS 아키텍쳐

- PostCSS 도구의 작동 방식

출처 : https://postcss.org/docs/postcss-architecture

---

* Sass (Syntactically awesome style sheets)

- Sass는 CSS의 확장 언어

- 독자적인 구문을 사용할 수 있는 환경을 제공 (변수, 중첩, 함수, 믹스인, 컨디션 등)

- pre-processor(프리프로세서, 전처리기)로 스타일 유지 관리가 편하다.

- Ruby(최초버전, 현재 지원X), Node(더이상 업데이트X, 유지만), Dart

(1) Sass

- Indented Syntax (들여쓰기 방식)

$box-size: 100px
$primary-color: #ffaaaa

.box
  width: $box-size
  height: $box-size
  background-color: $primary-color

 

(2) SCSS ⭐

- SCSS Syntax

- 일반 CSS와 유사한 방식

$box-size: 100px;
$primary-color: #ffaaaa;

.box {
  width: $box-size;
  height: $box-size;
  background-color: $primary-color;
}

---

마.침.내!! 내가 좋아하는 Sass 수업이 시작되었다!!

Node Sass만 써봐가지고 이번 수업에서는 Dart Sass를 사용한다는데 두근두근!!

자바스크립트 수업이 끝나면 2주간 프로젝트를 시작하게 되는데... 조원분들고 합의하에 Sass를 쓸 수 있을까🤔 규모가 커질수록 편할텐데... 내일 수업도 마저 듣고 한번 싹 정리해봐야겠다!!