์‹ฌ์‹ฌํ•ด์„œ ๋งŒ๋“ค์–ด ๋ณธ Toggle Switch๐Ÿ“

์‹œ์ž‘ํ•œ ๊ณ„๊ธฐ ๋จธ๋ฆฌ๋ฅผ ์‹ํž ๊ฒธ(?) ์›ํ‹ฐ๋“œ์—์„œ ์ฑ„์šฉ ๊ณต๊ณ ๋ฅผ ๋ณด๋‹ค๊ฐ€, 2๊ธฐ ๋•Œ ์ˆ˜๋ฃŒ ํ–ˆ๋˜ ์›ํ‹ฐ๋“œ ํ”„๋ฆฌ์˜จ ๋ณด๋”ฉ ๊ณต๊ณ ๊ฐ€ ๋–  ์žˆ์–ด ๋“ค์–ด๊ฐ€ ๋ดค๋‹ค.์ด๋ฒˆ์—๋Š” ์–ด๋–ค ์„ ๋ณ„ ๊ณผ์ œ๊ฐ€ ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๋‹ค๊ฐ€ ์ฒซ ๋ฒˆ์งธ ๊ตฌํ˜„ ๋ฌธ์ œ๊ฐ€ ๋ˆˆ์— ๋„์—ˆ๋‹ค. ํ•ด๋‹น ๋ฌธ์ œ๋Š” Toggle Switch ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ธ๋ฐ, ์ด์ „์˜ Toggle Switch์™€๋Š” ๋‹ค๋ฅด๊ฒŒ Slider ์˜์—ญ์— ๋‘ ๊ฐœ์˜ ๊ธ€์ž๊ฐ€ ๊ฐ ์‚ฌ์ด๋“œ์— ์œ„์น˜ํ•˜์˜€๊ณ  Toggle์ด ํ•ด๋‹น ๊ธ€์ž ๋ถ€๋ถ„์œผ๋กœ ์ด๋™ํ•˜๊ฒŒ ๋˜๋ฉด ๋™์ ์œผ๋กœ ์Šคํƒ€์ผ๋ง์ด ๋ณ€ํ•˜๋Š” ํฅ๋ฏธ๋กœ์šด ๋ฌธ์ œ์˜€๋‹ค. ํ•œ์‚ฐํ•œ ๋ฐค, ์˜ค๋žœ๋งŒ์— ๋ฐ”๋‹๋ผ JS ๐ŸŒ ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์–ด ํ•ด๋‹น ๋ฌธ์ œ๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ฐ„๋‹จํžˆ ์ฝ”๋”ฉํ•ด๋ณด์•˜๋‹ค. Code See the Pen Untitled by ์ตœ๋ณ‘ํ˜„ (@leulsiqf) on CodePen.

JS 2022. 4. 16. 00:06
๋กœ์ปฌ PC์—์„œ ์ด๋ฏธ์ง€ ๊ฐ€์ ธ์˜ค๊ณ  ์ €์žฅํ•˜๊ธฐ_ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๋‚ด์—์„œ ๋น„๋™๊ธฐ ์ž‘์—…์„ ํ†ตํ•œ FileReader ์ธ์Šคํ„ด์Šค ์‚ฌ์šฉ๊ธฐ

