[React / VanillaJS] UI ์์ ์ง์ ๋ง๋ค๊ธฐ Part 1
๋ํ์ ์ธ UI ์์๋ค์ React ๋ฒ์ ๋ฐ ์์ JavaScript ๋ฒ์ ์ผ๋ก ๋ง๋ค์ด ๋ณด๋ฉด์, Web API๋ฅผ ํ์ฉํ ๋ค์ํ ๊ด์ ๊ณผ ๋ฐฉ๋ฒ์ ๊ฒฝํํ๊ณ , ํ๋ก ํธ์๋ ๊ฐ๋ฐ ์ค๋ ฅ์ ํ์ธต ๋์ด์ฌ๋ ค ๋ณด์ธ์.
์๊ฐ์ 543๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ

- ๋ฏธํด๊ฒฐ
๊ฐ์ ๋์ด๋์๋ํด์
ํน์ ๊ฐ์ ๋์ด๋์ ๋ํด์ ๋ฌธ์๋๋ฆฌ๊ณ ์ถ์๋ฐ...์ ๋ง ์ด๋ ต๊ฒ ๋๊ปด์ง๋๊ฑด...์๋๊ฒ ์ฃ ..?
reacttypescriptdomuivanilla-jsํ๋ก ํธ์๋๋ง์คํฐ
ใป
5๋ฌ ์
0
77
1
- ๋ฏธํด๊ฒฐ
๊ฐ์์๋ฃ ๊ด๋ จ ์ง๋ฌธ
์๋ ํ์ธ์ ์ค๋ ๊ฐ์๋ฅผ ๊ตฌ๋งคํ๋๋ฐ, ๊นํํด๋ก ๋ถํฐ ์ด๊ธฐ์ ํ ํ๋๋ฒ์ด ์ด๋จ๋์ง ๋ชฐ๋ผ์... ํน์ ์บก์ฒ๋ก ์ฒจ๋ถ๋๋ฆฐ ๋ด์ฉ์ด ์ด๋จ๋์ง ์ ์ ์์๊น์??<img
reacttypescriptdomuivanilla-js์์ฑ์ ์์
ใป
6๋ฌ ์
0
53
2
- ๋ฏธํด๊ฒฐ
๊ฒ์ํ ๋ฆฌ์คํธ ๋ง๋ค๋ ์ด๋๋ถํฐ use client๋ฅผ ์ ์ฉํ ์ง ๋ชจ๋ฅด๊ฒ ์ด์
<p style="t
reacttypescriptdomuivanilla-js0S
ใป
9๋ฌ ์
0
121
1
- ๋ฏธํด๊ฒฐ
๊ฐ์ ์ฐ์ฅ๊ด๋ จ
๋ง๋ฃ์ผ๊น์ง ์๊ฐ์ ๋ชปํ ๊ฑฐ ๊ฐ์๋ฐ ๊ฐ๋ฅํ๋ค๋ฉด ์๊ฐ๊ธฐ๊ฐ์ ๋ช์ผ์ด๋ผ๋ ๋๋ ค์ฃผ์ค ์ ์์๊น์? ์ฒซ์ง๋ฌธ์ด ์๊ฐ๊ธฐ๊ฐ์ ๊ดํ ๋ด์ฉ์ด๋ผ ์ฃ์กํฉ๋๋ค !!
reacttypescriptdomuivanilla-jsdidgusdhkd3
ใป
์ผ ๋ ์
0
157
2
- ํด๊ฒฐ
Tooltip-useSyncExternalStore()์ ํจ์ ๋๊ธฐ๋ ๋ฐฉ์์ ๋ํด...
์๋ ํ์ธ์!ํญ์ ์ ์ตํ ๊ฐ์๋ฅผ ์ ๊ณตํด ์ฃผ์ ์ ๊ฐ์ฌ๋๋ฆฌ๋ฉฐ,๊ฐ์๋ฅผ ํตํด UI๋ฅผ ๋ค์ํ ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํ๋ ๋ฒ๊ณผ
reacttypescriptdomuivanilla-js์ด๋
ใป
์ผ ๋ ์
0
201
3
- ๋ฏธํด๊ฒฐ
textarea ์์ body ๋ฌดํ๊น๋นกํ์ฑ ์ง๋ฌธ ๋๋ฆฝ๋๋ค.
๋ฆฌ์กํธ๋ก ์์ฑ๋ textarea(controlled, uncontrolled ๋ชจ๋ ํฌํจ) ์ ๊ฒฝ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ์์ body ํ๊ทธ๋ฅผ ๋ณด๋ฉด ๋ฌดํ๊น๋นก๊ฑฐ๋ฆฌ๋ ํ์์ด ์๋๋ฐ.. ์ด๊ฑด ๋ ๋๋ง์ด ๊ณ์ ๋ฐ์ํ๋๊ฑฐ ์๋๊ฐ์?t
reacttypescriptdomuivanilla-jsjaiyah
ใป
์ผ ๋ ์
0
121
2
- ๋ฏธํด๊ฒฐ
๋ซํ ์ํ์์ ๋ฌธ์์ด์ ์ฐพ์์ง๋๋ฐ ์ด๋ฆฌ์ง ์์์
AccordionItem์ ์์ฑํ์ ์ฝ๋๋ฅผ ๊ทธ๋๋ก ๋ฐ๋ผ์ณค๋ค๊ณ ์๊ฐํ์ต๋๋ค.๋ซํ ์ํ์์ ๋ฌธ์์ด์ ์ฐพ์์ง๋๋ฐ ์๋์ผ๋ก ์์ฝ๋์ธ์ด ์ด๋ฆฌ์ง ์์ต๋๋คใ <p sty
reacttypescriptdomuivanilla-js์์ฑ์ ์์
ใป
์ผ ๋ ์
0
138
2
- ํด๊ฒฐ
scrollSpy ๋ฐ๋๋ผ๋ฒ์ ์์ data-index๋ฅผ ์ฐพ๋ ์ฝ๋ ์ง๋ฌธ
๊ฐ์ฌ๋ ์๋ ํ์ธ์. ํญ์ ๊ฐ์ ์ ๋ณด๊ณ ์์ต๋๋ค ๐์๊ฐํ๊ณ ๋ค์ ๋ณด๋ค๊ฐ, scrollSpy ๋ฐ๋๋ผ๋ฒ์ ์์ ๊ถ๊ธํ ์ ์ด ์์ด์ ์ง๋ฌธ ๋จ
reacttypescriptdomuivanilla-js์ดํ๊ฒฝ
ใป
0
121
2
- ํด๊ฒฐ
[#๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋ ์ฌ์ฉ๋ฒ ๋ฌธ์] ๊ฐ์์๋ฃ[๋ณด์ผ๋ฌํ๋ ์ดํธ] ์ฌ์ฉ๋ฒ์ ๋ํด์ ๋ฌธ์ ๋๋ ค์
์๋ ํ์ธ์!๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋๋ฅผ ๋ค์ด๋ฐ์ npm install ์ ํ๋ฉด,route ๊ด๋ จ ์ฝ๋๊ฐ ์์ฑ๋์ด ์๊ณ ,<a target="_blank" rel="noopener noreferrer nofollow" href="http://l
reacttypescriptdomuivanilla-jsํ๋ฆฐ์ด
ใป
0
303
2
- ํด๊ฒฐ
๋ฌดํ์คํฌ๋กค ๋ฆฌ์กํธ๋ฒ์ | 16๋ถ 31์ด
16๋ถ 31์ด์ const useInfiniteFetcher =() => {} ์ฌ๊ธฐ ๋ถ๋ถ์ ๋ณด๊ฒ ๋๋ฉดpageData๋ async์์ ๋ฐ์์์ promise๊ฐ ๋์๋๋ฐ๊ฐ์ฌ๋์ ๋ฐ๋ก .then์ ์ํ์ จ๋๋ฐ ์ด๋ป๊ฒ ๊ฐ๋ฅํ๊ฐ์
reacttypescriptdomuivanilla-js์์ค
ใป
0
167
2
- ํด๊ฒฐ
๊ฐ์์๋ฃ github link 404 ๋นํ์ด์ง
๋นํ์ด์ง๋ก ๋์ค๋๋ฐ ์๊ทธ๋ฐ๊ฑธ๊น์?https://github.com/fe
reacttypescriptdomuivanilla-jstax
ใป
0
258
2
- ํด๊ฒฐ
์์ฝ๋์ธ (3/6) css transition ์ถ๊ฐ ๋ถ๋ถ max-height ์ง๋ฌธ
์๋ ํ์ธ์, ์๊ฐ ์ค์ css transition ํํธ์์ ๊ถ๊ธ์ฆ์ด ์๊ฒจ ์ง๋ฌธ ๋๋ฆฝ๋๋ค. max-height ์์ฑ์ ์ด์ฉํด์ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํด์ฃผ์ จ๋๋ฐ, ์๋ ๋ฐฉ์์ฒ๋ผ height๋ฅผ 0, auto๋ก ์ ๋๋ฉ์ด์ ์ฃผ๋ ๊ฒ๊ณผ ์ฐจ์ด๊ฐ ์์๊น์?<code
reacttypescriptdomuivanilla-js๋ณด๋
ใป
1
402
2
- ํด๊ฒฐ
๊ฐ์ ์ ๋ฆฌ์ ๋ํ ๋ธ๋ก๊ทธ ์ ๋ฆฌ ๊ธ ๊ฒ์ ๋ฌธ์
์๋ ํ์ธ์ ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด์ ์ ๋ฆฌํ๋ ๋ฐ ๋ธ๋ก๊ทธ์ ๊ฒ์๊ธ๋ก ๊ฐ์ด ์ฌ๋ ค๋ ๊ฐ๋ฅํ์ง ๋ฌธ์๋๋ฆฝ๋๋ค ์๋ฅผ ๋ค์ด ์์ฝ๋์ธ์ ๋ฃ๊ณ ์ฝ๋์ ์ฃผ์ ๋ฐ ์ ๋ฆฌํ ๋ด์ฉ๋ค์ ๋ฐํ์ผ๋ก ์ถ์ฒ์ ํจ๊ป ๊ธ์ ์ฌ๋ฆฌ๋ ๊ฒ์ ๋๋ค <p
reacttypescriptdomuivanilla-jscodinglego
ใป
0
297
1
- ํด๊ฒฐ
[์์ฝ๋์ธ 1/6 ์ฑํฐ] ํด๋ก์ ํ์ฉ ์ง๋ฌธ ์์ต๋๋ค.
์๋ ํ์ธ์! ์ด์ ๋ง ๊ฐ์๋ฅผ ๋ฃ๊ณ ์๋ ๋ฐฐ์ ๊ท๋ผ๊ณ ํฉ๋๋ค. ์์ฝ๋์ธ ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋๋ UI ์ปดํฌ๋ํธ ๊ฐ๋ฐ๋ฟ๋ง ์๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ค๋ฌด ํ๊น์ง ๋ฐฐ์ธ ์ ์๊ฒ ๋ค๋ผ๋ ๊ธฐ๋๊ฐ์ด ์๊ธฐ๋ค์ <span data
reacttypescriptdomuivanilla-js๋ฐฐ์ ๊ท
ใป
2
438
2
- ํด๊ฒฐ
item7 style์ด ๊ฐ์์๋ฃ์ ์์ต๋๋ค.
์์ฝ๋์ธ 8_r.tsx์์ item7 ํด๋์ค๋ฅผ ์ฃผ์ จ๋๋ฐ ๊ฐ์์๋ฃ์ item7 ํด๋์ค๊ฐ ์๋ ๊ฒ ๊ฐ์์!
reacttypescriptdomuivanilla-js๊น์๋ฏผ
ใป
0
286
1
- ํด๊ฒฐ
์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ Root์ ๋ชจ์ด๋ฉด
๋ฆฌ์กํธ์์๋ onClick์ผ๋ก ์ด๋ฒคํธ๋ฅผ ๋ฑ๋กํ๋ฉด Root์ ๋ชจ์ด๊ฒ ๋๋ค๊ณ ํ์ จ๋๋ฐ์ ๊ฐ ์ด ๋ถ๋ถ์ ์ ํํ ์ดํดํ๋์ง ์๊ณ ์ถ์ด์ ์ง๋ฌธ ๋๋ฆฝ๋๋ค!๋ณดํต์ ์๋ฐ์คํฌ๋ฆฝํธ์์๋ ๊ฐ ์์๋ง๋ค addEventListener
reacttypescriptdomuivanilla-jsoridori2705
ใป
0
298
1
- ํด๊ฒฐ
append์ insertAdjacentElement ์ฐจ์ด๊ฐ ๋ฌด์์ผ๊น์?
insertAdjacentElement ๋ฅผ ์ฌ์ฉํด์ ๊ตฌํํ์ จ๋๋ฐ์ ๋ถ๋ถ์ append๋ก ํด๋ ๋๊ฐ์ ๊ฒฐ๊ณผ๊ฐ ๋์ต๋๋ค.ํน์ append๋ง๊ณ insertAdjacentElement๋ฅผ ์ฌ์ฉํ์ ์ด์ ๊ฐ ์์๊น์?๊ฐ์ธ์ ์ผ๋ก ๊ฒ์ํด๋ดค๋๋ฐ appe
reacttypescriptdomuivanilla-jsoridori2705
ใป
0
321
1
- ํด๊ฒฐ
์์ฝ๋์ธ 1/6 ๊ฐ์ข ํด๋ก์ ธ ๊ด๋ จ ์ง๋ฌธ์ ๋๋ค.
์๋ ํ์ธ์ ์ ์๋ ๊ณ ๊ธ๊ฐ์ ์๋ณด๊ณ ์์ต๋๋ค.์๋ง๋ค์ด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. ์์ฝ๋์ธ ๋ง๋ค๊ธฐ 1/6 ์ ๋ณด๋ค๊ฐ ๊ถ๊ธํ ์ฌํญ์ด ์์ด ์ง๋ฌธ๋๋ฆฝ๋๋ค. const toggleItem = (id: str
reacttypescriptdomuivanilla-jsํธ๊ฐฑ
ใป
0
374
1
- ํด๊ฒฐ
gnb ๋ง๋ค๊ธฐ๋ฅผ ์ค๋ฌด next js ํ๋ก์ ํธ์์ ์ฌ์ฉํ ์ ์๋์?
catch-all segments ๋ฅผ ๋ฃจํธ ํ์ด์ง์ ์ ์ฉํด์nextjs ์ ํ์ผ ๊ธฐ๋ฐ ๋ผ์ฐํธ๋ฅผ ๋ฌด๋ ฅํ ํ๊ธฐ ๋๋ฌธ์nextjs ์์ ์ ๊ณตํด์ฃผ๋ ๋ค์ํ ๋ผ์ฐํฐ ๊ธฐ๋ฅ๋คroute intercepti
reacttypescriptdomuivanilla-jsํ์์ค
ใป
1
609
2
- ํด๊ฒฐ
ํ์ต์๋ฃ ๊ด๋ จํด์ ์ง๋ฌธ์์ต๋๋ค.
์๋ ํ์ธ์.์ธ์ ๋ถํธ์บ ํ๋ฅผ ํ๊ณ ๊ฑฐ์ ๋๋๊ฐ๋ฉด์ ๋ถ์กฑํจ์ ๋๊ปด์ ๊ฐ์๋ฅผ ์ ์ฒญํ๊ฒ ๋์๋๋ฐ์. ๊ฐ์์๋ฃ๋ฅผ ๋ค์ด๋ก๋ ๋ฐ์์ ์ค์นํด๋ณด๋ ์๋ง ์์ฑ๋ณธ(?) ์ธ๊ฒ ๊ฐ๋๋ผ๊ตฌ์. ๊ทธ๋์ route ์ค์ ํ ๋ ํด๋ ํธ๋ฆฌ๋ฅผ ๋ณด๊ณ ๋ด์ฉ๋
reacttypescriptdomuivanilla-js์กฐ์ฑ๊ฒฝ
ใป
0
545
1






