React 개발환경 세팅

인프런 파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 강의를 보고 정리한 내용입니다.

---

npm (node package manager): nodejs 기본 패키지

• npm install —global 패키지명
• npm install 패키지명

주의

파이썬은 디폴트 전역에 설치되며 로컬 설치를 위해 가상환경을 사용

nodejs는 디폴트 로컬에 설치되며 전역 설치를 위해 global 옵션을 사용

---

yarn: 페이스북 주도로 개발된 패키지 관리자

설치: npm install —global yarn

yarn global add 패키지명

yarn add —dev 패키지명

• 개발 의존성으로 추가하고자 할 때 dev 속 성을 붙임

yarn add

주의

yarn add global 패키지명 (add랑 global 위치를 변경하면) global 이름의 패키지가 설치됨

TIP 주로 유틸리티성은 global로 설치

---

Visual Studio Code 추천 확장

• Korean Language Pack for Visual Studio Code: UI를 한국어로 변경
• Active File in StatusBar: 최하단 바에 작업중인 파일 경로 노출
• Auto Rename Tag: 짝이 되는 태그도 동시에 수정
• Color Highlight: 컬러코드 텍스트의 배경색을 해당 색상으로 보여줌
• debugger-for-chrome: 크롬 개발자 도구에서 디버깅하던 것을 VSCode에서 가능
• DotENV: .env파일에 대한 문법 강조
• ESLINT: Javascript 코드 정적 분석 → “eslint.autoFixOnSave”:true 설정 추천
  • .eslintignore: 특정 파일에 대한 분석을 무시하고 싶을때 (.gitignore 같음)
• Prettier: code formatter → “editor.formatOnSave”: true 설정 추천
  • .prettierrc: 값 커스터마이즈

    {
    "arrowParens": "always",
    "orderedImports": true,
    "printWidth": 80,
    "singleQuote": true,
    "semi": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "useTabs": false
    }
    

    prettier가 바로 적용이 안될때는 설정→문서서식→prettier 선택

• TODO Highlight: TODO highlight

---

React 프로젝트 생성

다음 명령어를 입력해주면 뭐가 이것저것 생성됨

yarn create-react-app react-frontend