리액트로 만든 첫번째 기본 프로젝트 코드를 살펴보자
index.html
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="root"></div>
<script src="index.pack.js"></script>
</body>
</html>
구글폰트 head 사이에 넣어준거 보이고
당연히 css랑 연결해줘야 하니까
<link rel="stylesheet" href="style.css" /> 이거 넣어준거고
바디에는 root라고 저렇게 되어있는데
저게 우리가 js파일에 쓰는게 들어가는 공간이다ㅎ
<script src="index.pack.js"></script>이건 js파일이랑 연결해주는걸로보인다...
component 폴더에 Navbar과 Main으로 나눠져 있는데
Navbar.js 부터 살펴보면
import React from "react";
import Logo from "./logo.png";
export default function Navbar() {
return (
<nav className="Navbar">
<img src={Logo} alt="logo" />
<h4 className="nav--title">React Course - Project 1</h4>
</nav>
);
}
당연히 react import 해줘야 하고
아 저기 저 로고 넣는건 내가 문서 검색해서 찾은건데
일단 저 png파일이 component똑같은 폴더에 들어가 있는 상황이고
저렇게 import를 해준다음에
<img src={Logo} alt="logo" />이렇게 적어주어야 이미지가 적용이 되었다.
그냥 img src이렇게 했더니 로고가 안떴었음...
다음으로 Main 컴포넌트 살펴보기
Main.js
import React from "react";
export default function Main() {
return (
<div className="main">
<h1 className="main--title">Fun facts about React</h1>;
<ul className="main--text">
<li>Was first released in 2013</li>
<li>Was originally created by Jordan Walke</li>
<li>Has well over 100K stars on GitHub</li>
<li>Is maintained by Facebook</li>
<li>Powers thousands of enterprise apps, including mobile apps</li>
</ul>
</div>
);
}
이 아이는 따로 설명할게 없고 암튼 이 아이들을 보면
component들을 export default로 export해준게 보인다.
App.js를 살펴보면
import React from "react";
import Main from "./components/Main.js";
import Navbar from "./components/Navbar.js";
export default function App() {
return (
<div className="container">
<Navbar />
<Main />
</div>
);
}이렇게 얘내들을 import해준걸 볼 수 있다.
이렇게 App.js에 모인애들을 이제
index.js에 이렇게 rendering 해주면 된다.
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));물론 import해주는건 잊지 말고!
style.css 살펴보면
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Inter", sans-serif;
}
.Navbar {
display: flex;
align-items: center;
background-color: #21222a;
width: 550px;
height: 90px;
padding: 30px 26px;
justify-content: space-between;
}
.nav--title {
color: #deebf8;
font-size: 16px;
font-weight: 600;
}
.main {
background-color: #282d35;
width: 550px;
height: 459px;
color: #ffffff;
}
.main--title {
margin: 0;
font-weight: 700;
font-size: 39px;
line-height: 47px;
letter-spacing: -0.05em;
padding: 57px 99px 0px 27px;
}
.main--text {
font-weight: 400;
font-size: 16px;
line-height: 19px;
max-width: 450px;
}
.main--text > li {
margin: 20.36px;
}
.main--text > li::marker {
font-size: 1.4rem;
color: #61dafb;
}
흠 일단 튜터님이 쓴 코드 그대로 따라한게 아니라
내가 검색하면서 만든 CSS는 이렇다.. 결과는 똑같게 나옴..
참고로 저기 marker pseduo class는 처음배운건데
저걸써주면 리스트 애들만 딱 잡아줘서 변경해준다고 함.
MDN링크 들어가보자
그 다음 첼린지로 로고를 배경화면에 넣는게 있었는데
나는 구글로 검색해서 이렇게했다.
Main.js에
import React from "react";
import Group from "./Group.png";
export default function Main() {
return (
<div
className="main"
style={{
backgroundImage: `url(${Group})`,
}}
>
<h1 className="main--title">Fun facts about React</h1>
<ul className="main--text">
<li>Was first released in 2013</li>
<li>Was originally created by Jordan Walke</li>
<li>Has well over 100K stars on GitHub</li>
<li>Is maintained by Facebook</li>
<li>Powers thousands of enterprise apps, including mobile apps</li>
</ul>
</div>
);
}
이미지 import해서 넣어주는거랑 같은 방식으로 했는데
나머지는 css로 이렇게 했다.
.main {
background-color: #282d35;
width: 550px;
height: 459px;
color: #ffffff;
background-size: auto;
background-repeat: no-repeat;
background-position: right center;
}background 여러 이미지들이 나오지 않게 no-repeat으로 했고
position도 저렇게 정해줌...
그리고나서 완성 ~~~
