Portfolio

npm 시작:


npm init -y

react app 생성:


npx create-react-app .

folderName 디렉토리로 이동

깃허브와 연동

git init

git add remote origin ~

이모션 설치:


npm install @emotion/react @emotion/styled

craco 사용으로 합의하였다.

craco 설치 :


npm i -D @craco/craco

package.json에서 scripts수정


//package.json
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },

craco config 파일 작성: craco.config.js 파일에 "@emotion/babel-preset-css-prop


//craco.config.js

module.exports = {
    babel: {
        presets: ["@emotion/babel-preset-css-prop"]
    }
}

이모션 바벨 프리셋 설치:


npm install -D @emotion/babel-preset-css-prop

스토리북 설치


npx -p @storybook/cli sb init

스토리북 설정 후, 테스트 실행


npm run storybook

스토리북 정상 동작 확인 이후, npm start 이후, babel-loader과 충돌 발생

해결법 package.json에


"resolutions": {
    "babel-loader": "8.1.0"
  }

또는,


"peerDependencies": {
    "babel-loader": "8.1.0"
  }

yarn install

npm start → 성공적


npm i -D prettier eslint-plugin-prettier eslint-config-prettier


{
    "extends": ["react-app", "plugin:prettier/recommended"]
}

npm start ⇒ React 어플리케이션 실행시 컴파일 에러 유발

space-in-parens ⇒ () 소괄호에 적용되는 설정 Prettier 옵션 없음 / 해당 규칙 삭제 희망

key-spacing ⇒ : (콜론) 앞뒤 띄어쓰기 Prettier 옵션 없음 / 해당 규칙 삭제 요망

npm, npx 차이점이 궁금합니다.

babel-loader 충돌에 대한 해결책


// package.json에 추가 
"resolutions": {
    "babel-loader": "8.1.0"
  }
// 이후 yarn install을 통한 업데이트

10월 16일 (토) Eslint, Prettier 및 기초 파일 세팅 회의