프로토타입을 만드는 과정에서 리액트 프로젝트 생성 과정을 한 번 정리하면 좋을 것 같아 쭉 정리해 본다.

작업시 사용되는 사내 스택도 같이 정리할 예정이기 때문에 주의해서 보길 바란다.

1. npm install -g create-react-app

npm install -g 옵션을 통한 전역적 설치, 공통 폴더에 설치된다.

이미 설치 했다면, 프로젝트 설치시마다 반복할 필요는 없다.

2. 생성한 프로젝트 경로 접근

cd 경로

3. create-react-app 프로젝트 명

프로젝트 명에는 대문자가 들어갈 수 없다.

새 프로젝트 폴더를 생성하지 않고, 현재 폴더에 설치하고 싶다면 . 으로 처리하면 된다.

이렇게 하면 기본 프로젝트 생성 끝 !

--

추가 스택

• Semantic UI, 시멘틱 UI

$  yarn add semantic-ui-react semantic-ui-css

 Or NPM
 
$  npm install semantic-ui-react semantic-ui-css

• Redux, 리덕스

$ yarn add redux

• Redux-thunk, 리덕스-덩크

$yarn add redux-thunk

• Router, 라우터

yarn add react-router-dom

index.js

import App from "./App";
import { BrowserRouter } from "react-router-dom";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

app.js

import { Route } from "react-router";

• GlobalStyle, 전역 스타일

• Styled Component, 스타일드 컴포넌트

$ yarn add styled-components

app.js

import styled from 'styled-components';

• styled-reset

yarn add styled-reset

• redux-devtools-extension

yarn add redux-devtools-extension

오류 발생 시

react-scripts 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다

yarn upgrade
yarn start

같은 오류 발생시 아래 코드로 실행

yarn add global react-scripts
npm install -g react-scripts 

추가로 사용되는 것들이 있다면 계속해서 추가할 예정이다.