1. 여러가지 패키지들을 설치한다.
yarn add styled-components
yarn add firebase
yarn add fuse.js
yarn add normalize.css대표적인 CSS-in-JS 라이브러리
https://styled-components.com/
구글 Firebase
https://firebase.google.com/?hl=ko
클라이언트 측에서 사용되는 가볍고 강력한 텍스트 검색 라이브러리
https://fusejs.io/getting-started/installation.html
웹 페이지의 스타일을 표준화시키는 CSS 리셋 스타일시트
https://github.com/necolas/normalize.css
2. 기본 튜토리얼 시작 코드
src/app.js
export default function App() { return ( <p>hello</p> ); }
src/index.js
import React from 'react'; // import ReactDOM from 'react-dom/client'; import { render } from 'react-dom'; import App from './app'; // ReactDOM.render(<App />, document.getElementById('root')); render(<App />, document.getElementById('root'));
src/index.js(리액트 18버전)
import React from 'react'; import App from './app'; import { createRoot } from 'react-dom/client'; const rootElement = document.getElementById('root'); createRoot(rootElement).render(<App />);
public/index.html
<!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" /> <title>Netflix</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>
3. hello 출력해보기
yarn start
여기까지 튜토리얼 영상 23분25초 내용
devops