[Project02] #42. Neck-Tidal CRA

ceres·2020년 3월 9일
0

TIL

목록 보기
14/34

(20/3/9) 다시쓰는 react 초기설정
참고: [TIL #28. 프로젝트1 초기설정]
(https://velog.io/@ceres/TLI-28.-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B81-%EC%B4%88%EA%B8%B0%EC%84%A4%EC%A0%95), [두리님블로그] (https://gollumnima.github.io/posts/wecode5_1TIL_project_initialSettings)

1. CRA

터미널로 들어가 폴더를 만들고 싶은 경로로 들어간 후
npx create-react-app 만들 폴더 이름

2. 폴더구조 정리

  • 필요없는 파일 삭제 : index.css / app.js / app.css 등
  • src: pages/ component/ styles/ fonts/ imges 등 폴더 만들어주기

3. 절대경로 설정

root경로에 jsconfig.json 파일을 만들고 아래 코드를 넣어주면 된다.
(root는 최상위를 말한다.)

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

4. Router 설치

  1. npm install --save react-router-dom 명령어 입력
  2. index.js와 같은 디렉토리에 Routes.js파일 만들기
  3. Router.js 파일 세팅
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from 'pages/Home'
import Main from 'pages/Main'
import Playlist from 'pages/Playlist'

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Main} />
          <Route exact path="/home" component={Home} />
          <Route exact path="/playlist" component={Playlist} />
        </Switch>
      </Router>
    );
  }
}

export default Routes;
  1. index.js파일 세팅
    (render함수 대상을 Routes로 바꿔주기)
import React from "react";
import ReactDOM from "react-dom";
import ".styles/index.scss";
import ".styles/reset.scss";
import Routes from "./Routes";

ReactDOM.render(<Routes />, document.getElementById("root"));

5. Redux 설치

npx install --save redux react-redux

6. Css tool 결정

1) Scss

(scss, styled component 는 둘 중 하나만 설치)
npm install --save node-sass
설치 후 css파일형식을 .scss로 바꾸기

1-1) styles 디렉토리 만들기

styles디렉터리에 reset.scss 파일을 추가
코드 넣기

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
 font-weight: normal;
 letter-spacing: 1px;
}
​ * {
 box-sizing: border-box;
 text-decoration: none;
 list-style: none;
 color: inherit;
}
​ *:focus {
 outline: none;
 border: none;
}
​ body {
 line-height: 1;
}
​ article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
 display: block;
}
​ nav ul {
 list-style: none;
}
​ blockquote,
q {
 quotes: none;
}
​ blockquote:before,
blockquote:after,
q:before,
q:after {
 content: "";
 content: none;
}
​ a {
 margin: 0;
 padding: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}
​
/* change colours to suit your needs */
ins {
 background-color: #ff9;
 color: #000;
 text-decoration: none;
}
​
/* change colours to suit your needs */
mark {
 background-color: #ff9;
 color: #000;
 font-style: italic;
 font-weight: bold;
}
​ del {
 text-decoration: line-through;
}
​ abbr[title],
dfn[title] {
 border-bottom: 1px dotted;
 cursor: help;
}
​ table {
 border-collapse: collapse;
 border-spacing: 0;
}
​
/* change border colour to suit your needs */
hr {
 display: block;
 height: 1px;
 border: 0;
 border-top: 1px solid #cccccc;
 margin: 1em 0;
 padding: 0;
}
​ input,
select {
 vertical-align: middle;
}
​ textarea {
 resize: none;
}

3) styled component

설치방법 찾아보기

4. ESLint/ Prettier

두리님블로그

5. git 업로드

git init : git 초기화
git remote add origin 주소 : 저장소 추가하기
ex) git remote add origin https://github.com/wecode-bootcamp-korea/BR-Sariwon-frontend.git
git remote : 현재 프로젝트에 등록된 리모트 저장소를 확인.
git remote-v : 현재 프로젝트에 등록된 리모트 저장소를 확인.
tip: 처음 push는 master branch 에 해야한다.

6. git clone, npm install

다른 사람이 만든 코드를 가지고 오는 경우에는 클론을 받아야한다.
git clone 주소: git clone
npm install : 설치하기
git branch feature/이름 : 설치후 브랜치 생성해서 작업하기

* 초기세팅은 아니지만 기억해야할 것

라이브러리 추가할 때 나만 인스톨 하면 다른 사람들은 에러가 난다.
npm install 라이브러리이름 --save
--save 꼭 넣어야한다!
그래야 package.json에 추가되고 다른 사람이 npm install해서 라이브러리 설치할 수 있다.

0개의 댓글