๐ŸŒฑ <groot/>
Home | Groot's Tech Blog

์•ˆ๋…•ํ•˜์„ธ์š” ๐ŸŒฑ

์ผ์ƒ์˜ ๋ถˆํŽธ์„ ์ฝ”๋“œ๋กœ ํ‘ธ๋Š” ๊ฐœ๋ฐœ์ž ์œ ์ฐฝํ—Œ์ž…๋‹ˆ๋‹ค

์ผ์ƒ์—์„œ ๋ฌธ์ œ๋ฅผ ๋ฐœ๊ฒฌํ•˜๊ณ  ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ์„œ ์ฆ๊ฑฐ์›€์„ ๋Š๋ผ๋ฉฐ, ์ด๋ฅผ ํ†ตํ•ด ์„ฑ์žฅํ•ฉ๋‹ˆ๋‹ค.
์ง์ ‘ ๋งŒ๋“  ํ”„๋กœ๊ทธ๋žจ๊ณผ, ๋งŒ๋“œ๋Š” ๊ณผ์ •์—์„œ ๋ฐฐ์šด ๊ฒƒ๋“ค์„ ์ด๊ณณ์— ๊ธฐ๋กํ•ด์š”.

๐Ÿ‹JavaScript2โš›๏ธReact3๐ŸŒWeb13

๐Ÿ› ๏ธ ๋งŒ๋“  ๊ฒƒ๋“ค

์ „์ฒด ๋ณด๊ธฐ โ†’
๐Ÿ”Ž

React Code Locator

๋ธŒ๋ผ์šฐ์ €์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ํด๋ฆญํ•˜๋ฉด ์†Œ์Šค ์ฝ”๋“œ ์œ„์น˜๋กœ ๋ฐ”๋กœ ์ด๋™. ๊ฐœ๋ฐœ ์ค‘ '์ด UI๊ฐ€ ๋Œ€์ฒด ์–ด๋Š ํŒŒ์ผ์ด์ง€?'๋ฅผ ์—†์•ค ๋นŒ๋“œ ํ”Œ๋Ÿฌ๊ทธ์ธ.

TypeScriptViteWebpackNext.js ยท Turbopack
๐Ÿ“ฆnpm๐Ÿ™GitHub
๐Ÿ’ฌ

cc-talk

์—ฌ๋Ÿฌ Claude Code ์„ธ์…˜์„ PC ์นด์นด์˜คํ†ก์ฒ˜๋Ÿผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐ์Šคํฌํƒ‘ ์•ฑ. ์„ธ์…˜ ํ•˜๋‚˜ = ์ฑ„ํŒ…๋ฐฉ ํ•˜๋‚˜ = ์ฐฝ ํ•˜๋‚˜.

JavaScriptElectronstream-json
๐Ÿ™GitHub
๐ŸŽต

YouTube Playlist Generator

์˜์ƒ ๋Œ“๊ธ€์˜ ํƒ€์ž„๋ผ์ธ์„ ๋ถ™์—ฌ๋„ฃ์œผ๋ฉด, ์›ํ•˜๋Š” ๊ณก๋งŒ ๊ณจ๋ผ ๋‚ด ์œ ํŠœ๋ธŒ ์žฌ์ƒ๋ชฉ๋ก์œผ๋กœ ์ž๋™ ์ƒ์„ฑ. ์ผ์ผ์ด ๊ฒ€์ƒ‰ยท์ถ”๊ฐ€ํ•˜๋˜ ์ˆ˜๊ณ ๋ฅผ ์—†์•ด์–ด์š”.

TypeScriptReactYouTube API
๐Ÿ”—๋ผ์ด๋ธŒ๐Ÿ™GitHub
๐Ÿ“ˆ

Stock Price Widget

ํƒญ ์ „ํ™˜ ์—†์ด ์–ด๋–ค ์›นํŽ˜์ด์ง€ ์œ„์—๋“  ์‹ค์‹œ๊ฐ„ ์ฃผ์‹ยท์ฝ”์ธ ์‹œ์„ธ๋ฅผ ๋„์šฐ๋Š” ํฌ๋กฌ ํ™•์žฅ. ํด๋ฆญ์€ ์•„๋ž˜ ํŽ˜์ด์ง€๋กœ ๊ทธ๋Œ€๋กœ ํ†ต๊ณผ.

JavaScriptChrome Extension
๐Ÿงฉํฌ๋กฌ ์Šคํ† ์–ด๐Ÿ™GitHub

