리액트 시작하기

npx create-react-app . (or 디랙토리명)

terminal에 create-react-app으로 새로운 react project를 생성한다.
(나는 vs코드에 딸린 powershell을 사용하지만, git bash, cmd 등을 사용함. 참고로 git bash 사용을 권장한다고 하는데 그 이유는 Windows(윈도우) 운영체제(OS) 환경에서도 리눅스 커맨드를 사용할 수 있기때문이라고 한다. 리눅스(Linux)는 바로 '유닉스(Unix) 계열의 운영체제를 본 떠 만들어졌기 때문에 리눅스는 유닉스의 풍부한 커맨드라인 툴(Tool)들을 물려 받았다. 이런 이유들로 윈도우에서 git bash 사용을 권장하는데 나는 아직 리눅스와 운영체제에 대한 이해도가 높지 않기 때문에,, 다음에 이 부분 공부할꺼임,,,)

출처: https://parkjh7764.tistory.com/39 [HwanE Develop Blog]

이렇게 react를 설치하고 나면 디렉토리에 몇가지 폴더들이 생성됨.

• node_modules
• public
• src
• .gitignore
• package.json
• README.md
• yarn.lock

1. public 폴더
(create-react-app으로 개발할 React 프로젝트의 Static 파일들)

• index.html -> 가상돔에 그려질 실제 html파일.(#root부분에 리액트 가상돔이 페이지를 그려 줌.)
• manifest.json -> 앱에 대한 정보를 담고 JSON 파일.앱의 이름은 무엇인지, 홈스크린 화면에 추가할 때 아이콘은 어떤 것인지 등의 정보
• robots.txt
  (파비콘, images 파일 등등)

manifest의 정확한 설명과 object의 역활을 알고싶다면 아래페이지로.
출처 : https://velog.io/@jch9537/React-manifest.json

robots.txt란?
인터넷 검색엔진 배제 표준(Robots Exclusion Protocol)이란 보안이 필요한 내용이 검색엔진에 유출되지 못하도록 웹 페이지를 작성하는 방법을 기술한 국제기술 표준이다.

• 형식
  User-agent: <= 검색봇 이름
  Disallow: <= 접근 설정
  Crawl-delay: 다음방문까지의 디레이(초)

• default
  User-agent: *
  Disallow:

• 모든 검색봇 차단
  User-agent: *
  Disallow:

출처 : https://server-talk.tistory.com/93 [서버구축이야기!!]

2.src 폴더
(실제 React를 사용하여 개발을 할 때 사용하는 폴더입니다.)

• App.js - 메인 JSX
• App.test.js 컴포넌트를 테스트하기 위한 파일
• index.js -> 우리가 개발한 React 프로젝트를 index.html 파일에 표시하기 위한 파일
• reportWebVitals.js React의 성능을 측정하기 위한 파일
• setupTests.js React에서 테스트를 실행하기 위한 설정 파일

3. package.json
개발에 필요한 라이브러리를 관리하는 파일

dependencies

 "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

npm / yarn으로 설치한 라이브러리 목록과 버전으로, 해당 모듈은 node_modules에 저장되며, 저장 완료되면 package.json deoendencies 부분에 자동으로 작성됨.

scripts

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

start: React 프로젝트를 개발할 때 사용합니다.
build: 개발한 React 프로젝트를 배포하기 위해 사용합니다.
test: React 프로젝트를 테스트할 때 사용합니다.
eject: create-react-app에서 관리하는 React 프로젝트를 일반 프로젝트로 전환합니다.

eslintConfig

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

ESLint란?
ESLint는 JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트로, 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와준다. 애어비앤비, 구글 eslint 가 개발자들이 많이 사용하는 eslint임.
출처 : https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/ [카카오테크]

react-app만 따르는 것으로 기본값이 정해져있음. airbnb-eslint 스타일도 적용할 수 있음.

 yarn add eslint-config-airbnb

더 자세한 정보는 아래. (내일 해보기 ..ㅎㅎ )
react airbnb esLint 따르기
출처 : https://velog.io/@velopert/eslint-and-prettier-in-react [리액트 프로젝트에 ESLint 와 Prettier 끼얹기]

애어비앤비 ESLint 가이드
https://github.com/airbnb/javascript

browserslist
대상 브라우저 및 Node.js 버전을 공유하는 구성

 "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
        "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]

이제 리액트 시작해보기!