✨ React 정리 - 1) 리액트 개발환경 셋팅, Eslint + Prettier ✨

✔️ Window React 개발환경 셋팅

1. Nodejs LTS 버전 설치

2. Visual Studio Code 설치

3. 작업 폴더 생성 후 powershell 열기

4. "npx create-react-app 프로젝트명" 입력

5. 사이트 미리보기

반드시 터미널에서 경로 확인

❌ 내게 발생한 npm start 오류

터미널에서 npm start가 정상 작동하지 않는 오류가 발생됬다

⭕ 해결 방법

1. VSC(Visual Studio Code)에서 ctrl + shift + p 입력
2. Terminal: Select Default Profile 입력
3. Command Prompt 클릭
4. vsc 재실행

---

✔️ React File 설명

1. node_modules 폴더: 라이브러리 코드 보관함

2. public 폴더: static 파일 모아놓는 곳(임시 보관소)

3. src 폴더: 코드 짜는 곳 ( App.js가 메인 페이지가 된다 )

4. package.json: 프로젝트 정보

5. README.md: 프로젝트 문서화

---

✔️ React에 Eslint + Prettier 적용

https://wookgu.tistory.com/31

❌ prettier 오류

return 부분이 지속적으로 오류 발생한 것 처럼 빨간줄 현상이 발생했다

⭕ 해결 방법

.eslintrc.json 이 파일에 해당 코드를 삽입하여 오류를 무시했다

"rules": {
        // suppress errors for missing 'import React' in files
        "react/react-in-jsx-scope": "off",
        // allow jsx syntax in js files (for next.js project)
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] //should add ".ts" if typescript project
    }

🔔 참고자료

Eslint + Prettier 적용하기: https://wookgu.tistory.com/31

Prettier 오류 해결: https://stackoverflow.com/questions/42640636/react-must-be-in-scope-when-using-jsx-react-react-in-jsx-scope