โœ๏ธ ์ตœ๊ทผ ๊ธ€

์ „์ฒด ๋ณด๊ธฐ โ†’
๐ŸŒ
Web

ํ”„๋ก์‹œ์™€ ๋ฆฌ๋ฒ„์Šค ํ”„๋ก์‹œ โ€” ๋ฐฉํ–ฅ์ด ๋’ค์ง‘ํžˆ๋ฉด ๋ญ๊ฐ€ ๋‹ฌ๋ผ์ง€๋‚˜

ํ„ฐ๋„์„ ๋งŒ๋“ค๋‹ค๊ฐ€ ๊นจ๋‹ฌ์•˜๋‹ค Custom Tunnelโ€ฆ

2026.07.04ยท3๋ถ„ ์ฝ๊ธฐ
๐Ÿ‹
JavaScript

์ฝ”๋“œ๋Š” ์–ด๋–ป๊ฒŒ ํŠธ๋ฆฌ๊ฐ€ ๋˜๋Š”๊ฐ€ โ€” AST์™€ ํŒŒ์‹ฑ, ๊ทธ๋ฆฌ๊ณ  JSXยทTS ํŒŒ์‹ฑํ•˜๊ธฐ

์•ž์„  ๊ธ€์—์„œ ์šฐํด๋ฆญ์œผ๋กœ ์ปดํฌ๋„ŒํŠธ ์†Œ์Šค๋กœ ์ ํ”„ํ•˜๋Š” ๋„๊ตฌ๋ฅผ ๋งŒ๋“  ์ด์•ผ๊ธฐ๋ฅผ ํ–ˆ๋‹ค. ๊ทธ ๋„๊ตฌ์˜ ์‹ฌ์žฅ์€ "์ฝ”๋“œ๋ฅผ ์ฝ์–ด์„œ ์›ํ•˜๋Š” ์œ„์น˜๋ฅผ ์ฐพ์•„๋‚ด๋Š”" ๋ถ€๋ถ„, ์ฆ‰ AST ํŒŒ์‹ฑ์ด๋‹ค. ๋งŒ๋“ค๋ฉด์„œ ASTโ€ฆ

2026.07.02ยท5๋ถ„ ์ฝ๊ธฐ
๐Ÿ‹
JavaScript

๋ฐ˜๋ณต๋ฌธ์—์„œ API ํ˜ธ์ถœํ•˜๊ธฐ โ€” forEach๊ฐ€ ์•ˆ ๋˜๋˜ ์ด์œ , ๊ทธ๋ฆฌ๊ณ  Promise.all์˜ ์˜คํ•ด

YouTube Playlist Generator๋ฅผ ๋งŒ๋“ค ๋•Œ, ๊ณก ๋ชฉ๋ก์„ ์ˆœํšŒํ•˜๋ฉฐ ๊ฐ ๊ณก์„ ๊ฒ€์ƒ‰ํ•˜๊ณ  ์žฌ์ƒ๋ชฉ๋ก์— ๋„ฃ๋Š” ์ฝ”๋“œ๋ฅผ ์งฐ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ forEachโ€ฆ

2026.07.02ยท5๋ถ„ ์ฝ๊ธฐ
โš›๏ธ
React

'์ด ๋ฒ„ํŠผ ๋Œ€์ฒด ์–ด๋Š ํŒŒ์ผ์ด์•ผ?' โ€” ์šฐํด๋ฆญ์œผ๋กœ ์ปดํฌ๋„ŒํŠธ ์†Œ์Šค๋กœ ์ ํ”„ํ•˜๋Š” ๋„๊ตฌ๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค

โ€ฆ

2026.07.02ยท5๋ถ„ ์ฝ๊ธฐ
โš›๏ธ
React

์œ ํŠœ๋ธŒ ๋Œ“๊ธ€์˜ ํƒ€์ž„๋ผ์ธ์„ ๋‚ด ์žฌ์ƒ๋ชฉ๋ก์œผ๋กœ โ€” ์†์œผ๋กœ ํ•˜๋˜ ๊ฑธ ์ž๋™ํ™”ํ–ˆ๋‹ค

๋…ธ๋ž˜๋Š” ์ข‹์€๋ฐ, ๋ช‡ ๊ณก์ด ๊ฑธ๋ฆฐ๋‹ค ์œ ํŠœ๋ธŒ์—์„œ "Lo-fiโ€ฆ

2026.07.02ยท4๋ถ„ ์ฝ๊ธฐ
๐ŸŒ
Web

