TIL #24. JS스터디: sass/비구조화 할당/bind/리액트에서 export

ceres·2020년 2월 20일
0

위코드(TIL)

목록 보기
2/17

(20/2/20)

<스터디내용>
1.sass 에서 자주 쓰이는 팁 3개 이상 공유
2.destructuring(비구조화 할당) 이란? 문법 알려주기, 예제, 리액트에서 자주쓰이는 패턴 소개
3.함수에서 bind란?
4.리액트에서 export 할때 default 유무의 차이로 인한 import 사용법 등

1. sass 에서 자주 쓰이는 팁 3개 이상 공유

Sass란?

Sass(Syntactically Awsome StyleSheets)는 CSS pre-processor(전처리기)이다. 전처리기는 CSS의 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성해준다. (전처리기에는 Sass, Less, Stylus 등이 있고 sass가 가장 사용률이 높다.)
CSS는 프로젝트 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점이 있다. Sass는 일반적인 프로그래밍 개념을 사용하여 (변수생성, 함수생성, 상속 등) CSS의 단점들을 해결해준다.

Sass 설치

  1. ruby 설치 (위도우의 경우만. mac, linux는 기본으로 설치되어있음)

  2. 터미널에 sass 설치
    yarn add node-sass

  3. vscode에 Live Sass Compiler 설치
    css 전처리기 만으로는 웹 서버가 인지하지 못하기 때문에 각 CSS전처리기에 맞는 Compiler를 사용해야한다. 따라서 Sass 파일을 Css파일로 자동 변환 시켜주는 확장프로그램을 설치해야한다.

  4. 프로젝트 할 때 마다 설치해야함
    (-g global 로 설치할 수 있지만, 나중에 문제가 발생할 수 있기 때문에 비추한다.)
    프로젝트마다 설치하는 또 다른 방법
    Sass 설치한 프로젝트의 package.json을 해당 프로젝트에 복사 붙여넣기 하고
    터미널을 열어서 npm install을 해주면 된다.

Scss 기능

1) 모듈화

부모의 중괄호 안에 자식 요소 스타일을 지정하는 형태. css 선택자를 중첩 할 수 있다.
아래를 보면 button이 nav{} 안에 있는데, nav 안에 존재하는 것으로 자동 인식해준다.

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 10vh;
  color: white;

  button {
      background: $dark-blue;
  }
}

2) Variables

$ 기호를 사용해서 변수를 정의할 수 있다. 반복적으로 사용하는 부분을 변수로 지정해서 사용하면 좋다.
선언: $변수명:속성값;
호출: $변수명;

// Sass
//선언
$default-color: #f00;
$default-border: 1px solid black;

//호츌
.head{
	color: $default-color;
    border: $default-border;
}
.body{
	color: blue;
    border: $default-border;
}
// CSS
.head{
	color: #f00;
    border: 1px solid black;
}
.body{
	color: blue;
    border: 1px solid black;
}

3) nesting

&로 부모선택자를 참조할 수 있다. 한번에 관리하므로 코드 유지보수가 편하다.

// Sass
.btn{
	background-color: #f00;
    &:hover{
    	opacity: 0.5;
    }
    &.text{
    	color: #fff;
    }
    &.select{
    	border: 2px solid black;
    }
}
// CSS
.btn{
	background-color: #f00;
}
.btn:hover{
	opacity: 0.5;
}
.btn .text{
	color: #fff;
}
.btn.select{
	border: 2px solid black;
}

4) Mixin

Sass에는 Mixin함수 기능이 내장되어있다. 많은 선택자에 공통으로 사용되는 코드에 사용하면 좋다.
선언: @mixin mixin명(인자){}
호출: @include mixin명(인수)

//생성
@mixin button-color($color) {
    background: $color;
        &:hover {
            background: lighten($color, 10%);
        }
        &:active {
            background: darken($color, 10%);
        }
        &.outline {
            color: $color;
            background: none;
            border: 1px solid $color;
            &:hover {
                background: $color;
                color: white;
            }
        }
}

// 사용
blue-btn {
        @include button-color(blue);
    }

예시 한개 더)

@mixin btn-style($color, $width, $height){
	background-color: $color;
    width: $width;
    height: $height;
}
blue-btn{
	@include box-style(#00f, 100px, 50px);
    color: #f00;
}

5) extend

호출: @extend 선택자명

.btn-style{
    width: 100px;
    height: 50px;
}
.blue-btn{
	@extend .btn-style;
    background-color: #00f;
}

6) import

파일을 부분화 시켜서 다른 scss 파일을 불러와 사용합니다.
호출: @import ".scss 파일명"

@import "basic.scss"
@import "basic2" //확장자 생략가능

참고)
https://velog.io/@smooth97/SASS-%EB%9E%80
https://velog.io/@yeomi/Sass-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0


2. destructuring(비구조화 할당) 이란? 문법 알려주기, 예제, 리액트에서 자주쓰이는 패턴 소개

https://ko.javascript.info/destructuring-assignment

3. 함수에서 bind란?

4. 리액트에서 export 할때 default 유무의 차이로 인한 import 사용법 등

0개의 댓글