React(리액트) 개발 환경 구축

개발환경 셋팅

1. 아래의 Nodejs 사이트에 접속하여 LTS라고 써있는 버전을 다운받아 설치합니다.

https://nodejs.org/ko/

– 설치 경로는 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 서버를 통해 관리하니 도구 사용하는 것도 익숙해지는 것이 중요하니 꼭 설치해서 사용합니다.

https://git-scm.com/

 

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

 

오류 조치 방법

'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;