[Lunch Box] 리액트 프로젝트가 생성되면 index.html, index.js, App.js가 생성된다. 각각을 다음과 같이 작성하였다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Lunch Box</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
기본 페이지다. index.html에서 main.js를 불러오는 이유는 webpack이 작성한 모든 js파일을 main.js라는 파일로 빌드하도록 설정했기 때문이다.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './css/button.css';
import './css/textField.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
index.js에서는 index.html의 root라는 id를 지닌 div에서 App을 rendering하도록 설정하였다.
App.js
import React from 'react';
import { HashRouter as Router} from 'react-router-dom';
/**
* 모듈을 import 할때 {} 없이 import A로 불러온다면 해당 모듈에서 export default A로 export 했기 때문이고
* {}안에 import {A}로 불러온다면 해당 모듈에서 export {A}로 export 했기 때문임.
*/
import Main from './component/main/Main';
class App extends React.Component{
render(){
return (
<Router>
<Main/>
</Router>
);
}
}
export default App;
App.js에서는 HashRouter 모듈 안에 Main 모듈을 넣어 렌더링한다. Router는 HashRouter를 사용하였다.
index.css
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
html{
font-family: 'Noto Sans KR' !important;
height: 100%;
width: 100%;
margin: 0px;
font-size: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
#root{
height: 100%;
width: 100%;
margin: 0px;
}
p{
margin:0px;
}
a{
text-decoration: none;
color: inherit;
}
img{
vertical-align: bottom;
}
@media (max-width: 960px) {
html { font-size: 80%; }
} index.css에서는 대표적인 태그의 css를 설정한다. 또한 화면에 따라 크기가 변하도록 @media를 이용하였다. 간단하게 960px만 기준으로 설정하였다.
'개인 개발 프로젝트 > Lunch Box 앱' 카테고리의 다른 글
| [Lunch Box] 6. 상단탭과 라우팅 설정 (0) | 2019.10.05 |
|---|---|
| [Lunch Box] 5. css 파일 (0) | 2019.10.04 |
| [Lunch Box] 3. Firebase 배포 설정 (0) | 2019.10.03 |
| [Lunch Box] 2. 프로젝트 및 Webpack 설정 (0) | 2019.10.03 |
| [Lunch Box] 1. 프로젝트 소개 (1) | 2019.10.03 |