1.Trello

Scrum 방식(SW 개발 방법론) 정리하기
Trello 만들기 > 멘토 초대하기

2.프로젝트 초기 세팅

1)CRA(Create-React-App)

터미널을 켜고
npx create-react-app my-app 이미 npm install -g로 react-create-app을 설치했다면 create-react-app my-app(디렉토리 명) 만 입력.

2)폴더 구조 정리

Public

Src

• Page

  Main
  Create * Create.js/ Create. scss 로 구성

• Images
• Styles - 공통으로 사용
• Component - 공통으로 사용

3)필요한 라이브러리 설치

3-1) Router

가장 초기 세팅되는 Library 로 Router를 통하여 모든 Component 들이 이동 할 수 있다. 일종의 환승 센터라 생각됨. 우선 터미널을 켜고 Router 설치를 희망하는 React프로젝트의 디렉토리로 이동한다.
cd+[디렉토리 명]

(1) npm install react-router-dom --save

설치한 React 프로젝트 디렉토리를 열어 package.json 파일에 "dependencies" 중 "react-router-dom" 이 있는지 확인

없으면

$ yarn add react-router-dom
$ yarn add cross-env --dev

(2)react-router-dom: 브라우저에서 사용되는 리액트 라우터 입니다.
(3) cross-env: 프로젝트에서 NODE_PATH 를 사용하여 절대경로로 파일을 불러오기 위하여 환경 변수를 설정 할 때 운영체제마다 방식이 다르므로 공통적인 방법으로 설정 할 수 있게 해주는 라이브러리입니다.

src 폴더의 index.js 파일에 Routes.js파일을 생성한 후 Routes컴포넌트를 만들어 연결

index.js

import React from "react";
import ReactDOM from "react-dom";
import Routes from "./Routes"; //-> Routes 컴포넌트 연결
ReactDOM.render(<Routes />, document.getElementById("root"));

*ReactDoM.render?

커퍼넌트를 페이지에 렌더링 하는 역할을 하며, react-dom 모듈을 불러와 사용 할 수 있다. 이 함수의 첫번째 파라미터에는 페이지에 렌더링 할 내용을 JSX형태로 작성하고, 두번째 파라미터에는 해당 JSX를 렌더링 할 document 내부요소를 설정한다.
여기서는 id 가 root인 요소 안에 렌더링을 하도록 설정했는데 이 요소는 <public/index.html> 파일을 열어보면 존재한다

Routes.js 에 각각의 페이지로 이동할 url주소를 입력해주고 페이지에 해당하는 컴포넌트들을 연결

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Main from "./Pages/Main/";
import Login from "./Pages/Login/";

export default class Routes extends React.Component {
  render() {
    return (
        <Router>
        <Switch>
          <Route exact path="/" component={Main} />
            //=> Main컴포넌트와 연결
          <Route exact path="/login" component={Login} />
            //=> Login컴포넌트와 연결
        </Switch>
      </Router>
    );
  }
}

3-2) SCSS

터미널을 켜고 Sass 설치를 희망하는 React프로젝트의 디렉토리로 이동한다.

• npm install node-sass --save

설치한 React 프로젝트 디렉토리를 열어 package.json 파일에 "dependencies" 중 "node-sass" 이 있는지 확인

3-3) ESLint/ Prettier

ESLint

여러 사람들이 같이 개발 할때는 도량형 스타일 적용이 필요하다. 바로 그 역할을 대신 해주는 것이 ESLint이다

Prettier

Prettier는 파일 저장 시점이나 Git 에 커밋할 때 코드를 자동으로 포맷팅 해줌으로써 일관된 코딩 형태를 유지하도록 해준다.
또한 Prettier를 사용하여 ESLint 는 코딩 컨벤션을 처리하도록 하고 포맷팅 기능은 Prettier 가 담당하도록 구성한다.

Combine ESLint and Prettier

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

.eslintrc.json 파일생성하여 다음과 같이 변경

{
  "extends": ["react-app", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  }
}

[velog] : https://velog.io/@gwangsuda/2019-09-25-1009-%EC%9E%91%EC%84%B1%EB%90%A8-bwk0ylejxj

[velog] : https://velog.io/@jungsw586/React-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-1