초기 세팅 및 설치 _ React

CRA초기 폴더 및 파일 세팅
1) node.modules
CRA를 구성하는 모든 패키지 소스코드가 존재하는 폴더
2) package.json

• CRA 기본 패키지외 추가로 설치된 라이브러리/패키지 정보(종류,버전)가 기록되는 파일
• 모든 프로젝트마다 package.json 하나씩 존재
• dependencies
  리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능
  실제 코드는 node.modules 폴더에 존재
• scripts
  start: 프로젝트를 development mode(개발모드) 실행을 위한 명령어 npm run start
  build: 프로젝트를 production mode(배포모드) 실행을 위한 명령어. 서비스 상용화
  3) .gitignore
• .gitignore 파일에 github에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다
• push를 해도 .gitignore파일에 작성된 폴더와 파일은 올라가지 않는다

CRA설치

npm start 입력시 http://localhost:3000 주소를 확인할 수 있다

eslint & prettier 세팅시
설정에 되있는지 확인

eslintrc

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "no-var": "warn", // var 금지
    "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
    "no-nested-ternary": "warn", // 중첩 삼항 연산자 금지
    "no-console": "warn", // console.log() 금지
    "eqeqeq": "warn", // 일치 연산자 사용 필수
    "dot-notation": "warn", // 가능하다면 dot notation 사용
    "no-unused-vars": "warn", // 사용하지 않는 변수 금지
    "react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
    "react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
    "react/no-direct-mutation-state": "warn", // state 직접 수정 금지
    "react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 금지
    "react/no-unused-state": "warn", // 사용되지 않는 state
    "react/jsx-key": "warn", // 반복문으로 생성하는 요소에 key 강제
    "react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
    "react/jsx-curly-brace-presence": "warn", // jsx 내 불필요한 중괄호 금지
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  }
}

router 에러시
npm install react-router-dom --save 입력했는지 확인

React 설정
1. 리액트가 설치된 디렉토리 에서 아래 명령어 실행
git init
2. Git hub 에서 repository 생성
3. 다시 디렉토리에서 아래 명령어 실행
git remote add origin <생성한 레파지토리 주소>
4. 모든 파일을 git에 업로드 하는 명령어를 입력한다 (나중에는 올려야 할 파일만 업로드 하도록 해보자)
git add .
5. 그 다음 commit을 해보자.
git commit -m "코멘트"
6. 마지막으로 스테이징에 commit 된 소스들을 push 해보자.
git push origin master