AI๊ฐ€ '์ด ๋ฒ„ํŠผ ๊ณ ์ณ์ค˜'๋ฅผ ์•Œ์•„๋“ฃ๊ฒŒ ํ•˜๊ธฐ โ€” ์ฝ”๋“œ ๋กœ์ผ€์ดํ„ฐ๋ฅผ MCP๋กœ ์—ด๋‹ค

react-code-locator ์‹œ๋ฆฌ์ฆˆ์˜ ๋งˆ์ง€๋ง‰ ๊ธ€. ์ง€๊ธˆ๊นŒ์ง€๋Š” ์‚ฌ๋žŒ์ด ํ™”๋ฉด์—์„œ ์šฐํด๋ฆญํ•ด ์†Œ์Šค๋กœ ์ ํ”„ํ•˜๋Š” ์ด์•ผ๊ธฐ์˜€๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์š”์ฆ˜์€ ์ฝ”๋“œ๋ฅผ ๊ณ ์น˜๋Š” ์ฃผ์ฒด๊ฐ€ ์‚ฌ๋žŒ๋งŒ์ด ์•„๋‹ˆ๋‹ค. AIโ€ฆ

2026.07.02ยท5๋ถ„ ์ฝ๊ธฐ
๐ŸŒ
Web

ngrok์„ ์ง์ ‘ ๋งŒ๋“ค์—ˆ๋‹ค โ€” ๋กœ์ปฌ ์„œ๋ฒ„๋ฅผ ๊ณต๊ฐœ URL๋กœ ์—ฌ๋Š” VSCode ํ™•์žฅ

"์ง€๊ธˆ ๋กœ์ปฌ์—์„œ ๋„๋Š” ๊ฑฐ, ํฐ์œผ๋กœ ์ข€ ๋ณผ ์ˆ˜ ์žˆ์„๊นŒ?" ๊ฐœ๋ฐœํ•˜๋‹ค ๋ณด๋ฉด ์ž์ฃผ ๊ฒช๋Š”๋‹ค. ๋กœ์ปฌ(localhost:300โ€ฆ

2026.07.02ยท2๋ถ„ ์ฝ๊ธฐ
๐ŸŒ
Web

ํด๋ฆญ์€ ํ†ต๊ณผ์‹œํ‚ค๊ณ , ๊ธ€์”จ์ƒ‰์€ ๋ฐฐ๊ฒฝ์— ๋งž์ถ”๊ธฐ โ€” ์˜ค๋ฒ„๋ ˆ์ด ์œ„์ ฏ์˜ ๋‘ ๊ฐ€์ง€ ํŠธ๋ฆญ

์‹œ์„ธ ์œ„์ ฏ ํ™•์žฅ์€ "์•„๋ฌด ์›นํŽ˜์ด์ง€ ์œ„์—" ๋–  ์žˆ์–ด์•ผ ํ•œ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋‚จ์˜ ํŽ˜์ด์ง€ ์œ„์— ๋ญ˜ ๋ฎ์œผ๋ฉด ๋‘ ๊ฐ€์ง€ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธด๋‹ค. (1) ์œ„์ ฏ์ด ์•„๋ž˜ ํŽ˜์ด์ง€์˜ ํด๋ฆญ์„ ๊ฐ€๋กœ๋ง‰๊ณ , (โ€ฆ

2026.07.02ยท3๋ถ„ ์ฝ๊ธฐ
โš›๏ธ
React

React Fiber ํŒŒํ—ค์น˜๊ธฐ โ€” DOM ์š”์†Œ์—์„œ ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ๋กœ ๊ฑฐ์Šฌ๋Ÿฌ ์˜ฌ๋ผ๊ฐ€๊ธฐ

์šฐํด๋ฆญ์œผ๋กœ ์ปดํฌ๋„ŒํŠธ ์†Œ์Šค๋กœ ์ ํ”„ํ•˜๋Š” ๋„๊ตฌ๋ฅผ ๋งŒ๋“ค ๋•Œ, ๋Ÿฐํƒ€์ž„์˜ ํ•ต์‹ฌ ์งˆ๋ฌธ์€ ์ด๊ฑฐ์˜€๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ํด๋ฆญํ•œ ์ด DOM ์š”์†Œ๊ฐ€, ๋Œ€์ฒด ์–ด๋Š Reactโ€ฆ

2026.07.02ยท4๋ถ„ ์ฝ๊ธฐ
ยฉ 2026 ยท Groot's Tech Blog. Built with Gatsby ๐ŸŒฑ