[멋쟁이 사자처럼 프론트엔드 스쿨] 19일차 TIL - Node, Sass

🍰 새로운 진도 나간 날!

🍴 Node와 NPM(Node Package Manager)

• Node.js - 자바스크립트를 실행할 수 있는 런타임 환경
• NPM - 자바스크립트 프로그래밍 환경에서 패키지를 설치하고 관리하는 도구(Node.js 설치 시 같이 다운로드 됨)

🍴 패키지 매니저 종류

1. NPM - 가장 널리 사용됨
2. Yarn - 페이스북이 NPM의 단점 보완하기 위해 개발. 빠른 속도와 안정성 제공.
3. PNPM(Performant NPM) - NPM과 호환되면서 성능 개선함. 디스크 공간 절약, 빠른 설치 속도, 모노레포에 강점.

🍴 package.json은 어떤 파일?

• Node.js 프로젝트에서 사용되는 메타 데이터와 의존성 정보 담음
• 의존성 정보: 프로젝트가 제대로 작동하기 위해 필요한 외부 라이브러리나 패키지의 목록과 버전 정보.
• 프로젝트의 루트 디렉토리에 위치

🍴 PostCSS

: 자바스크립트 기반의 도구. CSS를 다양한 플러그인을 사용해 변환할 수 있는 플랫폼.(플러그인: 소프트웨어의 기능을 확장하거나 추가하는 독립적인 모듈.)

• PostCSS는 기본적으로 플러그인 시스템으로 구성됨(ex. CSS 압축, vendor prefix 자동 추가해주는 플러그인)
• 유연성이 뛰어남 - 사용자가 필요한 기능만 선택 가능
• 확장성 - 수많은 플러그인 존재, 사용자가 직접 작성 가능

🍴 Sass(Syntactically Awesome Style Sheets)

: CSS의 전처리기. CSS 문법 확장

주요 기능

• 변수(variables) - 반복적으로 사용되는 값 변수에 저장, 이를 재사용
• 중첩(nesting) - CSS 선택자 중첩할 수 있는 기능 제공
• 파셜(partials) - Sass 파일을 여러 개의 작은 파일로 분리하여 관리
• 믹스인(mixins) - 재사용 가능한 스타일 블록 정의
• 상속(inheritance) - 선택자가 다른 선택자의 스타일 상속
• 연산(operations) - 수학적 연산 지원, 스타일 동적으로 계산 가능

두 가지 문법

1. SCSS(Sassy CSS) - CSS와 유사, 기존 CSS 파일과의 호환성을 위해 고안. 모든 CSS 문법이 유효.
2. Sass - 들여쓰기 기반의 간결한 문법. 중괄호와 세미콜론 생략 가능.