React 파일 구조

React 설치

npm install -g create-react-app

React typescript cli 설치

npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript

필요한 패키지 설치

Sass (node-sass)

1. "yarn eject" 명령 후 scripts, config 파일이 생성 된다.
2. webpac.config.js에서 command line 62번째줄 const "cssRegex = /.(css|scss)$/"로 수정
3. post-loader밑에 scss를 위한 새로운 loader를 추가

  {
        loader: require.resolve('sass-loader'),
        options: {
          sourceMap: true
        }
      }

4. yarn start로 다시 작동.

Router (react-router-dom, @types/react-router-dom)

1. root 파일 (경로 index.tsx) 파일에 BrowswerRouter, Route 설정.

BrowserRouter - history API를 사용해 URL과 UI를 동기화하는 라우터.

Route - 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링

import { BrowserRouter, Route } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
      <Route
        path="/"
        component={App}/>
    </BrowserRouter>
  document.getElementById('root')
);

classnames (classnames, @types/classnames)

Mobx (mobx, mobx-react)

root 파일에 (경로 index.tsx) 파일에 Provider 설정

import { Provider } from 'mobx-react';

const stores = new RootStore();

ReactDOM.render(
  <Provider {...stores}>
    <BrowserRouter>
      <Route
        path="/"
        component={App}/>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

axiox (axios)

query-string (query-string)

helmet (@types/react-helmet, react-helmet)

loadable (@loadable/component, @types/loadable__component)

cli 패키지 설정

// 운영
yarn add react-router-dom @types/react-router-dom classnames @types/classnames axios mobx mobx-react @loadable/component @types/loadable__component react-helmet @types/react-helmet
query-string 

// 개발 
yarn add [email protected] [email protected] --dev 

폴더 구조

기본 폴더 생성

mkdir components config images interfaces lib shared stores

// components
cd components mkdir common touch Header.scss Header.tsx Sidebar.scss Sidebar.tsx

// config
cd config mkdir 
touch

차 주

• router & lifecyle 설명
• axios & mobx
• 공통 컴포넌트, 모듈 생성
• Front 레포 생성 후 모듈별로 지라 티켓 생성 & 스크럼
• kiko : sass 를 webpack 설정없이 하기

• References
  React에 SCSS 적용 및 기본 사용 법 : https://medium.com/@jsh901220/react%EC%97%90-scss-%EC%A0%81%EC%9A%A9%EB%B0%8F-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95-1-c7bd2895f5a6