개발환경 셋팅
1. 아래의 Nodejs 사이트에 접속하여 LTS라고 써있는 버전을 다운받아 설치합니다.
– 설치 경로는 C드라이브를 권장합니다.
npm 버전 확인
node -v
패키지 버전 확인
npm show [패키지명] version
npm 버전 변경
npm install -g npm@6.14.13
※ 버전에 따라 다른 문제가 발생 할 수 있기 때문에 프로젝트에서는 통일된 버전을 설치하셔야 합니다.
2. 아래의 Visual Studio Code 사이트에 접속하여 최신 버전을 다운받아 설치합니다.
https://code.visualstudio.com/
3. 깃(Git) 설치
개인은 GitHub 사이트 계정 생성해서 소스관리 할 수 있고 프로젝트에서는 내부 Git 서버를 통해 관리하니 도구 사용하는 것도 익숙해지는 것이 중요하니 꼭 설치해서 사용합니다.
4. 소스트리(Source Tree) 설치
Git 사용을 쉽게 사용 할 수 있는 도구 입니다. 여러 장점이 있으니 꼭 설치해서 사용합니다.
※ 자신이 선호하는 별도 도구가 있다면 다은 도구 사용해도 상관 없지만 프로젝트 내부에서는 통일된 도구 사용을 권장합니다.
https://www.sourcetreeapp.com/
5. 프로젝트 생성
원도우에서 Command 창에서 할 수 있지만 저희는 PowerShell를 사용 합니다.
PowerShell 실행밥법
– 해당 폴더를 선택하고 Shift키를 누르고 오른쪽 마우스 클릭하여 “여기에 PowerShell 창 열기”를 선택합니다.
특정 문제를 해결하기 위해서는 관리자 권한으로 실행해야 하는 경우가 있으니 원도우 검색에 powershell를 입력하면 아래와 같이 Windows PowerShell 관리자로 실행을 선택 한다.
리액트 프로젝트 생성
React &TypeScript 프로젝트 폴더 생성 및 설치
npx create-react-app aboutw3 --template typescript
이미 생성된 상태에서는 아래와 같이 설치합니다.
npm install typescript @types/node @types/react @types/react-dom @types/jest yarn add typescript @types/node @types/react @types/react-dom @types/jest
Yarn 설치 한다.
npm install -g yarn
프로젝트 실행 전에 라이브러리 설치한다.
yarn install
오류 조치 방법
‘react-scripts’은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
– npm
npm install -save react-scripts
– yarn
yarn add react-scripts
전역으로 react-scripts 라이브러리 설치하기
– npm
npm install -g react-scripts
– yarn
yarn add global react-scripts
패키지 매니저 (yarn, npm) 업데이트
※ 프로젝트에서는 다른 채키지들과 버전이 다른 경우가 있으니 업데이트는 확인 후 실행하세요.
– npm
npm update npm start
– yarn
yarn upgrade yarn start
ERROR in [eslint] Failed to load config “react-app” to extend from.
npm install eslint-config-react-app yarn add eslint-config-react-app
오류
\yarn.ps1 파일을 로드할 수 없습니다. 오류.
조치 방법
C:\VIW\aboutw3> ExecutionPolicy Restricted 위와 같다면 세팅 변경 PS C:\Windows\system32> Set-ExecutionPolicy RemoteSigned 실행 규칙 변경 실행 정책은 신뢰하지 않는 스크립트로부터 사용자를 보호합니다. 실행 정책을 변경하면 about_Execution_Policies 도움말 항목(https://go.microsoft.com/fwlink/?LinkID=135170)에 설명된 보안 위험에 노출될 수 있습니다. 실행 정책을 변경하시겠습니까? [Y] 예(Y) [A] 모두 예(A) [N] 아니요(N) [L] 모두 아니요(L) [S] 일시 중단(S) [?] 도움말 (기본값은 "N"): y PS C:\Windows\system32>
https://nodejs.org/download/release/v14.17.0/ https://git-scm.com/ https://sourcetreeapp.com/ * npm 버전 확인 node -v * 패키지 버전 확인 npm show [패키지명] version * npm 버전 변경 npm install -g npm@6.14.13 *TypeScript 설치 npm install typescript @types/node @types/react @types/react-dom @types/jest yarn add typescript @types/node @types/react @types/react-dom @types/jest
[eslint] Failed to load config “react-app” to extend from.
eslint-config-react-app삭제후 eslint-config-react-app@6로 재설치
yarn remove eslint-config-react-app
yarn add eslint-config-react-app@6
패키지 없을 경우 설치
구글에서 아래와 같이 검색어 입력 후 조회
npm install react-router-dom typescript
npm i @types/react-router-dom npm i @types/lodash npm i @emotion/react npm i @emotion/styled npm i date-and-time npm i jsx-runtime
error No lockfile in this directory. Run `yarn install` to generate one.
yarn remove npm install -g yarn
Module not found: Error: Can’t resolve ‘react-router-dom’ 오류
npm i -s react-router-dom
Module ‘”react-router-dom”‘ has no exported member ‘Switch’
react-router-dom v6로 업데이트 되면서 변경된 부분 중에 하나가 Switch가 Routes 로 바뀌었습니다.
// 버전 5 <Switch> <Route ... /> </Switch> // 버전 6 <Routes> <Route ... /> </Routes>
<BrowserRouter>
<Switch>
<Route path='/' component={App05} />
<Route path='/app01' component={App01} />
<Route exact path='/app02' component={App02} />
</Switch>
</BrowserRouter>
<Routes>
<Route path='/' element={<App05 />} />
<Route path='/app01' element={<App01 />} />
<Route path='/app02' element={<App02 />} />
</Routes>
useRoutes() may be used only in the context of a <Router> component.
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import App01 from './QuickStart/App01';
import App02 from './QuickStart/App02';
import App05 from './QuickStart/App05';
function App() {
return (
<Router>
<Routes>
<Route path='/' element={<App05 />} />
<Route path='/app01' element={<App01 />} />
<Route path='/app02' element={<App02 />} />
</Routes>
</Router>
);
}
export default App;