๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ

(79)
[๋‚ด๋ณด๋‚ด๋ฒˆ] Next.js docs - next/image (v12.1.1) ๋‚ด๋ณด๋‚ด๋ฒˆ(๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ๋‚ด๊ฐ€ ๋ฒˆ์—ญํ•œ...) Next.js docs 2022๋…„ 4์›” 15์ผ ๊ธฐ์ค€ Next.js ๊ณต์‹ ๋ฌธ์„œ๋กœ ์—…๋ฐ์ดํŠธํ–ˆ๋‹ค. (v12.1.1) ์ด์ „ ๋ฒ„์ „ ๋ฌธ์„œ๋Š” ์•„๋ž˜์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. 2021.04.01 - [Next.js] - [๋‚ด๋ณด๋‚ด๋ฒˆ] Next.js docs - next/image โ€ป ์˜์–ด ์ „๊ณต์ž๋„ ํ•ด์™ธ ์œ ํ•™ํŒŒ๋„ ์•„๋‹ˆ๊ธฐ์— ๋ฒˆ์—ญ์—๋Š” ์˜์—ญ, ์˜ค์—ญ, ๊ตฌ๊ธ€ ๋ฒˆ์—ญ์ด ๋ฌด์ˆ˜ํžˆ ๋งŽ์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ํ˜ผ์ž ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฐธ์กฐํ•ด๊ฐ€๋ฉฐ ๋ฒˆ์—ญํ•˜๋‹ค ๋ณด๋‹ˆ ์˜คํƒ€๋„ ๋งŽ์„ ์ˆ˜ ์žˆ๋‹ค. ์ •ํ™•ํ•œ ๋‚ด์šฉ์€ ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ง์ ‘ ์‚ดํŽด๋ณด๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ์ •๋ณด๋“ค์„ ๋” ์ฐพ์•„๋ณด๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค. (ํ•˜์ง€๋งŒ ๋Œ“๊ธ€ ํ”ผ๋“œ๋ฐฑ๋„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค๐Ÿ˜ƒ ) Next.js ๊ณต์‹๋ฌธ์„œ ํ™•์ธํ•˜๊ธฐ>> next/image | Next.js Enable Image Optimization w..
CSS Modules ํด๋ž˜์Šค๋ช… ๋„ฃ๋Š” ๋ฒ• Today I learned ์นดํ…Œ๊ณ ๋ฆฌ์— ์žˆ๊ธด ํ•˜์ง€๋งŒ Today์— ๋ฐฐ์šด๊ฑด ์•„๋‹ˆ๊ณ ... Next.js ๊ด€๋ จ ํŠœํ† ๋ฆฌ์–ผ๋ณด๋‹ค๊ฐ€ ์˜ˆ์ „์— ๊ณ ๋ฏผํ•˜๊ณ  ์ฐพ์•„๋ดค๋˜ ๋ถ€๋ถ„์ด ์ƒ๊ฐ๋‚˜์„œ ์–ผ๋ฅธ ๊ธ€๋กœ ๋‚จ๊ฒจ๋ณธ๋‹ค. ์ง€๋‚œ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ ๋•Œ CSS Modules๋ฅผ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ ํด๋ž˜์Šค ๋ช…์„ ์—ฌ๋Ÿฌ ๊ฐœ ๋„ฃ๋Š” ๊ฒƒ๊ณผ ๊ด€๋ จํ•˜์—ฌ ์ฐพ์•„๋ณธ ์ ์ด ์žˆ์—ˆ๋‹ค. (๊ธฐ์กด์— ์ž‘์„ฑํ–ˆ๋˜ ์ฝ”๋“œ์—์„œ ๋ณด๊ณ  ์˜ฌ๋ฆฌ๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋” ์ •ํ™•ํ•œ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ๋Š” ๋ฌธ์„œ๋ฅผ ์ฐพ์•„๋ณด๊ฑฐ๋‚˜ ์ถ”๊ฐ€์ ์œผ๋กœ ๊ฒ€์ƒ‰ํ•ด๋ณด๋Š” ๊ฒƒ์„ ๊ถŒํ•ด๋“œ๋ฆฝ๋‹ˆ๋‹ค. ) 1. ํด๋ž˜์Šค ๋ช…์ด ํ•˜๋‚˜ ์ผ ๋•Œ - style.className ๋ฐฉ์‹ - style['class-name'] ๋ฐฉ์‹ 2. ํด๋ž˜์Šค ๋ช…์ด ๋‘๊ฐœ ์ด์ƒ์ผ ๋•Œ - {`${style.className1} ${style.className2}`} / {`${style['class-n..
[๋‚ด๋ณด๋‚ด๋ฒˆ] How to choose between Next.js CSR, SSR, SSG, and ISR ๋‚ด๋ณด๋‚ด๋ฒˆ(๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ๋‚ด๊ฐ€ ๋ฒˆ์—ญํ•œ...) ์•„ํ‹ฐํด โ€ป ์˜์–ด ์ „๊ณต์ž๋„ ํ•ด์™ธ ์œ ํ•™ํŒŒ๋„ ์•„๋‹ˆ๊ธฐ์— ๋ฒˆ์—ญ์—๋Š” ์˜์—ญ, ์˜ค์—ญ, ๊ตฌ๊ธ€ ๋ฒˆ์—ญ์ด ๋ฌด์ˆ˜ํžˆ ๋งŽ์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ฐœ์ธ์ ์ธ ๊ณต๋ถ€ ๋ชฉ์ ์œผ๋กœ ๋ฒˆ์—ญํ•˜๋‹ค ๋ณด๋‹ˆ ์˜คํƒ€๋„ ๋งŽ์„ ์ˆ˜ ์žˆ๋‹ค. ์ •ํ™•ํ•œ ๋‚ด์šฉ์€ ํ•ด๋‹น ์•„ํ‹ฐํด์„ ์ง์ ‘ ์‚ดํŽด๋ณด๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ์ •๋ณด๋“ค์„ ๋” ์ฐพ์•„๋ณด๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค. (ํ•˜์ง€๋งŒ ๋Œ“๊ธ€ ํ”ผ๋“œ๋ฐฑ๋„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค๐Ÿ˜ƒ ๊ธ€์„ ์ฝ์–ด๋ณด์‹œ๊ณ  ๋„์›€์„ ์–ป์œผ์…จ๋‹ค๋ฉด ์•„ํ‹ฐํด ์ €์ž์˜ ๋ธ”๋กœ๊ทธ์—์„œ ์ข‹์•„์š”๋„ ๋ˆŒ๋Ÿฌ์ฃผ์„ธ์š”.) How to choose between Next.js CSR, SSR, SSG, and ISR by Theodorus Clarence ์›๋ฌธ ์ฝ๊ธฐ >> How to choose between Next.js CSR, SSR, SSG, and ISR | theodorusclarence.com 4 Me..
[๋‚ด๋ณด๋‚ด๋ฒˆ] Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR) ๋‚ด๋ณด๋‚ด๋ฒˆ(๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ๋‚ด๊ฐ€ ๋ฒˆ์—ญํ•œ...) ์•„ํ‹ฐํด โ€ป ์˜์–ด ์ „๊ณต์ž๋„ ํ•ด์™ธ ์œ ํ•™ํŒŒ๋„ ์•„๋‹ˆ๊ธฐ์— ๋ฒˆ์—ญ์—๋Š” ์˜์—ญ, ์˜ค์—ญ, ๊ตฌ๊ธ€ ๋ฒˆ์—ญ์ด ๋ฌด์ˆ˜ํžˆ ๋งŽ์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ฐœ์ธ์ ์ธ ๊ณต๋ถ€ ๋ชฉ์ ์œผ๋กœ ๋ฒˆ์—ญํ•˜๋‹ค ๋ณด๋‹ˆ ์˜คํƒ€๋„ ๋งŽ์„ ์ˆ˜ ์žˆ๋‹ค. ์ •ํ™•ํ•œ ๋‚ด์šฉ์€ ํ•ด๋‹น ์•„ํ‹ฐํด์„ ์ง์ ‘ ์‚ดํŽด๋ณด๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ์ •๋ณด๋“ค์„ ๋” ์ฐพ์•„๋ณด๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค. (ํ•˜์ง€๋งŒ ๋Œ“๊ธ€ ํ”ผ๋“œ๋ฐฑ๋„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค๐Ÿ˜ƒ ๊ธ€์„ ์ฝ์–ด๋ณด์‹œ๊ณ  ๋„์›€์„ ์–ป์œผ์…จ๋‹ค๋ฉด ์•„ํ‹ฐํด ์ €์ž์˜ ๋ธ”๋กœ๊ทธ์—์„œ ์ข‹์•„์š”๋„ ๋ˆŒ๋Ÿฌ์ฃผ์„ธ์š”.) Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR) by Theodorus Clarence ์›๋ฌธ ์ฝ๊ธฐ >> Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR) | theodorusclarence...
[๋‚ด๋ณด๋‚ด๋ฒˆ] Interfaces | Kotlin Kotlin์„ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ์ƒ์†์— ๋Œ€ํ•œ ๋ถ€๋ถ„์„ ๊ณต๋ถ€ํ•˜๊ณ ์ž ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ง์ ‘ ๋ฒˆ์—ญํ–ˆ๋‹ค. ํ•ด๋‹น ๋ฌธ์„œ๋Š” 2022๋…„ 3์›” 3์ผ์ž ๊ณต์‹ ๋ฌธ์„œ์ด๋‹ค. ์ค‘๊ฐ„์ค‘๊ฐ„ ๐Ÿ‘€ ํ‘œ์‹œ๊ฐ€ ์žˆ๋Š” ๋ฌธ์žฅ์ด๋‚˜ ์†Œ์ œ๋ชฉ์€ ๋ฒˆ์—ญ์ด ๋ถ€์ •ํ™•ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ๊ตฌ๊ธ€์ด๋‚˜ ํŒŒํŒŒ๊ณ  ๋ฒˆ์—ญ๊ธฐ์˜ ๋„์›€์„ ๋ฐ›์•˜๋‹ค. Kotlin ๊ณต์‹๋ฌธ์„œ ํ™•์ธํ•˜๊ธฐ โžก๏ธ Interfaces | Kotlin kotlinlang.org โ€ป ์˜์–ด ์ „๊ณต์ž๋„ ํ•ด์™ธ ์œ ํ•™ํŒŒ๋„ ์•„๋‹ˆ๊ธฐ์— ๋ฒˆ์—ญ์—๋Š” ์˜์—ญ, ์˜ค์—ญ, ๊ตฌ๊ธ€ ๋ฒˆ์—ญ์ด ๋ฌด์ˆ˜ํžˆ ๋งŽ์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ํ˜ผ์ž ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฐธ์กฐํ•ด๊ฐ€๋ฉฐ ๋ฒˆ์—ญํ•˜๋‹ค ๋ณด๋‹ˆ ์˜คํƒ€๋„ ๋งŽ์„ ์ˆ˜ ์žˆ๋‹ค. ์ •ํ™•ํ•œ ๋‚ด์šฉ์€ ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ง์ ‘ ์‚ดํŽด๋ณด๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ์ •๋ณด๋“ค์„ ๋” ์ฐพ์•„๋ณด๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค. (ํ•˜์ง€๋งŒ ๋Œ“๊ธ€ ํ”ผ๋“œ๋ฐฑ๋„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค๐Ÿ˜ƒ ) Interfaces in Kotlin can contain declaratio..
[๋‚ด๋ณด๋‚ด๋ฒˆ] Properties | Kotin Kotlin์„ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ์ƒ์†์— ๋Œ€ํ•œ ๋ถ€๋ถ„์„ ๊ณต๋ถ€ํ•˜๊ณ ์ž ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ง์ ‘ ๋ฒˆ์—ญํ–ˆ๋‹ค. ํ•ด๋‹น ๋ฌธ์„œ๋Š” 2022๋…„ 3์›” 3์ผ์ž ๊ณต์‹ ๋ฌธ์„œ์ด๋‹ค. ์ค‘๊ฐ„์ค‘๊ฐ„ ๐Ÿ‘€ ํ‘œ์‹œ๊ฐ€ ์žˆ๋Š” ๋ฌธ์žฅ์ด๋‚˜ ์†Œ์ œ๋ชฉ์€ ๋ฒˆ์—ญ์ด ๋ถ€์ •ํ™•ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ๊ตฌ๊ธ€์ด๋‚˜ ํŒŒํŒŒ๊ณ  ๋ฒˆ์—ญ๊ธฐ์˜ ๋„์›€์„ ๋ฐ›์•˜๋‹ค. Kotlin ๊ณต์‹๋ฌธ์„œ ํ™•์ธํ•˜๊ธฐ โžก๏ธ Properties | Kotlin kotlinlang.org โ€ป ์˜์–ด ์ „๊ณต์ž๋„ ํ•ด์™ธ ์œ ํ•™ํŒŒ๋„ ์•„๋‹ˆ๊ธฐ์— ๋ฒˆ์—ญ์—๋Š” ์˜์—ญ, ์˜ค์—ญ, ๊ตฌ๊ธ€ ๋ฒˆ์—ญ์ด ๋ฌด์ˆ˜ํžˆ ๋งŽ์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ํ˜ผ์ž ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฐธ์กฐํ•ด๊ฐ€๋ฉฐ ๋ฒˆ์—ญํ•˜๋‹ค ๋ณด๋‹ˆ ์˜คํƒ€๋„ ๋งŽ์„ ์ˆ˜ ์žˆ๋‹ค. ์ •ํ™•ํ•œ ๋‚ด์šฉ์€ ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ง์ ‘ ์‚ดํŽด๋ณด๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ์ •๋ณด๋“ค์„ ๋” ์ฐพ์•„๋ณด๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค. (ํ•˜์ง€๋งŒ ๋Œ“๊ธ€ ํ”ผ๋“œ๋ฐฑ๋„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค๐Ÿ˜ƒ ) Declaring properties Properties in Kotlin c..
[๋‚ด๋ณด๋‚ด๋ฒˆ] Classes | Kotlin Kotlin์„ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ์ƒ์†์— ๋Œ€ํ•œ ๋ถ€๋ถ„์„ ๊ณต๋ถ€ํ•˜๊ณ ์ž ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ง์ ‘ ๋ฒˆ์—ญํ–ˆ๋‹ค. ํ•ด๋‹น ๋ฌธ์„œ๋Š” 2022๋…„ 3์›” 3์ผ์ž ๊ณต์‹ ๋ฌธ์„œ์ด๋‹ค. Kotlin ๊ณต์‹๋ฌธ์„œ ํ™•์ธํ•˜๊ธฐ โžก๏ธ Classes | Kotlin kotlinlang.org โ€ป ์˜์–ด ์ „๊ณต์ž๋„ ํ•ด์™ธ ์œ ํ•™ํŒŒ๋„ ์•„๋‹ˆ๊ธฐ์— ๋ฒˆ์—ญ์—๋Š” ์˜์—ญ, ์˜ค์—ญ, ๊ตฌ๊ธ€ ๋ฒˆ์—ญ์ด ๋ฌด์ˆ˜ํžˆ ๋งŽ์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ํ˜ผ์ž ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฐธ์กฐํ•ด๊ฐ€๋ฉฐ ๋ฒˆ์—ญํ•˜๋‹ค ๋ณด๋‹ˆ ์˜คํƒ€๋„ ๋งŽ์„ ์ˆ˜ ์žˆ๋‹ค. ์ •ํ™•ํ•œ ๋‚ด์šฉ์€ ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ง์ ‘ ์‚ดํŽด๋ณด๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ์ •๋ณด๋“ค์„ ๋” ์ฐพ์•„๋ณด๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค. (ํ•˜์ง€๋งŒ ๋Œ“๊ธ€ ํ”ผ๋“œ๋ฐฑ๋„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค๐Ÿ˜ƒ ) Classes in Kotlin are declared using the keyword class: ์ฝ”ํ‹€๋ฆฐ์˜ ํด๋ž˜์Šค๋Š” class ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„ ์–ธ๋œ๋‹ค: class Person { /*.....
[๋‚ด๋ณด๋‚ด๋ฒˆ] Inheritance | Kotlin Kotlin์„ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ์ƒ์†์— ๋Œ€ํ•œ ๋ถ€๋ถ„์„ ๊ณต๋ถ€ํ•˜๊ณ ์ž ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ์ง์ ‘ ๋ฒˆ์—ญํ–ˆ๋‹ค. ํ•ด๋‹น ๋ฌธ์„œ๋Š” 2022๋…„ 3์›” 2์ผ์ž ๊ณต์‹ ๋ฌธ์„œ์ด๋‹ค. Kotlin ๊ณต์‹๋ฌธ์„œ ํ™•์ธํ•˜๊ธฐ โžก๏ธ Inheritance | Kotlin kotlinlang.org โ€ป ์˜์–ด ์ „๊ณต์ž๋„ ํ•ด์™ธ ์œ ํ•™ํŒŒ๋„ ์•„๋‹ˆ๊ธฐ์— ๋ฒˆ์—ญ์—๋Š” ์˜์—ญ, ์˜ค์—ญ, ๊ตฌ๊ธ€ ๋ฒˆ์—ญ์ด ๋ฌด์ˆ˜ํžˆ ๋งŽ์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ํ˜ผ์ž ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฐธ์กฐํ•ด๊ฐ€๋ฉฐ ๋ฒˆ์—ญํ•˜๋‹ค ๋ณด๋‹ˆ ์˜คํƒ€๋„ ๋งŽ์„ ์ˆ˜ ์žˆ๋‹ค. ์ •ํ™•ํ•œ ๋‚ด์šฉ์€ ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ง์ ‘ ์‚ดํŽด๋ณด๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ์ •๋ณด๋“ค์„ ๋” ์ฐพ์•„๋ณด๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค. (ํ•˜์ง€๋งŒ ๋Œ“๊ธ€ ํ”ผ๋“œ๋ฐฑ๋„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค๐Ÿ˜ƒ ) All classes in Kotlin have a common superclass, Any, which is the default superclass for a class with no..