2022. 12. 21. 13:37ㆍREACT - MBTI 페이지 만들기
시작하기
1. IDE(VScode) 설치 / GIT repository 생성 / node.js 설치
2. npx create-react-app mbti 실행
3. git repository에 초기 설정 등록 (해당 절차대로 수행)
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin 주소
git push -u origin main
홈 화면 만들기
1. App.css는 사용하지 않을 것이므로 해당 파일 제거 및 App.js에 연결된 css import 및 return 안의 내용 제거
2. pages 폴더 생성하고 폴더 안에 페이지를 만들기 - Home.js / Question.js / Result.js
두 개 이상의 페이지를 만들 예정인데 App.js 하나에 모든 페이지를 담을 수는 없음
3. 각 페이지의 기본 설정을 마치기 (Home.js 화면의 예시, 나머지 두 개도 완료하기)
import React from "react";
const Home = () => {
return(
<>
홈화면입니다.
</>
)
}
export default Home;
4. App.js에 Home.js 연결
npm start 시에 "홈화면입니다."라는 문장이 출력
import Home from "./pages/Home";
function App() {
return (
<Home />
);
}
export default App;
5. Home 화면 구성하기 (Home.js)
- css-in-js 방식을 활용하기 위해 npm i styled-components 실행하고 import styled from "styled-components"; 사용해 import하기
- src 폴더의 하단에 assets 폴더 생성하여 페이지에 사용할 이미지 넣기
- import TitleImg from '주소' 사용하여 <img src={TitleImg} alt='대체 용어' />처럼 적용
import React from "react";
import styled from "styled-components";
import TitleImg from '../assets/musicalHome.jpg'
// 이미지를 삽입하는 방법
import Button from 'react-bootstrap/Button';
//버튼을 사용하므로 별도로 Button styled.div 정의할 필요가 없음
const Home = () => {
return(
<Wrapper>
<Header>뮤지컬 MBTI 테스트</Header>
<Contents>
<Title>나에게 맞는 뮤지컬은?</Title>
<LogoImage>
<img src={TitleImg} className="rounded-circle" alt='alone' width={350} />
</LogoImage>
<Desc>MBTI 기반으로 하는 나랑 잘 맞는 뮤지컬 찾기!</Desc>
<Button>테스트 시작하기</Button>
</Contents>
</Wrapper>
)
}
export default Home;
const Wrapper = styled.div`
height:100vh;
width:100%;
` // height:100vh;와 width:100%;로 전체 영역 지정
const Header = styled.div`
font-size:40pt;
display:flex;
justify-content:center;
align-items:center;
`
const Contents = styled.div`
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
` //flex-direction은 Contents 안의 요소를 세로로 정렬하게 해줌
const Title = styled.div`
font-size:30pt;
margin-top:40px;
`
const LogoImage = styled.div`
margin-top:10px;
`
const Desc = styled.div`
font-size:20pt;
margin-top:20px;
`
(+) Bootstrap 설치와 적용
https://react-bootstrap.github.io/getting-started/introduction
터미널에 입력
npm install react-bootstrap bootstrappublic 안 index.html에 입력 (<head> 내부의 제일 위에)
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
<script>var Alert = ReactBootstrap.Alert;</script>indx.js에 import
import 'bootstrap/dist/css/bootstrap.min.css';적용: home.js 이미지의 속성에 className="rounded-circle" 입력
여기서 부트스트랩이란?
웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다. 하나의 코드로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하게 만들 수 있으며, 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.
'REACT - MBTI 페이지 만들기' 카테고리의 다른 글
| 결과 로직 완성하기 (feat. map과 reduce, 변수 넘겨주기) (0) | 2022.12.25 |
|---|---|
| 결과 페이지 만들기 (0) | 2022.12.23 |
| 테스트 로직 완성하기 (feat. map 함수로 코드 간결화) (0) | 2022.12.23 |
| 질문 페이지 만들기 (0) | 2022.12.23 |
| 페이지 라우팅 하기 (feat. 폰트 적용) (0) | 2022.12.21 |