package.json 파일이다.
react는 리액트 그 자체고, react-dom은 리액트가 html 문서 해석하는 그런 거 같고,
react-scripts는 리액트가 js 읽는 그런 거 같고,
web-vitals 잘 모르겠지만, 뭔가 버그날 시 자동으로 react쪽 서버로 버그 내용이 날라가는?
그런 거 아닐까 생각됨.
start가 시작
뭐 build가 빌드
eslintConfig는 뭔가 리액트 관련으로 오류 있으면 에러 달아주는? 그런 거 인 듯?
https://blog.pumpkin-raccoon.com/74
JS코드를 깔끔하게 해주는 ESLint 알아보기! (적용방법과 상세 옵션)
1. ESLint란? Lint는 협업하며 개발을 하신 분이라면 많이 들어보셨을 것입니다. Lint(혹은 Linter)란 에러가 있는 코드에 표시를 달아주는 것을 뜻하는데요, 에러와 코딩 스타일을 잡아주기 때문에 여
blog.pumpkin-raccoon.com
브라우저 리스트는 지원 범위
여기가 index.html 그 역할인 듯?
리액트 환경 import 하고,
react DOM도,
index.css로 가져오고, css를 이렇게 import 하는 듯.
import App from './App'이
요 App.js 가져오는 것 같은데,
일단은 다 지우셈. 저거 초기화면임 그냥.
그냥 vue에서 index.js가 메인 컴포넌트가,
저런 App.js 이렇게 js로 끝나는 것 들이 자식 컴포넌트라고 보면 됨.
꼭 App.js일 필요도 없고, 그냥 저거 지우고 다른 컴포넌트 js 만들어서 쓰면 됨.
StrictMode 저거는 그냥 보통 js에서 use strict였나 검사 빡세게 할지 안할지 그거임.
그거를 리액트에 관련된 걸 빡세게 검사할 지 안할지 인 듯?
reportWebVitals();
왠지 느낌이 뭔가 치명적 에러 발생 시 react 서버에 그냥 자동으로 에러 리포트 보내주는 그런 거 같음. 그냥 지우셈.
import reportWebVitals from './reportWebVitals';
이것도 지우고.
이 index.js에서
const root = ReactDOM.createRoot(document.getElementById('root'));
이 부분이 문서에서 #root 이 부분을 찾는 것 이다.
그 문서의 위치는 어딧냐면,
public - index.html이다.
이렇게 되어 있다.
이 중 favicon은 우리가 할 거니까 지우고,
저 meta의 theme-color는 그 브라우저 위쪽 탭의 색이라고 한다. 이것도 일단은 지우고, 나중에 쓰면 재밌을 듯.
description은 그냥 설명이고,
apple-touch-icon도 일단 지움. 리액트 기본 아이콘 보여 주는 듯.
manifest는 잘 모르겠음. 일단 패스
이게 manifast.json임. 뭔가 설정같은데, 일단 패스.
body 와서
noscript 저게 스크립트 로드 안됐을 시 하는 거 인 듯. 그래서 일단은 무시하고,
그리고 드디어 #root 찾음.
여튼 저 index.html의 #root 안에다가 render 한 걸 넣어 주는 것.
여튼,
이 index.js가 직접 index.html의 #root에 넣어주는 애 이므로, 얘가 최상위 컴포넌트라고 보면 됨.
그 다음 간단하게 필요없는 거 다 지워봄
저 index들 빼고 src 안에선 다 지워도 됨.
'React' 카테고리의 다른 글
| 6. 클래스 컴포넌트에 값 할당, 함수, 버튼에 함수 바인딩, state (0) | 2023.10.23 |
|---|---|
| 5. 한 컴포넌트의 최상위 요소 (0) | 2023.10.23 |
| 4. 한 js에서 컴포넌트 2개 (0) | 2023.10.23 |
| 3. 구조 (0) | 2023.10.23 |
| 1. 환경 설치 (0) | 2023.10.23 |