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

BIGMAP DRAFTS๐Ÿคฟ11

ํด๋ผ์ด์–ธํŠธ ๋นŒ๋“œ 1. ํด๋ผ์ด์–ธํŠธ ๋นŒ๋“œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํด๋ผ์ด์–ธํŠธ ์ธก ์ฝ”๋“œ(HTML, CSS, JavaScript ๋“ฑ)๋ฅผ ์ค€๋น„ํ•˜๋Š” ๊ณผ์ •์ด๋‹ค. ์†Œ์Šค ์ฝ”๋“œ์˜ ์ปดํŒŒ์ผ, ๋ฒˆ๋“ค๋ง, ๋ณ€ํ™˜, ์ตœ์ ํ™”, ํ…Œ์ŠคํŠธ, ๋ฐฐํฌ ๋“ฑ์„ ํฌํ•จํ•œ๋‹ค. ์ด ๋•Œ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์ธ ์›น ์•ฑ์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋„๋ก ์—ฌ๋Ÿฌ ๊ธฐ์ˆ ์ด ์ ์šฉ๋œ๋‹ค. 2. ๋นŒ๋“œ ๊ณผ์ •(w/Babel&Webpack) ์ปดํŒŒ์ผ(Compilation): Sass โžœ CSS, TypeScript โžœ JavaScript, ES6+ โžœ ES5 ์ดํ•˜(transpiling). ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ๊ธฐ๊ณ„์–ด๋กœ ๋ณ€ํ™˜. ๋ฒˆ๋“ค๋ง(Bundling): ๋ชจ๋“  ์ฝ”๋“œ, ์ž์› ๋ฐ ์˜์กด์„ฑ์„ ํ•˜๋‚˜์˜ ๋ฒˆ๋“ค๋กœ ๊ฒฐํ•ฉํ•˜๋Š” ์ž‘์—…. ์ž‘๊ฒŒ ๋ถ„ํ• ๋œ ์ฝ”๋“œ ๋ชจ๋“ˆ(code splitting)๊ณผ ์ž์›๋“ค๋กœ ์ง„์ž…์ (entry point)์„ ๊ธฐ์ค€์œผ๋กœ ํ•œ ์˜์กด์„ฑ .. 2024. 4. 3.
๋กœ๊ทธ์ธ ๋ณดํ˜ธ๋˜์–ด ์žˆ๋Š” ๊ธ€ ์ž…๋‹ˆ๋‹ค. 2024. 4. 3.
ํด๋ฆฐ์ฝ”๋“œ ๋ณดํ˜ธ๋˜์–ด ์žˆ๋Š” ๊ธ€ ์ž…๋‹ˆ๋‹ค. 2024. 4. 3.
์• ์ž์ผ ๋ณดํ˜ธ๋˜์–ด ์žˆ๋Š” ๊ธ€ ์ž…๋‹ˆ๋‹ค. 2024. 4. 3.
tanstack-query v5 MAP Tanstack-query ์„œ๋ฒ„์—์„œ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ฐ์ดํ„ฐ์˜ ์ƒํƒœ(๋กœ๋”ฉ, ์„ฑ๊ณต, ์—๋Ÿฌ)๋ฅผ ํด๋ผ์ด์–ธํŠธ์—์„œ ๊ด€๋ฆฌํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ. DB๋‚˜ ์—ฌํƒ€ ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋ฉด์„œ fetch, cache, sync, ๋ฐ์ดํ„ฐ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๊ธฐ๋Šฅ ์ œ๊ณต ์ฟผ๋ฆฌ(query): ๋ฐ์ดํ„ฐ ์š”์ฒญ ๋ช…๋ น, ์ผ๋ฐ˜์ ์œผ๋กœ ๋ฌธ์ž์—ด(string) ํ˜•์‹์˜ ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•จ. ์ฟผ๋ฆฌ๋ฅผ ์‹คํ–‰(ํ™œ์„ฑํ™”)ํ•˜์—ฌ DB, API ๋“ฑ์— ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญ. ๋ฐ์ดํ„ฐ ์š”์ฒญ ๋ฐฉ์‹, ๋ฐ์ดํ„ฐ ํ˜•ํƒœ, ํ•„ํ„ฐ๋ง ์กฐ๊ฑด ๋“ฑ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Œ. Tanstack-query๋Š” ๋ฐ์ดํ„ฐ ํŽ˜์นญ ๊ณผ์ •์—์„œ ์บ์‹ฑ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ํšจ์œจ์„ฑ์„ ๋†’์ž„. ์บ์‹ฑ(caching) ๋„คํŠธ์›Œํฌ ํšจ์œจ์„ฑ ํ–ฅ์ƒ: ์ด๋ฏธ ์š”์ฒญํ•ด์„œ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋Š” ์บ์‹œ์— ์ €์žฅ๋จ. ๋™์ผํ•œ ์š”์ฒญ์ด ๋ฐœ์ƒํ•˜๋ฉด ์บ์‹ฑ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ”๋กœ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ์Œ. ์žฌ์š”์ฒญ์ด ์—†์œผ๋ฏ€๋กœ ๋น .. 2024. 3. 29.