[React/VanillaJS] UI่ฆ็ด ใ็ดๆฅไฝๆใใ Part 1
ไปฃ่กจ็ใชUI่ฆ็ด ใReactใใผใธใงใณใจ็ด็ฒใชJavaScriptใใผใธใงใณใซใใฆใWeb APIใๆดป็จใใใใพใใพใช่ฆ็นใจๆนๆณใไฝ้จใใใใญใณใใจใณใ้็บใฎในใญใซใไธๅฑคๅผใไธใใฆใฟใฆใใ ใใใ
ๅ่ฌ็ 543ๅ
้ฃๆๅบฆ ๅ็ด
ๅ่ฌๆ้ ็กๅถ้

- ๆช่งฃๆฑบ
๊ฐ์ ๋์ด๋์๋ํด์
ํน์ ๊ฐ์ ๋์ด๋์ ๋ํด์ ๋ฌธ์๋๋ฆฌ๊ณ ์ถ์๋ฐ...์ ๋ง ์ด๋ ต๊ฒ ๋๊ปด์ง๋๊ฑด...์๋๊ฒ ์ฃ ..?
reacttypescriptdomuivanilla-jsehdrkr112832
ใป
5ใถๆๅ
0
77
1
- ๆช่งฃๆฑบ
๊ฐ์์๋ฃ ๊ด๋ จ ์ง๋ฌธ
์๋ ํ์ธ์ ์ค๋ ๊ฐ์๋ฅผ ๊ตฌ๋งคํ๋๋ฐ, ๊นํํด๋ก ๋ถํฐ ์ด๊ธฐ์ ํ ํ๋๋ฒ์ด ์ด๋จ๋์ง ๋ชฐ๋ผ์... ํน์ ์บก์ฒ๋ก ์ฒจ๋ถ๋๋ฆฐ ๋ด์ฉ์ด ์ด๋จ๋์ง ์ ์ ์์๊น์??<img
reacttypescriptdomuivanilla-jsไฝๆ่ ใชใ
ใป
6ใถๆๅ
0
53
2
- ๆช่งฃๆฑบ
๊ฒ์ํ ๋ฆฌ์คํธ ๋ง๋ค๋ ์ด๋๋ถํฐ use client๋ฅผ ์ ์ฉํ ์ง ๋ชจ๋ฅด๊ฒ ์ด์
<p style="t
reacttypescriptdomuivanilla-js0s
ใป
9ใถๆๅ
0
121
1
- ๆช่งฃๆฑบ
๊ฐ์ ์ฐ์ฅ๊ด๋ จ
๋ง๋ฃ์ผ๊น์ง ์๊ฐ์ ๋ชปํ ๊ฑฐ ๊ฐ์๋ฐ ๊ฐ๋ฅํ๋ค๋ฉด ์๊ฐ๊ธฐ๊ฐ์ ๋ช์ผ์ด๋ผ๋ ๋๋ ค์ฃผ์ค ์ ์์๊น์? ์ฒซ์ง๋ฌธ์ด ์๊ฐ๊ธฐ๊ฐ์ ๊ดํ ๋ด์ฉ์ด๋ผ ์ฃ์กํฉ๋๋ค !!
reacttypescriptdomuivanilla-jsdidgusdhdk3
ใป
1ๅนดๅ
0
157
2
- ่งฃๆฑบ
Tooltip-useSyncExternalStore()์ ํจ์ ๋๊ธฐ๋ ๋ฐฉ์์ ๋ํด...
์๋ ํ์ธ์!ํญ์ ์ ์ตํ ๊ฐ์๋ฅผ ์ ๊ณตํด ์ฃผ์ ์ ๊ฐ์ฌ๋๋ฆฌ๋ฉฐ,๊ฐ์๋ฅผ ํตํด UI๋ฅผ ๋ค์ํ ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํ๋ ๋ฒ๊ณผ
reacttypescriptdomuivanilla-jsjirehmuze
ใป
1ๅนดๅ
0
201
3
- ๆช่งฃๆฑบ
textarea ์์ body ๋ฌดํ๊น๋นกํ์ฑ ์ง๋ฌธ ๋๋ฆฝ๋๋ค.
๋ฆฌ์กํธ๋ก ์์ฑ๋ textarea(controlled, uncontrolled ๋ชจ๋ ํฌํจ) ์ ๊ฒฝ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ์์ body ํ๊ทธ๋ฅผ ๋ณด๋ฉด ๋ฌดํ๊น๋นก๊ฑฐ๋ฆฌ๋ ํ์์ด ์๋๋ฐ.. ์ด๊ฑด ๋ ๋๋ง์ด ๊ณ์ ๋ฐ์ํ๋๊ฑฐ ์๋๊ฐ์?t
reacttypescriptdomuivanilla-jsjaiyah
ใป
1ๅนดๅ
0
121
2
- ๆช่งฃๆฑบ
๋ซํ ์ํ์์ ๋ฌธ์์ด์ ์ฐพ์์ง๋๋ฐ ์ด๋ฆฌ์ง ์์์
AccordionItem์ ์์ฑํ์ ์ฝ๋๋ฅผ ๊ทธ๋๋ก ๋ฐ๋ผ์ณค๋ค๊ณ ์๊ฐํ์ต๋๋ค.๋ซํ ์ํ์์ ๋ฌธ์์ด์ ์ฐพ์์ง๋๋ฐ ์๋์ผ๋ก ์์ฝ๋์ธ์ด ์ด๋ฆฌ์ง ์์ต๋๋คใ <p sty
reacttypescriptdomuivanilla-jsไฝๆ่ ใชใ
ใป
1ๅนดๅ
0
138
2
- ่งฃๆฑบ
scrollSpy ๋ฐ๋๋ผ๋ฒ์ ์์ data-index๋ฅผ ์ฐพ๋ ์ฝ๋ ์ง๋ฌธ
๊ฐ์ฌ๋ ์๋ ํ์ธ์. ํญ์ ๊ฐ์ ์ ๋ณด๊ณ ์์ต๋๋ค ๐์๊ฐํ๊ณ ๋ค์ ๋ณด๋ค๊ฐ, scrollSpy ๋ฐ๋๋ผ๋ฒ์ ์์ ๊ถ๊ธํ ์ ์ด ์์ด์ ์ง๋ฌธ ๋จ
reacttypescriptdomuivanilla-jsffff02920623
ใป
0
121
2
- ่งฃๆฑบ
[#๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋ ์ฌ์ฉ๋ฒ ๋ฌธ์] ๊ฐ์์๋ฃ[๋ณด์ผ๋ฌํ๋ ์ดํธ] ์ฌ์ฉ๋ฒ์ ๋ํด์ ๋ฌธ์ ๋๋ ค์
์๋ ํ์ธ์!๋ณด์ผ๋ฌํ๋ ์ดํธ ์ฝ๋๋ฅผ ๋ค์ด๋ฐ์ npm install ์ ํ๋ฉด,route ๊ด๋ จ ์ฝ๋๊ฐ ์์ฑ๋์ด ์๊ณ ,<a target="_blank" rel="noopener noreferrer nofollow" href="http://l
reacttypescriptdomuivanilla-jshere2letters6603
ใป
0
303
2
- ่งฃๆฑบ
๋ฌดํ์คํฌ๋กค ๋ฆฌ์กํธ๋ฒ์ | 16๋ถ 31์ด
16๋ถ 31์ด์ const useInfiniteFetcher =() => {} ์ฌ๊ธฐ ๋ถ๋ถ์ ๋ณด๊ฒ ๋๋ฉดpageData๋ async์์ ๋ฐ์์์ promise๊ฐ ๋์๋๋ฐ๊ฐ์ฌ๋์ ๋ฐ๋ก .then์ ์ํ์ จ๋๋ฐ ์ด๋ป๊ฒ ๊ฐ๋ฅํ๊ฐ์
reacttypescriptdomuivanilla-jsyjmm
ใป
0
167
2
- ่งฃๆฑบ
๊ฐ์์๋ฃ github link 404 ๋นํ์ด์ง
๋นํ์ด์ง๋ก ๋์ค๋๋ฐ ์๊ทธ๋ฐ๊ฑธ๊น์?https://github.com/fe
reacttypescriptdomuivanilla-jsframeout
ใป
0
258
2
- ่งฃๆฑบ
์์ฝ๋์ธ (3/6) css transition ์ถ๊ฐ ๋ถ๋ถ max-height ์ง๋ฌธ
์๋ ํ์ธ์, ์๊ฐ ์ค์ css transition ํํธ์์ ๊ถ๊ธ์ฆ์ด ์๊ฒจ ์ง๋ฌธ ๋๋ฆฝ๋๋ค. max-height ์์ฑ์ ์ด์ฉํด์ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํด์ฃผ์ จ๋๋ฐ, ์๋ ๋ฐฉ์์ฒ๋ผ height๋ฅผ 0, auto๋ก ์ ๋๋ฉ์ด์ ์ฃผ๋ ๊ฒ๊ณผ ์ฐจ์ด๊ฐ ์์๊น์?<code
reacttypescriptdomuivanilla-jsvnclfjqm123003
ใป
1
402
2
- ่งฃๆฑบ
๊ฐ์ ์ ๋ฆฌ์ ๋ํ ๋ธ๋ก๊ทธ ์ ๋ฆฌ ๊ธ ๊ฒ์ ๋ฌธ์
์๋ ํ์ธ์ ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด์ ์ ๋ฆฌํ๋ ๋ฐ ๋ธ๋ก๊ทธ์ ๊ฒ์๊ธ๋ก ๊ฐ์ด ์ฌ๋ ค๋ ๊ฐ๋ฅํ์ง ๋ฌธ์๋๋ฆฝ๋๋ค ์๋ฅผ ๋ค์ด ์์ฝ๋์ธ์ ๋ฃ๊ณ ์ฝ๋์ ์ฃผ์ ๋ฐ ์ ๋ฆฌํ ๋ด์ฉ๋ค์ ๋ฐํ์ผ๋ก ์ถ์ฒ์ ํจ๊ป ๊ธ์ ์ฌ๋ฆฌ๋ ๊ฒ์ ๋๋ค <p
reacttypescriptdomuivanilla-jswnstj17048681
ใป
0
297
1
- ่งฃๆฑบ
[์์ฝ๋์ธ 1/6 ์ฑํฐ] ํด๋ก์ ํ์ฉ ์ง๋ฌธ ์์ต๋๋ค.
์๋ ํ์ธ์! ์ด์ ๋ง ๊ฐ์๋ฅผ ๋ฃ๊ณ ์๋ ๋ฐฐ์ ๊ท๋ผ๊ณ ํฉ๋๋ค. ์์ฝ๋์ธ ๊ฐ์๋ฅผ ๋ฃ๊ณ ๋๋ UI ์ปดํฌ๋ํธ ๊ฐ๋ฐ๋ฟ๋ง ์๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ค๋ฌด ํ๊น์ง ๋ฐฐ์ธ ์ ์๊ฒ ๋ค๋ผ๋ ๊ธฐ๋๊ฐ์ด ์๊ธฐ๋ค์ <span data
reacttypescriptdomuivanilla-jsjunggyoo14104
ใป
2
438
2
- ่งฃๆฑบ
item7 style์ด ๊ฐ์์๋ฃ์ ์์ต๋๋ค.
์์ฝ๋์ธ 8_r.tsx์์ item7 ํด๋์ค๋ฅผ ์ฃผ์ จ๋๋ฐ ๊ฐ์์๋ฃ์ item7 ํด๋์ค๊ฐ ์๋ ๊ฒ ๊ฐ์์!
reacttypescriptdomuivanilla-jskimpran
ใป
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-jsjameswoo
ใป
0
374
1
- ่งฃๆฑบ
gnb ๋ง๋ค๊ธฐ๋ฅผ ์ค๋ฌด next js ํ๋ก์ ํธ์์ ์ฌ์ฉํ ์ ์๋์?
catch-all segments ๋ฅผ ๋ฃจํธ ํ์ด์ง์ ์ ์ฉํด์nextjs ์ ํ์ผ ๊ธฐ๋ฐ ๋ผ์ฐํธ๋ฅผ ๋ฌด๋ ฅํ ํ๊ธฐ ๋๋ฌธ์nextjs ์์ ์ ๊ณตํด์ฃผ๋ ๋ค์ํ ๋ผ์ฐํฐ ๊ธฐ๋ฅ๋คroute intercepti
reacttypescriptdomuivanilla-jshyunsokstar6698
ใป
1
609
2
- ่งฃๆฑบ
ํ์ต์๋ฃ ๊ด๋ จํด์ ์ง๋ฌธ์์ต๋๋ค.
์๋ ํ์ธ์.์ธ์ ๋ถํธ์บ ํ๋ฅผ ํ๊ณ ๊ฑฐ์ ๋๋๊ฐ๋ฉด์ ๋ถ์กฑํจ์ ๋๊ปด์ ๊ฐ์๋ฅผ ์ ์ฒญํ๊ฒ ๋์๋๋ฐ์. ๊ฐ์์๋ฃ๋ฅผ ๋ค์ด๋ก๋ ๋ฐ์์ ์ค์นํด๋ณด๋ ์๋ง ์์ฑ๋ณธ(?) ์ธ๊ฒ ๊ฐ๋๋ผ๊ตฌ์. ๊ทธ๋์ route ์ค์ ํ ๋ ํด๋ ํธ๋ฆฌ๋ฅผ ๋ณด๊ณ ๋ด์ฉ๋
reacttypescriptdomuivanilla-jswhtjdrud8008389
ใป
0
545
1

