HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🍭
프로그래머스 데브코스 기동팀 스크럼!/
기동_2팀
기동_2팀/
📡
1차 프로젝트 회의록 정리 (10/14~11/3)/
🔊
10월 16일 (토) Eslint, Prettier 및 기초 파일 세팅 회의
🔊

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

npm 시작:
react app 생성:
folderName 디렉토리로 이동
 
깃허브와 연동
git init
git add remote origin ~
 
이모션 설치:
 
craco 사용으로 합의하였다.
craco 설치 :
 
package.json에서 scripts수정
craco config 파일 작성: craco.config.js 파일에 "@emotion/babel-preset-css-prop
이모션 바벨 프리셋 설치:
스토리북 설치
스토리북 설정 후, 테스트 실행
스토리북 정상 동작 확인 이후, npm start 이후, babel-loader과 충돌 발생
해결법 package.json에
또는,
yarn install
npm start → 성공적
 
 

PR Template, Issue Template 추가

  • .github 폴더 추가
  • https://blog.dnd.ac/github-commitzen-template/
 

CRA ESLINT, Prettier 설정

참고링크: https://developer0809.tistory.com/86
 
💫
settings.json
 

Eslint + prettier 문제 공유

npm start ⇒ React 어플리케이션 실행시 컴파일 에러 유발
space-in-parens ⇒ () 소괄호에 적용되는 설정 Prettier 옵션 없음 / 해당 규칙 삭제 희망
notion image
key-spacing ⇒ : (콜론) 앞뒤 띄어쓰기 Prettier 옵션 없음 / 해당 규칙 삭제 요망
notion image
 

이슈

npm, npx 차이점이 궁금합니다.
babel-loader 충돌에 대한 해결책
 
 
 
npm init -y
npx create-react-app .
npm install @emotion/react @emotion/styled
npm i -D @craco/craco
//package.json
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  },
//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
"resolutions": {
    "babel-loader": "8.1.0"
  }
"peerDependencies": {
    "babel-loader": "8.1.0"
  }
npm i -D prettier eslint-plugin-prettier eslint-config-prettier
{
    "extends": ["react-app", "plugin:prettier/recommended"]
}
// package.json에 추가 
"resolutions": {
    "babel-loader": "8.1.0"
  }
// 이후 yarn install을 통한 업데이트