🔸 PostCSS & Sass

• CSS 전처리기(Preprocessor)는 무엇이고, 왜 사용하는가?

: 작업의 규모가 커질 수록 기존 CSS 문법의 한계 발생, Sass나 Less, Stylus와 같은 전처리기를 사용하여 CSS의 한계를 극복할 수 있음
: 브라우저는 표준 CSS에만 이해할 수 있기 때문에, CSS 동작 이전에 처리 과정을 거친다는 의미에서 전처리기(Preprocessor)라는 이름 붙여짐

• Postcss의 플러그인 설치 시 유의해야 할 점은 무엇인가?

: 설치 시 생성되는 postcss.config.js 파일에 플러그인 이름과 옵션을 등록해야 사용할 수 있음

• Postcss의 combine-media-query 플러그인을 사용하면 어떤 이점이 있는가?

: Sass 사용 시 media query를 mix-in하여 사용하면 media query 개수가 많이 늘어나는데, 중복된 media query를 하나로 합쳐줄 수 있음

• Postcss의 preset-env 플러그인을 사용하면 어떤 이점이 있는가?

: 자주 사용하는 Postcss 기능의 모음집이라고 생각하면 됨, 무엇을 설치해야 할지 모를 때 설치하면 좋은 플러그인

• Postcss의 import 플러그인을 사용하면 어떤 이점이 있는가?

: 기존 @import 사용하여 순차적으로 CSS 파일을 읽어오는 방식은 렌더링 시간을 저하시킬 수 있음
: import 플러그인 사용하면 컴파일 시 import 처리된 파일들을 하나의 파일로 묶어주기 때문에 렌더링 시간을 줄일 수 있음

• Postcss의 cssnano 플러그인을 사용하면 어떤 이점이 있는가?

: 공백이 포함된 파일의 공백을 제거하여 압축시키는 방식, 용량을 줄임으로써 렌더링 시간을 감소시킬 수 있음

• Sass의 Nesting이란 무엇인가?

: CSS와 다르게 선택자를 중첩 구조로 사용할 수 있음
: CSS에서는 media query를 제외하고 한 선택자에 계층 구조를 만들 수 없었지만, Sass에서는 한 블록 안에 하위 선택자와 블록을 사용하여 중첩시킴으로써 계층 구조를 간편하게 구현할 수 있음

• Sass와 Scss의 차이는 무엇인가?

: 둘 다 CSS의 전처리기인 것은 동일, Scss는 Sass보다 더 나중에 등장했고 문법의 차이가 있음
: Sass는 { }나 ; 등의 사용 대신 들여쓰기 방식을 사용
: 반면 Scss는 CSS 표준 문법과의 호환성이 좋기 때문에 보편적으로 많이 사용

• 현재 표준으로 채택된 Sass 버전은 무엇인가?

: dart 기반의 dart-sass, 표준이기 때문에 그냥 Sass를 설치하면 dart-sass가 설치됨

• node 기반 Sass와 dart 기반 Sass의 차이점은 무엇인가?

: CLI 명령어의 차이가 있음
: dart 기반 Sass는 기존 node 기반 Sass의 한계(나누기 기능, import만 지원)를 보완

• Sass 사용 시 변수를 어떻게 생성하는가?

: 변수명 앞에 $를 붙이고 속성 값을 할당하여 생성

• Sass 컴파일 시 생성되는 map 파일은 어떤 의의가 있는가?

: map 파일에는 Scss 파일의 어떤 코드를 수정했는지가 기록되어 있기 때문에, 개발자 도구로 확인해보면 Scss 파일의 소스 코드 위치를 알려줌
: map 파일을 생성하지 않으려면 --no-source-map 명령어를 붙이면 됨, 생성하지 않으면 Scss 파일에서 어떤 부분을 수정했는지 알 수 없음

🔸 환경 설정 & CLI

• package.json 파일에 플러그인을 등록 시 함수 방식과 객체 방식은 어떤 차이가 있는가?

: 둘 다 플러그인을 등록하여 사용할 수 있게끔 해준다는 점에서는 동일하지만, 객체 방식을 사용하면 객체 안에 키와 값을 할당하여 옵션을 따로 지정해줄 수 있음

• mkdir 명령어는 무엇이고, 어떻게 사용하는가?

: 폴더 구조를 생성할 때 사용하는 명령어
: $ mkdir "폴더명"과 같은 방식으로 사용
: 폴더명 뒤에 /를 붙이면 하위 폴더 구조까지 생성할 수 있음

• touch 명령어는 무엇이고, 어떻게 사용하는가?

: 파일을 생성하는 명령어
: $ touch "폴더명/생성할 파일명"과 같은 방식으로 사용

• $ npm init 뒤의 -y는 무슨 의미인가?

: 설치 시 Y(Yes)를 입력해야 하는 부분에서 자동으로 입력하고 넘어가겠다는 의미

• package.json 파일에 등록해놓은 스크립트 명령을 실행시키는 명령어는 무엇인가?

: $ npm run 뒤에 지정해놓은 명령 이름을 작성하여 실행

• CSS 전처리기를 실행하여 CSS 파일로 컴파일할 때 어떤 명령어를 사용해야 하는가?

: $ npm run "설정해놓은 build 명령어 이름"를 사용하여 Sass 파일을 컴파일할 수 있음

• Scss 파일의 수정한 부분을 실시간으로 컴파일하려면 어떤 명령어를 사용해야 하는가?

: 기존 컴파일 명령어 뒤에 --watch를 추가로 작성하면 실시간으로 컴파일할 수 있음

• npm 명령어를 재할당할 때 유의해야 할 점은 무엇인가?

: 재할당한 명령어 뒤에 --를 붙여 다른 명령어와 구분해야 함
ex) $ npm run "재할당 명령어" -- --watch

• npm-run-all 패키지의 옵션인 run-p와 run-s의 차이는 무엇인가?

: npm-run-all은 여러 개의 스크립트 명령어를 한 번에 실행할 수 있는 기능
: run-p는 병렬적으로 여러 개의 스크립트 명령어를 실행시킬 수 있고, run-s는 순차적으로 여러 개의 스크립트 명령어를 실행시킬 수 있음

• 패키지가 설치되어 있지 않은 작업 환경에서 파일에 사용된 패키지를 설치하는 명령어는 무엇인가?

: $ npm i 혹은 $ npm install 명령어를 사용하여 설치할 수 있음

• 패키지 설치 시 꼭 확인해야 하는 사항에는 무엇이 있는가?

: 사용하려는 패키지가 package.json 파일의 devDependencies 객체 안에 존재해야 함