email ํ์ค ์ ๊ท์id ๋ js ํน์ ๋์ ํ ๋๋ง ์ฌ์ฉ.import CheckActive from โimages/check_active.svgโ;svg ํ์ผ์ index.jsx ์ ๋ฃ๊ณ export ํด์ ์ฌ์ฉํ๊ธฐcx (classnames)react-use์ด๋ฒคํธ ๋ง๊ธฐ
์ฝ๋ฉ ์ปจ๋ฒค์ ์ ์๋ฐฐ๋๋ ์ฝ๋๋ ์ํฐ ํจํด์ ์๋ ๊ฒ์ถํ๋ ๋๊ตฌ.vscode extension installvscode settings ์ต์ ์ค์ settings ์์ eslint, stylelint ๊ฒ์ํด์์ฌ์ฉํ๊ณ ์ ํ๋ validate ์ค์ ํด์ฃผ๊ธฐ!ํ๋ก์ ํธ์ eslint
๋๋ผ์ด๊ฑด ๋์ณ๋๋ค.๋ชจ๋ฌ์ ๊ตฌํํ๊ธฐ ์ํด ๊ฐ์ฌ๋๊ป ์ถ์ฒ๋ฐ์ React Portal์ ์์๋ณด์.https://ko.reactjs.org/docs/portals.html๊ณต์ ๋ฌธ์ ์ฝ์ด์ฃผ๊ณ !portal์ DOM ํธ๋ฆฌ์ ์ด๋์๋ ์กด์ฌํ ์ ์๊ณ ์ผ๋ฐ์ ์ธ React ์์
๋ก๋ฉ์ ์ฉ๋์ด ํฐ ์ด๋ฏธ์ง๋ ์์ฒญ๋๊ฒ ๋ก๋ฉ ์๋๋ฅผ ์ ํ ์ํจ๋ค.์ด์ฐจํผ ํ๋ฉด ๊ฝ์ฐจ๊ฒ ๋์ฐ๋ ์ด๋ฏธ์ง๊ฐ ์๋๋ผ๋ฉด ํฌ๊ธฐ์ ๋ง๋ ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ํ๊ณ ํฌ๊ธฐ์ ๋ง๋ ํด์๋๋ก ์ต์ ํ์์ผ์ ์ ๋ก๋ํ๋ฉด ์พ์ ํ ๋ก๋ฉ์๋๋ฅผ ๋ง๋ค์ด์ค๋ค.https://squoosh.app/์ด๋ฏธ์ง์ ์ฌ์ฉ
npm ์ผ๋ก๋ง ์ฌ์ฉํด ์ค๋ค๊ฐ yarn ์ ์จ๋ณด์๊ณ ํ์ ์ ๋..์ ...brew install yarn์์ํ์๋ง์ ์ค๋ฅ..error https://registry.yarnpkg.com/grip_assn: Not found์ด๋ฌ์ง๋ง..์ง๊ธ ๋ถํฐ ์์.registry
๋ฆฐํธ ์ผ๊ณ !์ฝ์์ ๊ฒฝ๊ณ ์์ด150์ค์ ๋๊ธฐ์ง ์๋ ์ฝ๋ ์ง๊ธฐ๊ดํด ๋ฐฉ์ง๋ก ์ฐ๋กํ๋ง, ๋๋ฐ์ด์ค ๊ฑธ๊ธฐ (300ms ์ ๋)observer ์ฌ์ฉํ๋ฉด ๊ผญ ์ธ๋ง์ดํธ ํด๋ฆฐ ํด์ฃผ๊ธฐ์ญ์๋ ๊ดํด์ api ๋ฅผ ๋ถ๋ฌ์ค๊ณ state์ ์ ์ฅ๋๋ ๊ณผ์ ์ ๊ณ ๋ คํ์ฌ ์ฝ๋ ์ง๊ธฐkey ๊ฐ์ ๋ ธ์ถ๋์ง ์๋
API key ๊ฐ ๋ฑ ๋ณด์ ํน์ ๊ฒฐ์ ๋ฌธ์ ๋ก ์ค์ํ key ๊ฐ์ ์ ์ฅํ๊ณ ํ๊ฒฝ์ ์ผ๋ก ํ์ํ ๋ถ๋ถ์ ์ ์ฅํ๊ณ ์ฌ์ฉํ๊ธฐ ์ํด .env ๋ฅผ ํ์ฉํ๋ค..env ํ์ผ์ฌ์ฉ ํ์ผ์ฒ๋ผ ์ฌ์ฉํ๋ฉด ๋๋ค..env ๋ github ๋ฑ์ ์ฌ๋ฆฌ์ง ์๋๋ก .gitignore์ ์ค์ ํ๋ค.ํ์ง๋ง g
local, session storage ์ค local์ ํ์ฉํด ๋ณด์!local ์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋ซํ๋ฉด ์ด์์ง๋ session๊ณผ๋ ๋ค๋ฅด๊ฒ ๋ค์ ํด๋น ์ฃผ์๋ก ์ ์ํ๋ฉด ๊ธฐ๋ก์ ๊ฐ๊ณ ์๋ค.์ด๋ฅผ ํ์ฉํด์ ์ฅ๋ฐ๊ตฌ๋ ํน์ ๋ณด๊ด, ์ฆ๊ฒจ์ฐพ๊ธฐ ๊ธฐ๋ฅ์ ๊ตฌํํด ๋ณด์!!์ ์ฅํ๊ธฐ๋ฐฐ์ด ์ ์ฅ (์
React-query? > ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ธฐ์ ์ ์ธ ์ฉ์ด๋ก ๋งํ๋ฉด React ์ ํ๋ฆฌ์ผ์ด์ ์์ ์๋ฒ ์ํ ๊ฐ์ ธ์ค๊ธฐ_, ์บ์ฑ, _๋๊ธฐํ ๋ฐ ์ ๋ฐ์ดํธ ๋ฅผ ์ฝ๊ฒ ๋ง๋ญ๋๋ค. ์ฐธ์กฐ React-Query Docs how to use ์ฌ์ฉํ ์ปดํฌ๋ํธ ์๋จ์์ ์ค๋น
์ทจํฅ? ์ด๋ผ๊ธฐ์ ์ถฉ๊ฒฉ์ ์ธ ์ด์ผ๊ธฐ.react component ๋ ๋ ๋จ์ map ๊ณผ ์ผํญ ์ฐ์ฐ์๋ฅผ ์ฐ์ง ๋ง์๋ ๋ฉ์ง ์ ๋ฐฐ ๊ฐ๋ฐ์์ ์ฝ๋๋ฆฌ๋ทฐ๋ฅผ ๋ณด์๋ค.๋ฌผ๋ก ๋ค๋ฅธ ํ๋ฅญํ ๊ฐ๋ฐ์๋ค์ ๋์ ํ์ง ์์ ์ ์๋ค.๊ทธ๋๋"ํ๋ก ํธ์๋๋ ๊ฐ๋ ์ฑ์ด์ฃ .""์ฝ๋๋ฅผ ์์ ํ๊ธฐ์ ์ฉ์ดํ๊ฒ ์งฑ์ ๋๋ค
ํ๋ฉด์ Hello, world ํ์ํ๊ธฐhtml root๋ผ๋ ID๋ฅผ ๊ฐ๋ Element๋ฅผ react Dom ์ด ๋ ๋๋งํ root๋ก ๋ณ์ ์ ์ธ!๊ทธ๋ฆฌ๊ณ root์ render!html๋ฅผ js ๋ฌธ๋ฒ์ ํ์ฉํ์ฌ ์ ์ํ๊ณ render ํ๋ ๋ฌธ๋ฒjs ๋ก elements ๋ฅผ ์์ฑํ์
form, state, Composition vs Inheritance
WCAGWeb Content Accessibility Guidelines๋ ์ ๊ทผ์ฑ์ ๊ฐ์ถ ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๋ฐ ํ์ํ ์ง์นจ์ ์ ๊ณตํ๋ค.WAI-ARIAWeb Accessibility Initiative - Accessible Rich Internet Application
๋ฆฌ์คํธ์ Key
React Documents