yarn 과 create react app 으로 react 프로젝트 셋업하기(yarn 수정 error)

새롭게 개편된 리엑트 홈페이지에서는 프레임워크와 함께 프로젝트를 시작하는 것을 추천하고 있습니다. 

 

그러나 저는 강의 수강 등의 이유로 yarn 과 create react app 으로 프로젝트를 셋업해야 할 경우가 있어서 셋업 방법을 기록해 둡니다. 

 

문제는 yarn start 명령어로 시작했을 때 파일을 수정하면 에러가 발생하는 버그가 있습니다. 

 

create react app 설치는 https://create-react-app.dev/docs/getting-started/ 참고 !

 

[eslint] Failed to load config "react-app" to extend from.
Referenced from: /Users/wandakim/Projects/react/youtube/package.json

 

프로젝트를 실행중에 수정 사항이 발생하면 위와 같은 에러가 발생하는데요, 
최신 yarn 에서 create react app 과 충돌이 발생하기 때문입니다. 

 

이를 해결하기 위해 몇가지 설정이 필요합니다. 

 

1. 터미널에서 dependency 를 강제로 추가해줍니다. 

$ yarn add -D eslint-config-react-app

 

2. .yarnrc.yml 파일 추가하기

 

 

 

상위 폴더에 .yarnrc.yml 파일을 만들고 아래의 코드를 붙여넣습니다. 

packageExtensions:
  react-scripts@*:
    peerDependencies:
      eslint-config-react-app: '*'

yml 파일은 띄어쓰기에 민감하니 포맷을 잘 지켜야 합니다. 

 

3. yarn 캐시 삭제 후 프로젝트를 다시 셋업하기 

$ yarn cache clean

$ yarn install

터미널에 입력하여 캐시를 삭제 해 주신 후에 프로젝트를 다시 셋업 해 줍니다. 

yarn start를 통해 다시 실행해 보면 수정사항이 발생해도 해당 에러가 발생하지 않는 것을 확인할 수 있습니다.