프로젝트 시작에 앞서 가장 중요한 게 무엇일까?
실력? 간식력? 체력? 다 아니다! 바로바로 초기세팅!이 젤 중요한 것!
오늘은 리액트 프로젝트 초기 세팅 때 해야할 것들에 대해 적어보았다!
경로설정 하기
프로젝트 루트 폴더에 jsconfig.json이라는 파일을 만들어주고,
그 안에 값을 넣어준 후 저장~~ 어떤 값 ?
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}이렇게 경로설정을 하지 않았을 경우 쩜쩜쩜 파티가 열리게 되는데!
ex) import Home from "../../Components/Home"
위와 같이 경로설정을 해줄 경우 모든 경로가 src부터 시작하는게 기본값이라 더이상 쩜쩜을 남발하지 않아도 된다.
Router 설치하기
Route는 말 그대로 경로를 말한다! 이를 통해 원하는 페이지로 자유롭게 이동 가능쓰~
npm install --save react-router-dom명령어 입력index.js와 같은 디렉토리에Routes.js파일 만들기Routes.js파일 세팅하기index.js파일 내에 render함수 대상을로 바꿔주기
// 이거는 Routes.js
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./Pages/Home";
import Login from "./Pages/Login";
class Routes extends React.Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/login" component={Login} />
</Switch>
</Router>
);
}
}
export default Routes;일단 예시로 Home Component만 넣어보았다.
우리는 라우터를 통해 자유롭게 이동 가능쓰~~
url 뒤에 / 붙여서 이동할 수 있는 기능도 있지만! 페이지에서 페이지끼리의 이동도 가능쓰
import { Link } from "react-router-dom";
먼저 링크라는 Component를 라우터 돔을 통해 받아오고..
<Link to=Home">
아이콘 태그 위에 Link to 태그와 이동할 컴포넌트를 입혀주면 완성~
인줄 알았죠????? 이 모든건 index.js에 Routes 태그를 추가해야 가능한 일…
// 이건 index.js 파일
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"));CSS tool 고르기~
SASS 설치하기
npm install --save node-sass 명령어로 설치 후, css파일형식을 .scss로 바꾸기
ESLint와 Prettier 연동하기
이건 지난번에 한번 포스팅해서 링크만 남길게용 https://gollumnima.github.io/posts/wecode3_5TIL_eslint
styles 디렉토리 만들기
- styles 디렉토리 안에 reset.scss와 media.scss를 추가해주세용
- media.scss는 반응형 웹페이지를 만들기 위해서 필요한건데 breakpoint를 두 개정도 설정해서 넣어놓고 팀원들과 공유하기!
- reset.scss 파일을 추가해주면 웹페이지별로 다르게 설정되어있는 기본 css 설정값들을 다 취소시켜서 좀 더 깔끔쓰~ 아래의 코드를 긁어서 복붙하세유~~~
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;
}