๐ช Programming
[React] ๋
ธ๋์ ํธ๋ฆฌ ์์น๋ฅผ ๋ํ๋ด๋ useId ํ
[React] ๋ ธ๋์ ํธ๋ฆฌ ์์น๋ฅผ ๋ํ๋ด๋ useId ํ
2024.05.13useId ์๊ฐuseId()๋ React 18 ๋ฒ์ ์ ๋์
๋ ํ
์ผ๋ก, ๋
ธ๋์ ํธ๋ฆฌ ์์น๋ฅผ ๋ํ๋ด๋ ๊ณ ์ ID(Base32 ๋ฌธ์์ด)๋ฅผ ๋ฐํํ๋ค. ์ปดํฌ๋ํธ ํธ๋ฆฌ๊ฐ ์ฌ๋ฌ ์์(children)์ผ๋ก ๋ถ๊ธฐ๋ ๋๋ง๋ค ID์ ์ถ๊ฐ ๋นํธ๋ฅผ ์ฝ์
ํด์ ๊ฐ ์์์ ์์น๋ฅผ ๋ํ๋ธ๋ค.:r0: (๋ถ๋ชจ ์ปดํฌ๋ํธ):r1: (์์ ์ปดํฌ๋ํธ1):r2: (์์ ์ปดํฌ๋ํธ2)... ์ฃผ๋ก ์๋ฒ / ํด๋ผ์ด์ธํธ์์ ์์ฑํ ํธ๋ฆฌ(tree) ์ฌ์ด์ ํ์ด๋๋ ์ด์
(hydration) ๋ถ์ผ์น(mismatch)๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํด ์ฌ์ฉํ๋ค. ์ฆ, useId๊ฐ ์์ฑํ ๊ณ ์ ํ ID๋ฅผ ์ด์ฉํด ์ํํ ํ์ด๋๋ ์ด์
์ ๋๋ ๋ชฉ์ ์ธ ๊ฒ. ๋ฆฌ์คํธ์ key๋ฅผ ๋ง๋ค๊ธฐ ์ํ ๋ชฉ์ ์ด ์๋๋ฏ๋ก ์ฃผ์ํ๋ค. ์ถ๋ ฅ๊ฐ ์์๐ก : (์ฝ๋ก )์ querySelector ๊ฐ์ CSS ์
๋ ํฐ์์ ..
[TS] ์๋ฆฌ๋จผํธ์ ๊ธฐ๋ณธ ์ดํธ๋ฆฌ๋ทฐํธ ์ธํฐํ์ด์ค/ํ์
์ฌ์ฉํ๊ธฐ
[TS] ์๋ฆฌ๋จผํธ์ ๊ธฐ๋ณธ ์ดํธ๋ฆฌ๋ทฐํธ ์ธํฐํ์ด์ค/ํ์ ์ฌ์ฉํ๊ธฐ
2024.05.12HTMLAttributescheckbox ํ์
์ ์๋ฆฌ๋จผํธ๋ฅผ ์ฌ์ฉํ๋ Toggle ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ ๋ค๊ณ ๊ฐ์ ํด๋ณด์. ์๋ฆฌ๋จผํธ๋ autoFocus, required, readOnly ๋ฑ์ ๊ธฐ๋ณธ ์ดํธ๋ฆฌ๋ทฐํธ ๊ฐ์ง๋ค. ๋ง์ฝ ์๋ฆฌ๋จผํธ๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ฐ์ ์ ์๋ ์ดํธ๋ฆฌ๋ทฐํธ๋ฅผ Toggle ์ปดํฌ๋ํธ์ props๋ก ๋๊ธฐ๊ณ ์ถ๋ค๋ฉด? ๋ชจ๋ ์ดํธ๋ฆฌ๋ทฐํธ์ ๋ํ ์ธํฐํ์ด์ค๋ฅผ ์ ์ํด์ผ ํ ๊น? ์ด๋ InputHTMLAttributes ํ์
์ ์ฌ์ฉํ๋ฉด ๋๋ค. ๊ทธ๋ผ ๊ฐ ์ดํธ๋ฆฌ๋ทฐํธ์ prop ํ์
์ ์ผ์ผ์ด ์ ์ํ์ง ์์๋ ๋๋ค. ์ ๋ค๋ฆญ T๋ onChange ์ด๋ฒคํธ ํธ๋ค๋ฌ์ ์๋ฆฌ๋จผํธ ํ์
์ด ๋ค์ด๊ฐ๋ฏ๋ก HTMLInputElement ๊ฐ์ ํ์
์ ๋๊ธฐ๋ฉด ๋๋ค.// InputHTMLAttributes ๊ตฌ์กฐ | node_modules/@types/r..
[JS] ์ JSX ์์์ if ๋ฌธ์ ์ฌ์ฉํ ์ ์์๊น? ํํ์๊ณผ ๋ฌธ ์ฐจ์ด์
[JS] ์ JSX ์์์ if ๋ฌธ์ ์ฌ์ฉํ ์ ์์๊น? ํํ์๊ณผ ๋ฌธ ์ฐจ์ด์
2024.05.12TL;DR๏ฟญ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋จ์ ์ผ๋ จ์ ๋ฌธ(Statement)์ผ๋ก ๊ตฌ์ฑ๋๋ค๏ฟญ ๊ฐ ๋ฌธ์ ๋ณ์ ์์ฑ, if, else ์กฐ๊ฑด ์คํ, ๋ฃจํ ์์๊ณผ ๊ฐ์ ์์
์ ์ํํ๋ ๋ช
๋ น์ด๋ค๏ฟญ ํํ์์ ๊ฐ์ ์์ฑํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ค → ํํ์์ ํญ์ ๊ฐ์ ์์ฑํ๋ค๏ฟญ ๋ชจ๋ ํจ์์ ์ธ์๋ ํํ์์ด๋ค. ๋ฌธ์ ๊ฐ์ ์์ฑํ์ง ์์ผ๋ฏ๋ก ํจ์ ์ธ์์ ์ฌ์ฉํ ์ ์๋ค๏ฟญ ๋ฌธ์ ํ๋ก๊ทธ๋จ์ ํ๋๋ก ๋ฌถ๋ ๋จ๋จํ ๊ตฌ์กฐ์ด๋ฉฐ, ๋ฌธ์ ์ธ๋ถ์ฌํญ์ ํํ์์ผ๋ก ์ฑ์์ง๋ค๏ฟญ ํํ์์ ๋จ๋
์ผ๋ก ์กด์ฌํ ์ ์๊ณ , ํญ์ ๋ฌธ์ ์ผ๋ถ๋ค๏ฟญ ๋ฌธ์ ํํ์ ์ฌ๋กฏ์ ์ ์ธํ๊ณค ๋ณธ์ง์ ์ผ๋ก ๋น์ด์๋ค๏ฟญ ๋ฌธ์ด ๋น์ด ์์ ๋๋ ํํ์์ ํญ์ ๋ฌธ์ ์ผ๋ถ๋ค๏ฟญ JSX์ {} ์ค๊ดํธ๋ ํํ์ ์ฌ๋กฏ์ ๋ง๋ ๋ค๏ฟญ ํํ์ ์ฌ๋กฏ์์ ๊ฐ์ ์์ฑํ์ง ์๋ ๋ฌธ์ ์ฌ์ฉํ ์ ์๋ค ํํ์ | Expressi..
[TS] useQuery, useMutation์ ์ ๋ค๋ฆญ ํ์
์ดํด๋ณด๊ธฐ / Base Query ํ
๋ง๋ค๊ธฐ
[TS] useQuery, useMutation์ ์ ๋ค๋ฆญ ํ์ ์ดํด๋ณด๊ธฐ / Base Query ํ ๋ง๋ค๊ธฐ
2024.05.12React Query์์ ์ ๊ณตํ๋ useQuery, useMutation์ ๊ทธ๋๋ก ์ฌ์ฉํ๋ฉด ํญ์ ์ฟผ๋ฆฌํค์ ์ฟผ๋ฆฌ ํจ์๋ฅผ ์ง์ ํด์ผ ํ๋ ๋ฒ๊ฑฐ๋ก์์ด ์๋ค. API ์ ํ์ ๋ฐ๋ผ Base Query|Mutation ์ปค์คํ
ํ
์ ๋ง๋ค์ด ๋๊ณ ์ฌ์ฉํ๋ฉด ์ฟผ๋ฆฌํค์ ์ฟผ๋ฆฌ ํจ์๋ฅผ ์ผ์ผ์ด ์ง์ ํ์ง ์๊ณ ์ฌ๋ฌ ๊ณณ์์ ์ฌ์ฌ์ฉํ๊ธฐ ์ข๋ค. ํ์ง๋ง ์ปค์คํ
ํ
์ ๋ง๋ค ๋ ์ฟผ๋ฆฌ ํ์
์ ์ง์ ํ์ง ์์ผ๋ฉด ๋ฐ์ดํฐ๊ฐ unknown, any์ธ ๊ฒฝ์ฐ๊ฐ ๋ง์์ ์ด๋ค ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃจ๋์ง ์๊ธฐ ์ด๋ ต๋ค. ์ฟผ๋ฆฌ ํ์
์ ๋๋ถ๋ถ ์ ๋ค๋ฆญ์ผ๋ก ๋์ด ์๋๋ฐ ์ด๋ฅผ ์ ์ฌ์ฉํ๋ฉด ํ์
์ ๋ณด์ฅ ๋ฐ์ผ๋ฉด์ ๋ฐ์ดํฐ๋ฅผ ํธ๋ฆฌํ๊ฒ ๋ค๋ฃฐ ์ ์๋ค. useQuery์ ๋ค๋ฆญ ํ์
ํบ์๋ณด๊ธฐ โก๏ธexport declare function useQuery โถ TQueryFnData : ์ฟผ๋ฆฌ ํจ์ ..
[React] ๋ฆฌ์กํธ ์ฟผ๋ฆฌ(React Query) staleTime์ ์ค์ ํ๋ 3๊ฐ์ง ๋ฐฉ๋ฒ
[React] ๋ฆฌ์กํธ ์ฟผ๋ฆฌ(React Query) staleTime์ ์ค์ ํ๋ 3๊ฐ์ง ๋ฐฉ๋ฒ
2024.05.12React Query์์ staleTime์ ์ฟผ๋ฆฌ์ ๋ง๋ฃ ์๊ฐ์ ์ค์ ํ ๋ ์ฌ์ฉํ๋ค. staleTime์ด ์ง๋๋ฉด ์ฟผ๋ฆฌ์ ์บ์ ๋ฐ์ดํฐ๋ฅผ ์ค๋๋ ๋ฐ์ดํฐ๋ก ๊ฐ์ฃผํ๊ณ re-fetching์ ์๋ํ๋ค. React Query์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์บ์ ๋ฐ์ดํฐ ์์ฒด๋ฅผ stale ๋ฐ์ดํฐ๋ก ์ทจ๊ธํ๊ธฐ ๋๋ฌธ์ staleTime์ ๊ธฐ๋ณธ๊ฐ์ 0์ด๋ค. ํ์ง๋ง ๋ณ๊ฒฝ ์ฃผ๊ธฐ๊ฐ ๋๋ฆฐ ๋ฐ์ดํฐ๋ ์๋ฒ์ ๋น๋ฒํ๊ฒ ์์ฒญํ ํ์๊ฐ ์๊ธฐ ๋๋ฌธ์ staleTime์ ์ ์ ํ๊ฒ ์กฐ์ ํด์ฃผ๋ ์์
์ด ํ์ํ๋ค. ๐ก ์ค๋ณต ํธ์ถ์ ์ค์ด๊ธฐ ์ํ staleTime์ ์ต์ 20์ด ์ ๋๊ฐ ์ ๋นํ๋ค — via tkdodo 1. ๊ฐ๋ณ ์ฟผ๋ฆฌ ์ธ์คํด์ค์ staleTime ์ค์ // v4useQuery('users', getUsers, { staleTime: 1000 * 60 });..
[Git] ๋ณํฉ(Merge) ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํ ๋ฆฌ๋ฒ ์ด์ค Rebase
[Git] ๋ณํฉ(Merge) ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํ ๋ฆฌ๋ฒ ์ด์ค Rebase
2024.05.12merge ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํ ๋ฆฌ๋ฒ ์ด์ค(Rebase) โญ๏ธPR ๋ณด๋ด๊ธฐ ์ ๋ค๋ฅธ ์ฌ๋์ด ์๋ก์ด ์ปค๋ฐ์ ์ถ๊ฐํ ์ํ๋ผ๋ฉด ์ถฉ๋ ๋ฐฉ์ง๋ฅผ ์ํด ๋ก์ปฌ ๋ ํฌ์งํ ๋ฆฌ๋ฅผ ์ต์ ํํ๊ณ (upstream โ origin ๋ ํฌ์งํ ๋ฆฌ ๋๊ธฐํ), ํ์ฌ ์์
์ค์ธ ๊ธฐ๋ฅ/๋ฒ๊ทธ ๋ธ๋์น์ base๋ฅผ develop ๋ธ๋์น์ ๋ง์ง๋ง ์ปค๋ฐ์ผ๋ก ๋ณ๊ฒฝํ๋ ๋ฆฌ๋ฒ ์ด์ค(Rebase) ์์
์ด ํ์ํ๋ค — ์ฐธ๊ณ ๊ธ1 | ์ฐธ๊ณ ๊ธ2 โถ ํ์ฌ ์ํ# ํ์ฌ ์์น feature-branch 8๋ฒ ์ปค๋ฐ1 - 2 - 3 - 5 (devlop) \ 4 - 6 - 7 - 8 (feature-branch)develop ๋ธ๋์น์ 1~2 ์ปค๋ฐ : ๋ก์ปฌ ๋ ํฌ์งํ ๋ฆฌ์ develop ๋ธ๋์น ์ปค๋ฐdevelop ๋ธ๋์น์ 3~5 ์ปค๋ฐ : ์๊ฒฉ(upstream) ๋ ํฌ์งํ ๋ฆฌ์์ ์๋ก..
[React] svg ํ์ผ → ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ๋ณํํ๊ธฐ - React SVGR
[React] svg ํ์ผ → ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ๋ณํํ๊ธฐ - React SVGR
2024.05.12๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ์ค์นyarn add "@svgr/cli"yarn add -D "@svgr/webpack" CLI ๋ช
๋ น์ด๐ก ๊ฒฝ๋ก๋ง ์
๋ ฅํ๋ฉด svg path๋ฅผ ์ง์ ํ๋ ๊ฒ๊ณผ ๋์ผ. -- double dash๋ ์ปค๋งจ๋ ์ต์
์ด ๋๋๋ค๋๊ฑธ ์๋ฏธํ๋ฏ๋ก(์ฐธ๊ณ ๊ธ) -- ๋ค์ ๊ฒฝ๋ก๋ฅผ ์
๋ ฅํ๋ฉด svg path๊ฐ ์ง์ ๋จ(์ต์
์ด ์๋ค๋ฉด ๊ตณ์ด ์๋ถ์ฌ๋ ๋จ).# config ํ์ผ์ด ์์ ๋ # svgr -d svgr ./assets/icons/raw/bulb.svg -d ./assets/icons/dist# config ํ์ผ์ด ์์ ๋# svgr --config-file -d svgr --config-file ./svgr.config.js ./assets/icons/raw/bulb.svg -d ./assets/icons/dis..
[React] ๋ฆฌ์กํธ Context API ๋ ๋๋ง ์ต์ ํํ๊ธฐ
[React] ๋ฆฌ์กํธ Context API ๋ ๋๋ง ์ต์ ํํ๊ธฐ
2024.05.11TL;DR๋ฆฌ์กํธ์์ ์ ๊ณตํ๋ ContextAPI๋ฅผ ์ฌ์ฉํ๋ฉด ์ํ๋ ์ํ(๊ฐ)๋ฅผ ์ ์ญ์ ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค. ์ปดํฌ๋ํธ๋ผ๋ฆฌ ํน์ ์ํ๋ฅผ ๊ณต์ ํ ๋๋ ์ ์ฉํ๋ค. ํ์ง๋ง Context.Provider ํ์์์ ์ปจํ
์คํธ๋ฅผ ๊ตฌ๋
ํ๋ ๋ชจ๋ ์ปดํฌ๋ํธ๋ ๊ฐ์ ๋ณ๊ฒฝํ ๋๋ง๋ค ๋ฆฌ๋ ๋๋ง ๋๋ค. Context.Provider ๊ฐ์ด ์
๋ฐ์ดํธ๋๋ฉด useContext ํ
์ด ์ต์ ์ปจํ
์คํธ ๊ฐ์ ์ฌ์ฉํด ์ปดํฌ๋ํธ ๋ฆฌ๋ ๋๋ฅผ ํธ๋ฆฌ๊ฑฐํ๊ธฐ ๋๋ฌธ์ด๋ค. ์ด์ฒ๋ผ ContextAPI๋ ๋ ๋๋ง ์ต์ ํ์ ์ผ์ผ์ด ์ ๊ฒฝ์จ์ผํ๋ ๋จ์ ์ด ์๋ค. ์ฌ๋ฌ ์ต์ ํ ๋ฐฉ๋ฒ์ค์์ ์ํ/๋์คํจ์น ๋จ์๋ก ์ปจํ
์คํธ๋ฅผ ์ชผ๊ฐ๋ ๋ฐฉ์์ด ๊ฐ์ฅ ๊ฐ๋จํ๋ค. ๋์ Provider๊ฐ ๋๋ฌด ๋ง์์ง๋ ๋จ์ (Wrapper Hell)์ด ์๋ค. Context ์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ํด๋น Context.P..
[HTML/CSS] form ์ธ๋ถ์์ form ์ฐ๊ฒฐ / document ๊ฐ์ฒด๋ก form ์ ๊ทผํ๊ธฐ
[HTML/CSS] form ์ธ๋ถ์์ form ์ฐ๊ฒฐ / document ๊ฐ์ฒด๋ก form ์ ๊ทผํ๊ธฐ
2024.05.11form ์ธ๋ถ์์ form ๊ด๋ จ ์์ ์ฐ๊ฒฐform ๊ด๋ จ ์์(button, input ๋ฑ)์ form ์์ฑ์ผ๋ก ์ด๋ค form์ ์ํ ์ง(์ฐ๊ฒฐ) ์ง์ ํ ์ ์๋ค. ์ฃผ๋ก form ์ธ๋ถ์ ์๋ form ๊ด๋ จ ์์๋ฅผ form์ ์ฐ๊ฒฐํ ๋ ์ฌ์ฉํ๋ค. ์ด๋ form ์์์ id ๊ฐ๊ณผ form ๊ด๋ จ ์์์ form ์์ฑ ๊ฐ์ด ๋์ผํด์ผ ํ๊ณ , ๊ฐ์ ๋ฌธ์(document)์ ์์ด์ผ ๋๋ค. form ๋ด๋ถ์ ์๋ form ๊ด๋ จ ์์๋ ์๋์ผ๋ก ํด๋น form์ ์ํ๋ฏ๋ก form ์์ฑ์ผ๋ก ๋ช
์ํ์ง ์์๋ ๋๋ค. Submit ๐ก button ์์์ type ์์ฑ ๊ธฐ๋ณธ ๊ฐ์ submit์ด๋ฉฐ, ํด๋ฆญํด์ ์์์ ์ ์ถํ๋ฉด ์๋ก๊ณ ์นจํ๋ ๊ธฐ๋ณธ ๋์์ ๊ฐ์ง๋ค. ์๋ก๊ณ ์นจ์ ๋ฐฉ์งํ๋ ค๋ฉด form ์์ onsubmit ํธ๋ค๋ฌ์ event.p..
[HTML/CSS] Tailwind CSS์์ ํ์ ์
๋ ํฐ(~) ์ฌ์ฉํ๊ธฐ
[HTML/CSS] Tailwind CSS์์ ํ์ ์ ๋ ํฐ(~) ์ฌ์ฉํ๊ธฐ
2024.05.11Tailwind CSS 2.2 ๋ฒ์ ๋ถํฐ peer-* variants๋ก ํ์ ์์๋ฅผ ์ ํํ ์ ์๋ค. input ์์์ peer ํด๋์ค๋ฅผ ์ ์ํด๋๋ฉด, ํ์ ์์์์ peer ํด๋์ค๋ฅผ ์ด์ฉํด input ์์๋ฅผ ์ ํํ ์ ์๋ค. ์ฃผ๋ก peer-checked ์ฒ๋ผ ์์์ ํน์ ์ํ๋ฅผ ์ ํํ ๋ ์ฌ์ฉํ๋ค. peer-checked๋ (์ฒดํฌ๋ฐ์ค ๋ฑ)์์๊ฐ ์ฒดํฌ๋ ์ํ์ผ ๋ ์ ์ฉ๋๋ค. ์ด์ธ์๋ ๋ค์ํ ๊ฐ์ ํด๋์ค ์
๋ ํฐ๋ฅผ ์ฌ์ฉํ ์ ์๋ค. e.g. peer-hover peer-focus peer-disabled ์ฐธ๊ณ ๋ก ์ peer-checked ํด๋์ค๋ ~ ํ์ ์
๋ ํฐ๋ฅผ ์ฌ์ฉํ CSS ์ฝ๋๋ก ๋ณํ๋๋ค..peer:checked ~ .peer-checked\:bg-blue-500 { background-c..
[HTML/CSS] ์คํฌ๋กค๋ฐ ํ์๋ก ์ธํ ๋ ์ด์์ ๋ณํ ๋ฐฉ์งํ๊ธฐ - Scrollbar Gutter
[HTML/CSS] ์คํฌ๋กค๋ฐ ํ์๋ก ์ธํ ๋ ์ด์์ ๋ณํ ๋ฐฉ์งํ๊ธฐ - Scrollbar Gutter
2024.05.11ํ๋ฉด์ ๋ค ํ์ํ ์ ์์ ์ ๋๋ก ์ฝํ
์ธ ๊ฐ ๊ธธ๋ค๋ฉด ์ธ๋ก ์คํฌ๋กค๋ฐ๊ฐ ์๊ธด๋ค. ๊ทธ๋ผ ์ธ๋ก ์คํฌ๋กค๋ฐ์ ํญ ๋๋ฌธ์ ์ฝํ
์ธ ๋ฅผ ํ์ํ ์์ญ์ด ์ค์ด๋ค์ด ์ ์ด๋ฏธ์ง์ฒ๋ผ ๋ ์ด์์์ด ๋ณํ๋๋ค. ์คํฌ๋กค๋ฐ๊ฐ ์๊ฒจ์ ๋ ์ด์์์ด ๋ณํ๋๋ ๊ฒ์ ๋ฐฉ์งํ๊ณ ์ถ๋ค๋ฉด scrollbar-gutter ์์ฑ์ ์ฌ์ฉํ๋ฉด ๋๋ค. scrollbar-gutter๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์คํฌ๋กค๋ฐ ์์ญ์ ๋ฏธ๋ฆฌ ํ๋ณดํ๋๋ก ํ๋ ์์ฑ์ด๋ค. ์คํฌ๋กค๋ฐ ์์ญ์ ๋ฏธ๋ฆฌ ํ๋ณดํ์ผ๋ฏ๋ก ์คํฌ๋กค์ด ์๊ฒจ๋ ๋ ์ด์์ ๋ณํ์ด ์๋ค. scrollbar-gutter: auto | stable && both-edges?.box { padding: 1rem; max-height: 220px; overflow-y: auto; scrollbar-gutter: stable; /* sc..
[TS] ํ์
์คํฌ๋ฆฝํธ์์ CSS Module ์ฌ์ฉํ๊ธฐ
[TS] ํ์ ์คํฌ๋ฆฝํธ์์ CSS Module ์ฌ์ฉํ๊ธฐ
2024.05.11ํ์
์คํฌ๋ฆฝํธ CSS Module ์ค๋ฅ ํด๊ฒฐํ์
์คํฌ๋ฆฝํธ์์ CSS Module์ ์ฌ์ฉํ๋ฉด ๋ชจ๋/์ ์ธ์ ์ฐพ์ ์ ์๋ค๋ ํ์
์๋ฌ๊ฐ ๋์จ๋ค. src ํน์ ์ปดํฌ๋ํธ ํด๋์ ์๋ ๋ด์ฉ์ด ๋ด๊ธด typings.d.ts ํ์ผ์ ์ถ๊ฐํ๋ฉด ํด๊ฒฐํ ์ ์๋ค. via StackOverFlow// Toggle/typings.d.tsdeclare module '*.module.css' { const classes: { [key: string]: string }; export default classes;} CSS Module ์ฌ์ฉ๋ฒโถ [name].module.css ํํ๋ก CSS ๋ชจ๋ ํ์ผ์ ์์ฑํ๊ณ /* Toggle/Toggle.module.css */.toggle-bg:after { /* ... */} โท ์ปดํฌ๋ํธ์์ ..