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
