4. Setting Up Project

Udemy - Complete React Developer

4. Setting Up Project

프로젝트 셋팅 (with CRA)

// react 프로젝트 생성
npx create-react-app 프로젝트명 //기본
npx create-react-app 프로젝트명 --template cra-template-pwa //서비스워커 사용시

//eslint, prettier설정
node_modules/.bin/eslint --init
yarn add prettier eslint-plugin-prettier --dev

sass

yarn add node-sass 로 sass셋팅
브라우저는 css 만 읽을 수 있어서 변환이 필요한데
CRA로 프로젝트를 생성했기때문에 webpack/babel이 자동으로 설정됨

//css 스타일 (XX.css)
.class1 {...}
.class1:hover {...}
.class1 .class2 { ...}
.class1 .class2:hover {...}

//sass 스타일 (XX.scss)
.class1 {
    ...
    &:hover {...} 
    
    . class2 {
    	...
    	&:hover {...}
    }
}

npm audit

의존하고있는 패키지에 문제가 있을경우, 해결된 버전을 찾아 업데이트 해줄 수 있는 기능
yarn에는 없지만 이렇게 해결 가능
https://javascriptbit.com/yarn-audit-fix-security-issues/