[프론트엔드 스쿨 6기] 🗓️ 6월 19일

유동균·2023년 6월 19일

TIL 멋쟁이 사자처럼

프론트엔드 스쿨 6기

목록 보기

17/44

📚 공부한 내용

npm

add-gitignore

.gitignore란?
프로젝트에서 원하지 않는 파일 컴파일 된 파일들을 git에서 제외시킬수 있는 설정 파일이다.

install

> npm i -g add-gitignore

> add-gitignore node,windows,oxs,visualstudiocode
✅  Added .gitignore for node,windows,oxs,visualstudiocode.

live-server

> npm install -g live-server

> live-server --port=5123

포트의 기본값은 8080

vscode의 확장프로그램인 live-server 대신 npm live-server를 사용하면 확장프로그램을 설치하지 않은 환경에서도 live-server를 구동할 수 있으며, port와 같은 세부 사항도 설정할 수 있다.

rimraf

명령어로 폴더를 삭제하기 위한 패키지

> rimraf src/style

npm-run-all

병렬 또는 순차적으로 여러 npm 스크립트를 실행

script 병렬 실행
npm run script 명령으로는 여러개의 npm script를 실핼 할 수 없다.
따라서

> npm run build && npm run start

하지만 npm-run-all을 사용하면

> npm-run-all -p build start

Sass | CSS pre-processor(전처리기)

CSS의 확장 언어로 css에서 할 수 없는 다양한 기능을 활용할 수 있다.

install

> npm i sass
> sass --version
1.63.4 compiled with dart2js 3.0.4

## package.json 파일을 자동으로 생성하는 명령어
> npm init -y

## 단일 scss파일을 css파일로 컴파일
> sass style.scss style.css
> sass scss/style.scss css/style.css

## 단인 파일이 아닌 scss 폴더 안 모든 파일을 css 폴더안으로 컴파일
> sass scss:css

## 출력 스타일 변경
> sass scss:css --style=compressed

## 소스맵 생성 안함
> sass scss:css --no-source-map

## 해당 파일의 변화 감시, 변화가 생기면 자동 컴파일
> sass scss:css --watch

package.json 설정

// package.json
...
  "scripts": {
    "start": "run-p watch server",
    "sass": "sass scss:css",
    "compact": "sass scss:css --style=compressed",
    "nomap": "sass scss:css --no-source-map",
    "watch": "sass scss:css --watch",
    "watch-compact": "sass scss:css --watch --style=compressed",
    "clean": "rimraf css",
    "server": "live-server --port=8090"
  },
...

// 명령어 재할당
  "scripts": {
    "start": "run-p watch server",
    "sass": "sass scss:css",
    "compact": "npm run sass -- --style=compressed",
    "nomap": "npm run sass -- --no-source-map",
    "watch": "npm run sass -- --watch",
    "watch-compact": "npm run sass -- --watch --style=compressed",
    "clean": "rimraf css",
    "server": "live-server --port=8090"
  },

--는 명령행 인자의 구분자로 사용되며, 그 뒤에 오는 인자들은 해당 스크립트나 명령어에 대한 옵션 또는 매개변수로 해석된다.
따라서 --style=compressed는 npm run sass 스크립트의 인자로 전달되며, 스크립트는 이를 처리하고 압축된(compressed) 스타일로 Sass 파일을 컴파일한다.

🤔 새롭게 배운 내용

@import

스타일들을 여러 파일들로 나누고, 다른 파일에서 불러와서 사용할 수 있다.

@import "layout.scss";
@import "page";	// 확장자를 생략할 수 있다.

@import "_layout.scss"; // 파일명 앞에 언더바(_)를 붙이면 css 파일로 컴파일하지 않는다.

@mixin @includ

스타일 시트 전체에서 재사용 할 css 선언 그룹 을 정의하는 기능

mixin 을 선언 할 때는 @mixin 를 사용하며, 이를 사용 할 때는 @include 를 사용한다.

@mixin flexbox($direction: row, $justify: flex-start, $items: stretch, $wrap: nowrap, $gap: 0) {
  display: flex;
  flex-flow: $direction $wrap;
  justify-content: $justify;
  align-items: $items;
  gap: rem($gap);
}

...
.container {
  @include flexbox($gap: 10px);
}

@content

선언된 Mixin에 @content이 포함되어 있다면 해당 부분에 원하는 스타일 블록 을 전달할 수 있다.

@content 를 사용하면 나중에 @include 하였을 때, 그 선택자 내부의 내용들이 @conent 부분에 나타나게 된다.

@mixin text {
  &::after {
    content: "";
    @content;
  }
}

@function

mixin과의 차이점은 mixin 은 style markup 을 반환하지만,

function 은 @return 를 통하여 "값"을 반환한다.

@function columns($number: 1, $columns: 12) {
  @return $max-width * ($number / $columns)
}

@fowards @use

@fowards Sass 스타일시트를 로드하고 스타일시트가 @use 규칙과 함께 로드될 때 해당 믹스인, 함수 및 변수를 사용할 수 있도록 한다.

@use 규칙은 다른 Sass 스타일시트의 믹스인, 함수 및 변수를 로드하고 여러 스타일시트의 CSS를 함께 결합한다.

// _index.scss
@forward "a11y";
@forward "font";
@forward "color";
@forward "mixin";
@forward "media-query";
@forward "unit";

// index.scss
@use "base";
@use "components";
@use "layout";
@use "pages";
@use "utils";

유동균

다음 포스트

[프론트엔드 스쿨 6기] 🗓️ 6월 19일