"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
}
npm으로 실행시킬 수 있는 명령어. 명령어: 동작 형식
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
프로젝트를 시작할 때 기본이 되는 템플릿. 상용구 코드라고 부르기도 함.
작은 수정만으로 여러 곳에 활용 가능한 코드 등을 뜻하기도 함.
반복되지만 자주 쓰이는 형태를 자동화한다는 것이 핵심.
보일러 플레이트 기본 골자
.
├── css (이 디렉토리는 모든 프로젝트들의 CSS 파일을 포함)
│ ├── main.css (거의 모든 페이지에 삽입될 기본 CSS 파일을 이 곳에 작성)
│ └── normalize.css (CSS 리셋을 위한 파일)
├── doc (이 디렉토리에 모든 HTML5 보일러 플레이트 설명서가 있음)
├── img (사이트 제작시에 필요한 이미지들을 이 곳에 저장)
├── js (이 디렉토리는 모든 프로젝트들의 JS 파일을 포함)
│ ├── main.js (사이트 및 애플리케이션의 자바스크립트 코드를 참조하거나 포함하는 용도로 사용)
│ ├── plugins.js (jQuery 플러그인 및 제 3자 스크립트와 같은 다른 모든 플러그인을 포함하는 용도로 사용하며, console 오류를 방지하는 폴백을 포함)
│ └── vendor (이 디렉토리는 모든 제 3자 라이브러리 코드를 포함하는 용도로 사용)
│ ├── jquery.min.js (기본적으로 최신의 jQuery 라이브러리를 압축된 버전으로 포함)
│ └── modernizr.min.js (기본적으로 최신의 Modernizr 라이브러리를 압축된 버전으로 포함)
├── .editorconfig (다른 편집기와 IDE 사이에 일관된 코딩 스타일을 유지하기 위해 도움을 줌)
├── .htaccess (아파치 서버 설정을 위한 기본 설정을 포함)
├── 404.html (커스텀 404 페이지를 제공)
├── apple-touch-icon.png (애플 터치 아이콘으로 사용될 아이콘)
├── browserconfig.xml (IE11에 대한 커스텀 타일에 대한 설정을 포함)
├── index.html (모든 페이지의 기초를 형성하는 기본 HTML 골격)
├── humans.txt (해당 사이트 및 애플리케이션 제작자들의 기술적 자문을 구하기 위한 연락처와 같은 정보 기술)
├── robots.txt (검색 엔진 크롤러가 액세스하지 않기를 바라는 구역을 설정)
├── crossdomain.xml (크로스 도메인 요청 작업을 위한 템플릿)
├── favicon.ico (파비콘)
├── tile-wide.png (IE 타일 아이콘)
└── tile.png (IE 타일 아이콘)
출처: https://webdir.tistory.com/449 [WEBDIR]
잘 정리된 내용은 https://webdir.tistory.com/449?category=561477 을 참고
import React from 'react';
function ExampleApplication() {
return (
<div>
<Header />
<React.StrictMode>
<div>
<ComponentOne />
<ComponentTwo />
</div>
</React.StrictMode>
<Footer />
</div>
);
}