170개의 챌린지와 6개의 프로젝트로 진행된다고 합니다. 해당 과정은 유튜브에서 풀 영상을 볼 수도 있지만, scrimba라는 사이트에서 단계 별로 나눠진 영상을 볼 수 있습니다.
Scrimba 사이트를 이용하면 사이트 내부에서 직접 코드를 작성해 보며 진행할 수 있습니다. 코드는 강사와 학생이 모두 편집 가능한데 이 기능을 이용해 코드를 다시 작성해 볼 수 있도록 과제를 줍니다. 따라서 유튜브보다는 scrimba에서 수업을 듣는 것을 추천합니다.
코드를 작성하면 작은 화면에 결과가 출력되는데 이를 확인하고 리뷰를 해주며 결과에 도달할 수 있도록 도움을 줍니다. 어떠한 테스트 과정을 거쳐서 확인하는 것 같습니다.
- static page
- data driven react
- react state
- side effects
- capstone project 1
- capstone proejct 2
static page
index.html 내부에 'root' id를 가진 div를 생성합니다. 그리고 'react-dom/client'의 createRoot()를 이용해 루트를 생성하고 render로 내부에 요소를 추가합니다.
// index.html
<html>
<head>
</head>
<body>
<div id='root'/>
<script src="/index.jsx" type="module"/>
</body>
</html>
// index.jsx
import ReactDOM from 'react-dom/client';
// import {createRoot} from 'react-dom/client'; // 바로 가져오는 것도 가능
// type assertion(타입 단언)을 사용하는 이유는 getElementById의 반환 타입이 HTMLElment | null이기 때문
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<h1>something</h1>);
labraries vs frameworks
why choose react?
과거에는 createElement를 통해서 react element를 만들었지만 지금에 와서는 jsx 문법으로 작성된 요소를 알아서 react element로 바꿔줍니다.
참고
'개발 > React.js' 카테고리의 다른 글
| [React.js] React state (1) | 2025.08.04 |
|---|---|
| [React.js] data-driven react last (1) | 2025.07.18 |
| [React.js] static page last (0) | 2025.07.03 |
| [React.js] static page part.2 (0) | 2025.07.02 |
| [React.js 학습] 무슨 영상을 참고해서 공부하면 좋을까? (2) | 2025.06.23 |