1. myapp 이라는 이름으로 기본 앱 생성
create-react-app myapp
2. 디렉토리 기본 구성
: src 폴더 아래 components 와 res 를 만들고 res 아래 css 를 만든다.
(각 컴포넌트들은 components 에, css는 /res/css 에 위치시킬 예정)
3. 페이지 수정
1) src/index.js 수정
import React from 'react';
import ReactDOM from 'react-dom';
import './res/css/style.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
2) src/App.js 수정 (메인페이지 컴포넌트 구성)
import React, { useEffect } from 'react'
import Header from './components/Header';
import Body from './components/Body';
import Footer from './components/Footer';
function App() {
useEffect(() => {
}, []);
return (
<>
<Header></Header>
<Body></Body>
<Footer></Footer>
</>
);
}
export default App;
3) src/components/Header.js 생성
import React, { useEffect } from 'react'
function Header(props) {
useEffect(() => {
}, []);
return (
<>
<div className="header">header</div>
</>
)
}
export default Header;
4) src/components/Body.js 생성
import React, { useEffect } from 'react'
function Body(props) {
useEffect(() => {
}, []);
return (
<>
<div className="body">body</div>
</>
)
}
export default Body;
5) src/components/Footer.js 생성
import React, { useEffect } from 'react'
function Footer(props) {
useEffect(() => {
}, []);
return (
<>
<div className="footer">footer</div>
</>
)
}
export default Footer;
6) src/res/css/style.css 생성
body {
margin:0;
}
.header {
position:fixed;
top: 0;
left: 0;
width:100%;
height: 50px;
background-color: lightyellow;
overflow:hidden;
}
.body {
position:absolute;
top:50px;
left: 0;
bottom: 50px;
width:100%;
height:auto;
overflow:auto;
}
.footer {
position:fixed;
left: 0;
bottom: 0;
width:100%;
height: 50px;
background-color: lightgreen;
overflow:hidden;
}
7) 크롬 브라우저로 접속하여 개발자도구를 열고 모바일 화면을 확인한다.
'Programming > React' 카테고리의 다른 글
| cra 로 생성한 프로젝트에 빌드시 콘솔로그 코드 모두 제거하기 (eject 사용안함) (0) | 2025.02.26 |
|---|---|
| react build (빌드) 시 .js.map 파일 생성 안되도록 처리 (0) | 2020.01.28 |
| React spa 개발환경 설정 (윈도우환경) (0) | 2019.12.19 |
