[22.05.09] TIL

Sass - mixin

mixin을 사용하면 스타일시트 전체에서 재사용할 수 있는 스타일을 정의할 수 있다.

• 함수와 같이 argument 사용이 가능하다.
• @content를 활용해 기존 mixin에 선택자나 속성 등을 추가할 수 있다.
  https://sass-lang.com/documentation/at-rules/mixin

/* 선언 @mixin */
@mixin flexbox($jc: center, $ai: center) {
  display: flex;
  align-items: $ai;
  justify-content: $jc;
}

/* 적용 @includes */
@include flexbox.flexbox;

/* @content 활용 - 반응형 */
@mixin after($media) {
  @media only screen and (min-width: getMinBreakpoint($media)) {
    @content;
  }
}

@include responsive.after(responsive.getMinBreakpoint(MD)) {
    max-width: 960px;
    min-height: calc(100vh - 80px);
  }

프로젝트 의존성 오류

CRA를 이용해 프로젝트를 시작하는 과정에서 의존성 설치 오류가 있었다.

해결

• node 버전의 문제, 낮은 버전을 사용하고 있어 생긴 오류.
• node 버전 업데이트를 해주면 되는 간단한 문제

node -v // 버전 확인
npm cache clean -f // npm 캐시 삭제
npm install -g n // 노드 버전관리 플러그인 설치
n lts / lts 버전 설치

// 다른 해결 방법
nvm ls -remote
nvm install 14.17.0
nvm use 14.17.0

react-router v6

https://reactrouter.com/docs/en/v6/getting-started/overview
https://blog.woolta.com/categories/1/posts/211

v5 vs v6

• Switch -> Routes
• exact 옵션 삭제
• component 및 render -> element
• path 상대경로로 지정
• Route를 사용하려면 Routes로 감싸주어야 한다