Issue ํ”„๋กœ์ ํŠธ ์ค‘, ๋กœ์ปฌ PC์—์„œ ๊ฐ€์ ธ ์˜จ ์ด๋ฏธ์ง€๋ฅผ preview๋กœ ๋ณด์—ฌ์ฃผ๋ฉฐ ์ €์žฅํ•˜๋Š” ๊ธฐ๋Šฅ ๊ตฌํ˜„์ด ํ•„์š”ํ–ˆ๋‹ค. ์ฒ˜์Œ์—๋Š” ๊ฐ„๋‹จํ•œ ๊ธฐ๋Šฅ ๊ตฌํ˜„์ผ ์ค„ ์•Œ์•˜์ง€๋งŒ ์ƒ๊ฐ๋ณด๋‹ค ๋งŽ์€ ์‹œํ–‰์ฐฉ์˜ค๋ฅผ ๊ฒช์—ˆ๊ธฐ์— ํ•ด๋‹น ๋‚ด์šฉ์„ ํฌ์ŠคํŒ…ํ•˜๊ณ ์ž ํ•œ๋‹ค. Code 1) Input ์Šคํƒ€์ผ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ์šฐ์„ , Input ํƒœ๊ทธ ๋‚ด์— 'type=file' ์†์„ฑ์„ ์ง€์ •ํ•ด์ฃผ๋ฉด ๋กœ์ปฌ PC์—์„œ ์ด๋ฏธ์ง€ ์†Œ์Šค๋ฅผ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ์ง€๋งŒ ๊ธฐ๋ณธ ์ง€์ • ์Šคํƒ€์ผ์ด ์›ํ•˜๋˜ ๋ฐฉํ–ฅ์ด ์•„๋‹ˆ๊ธฐ์— ๋‹ค์Œ๊ณผ ๊ฐ™์ด JSX๋ฅผ ์ž‘์„ฑํ•˜์˜€๋‹ค. ๋‚ด PC์—์„œ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ์‹ค์ œ ๋กœ์ปฌ PC์—์„œ ์ด๋ฏธ์ง€๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ธฐ๋Šฅ์€ FetchLocalPC ์ปดํฌ๋„ŒํŠธ์ด์ง€๋งŒ ์Šคํƒ€์ผ์„ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•˜๊ธฐ ์œ„ํ•ด์„œ FileLabel ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋”ฐ๋กœ ๋งŒ๋“ค์–ด ๋‘ ์ปดํฌ๋„ŒํŠธ์— ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์Šคํƒ€์ผ์„ ์ง€์ •ํ•ด์ฃผ์—ˆ๋‹ค. export const Fi..

TS 2022. 4. 11. 20:50
Next.js๋กœ ์ •์ ์ƒ์„ฑ(Static Generation) ๊ตฌํ˜„_getStaticProps์™€ getStaticPaths ์‚ฌ์šฉ๊ธฐ

Issue Next.js ํ”„๋กœ์ ํŠธ ๋„์ค‘ ์ƒํ’ˆ ์ƒ์„ธ ํŽ˜์ด์ง€๋ฅผ ์ •์ ์ƒ์„ฑ(Static Generation)์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ getStaticProps์™€ getStaticPaths๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด๊ธฐ๋กœ ํ•˜์˜€๋‹ค.ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์ด์ „์— ์ •์ ์ƒ์„ฑ, getStaticProps, getStaticPaths๊ฐ€ ์–ด๋–ค ์˜๋ฏธ๋ฅผ ์ง€๋‹ˆ๊ณ  ์žˆ๋Š”์ง€ ๊ฐ„๋žตํ•˜๊ฒŒ ๋ฉ”๋ชจํ•ด ๋‘๊ณ ์ž ํ•œ๋‹ค. ์ •์ ์ƒ์„ฑ(Static Generation)์€ ๋นŒ๋“œ ์‹œ์ ์— ์˜จ์ „ํ•œ ํŽ˜์ด์ง€์˜ HTML์ด ์ƒ์„ฑ๋˜์–ด ์„œ๋ฒ„์—์„œ ๋ฌผ๋ฆฌ์ ์œผ๋กœ HTML ํŒŒ์ผ์„ ๋ชจ๋‘ ๊ฐ–๊ณ  ์žˆ๋Š” ์ƒํƒœ์ด๋‹ค. ํ•œ ๋ฒˆ ์‘๋‹ตํ•œ ํ›„์—๋Š” CDN(content delivery network)์ด ํŒŒ์ผ์„ ๊ธฐ์–ต(์บ์‰ฌ, cache)ํ•˜์—ฌ ์‘๋‹ตํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋žœ๋”๋ง ์†๋„๊ฐ€ ๋น ๋ฅด๊ณ  ๋ถˆํ•„์š”ํ•œ ์„œ๋ฒ„ ์š”์ฒญ์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค. getStaticPr..

Next.js 2022. 3. 31. 13:06
๊ณต์ง€์‚ฌํ•ญ
์ตœ๊ทผ์— ์˜ฌ๋ผ์˜จ ๊ธ€
์ตœ๊ทผ์— ๋‹ฌ๋ฆฐ ๋Œ“๊ธ€
Total
Today
Yesterday
๋งํฌ
TAG
more
ยซ   2024/11   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
๊ธ€ ๋ณด๊ด€ํ•จ