이 문서는 유튜버 코딩견 히치님의 웹사이트 강의를 하나하나 따라하며 남기는 노트이다.
웹사이트를 빨리 배워야 하는 내가 선택한 강의이다. 일단 끝까지 들어보고 평을 남겨보도록 하겠다.
www.youtube.com/watch?v=K3mC87CZeQU
플레이그라운드는 마련되었으니, 다채롭게 창의력을 발휘하여 캔버스와 물감을 제공한다는 느낌.
E01에서 환경설정을 했고, 깃허브에 공유했고, semantic UI를 이용해 간단하게 UI를 구성해 보았음.
그렇게 했을때 기본적으로 설치되는 파일들이 아래와 같음.
퍼블릭과 소스(src) 폴더
퍼블릭 : index.html 웹에서 가장 첫페이지인 index.html
소스 : App.js 1편에서 우리가 수정해주었던 파일
index.html을 보면
바디에 <div id = 'root'> 가 있음.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>나의 영어 이름은..</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
index.js에 가보면, root 를 정의함. index.html에서 div id='root' 이었던거
App을 불러와서 App을 실행 해줌.
App이 어딨지?
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'semantic-ui-css/semantic.min.css'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
App.js 에 있음.
App이라는 function을 정의했고, export default App; 앱을 내 보내 주었음.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import {Button, Progress} from 'semantic-ui-react'
import { Icon } from 'semantic-ui-react'
import { Segment, Input } from 'semantic-ui-react'
function App() {
return (
<div><h1>Hello World</h1></div>
);
}
export default App;다시 정리하면
index.html은 div id = root 만 불러왔고
app.js 에서 실제 화면 구성을 하였고
index.js에서 app.js를 불러오고 root를 정의해 주었다.
이렇게
App.js
index.js
index.html
객체로 구분이 되어 유기적으로 구성되어 있음을 알 수 있음.
이해 완료. 3강으로 넘어가자.
다음강의 보기
2021.03.25 - [언어/파이썬 초보의 웹사이트 도전 일지] - 따라하며 만드는 웹사이트 E02-2 : Class 컴포넌트, 이벤트
따라하며 만드는 웹사이트 E02-2 : Class 컴포넌트, 이벤트
이 문서는 유튜버 코딩견 히치님의 웹사이트 강의를 하나하나 따라하며 남기는 노트이다. 웹사이트를 빨리 배워야 하는 내가 선택한 강의이다. 일단 끝까지 들어보고 평을 남겨보도록 하겠다.
lapina.tistory.com
'개발 이야기 > 웹 개발 배우기' 카테고리의 다른 글
| 따라하며 만드는 웹사이트 E03-1 : margin, 구분선, 좋아요 버튼 (0) | 2021.03.26 |
|---|---|
| 따라하며 만드는 웹사이트 E02-3 : 이미지, 댓글창 껍데기 (0) | 2021.03.25 |
| 따라하며 만드는 웹사이트 E02-2 : Class 컴포넌트, 이벤트 (0) | 2021.03.25 |
| 따라하며 만드는 웹사이트 E01 : 환경설정 (0) | 2021.03.25 |
| 파이썬으로 복잡한 웹페이지도 간단하게 만들 수 있다고 하던데..(feat. django) (0) | 2021.02.03 |
댓글