[React #4] 리액트 프로젝트 생성하기

 

 

vscode - 터미널 - 새터미널

ctrl + ~ : 터미널 열기

 

CRA (Create-React-App) 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구

https://create-react-app.dev/docs/getting-started/

Getting Started | Create React App

 

 

npx create-react-app 프로젝트명    (새로 프로젝트 생성시 입력)

yarn create react-app 프로젝트명

 

cd 프로젝트명     (기존 파일 있을 시 입력)

npm start or yarn start - 실행

=========================================

 

src 안에 components 폴더 - Test.js

               assents 폴더 -

                                       api 폴더

                                       css폴더 - reset.css파일

 

 

reset.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.6;
    font-size:15px;    
    font-family: 'Noto Sans KR', sans-serif;
}
a {
	line-height: 1.6;
    font-size:15px;    
    text-decoration: none;
    color:#333;
}

ol, ul , li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 

CRA 명령어

Create React App을 사용해 스캐폴딩 된 프로젝트는 다음의 4가지 영역 제공

start → React 프로젝트 개발 서버를 시작한다.

build → 배포를 위해 앱을 정적(Static) 파일로 번들(Bundle) 한다.

test → 테스트 러너 (Test Runner)를 시작한다.

ehect → 사용자 정의 구성 (예: Webpack)을 직접 수행할 수 있도록 프로젝트를 준비한다.

 

 

에러 발생 시

1. node.js 가 최신 버전이 아닐 경우가 많아서 꼭 삭제 후 다시 설치

2. 맥은 sudo npx create-react-app프로젝트 명으로 npm이나 npx 쓰실 때 앞에 sudo라는 단어를 붙인다.

3. 보안 오류는 시작 -검색 - Powershell검색 - 우클릭 - 관리자 권한으로 실행 후 Set-ExecutionPolicy Unrestricted 입력.