[Electron] Vibeํ•˜๊ฒŒ ์ผ๋ ‰ํŠธ๋ก  ์‹œ์ž‘ํ•˜๊ธฐ
ยท
๐Ÿ–ฅ๏ธdevelop/Frontend
ํ•ญ์ƒ ๋ฐฐ์›Œ๋ณด๊ณ  ์‹ถ์—ˆ๋˜ ํ”„๋ก ํŠธ์—”๋“œ ์Šคํƒ 1์ˆœ์œ„๋Š” electron์ด๋‹ค. PWA๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด PC์—์„œ๋„ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์ฒ˜๋Ÿผ ์ ‘์† ๊ฐ€๋Šฅํ•˜์ง€๋งŒ, ๊ทธ๋ณด๋‹ค๋„ ๋” ๊ทผ๋ณธ์ ์œผ๋กœ "PC ์•ฑ"์ธ ๊ฒƒ์„ ๋งŒ๋“ค์–ด ๋ณด๊ณ  ์‹ถ์—ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. Cursor IDE๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฝ€๋ชจ๋„๋กœ ์•ฑ์„ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ์ผ๋ ‰ํŠธ๋ก ์„ ์ฒดํ—˜ํ•ด๋ณด์•˜๋‹ค.0๏ธโƒฃElectron.js์›น ๊ธฐ์ˆ (HTML, CSS, Javascript)์„ ์‚ฌ์šฉํ•˜์—ฌ ํฌ๋กœ์Šค ํ”Œ๋žซํผ ๋ฐ์Šคํฌํ†ฑ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋Š” ์˜คํ”ˆ ์†Œ์Šค ํ”„๋ ˆ์ž„์›Œํฌ ์ผ๋ ‰ํŠธ๋ก ์˜ ํ•ต์‹ฌ์€ Chromium(Google Chrome ์˜คํ”ˆ ์†Œ์Šค)์™€ Node.js๋ฅผ ํ•˜๋‚˜์˜ ๋Ÿฐํƒ€์ž„์œผ๋กœ ํ†ตํ•ฉํ–ˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. Chromium์€ ์›น ์ฝ˜ํ…์ธ ๋ฅผ ๋ Œ๋”๋งํ•˜๊ณ , Node.js๋Š” ํŒŒ์ผ ์‹œ์Šคํ…œ, ๋„คํŠธ์›Œํฌ ๋“ฑ ์‹œ์Šคํ…œ ๋ฆฌ์†Œ์Šค์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” API๋ฅผ ์ œ๊ณตํ•œ๋‹ค. ์ด ..
[FE] PWA์˜ A to Z
ยท
๐Ÿ–ฅ๏ธdevelop/Frontend
์›น ๊ฐœ๋ฐœ์„ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ์ ์  ๋ชจ๋ฐ”์ผ ์•ฑ ๊ฐœ๋ฐœ์— ํฅ๋ฏธ๋ฅผ ๊ฐ€์ง€๊ฒŒ ๋˜์—ˆ๋‹ค. ์ฃผ๋ ฅ ์Šคํƒ์ด React์—ฌ์„œ React Native๋ฅผ ๊ณต๋ถ€ํ•ด์•ผํ•˜๋‚˜ ๊ณ ๋ฏผํ•˜๋˜ ์ฐจ์—, ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ๊ณผ ์œ ์‚ฌํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๋ฉด์„œ๋„ ์›น ๊ธฐ์ˆ ๋งŒ์œผ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” PWA(Progressive Web App)์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.  ๊ฐœ์ธ์ ์œผ๋กœ ์—ฌ๋Ÿฌ ํ”„๋กœ์ ํŠธ์—์„œ PWA๋ฅผ ์ ์šฉํ•ด๋ณด์•˜์œผ๋ฉฐ, ์ง€๊ธˆ ์ง„ํ–‰์ค‘์ธ ํ•ด์ปคํ†ค์—์„œ๋„ PWA๋ฅผ ์ ์šฉํ•ด๋ณด์•˜๋‹ค. ์ด์ œ๋Š” ์–ด๋–ค ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๋“  PWA๋ถ€ํ„ฐ ์ ์šฉํ•˜๊ณ  ๋ณผ ์ •๋„๋กœ PWA๋ฅผ ์‚ฌ๋ž‘ํ•˜์ง€๋งŒ, ๋ถ€๋„๋Ÿฝ๊ฒŒ๋„ ์ž˜ ์•Œ๊ณ  ์‚ฌ์šฉํ•˜์ง€๋Š” ๋ชปํ–ˆ๋‹ค. ์ผ๋‹จ ์„ค์น˜ ๋ฒ„ํŠผ๋งŒ ๋œจ๋ฉด ๋งŒ์กฑํ•˜๋Š” ์ˆ˜์ค€์ด์—ˆ๋Š”๋ฐ ์ด์ œ๋Š” PWA๋ฅผ ์ ์šฉํ•˜๋Š” ๊ฒƒ์— ๊ทธ์น˜์ง€ ์•Š๊ณ , ๋ณด๋‹ค ๊นŠ์ด ์ดํ•ดํ•˜๊ณ  ํ™œ์šฉํ•˜๊ธฐ ์œ„ํ•ด PWA์˜ ์ „๋ฐ˜์ ์ธ ๊ฐœ๋…๋ถ€ํ„ฐ ํ•ต์‹ฌ ๊ธฐ์ˆ ๊นŒ์ง€ ์ •๋ฆฌํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค. 1. PWA..
[Next.js] ๋กœ๊ทธ์ธ ๋’ค๋กœ๊ฐ€๊ธฐ๋กœ ์ ‘๊ทผ ์ œํ•œํ•˜๊ธฐ-router.push vs router.replace
ยท
๐Ÿ–ฅ๏ธdevelop/Frontend
์ธ๊ณ„๋ฐ›์€ ํ”„๋กœ์ ํŠธ๋ฅผ ํ™•์ธํ•˜๋˜ ์ค‘ ์žฌ๋ฐŒ๋Š” ์ƒํ™ฉ์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค. ๋กœ๊ทธ์ธ ํ›„ ํ™ˆ ํ™”๋ฉด์—์„œ ๋’ค๋กœ๊ฐ€๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด, ๋‹ค์‹œ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋กœ ๋Œ์•„๊ฐ€๋Š” ๋ฌธ์ œ์˜€์Šต๋‹ˆ๋‹ค. ์ƒ๋‹จ์˜ GNB(๊ธ€๋กœ๋ฒŒ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ”)๋ฅผ ๋ณด๋ฉด, ๋กœ๊ทธ์ธ ์ƒํƒœ์ž„์ด ๋ถ„๋ช…ํ•œ๋ฐ, ์ฝ˜ํ…์ธ  ์˜์—ญ์—์„œ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๋ถ€์ž์—ฐ์Šค๋Ÿฌ์šด ์ƒํ™ฉ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ์ƒ๊ฐํ•ด๋ณด๋ฉด, ๋กœ๊ทธ์ธ ์ƒํƒœ์—์„œ๋Š” ๋’ค๋กœ๊ฐ€๊ธฐ๋ฅผ ๋ˆŒ๋Ÿฌ๋„ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๊ฐ€ ํ‘œ์‹œ๋˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ž์—ฐ์Šค๋Ÿฌ์šด ํ๋ฆ„์ผํ…๋ฐ, ์ด ์ƒํ™ฉ์€ UX์™€ ๋ณด์•ˆ ์ธก๋ฉด์—์„œ ์ •์ƒ์ ์ธ ์„œ๋น„์Šค ํ”Œ๋กœ์šฐ๋Š” ์•„๋‹ˆ๋ผ๊ณ  ํŒ๋‹จํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ๋’ค๋กœ๊ฐ€๊ธฐ๋ฅผ ๋ˆŒ๋Ÿฌ๋„ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋กœ ๋Œ์•„๊ฐˆ ์ˆ˜ ์—†๋„๋ก ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€ ์ ‘๊ทผ ์ œํ•œ์„ ๊ตฌํ˜„ํ•˜๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ฒ˜์Œ์—๋Š” ํ† ํฐ ์œ ๋ฌด๋ฅผ ํ™•์ธํ•ด ๋ฆฌ๋‹ค์ด๋ ‰ํŠธ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ์ ‘๊ทผํ–ˆ์Šต๋‹ˆ๋‹ค.์ด์ „ ํ”„๋กœ์ ํŠธ์—์„œ๋„ ์ด๋Ÿฐ ๋ฐฉ์‹์œผ๋กœ ๊ถŒํ•œ ๋ณ„ ์ ‘..
[Three.js] Three.js๋ฅผ ์‹œ์ž‘ํ•ด๋ณด์ž
ยท
๐Ÿ–ฅ๏ธdevelop/Frontend
๊ธ€๋˜๋ฅผ ์‹œ์ž‘ํ•œ ํ›„, ์“ฐ๋ฆฌ์ œ์ด์—์Šคํ•ด๋ณด์ž๋˜ ์†Œ๋ชจ์ž„์— ๊ฐ€์ž…ํ•˜์—ฌ Three.js ์Šคํ„ฐ๋””๋ฅผ ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ์ €๋ฒˆ์ฃผ ์ „์ฒด ์˜จ๋ณด๋”ฉ์— ์ด์–ด ์ด๋ฒˆ์ฃผ ์Šคํ„ฐ๋””์กฐ ์˜คํ”„๋ผ์ธ ๋ชจ์ž„์„ ํ–ˆ๋Š”๋ฐ, 2์ฃผ๊ฐ„์˜ Three.js ์Šคํ„ฐ๋”” ๊ธฐ๋ก์„ ํ•ด๋ณด๋ ค๊ณ ํ•œ๋‹ค.  ์“ฐ๋ฆฌ์ œ์ด์—์Šคํ•ด๋ณด์ž๋˜, ์ฒซ ๋ฒˆ์งธ ์˜คํ”„๋ผ์ธ ๋ชจ์ž„์‚ฌ์‹ค ์“ฐ๋ฆฌ์ œ์ด์—์Šคํ•ด๋ณด์ž๋˜ ์ฒซ ํšŒ์˜๋Š” ์˜จ๋ผ์ธ์œผ๋กœ ์ง„ํ–‰๋˜์—ˆ๋Š”๋ฐ, ๊นœ๋นก ์ž ๋“ค์–ด์„œ ์ฐธ์—ฌํ•˜์ง€ ๋ชปํ–ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ฒซ ๋ฒˆ์งธ ์˜คํ”„๋ผ์ธ ๋ชจ์ž„์€ ๋ฌด์Šจ ์ผ์ด ์žˆ์–ด๋„ ์ฐธ์—ฌํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๊ณ , ์‹œํ—˜ ์ „๋‚ ์ด์ง€๋งŒ ํŠœ๋ง์˜ ์‚ฌ๊ณผ๊นŒ์ง€์˜ ์™•๋ณต 3์‹œ๊ฐ„ ๋ชจํ—˜์„ ๊ฐํ–‰ํ–ˆ๋‹ค. ์˜คํ”„๋ผ์ธ ๋ชจ์ž„์—์„œ๋Š” "Three.js๋ž€ ๋ฌด์—‡์ธ๊ฐ€"์— ๋Œ€ํ•ด์„œ ์Šคํ„ฐ๋””์žฅ๋‹˜๊ป˜์„œ ๋ฐœํ‘œํ•ด์ฃผ์…จ๋‹ค. ๋ฐœํ‘œ์—์„œ ๊ฐ€์žฅ ๊ธฐ์–ต์— ๋‚จ๋Š” ๋‚ด์šฉ์€ CPU์™€ GPU์˜ ์ฐจ์ด์— ๋Œ€ํ•œ ์„ค๋ช…์ด์—ˆ๋‹ค. ์™œ ์ปดํ“จํ„ฐ์—์„œ ๊ทธ๋ž˜ํ”ฝ์„ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•ด GPU๋ฅผ ์จ์•ผ ํ•˜..