๐ŸŒ• Front ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ

ํ•ด๋‹น ๊ธ€ 62๊ฑด

Next.js ์•ฑ์—์„œ ์„œ๋ฒ„ ์‹œ์ž‘ ์‹œ์ ์— ๋”ฑ ํ•œ ๋ฒˆ๋งŒ ์‹คํ–‰๋˜๋Š” ์ดˆ๊ธฐํ™” ๋กœ์ง์ด ํ•„์š”ํ–ˆ๋‹ค. ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์—ฐ๊ฒฐ, ์บ์‹œ ์„ค์ •, ์™ธ๋ถ€ ์„œ๋น„์Šค ์—ฐ๊ฒฐ ๊ฐ™์€ ๊ฒƒ๋“ค ๋ง์ด๋‹ค. ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋ณด๋‹ˆ instrumentation.ts ํŒŒ์ผ์„ ๋งŒ๋“ค๋ฉด ์•ฑ ์‹œ์ž‘ ์‹œ์ ์— ํ•œ ๋ฒˆ ๋Œ์•„๊ฐ€๋Š” ๊ธฐ๋Šฅ์ด ์žˆ์—ˆ๊ณ  register ํ•จ์ˆ˜๋ฅผ exportํ•˜๋ฉด ๋œ๋‹ค๊ณ  ๋‚˜์™€์žˆ์—ˆ๋‹ค.// instrumentation.tsexport async function register() { console.log('์„œ๋ฒ„ ์ดˆ๊ธฐํ™” ์ค‘...'); // ์ดˆ๊ธฐํ™” ๋กœ์ง}๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ๋Š” ์ž˜ ๋˜๋”๋ผ. npm run dev ํ•˜๋ฉด ์ฝ˜์†”์— ๋กœ๊ทธ๋„ ์ž˜ ์ฐํžˆ๊ณ , ์ดˆ๊ธฐํ™”๋„ ์ •์ƒ์ ์œผ๋กœ ์‹คํ–‰๋๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ํ”„๋กœ๋•์…˜ ๋นŒ๋“œ ํ›„ ์‹คํ–‰ํ•˜๋‹ˆ๊นŒ ์•„๋ฌด๊ฒƒ๋„ ์•ˆ ๋œ๋‹ค. npm run buildnpm start์ฝ˜์†”์— ..

Currency ์•ฑ์— ์ƒˆ๋กœ ๋‚˜์˜จ Tailwind v4๋ฅผ ์ ์šฉํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋‹ค. ๊ธฐ์กด ์•ฑ๋“ค์€ v3๋ฅผ ์“ฐ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ, "๊ฐ๊ฐ ๋”ฐ๋กœ ๋นŒ๋“œํ•˜๋‹ˆ๊นŒ ์ƒ๊ด€์—†๊ฒ ์ง€"๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๋˜ ๊ฒŒ ์ฐฉ๊ฐ์ด์—ˆ๋‹ค. PostCSS ์„ค์ •์ด ์ถฉ๋Œํ•˜๋ฉด์„œ ๋นŒ๋“œ๊ฐ€ ๋ง๊ฐ€์ง€๊ธฐ ์‹œ์ž‘ํ–ˆ๊ณ , ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๋‹ค ๋ณด๋‹ˆ ๊ฒฐ๊ตญ ์ „์ฒด monorepo ๊ตฌ์กฐ๋ฅผ ๋œฏ์–ด๊ณ ์น˜๊ฒŒ ๋๋‹ค. ์ผ๋‹จ Tailwind v4 ์ ์šฉํ–ˆ๋˜ ๊ฒƒTailwind v4์˜ ์ƒˆ๋กœ์šด CSS ์—”์ง„์ด ๊ถ๊ธˆํ•ด์„œ Currency ์•ฑ์— ์ ์šฉํ•œ ์ฝ”๋“œ๋‹ค. ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๋ณด๋‹ˆ ์„ค์ • ๋ฐฉ๋ฒ•์ด ๊ฝค ๋‹ฌ๋ผ์ ธ ์žˆ์—ˆ๋‹ค.// apps/currency/vite.config.tsimport tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwin..

1. JavaScript Runtime ๊ตฌ์„ฑ ์š”์†Œ๋ธŒ๋ผ์šฐ์ € ๋‚ด์˜ JavaScript *๋Ÿฐํƒ€์ž„์€ ํฌ๊ฒŒ JavaScript ์—”์ง„๊ณผ ์›น API๋กœ ๊ตฌ์„ฑ๋˜์–ด์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์—ฌ๊ธฐ์— ํ…Œ์Šคํฌ ํ์™€ ์ด๋ฒคํŠธ ๋ฃจํ”„๋ผ๋Š” ๊ฐœ๋… ๋˜ํ•œ ์กด์žฌํ•œ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์‹ฑ๊ธ€ ์“ฐ๋ ˆ๋“œ ๊ธฐ๋ฐ˜์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋ผ ๋ถˆ๋ฆฌ๋Š” JavaScript๋„ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰์‹œํ‚ฌ ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. *๋Ÿฐํƒ€์ž„: ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋กœ ์ž‘์„ฑ๋œ ์ฝ”๋“œ๊ฐ€ ๊ตฌ๋™๋˜๋Š” ํ™˜๊ฒฝ 2. JavaScript ์—”์ง„JavaScript ์ฝ”๋“œ๋ฅผ ์ฝ๊ณ , ํ•ด์„, ์‹คํ–‰์„ ๋‹ด๋‹นํ•˜๋Š” ์ธํ„ฐํ”„๋ฆฌํ„ฐ์ด๋‹ค. ์“ฐ๋ ˆ๋“œ ํ•˜๋‚˜๋กœ๋งŒ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์Šคํƒ ์˜์—ญ๋„ ๋‹จ ํ•˜๋‚˜๋งŒ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ๋‹ค. ์ด๋กœ ์ธํ•ด ํ•˜๋‚˜์˜ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰์ด ๋๋‚˜๊ธฐ ์ „์—๋Š” ๋‹ค๋ฅธ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋  ์ˆ˜ ์—†๋Š” "Run to Completion" ํŠน์„ฑ์„ ๊ฐ€์ง€๊ฒŒ ๋œ๋‹ค.JavaScr..

๋Œ€์ „์ œthis๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ๊ฒฐ์ •๋œ๋‹ค.ํ•จ์ˆ˜๋ฅผ ํ•จ์ˆ˜๋กœ์„œ ํ˜ธ์ถœํ•  ๊ฒฝ์šฐ์—๋Š” this๊ฐ€ ์ง€์ •๋˜์ง€ ์•Š๋Š”๋‹ค.this์—๋Š” ํ˜ธ์ถœํ•œ ์ฃผ์ฒด์— ๋Œ€ํ•œ ์ •๋ณด๊ฐ€ ๋‹ด๊ธด๋‹ค. ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ํ™œ์„ฑํ™”ํ•  ๋‹น์‹œ์— this๊ฐ€ ์ง€์ •๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ this๋Š” ์ „์—ญ ๊ฐ์ฒด๋ฅผ ๋ฐ”๋ผ๋ณธ๋‹ค.function func1() { console.log(this);}obj ={ func1:func1,}func1(); // Windowobj.func1() // obj ๋ฉ”์„œ๋“œ๋Š” ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ๋กœ์„œ ํ˜ธ์ถœํ•  ๊ฒฝ์šฐ์—๋งŒ ๋ฉ”์„œ๋“œ๋กœ ๋™์ž‘ํ•˜๊ณ , ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ํ•จ์ˆ˜๋กœ ๋™์ž‘ํ•œ๋‹ค.this ๋ฐ”์ธ๋”ฉ์— ๊ด€ํ•ด์„œ๋Š” ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋‹น์‹œ์˜ ์ฃผ๋ณ€ ํ™˜๊ฒฝ(๋ฉ”์„œ๋“œ ๋‚ด๋ถ€์ธ์ง€, ํ•จ์ˆ˜ ๋‚ด๋ถ€์ธ์ง€)๋Š” ์ค‘์š”ํ•˜์ง€ ์•Š๋‹ค.์˜ค์ง ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๋Œ€์ƒ, ์•ž์— ์  ๋˜๋Š” ๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๊ฐ€ ์žˆ๋Š”์ง€ ์—†๋Š”์ง€๊ฐ€ ๊ด€๊ฑด..

CDN ์ด๋ž€? (Contents Delivery Network) - ์ง€๋ฆฌ์ , ๋ฌผ๋ฆฌ์ ์œผ๋กœ ๋–จ์–ด์ ธ์žˆ๋Š” ์‚ฌ์šฉ์ž์—๊ฒŒ ์ปจํ…์ธ  ์ œ๊ณต์ž์˜ ์ปจํ…์ธ ๋ฅผ ๋” ๋น ๋ฅด๊ฒŒ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ์ˆ  - "์„ธ๊ณ„์— ๋„๋ฆฌ ํผ์ง„ ์ค‘๊ณ„์„œ๋ฒ„๋“ค์˜ ์ง‘ํ•ฉ" - ๋Œ€์šฉ๋Ÿ‰ ๋˜๋Š” ์‚ฌ์šฉ์ž์˜ ์žฆ์€ ์š”์ฒญ์ด ์žˆ๋Š” ์ปจํ…์ธ ๋“ค์„ Cache ์„œ๋ฒ„์— ๋ถ„์‚ฐ ๋ฐฐ์น˜ํ•˜์—ฌ ์ปจํ…์ธ ์˜ ์ „์†ก ์ค‘ ๋ฐœ์ƒํ•˜๋Š” ํŠธ๋ž˜ํ”ฝ ์ง‘์ค‘ & ๋ณ‘๋ชฉํ˜„์ƒ ๋ฐ ๋ฐ์ดํ„ฐ ์†์‹ค์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋“ฑ์žฅํ•œ ์ปจํ…์ธ  ์ „์†ก ๊ธฐ์ˆ  - CDN์€ ์„œ๋ฒ„์™€ ์‚ฌ์šฉ์ž ์‚ฌ์ด์˜ ๋ฌผ๋ฆฌ์ ์ธ ๊ฑฐ๋ฆฌ๋ฅผ ์ค„์—ฌ ์ฝ˜ํ…์ธ  ๋กœ๋”ฉ์— ์†Œ์š”๋˜๋Š” ์‹œ๊ฐ„์„ ์ตœ์†Œํ™”ํ•œ๋‹ค. CDN์€ ๊ฐ ์ง€์—ญ์— ์บ์‹œ ์„œ๋ฒ„(PoP, Points of presence)๋ฅผ ๋ถ„์‚ฐ ๋ฐฐ์น˜ํ•ด, ๊ทผ์ ‘ํ•œ ์‚ฌ์šฉ์ž์˜ ์š”์ฒญ์— ์›๋ณธ ์„œ๋ฒ„๊ฐ€ ์•„๋‹Œ ์บ์‹œ ์„œ๋ฒ„๊ฐ€ ์ฝ˜ํ…์ธ ๋ฅผ ์ „๋‹ฌํ•œ๋‹ค. CDN์ด ํ•„์š”ํ•œ ์ด์œ  S3 ์™€ ๊ฐ™์€ "์ผ๋ฐ˜์ ์ธ..

1. ๋งˆ์ง„ ์ƒ์‡„๋ž€? Block ์š”์†Œ๋“ค์˜ ์ƒํ•˜ ๋งˆ์ง„์ด ๊ฒน์น  ๋•Œ, ํ•œ ์ชฝ์˜ ๋งˆ์ง„ ๊ฐ’๋งŒ ์ ์šฉํ•˜๋Š” ๋ Œ๋”๋ง ๊ทœ์น™ 2. ๋งˆ์ง„ ์ƒ์‡„๊ฐ€ ์ผ์–ด๋‚˜๋Š” 3๊ฐ€์ง€ ์ƒํ™ฉ 1) ์ธ์ ‘ ํ˜•์ œ๊ฐ„ ๊ฒน์นจ ๋งˆ์ง„์ด ๋” ํฐ ๊ฐ’ (≥) ์œผ๋กœ ๋žœ๋”๋ง์ด ์ผ์–ด๋‚œ๋‹ค. 2) ๋นˆ ์š”์†Œ์˜ ์ƒํ•˜ ๋งˆ์ง„๊ฐ„ ๊ฒธ์นจ ๋นˆ ์š”์†Œ๋ž€? block ์š”์†Œ์˜ height์ด 0์ธ ๊ฒฝ์šฐ๋ฅผ ๋งํ•จ height, padding, border ์ƒํ•˜๋กœ ๋Š˜์–ด๋‚˜๋Š” ํ”„๋กœํผํ‹ฐ ๊ฐ’์ด ์—†๋Š” ๊ฒฝ์šฐ ๋‚ด๋ถ€์— inline ์ปจํ…์ธ ๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ ๋นˆ ์š”์†Œ + ์ธ์ ‘ ๋ฐ•์Šค๋“ค ๊ฐ„์— ๋งˆ์ง„ ๊ฒน์นจ์ด ์—ฐ์‡„์ ์œผ๋กœ ์ผ์–ด๋‚˜๋Š” ๊ฒฝ์šฐ, ์ƒ์‡„๊ฐ€ ์—ฌ๋Ÿฌ๋ฒˆ ์ผ์–ด๋‚œ๋‹ค. ๋งˆํฌ์—…์„ ์ง„ํ–‰ํ•  ๋•Œ, ๋นˆ ์š”์†Œ๋ฅผ ๋งŒ๋“ค์–ด๋†“๋Š” ์ƒํ™ฉ์ด ์žˆ์œผ๋‹ˆ ๊ผญ ์ธ์ง€ํ•ด๋‘์ž. ๋น ๋ฅธ ๋ ˆ์ด์•„์›ƒ ๊ตฌ์„ฑ์„ ์œ„ํ•ด, div๋กœ ์˜์—ญ์„ ๊ตฌ๋ถ„ํ•  ๊ฒฝ์šฐ ๋‚˜์ค‘์— append ํ•˜๊ธฐ ์œ„ํ•ด ๋นˆ ์ปจํ…Œ์ด๋„ˆ๋ฅผ ๋งŒ๋“ค์–ด..

๐ŸŒ• Front/โœจ CSS 2022. 4. 19. 09:58

1. ์–ด๋–ค ๋ณด์•ˆ ์œ„ํ—˜์ด ์žˆ๋‹ค๋Š” ๊ฑฐ์ง€? ์ฒซ ์งธ: ๊ฐœ์ธ์ •๋ณด๊ฐ€ ๋‹ด๊ธด ์ •๋ณด๋ฅผ ์„œ๋ฒ„๋กœ ๋ณด๋‚ผ ๋•Œ, ์–ด๋–ค ๋†ˆ์ด ๊ฐˆ์ทจํ•ด๊ฐˆ ์ˆ˜ ์žˆ์Œ ๋‘˜ ์งธ: ํ”ผ์‹ฑ ์‚ฌ์ดํŠธ์— ์ ‘์†ํ•ด ๊ฐœ์ธ ์ •๋ณด๋ฅผ ๊ฐˆ์ทจํ•ด๊ฐˆ ์ˆ˜ ์žˆ์Œ HTTPS๋Š” ์‚ฌ์ดํŠธ์— ๋ณด๋‚ด๋Š” ์ •๋ณด๋ฅผ ์ œ 3์ž๊ฐ€ ๋ณด์ง€ ๋ชปํ•˜๊ฒŒ ํ•˜๋ฉฐ, ์ ‘์†ํ•œ ์‚ฌ์ดํŠธ๊ฐ€ ๋ฏฟ์„ ๋งŒํ•œ ์‚ฌ์ดํŠธ์ธ์ง€ ์•Œ๋ ค์ค€๋‹ค. 2. HTTPS๋ฅผ ์ดํ•ดํ•˜๋ ค๋ฉด 1) ๋Œ€์นญํ‚ค ๋ฐฉ์‹: ์•”ํ˜ธํ™”์— ์“ฐ์ด๋Š” ํ‚ค์™€ ๋ณตํ˜ธํ™”์— ์“ฐ์ด๋Š” ํ‚ค๊ฐ€ ๋™์ผํ•œ ๊ธฐ๋ฒ• ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๊ฐ€ ๋Œ€์นญํ‚ค ๋ฐฉ์‹์œผ๋กœ ํ†ต์‹ ์„ ํ•œ๋‹ค๋ฉด ํด๋ผ์ด์–ธํŠธ, ์„œ๋ฒ„ ๋ชจ๋‘ ํ‚ค๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์•ผํ•œ๋‹ค. ํ•˜์ง€๋งŒ ์• ์ดˆ์— ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ํ‚ค๋ฅผ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ ์ž์ฒด๋„ ์œ„ํ—˜ํ•˜๋ฉฐ, ๋˜ํ•œ ํด๋ผ์ด์–ธํŠธ์˜ ์Šค์ฝ”๋“œ๋Š” ๋ˆ„๊ตฌ๋“ ์ง€ ์—ด์–ด๋ณผ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ๋„ ๊ต‰์žฅํžˆ ์œ„ํ—˜ํ•˜๋‹ค. ์ฆ‰, ์›๊ฑฐ๋ฆฌ์—์„œ ๋Œ€์นญํ‚ค๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ์–ด๋ ต๋‹ค. 2)..

1. Domain ๋„คํŠธ์›Œํฌ ํ†ต์‹ ์—๋Š” ๊ณ ์œ ์˜ ์ฃผ์†Œ(IP ์ฃผ์†Œ)๊ฐ€ ํ•„์š”ํ•˜๋‹ค. ์ด๋•Œ IP๋Š” ์‚ฌ๋žŒ์ด ์ดํ•ดํ•˜๊ณ  ๊ธฐ์–ตํ•˜๊ธฐ ์–ด๋ ต๊ธฐ ๋•Œ๋ฌธ์—, ๊ฐ ip์— ์ด๋ฆ„์„ ๋ถ€์—ฌํ–ˆ๊ณ  ์ด๋ฅผ ๋„๋ฉ”์ธ์ด๋ผ๊ณ  ํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด 142.250.207.14์˜ ๋„๋ฉ”์ธ์€ google.com์ด๋‹ค. 2. DNS (Domain Name System) DNS๋Š” ๋„๋ฉ”์ธ์„ ์ž…๋ ฅํ•˜๋ฉด IP ์ฃผ์†Œ๋ฅผ ๋ณ€ํ™˜ํ•ด์ค€๋‹ค. ์ •ํ™•ํžˆ๋Š”, ์ธํ„ฐ๋„ท ๋„๋ฉ”์ธ ์ฃผ์†Œ ์ฒด๊ณ„๋กœ TCP/IP์˜ ์‘์šฉ ๊ณ„์ธต์—์„œ, www.example.com๊ณผ ๊ฐ™์€ ์ฃผ ์ปดํ“จํ„ฐ์˜ ๋„๋ฉ”์ธ ์ด๋ฆ„์„ 192.168.1.0๊ณผ ๊ฐ™์€ IP ์ฃผ์†Œ๋กœ ๋ณ€ํ™˜ํ•˜๊ณ , ๋ผ์šฐํŒ… ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋ถ„์‚ฐํ˜• ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์‹œ์Šคํ…œ์ด๋‹ค. ์‰ฝ๊ฒŒ ๋งํ•ด, ๋„๋ฉ”์ธ์— ์—ฐ๊ฒฐ๋œ ์„œ๋ฒ„์˜ ์ฃผ์†Œ๋ฅผ ์ฐพ์•„์ฃผ๋Š” ์—ญํ• ์„ ํ•˜๋ฉฐ ๋„๋ฉ”์ธ ์„œ๋ฒ„, ๋„ค์ž„ ์„œ๋ฒ„๋ผ๊ณ ๋„ ๋ถˆ๋ฆฐ๋‹ค. 3. DNS ์„œ๋ฒ„..

AJAX๋ž€? JavaScript๋ฅผ ์ด์šฉํ•œ ๋น„๋™๊ธฐ ํ†ต์‹  ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๊ฐ„์— XML, JSON ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ๊ธฐ์ˆ ์ด๋‹ค. AJAX๋Š” ๊ธฐ์ˆ  ์ž์ฒด๋ฅผ ๋œปํ•˜๊ธฐ ๋ณด๋‹จ, HTML, XHTML, CSS, JavaScript, DOM, XML, XSLT, XMLHttpRequest ์˜ค๋ธŒ์ ํŠธ๋“ค์ด ์กฐํ•ฉํ•œ ๊ธฐ์ˆ ์˜ ์ด์นญ์„ ์ผ์ปซ๋Š”๋‹ค. XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•ด์„œ, ํŽ˜์ด์ง€ ์ƒˆ๋กœ๊ณ ์นจ ์—†์ด ํŽ˜์ด์ง€์˜ ์ผ๋ถ€๋งŒ์„ ์œ„ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋“œํ•˜๋Š” ๊ธฐ๋ฒ•์ด๋‹ค. AJAX(Asynchronous JavaScript and XML)์˜ X๋Š” XML์„ ๋œปํ•˜์ง€๋งŒ, JSON์ด ๋” ๊ฐ€๋ณ๊ณ , ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์˜ค๋ธŒ์ ํŠธ๋กœ ์‰ฝ๊ฒŒ ๋ณ€ํ™˜๋œ๋‹ค๋Š” ์  ๋•Œ๋ฌธ์— XML ๋ณด๋‹ค ๋งŽ์ด ์‚ฌ์šฉ๋œ๋‹ค. AJAX๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  ํ™”๋ฉด์—์„œ ๋ฌด์–ธ๊ฐ€ ๋ถ€๋ฅด๊ฑฐ๋‚˜ ๋ฐ์ดํ„ฐ๋ฅผ ์กฐํšŒํ•˜๊ณ  ์‹ถ์„ ๊ฒฝ์šฐ, ํŽ˜..

ํ˜ธ์ด์ŠคํŒ…(hoisting) ์ธํ„ฐํ”„๋ฆฌํ„ฐ๊ฐ€ ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜์˜ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ์„ ์–ธ ์ „์— ๋ฏธ๋ฆฌ ํ• ๋‹นํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค. var๋กœ ์„ ์–ธํ•œ ๋ณ€์ˆ˜์˜ ๊ฒฝ์šฐ ํ˜ธ์ด์ŠคํŒ… ์‹œ undefined๋กœ ๋ณ€์ˆ˜๋ฅผ ์ดˆ๊ธฐํ™”ํ•œ๋‹ค. ๋ฐ˜๋ฉด let๊ณผ const๋กœ ์„ ์–ธํ•œ ๋ณ€์ˆ˜์˜ ๊ฒฝ์šฐ ํ˜ธ์ด์ŠคํŒ… ์‹œ ๋ณ€์ˆ˜๋ฅผ ์ดˆ๊ธฐํ™”ํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋”ฐ๋ผ์„œ var๋กœ ์„ ์–ธํ•  ์‹œ ์ดˆ๊ธฐํ™” ๊ฐ’, undefined๊ฐ€ ๋‚˜์˜ค๋Š” ๊ฒƒ๊ณผ ๋‹ค๋ฅด๊ฒŒ, const์™€ let์€ ์ดˆ๊ธฐํ™” ๊ฐ’์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ์˜ค๋ฅ˜๋ฅผ ์ถœ๋ ฅํ•œ๋‹ค. Temporal Dead Zone ๋ณ€์ˆ˜๊ฐ€ ํ˜„์žฌ ์Šค์ฝ”ํ”„ ๋‚ด์—์„œ ์„ ์–ธ๋์ง€๋งŒ, ์•„์ง ์ดˆ๊ธฐํ™”๋˜์ง€ ์•Š์€ ์ƒํƒœ๋ฅผ ๋งํ•œ๋‹ค. let ๋˜๋Š” const ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ–ˆ์„ ๋•Œ ๋‚˜์˜ค๋Š” ๊ฐœ๋…. TDZ๋Š” ๋ณ€์ˆ˜๊ฐ€ ์„ ์–ธ๋œ ์ง€์ ๋ถ€ํ„ฐ ์ดˆ๊ธฐํ™”๋˜๊ธฐ ์ „๊นŒ์ง€, ํ•ด๋‹น ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ฒŒ ํ•œ๋‹ค. TDZ์— ๋น ์ง„ ์˜ˆ์‹œ..

123.123.toFixed(2) // 123.12 "hello".charAt(4) // 'o' ๋ž˜ํผ ๊ฐ์ฒด๋Š”์›์‹œ๊ฐ’(๋ฌธ์ž์—ด, ์ˆซ์ž ๋“ฑ)์„ ๋งˆ์น˜ ๊ฐ์ฒด์ฒ˜๋Ÿผ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ฒŒ ํ•˜์—ฌ, ์›์‹œ๊ฐ’์—์„œ๋„ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ž˜ํผ ๊ฐ์ฒด ๋ณ€ํ™˜ ๊ณผ์ • 1. ์›์‹œํƒ€์ž…์— ํ•ด๋‹นํ•˜๋Š” ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค. 2. ์ด ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค. 3. ๋ฉ”์„œ๋“œ ์ฒ˜๋ฆฌ ํ›„ ์ด ๊ฐ์ฒด๋Š” ์†Œ๋ฉธ๋œ๋‹ค. 4. ์›๋ž˜์˜ ์›์‹œํƒ€์ž…๋งŒ ๋‚จ๋Š”๋‹ค. ๋ž˜ํผ ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ  ๋ฌธ์ž์—ด์ด๋‚˜ ์ˆซ์ž์™€ ๊ฐ™์€ ์›์‹œ๊ฐ’์„ ๋‹ค๋ฃจ์–ด์•ผ ํ•˜๋Š” ์ž‘์—…์ด ๋งŽ์€๋ฐ, ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ž‘์—…์„ ์ˆ˜์›”ํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์ง€๋งŒ, ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ์ฒด๋Š” ๋ฌด๊ฒ๊ณ , ์›์‹œ๊ฐ’์€ ๊ฐ€๋Šฅํ•œ ํ•œ ๋น ๋ฅด๊ณ  ๊ฐ€๋ฒผ์›Œ์•ผ ํ•œ๋‹ค. ๊ทธ๋ž˜์„œ ์›์‹œ ํƒ€์ž…์„ ์œ ์ง€ํ•˜๋˜, ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ๋งŒ ์ž ๊น ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•œ ํ›„ ๋‹ค์‹œ ์‚ญ์ œํ•œ๋‹ค.

์œ„์™€ ๊ฐ™์€ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋“ค์˜ ๋‚ด๋ถ€์ฝ”๋“œ๋ฅผ ๋ณด๊ณ  ์‹ถ์–ด, ํฌ๋กฌ ๊ฐœ๋ฐœ์ž ๋ชจ๋“œ์—์„œ ํ™•์ธํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ native code๋ผ๊ณ ๋งŒ ๋‚˜์˜ค๊ณ  ๋” ์ด์ƒ์˜ ์ •๋ณด๋ฅผ ์•Œ ์ˆ˜ ์—†์—ˆ๋‹ค. You don't know Js๋ผ๋Š” ์ฑ…์—์„œ ์–ธ๊ธ‰ํ•œ ๋‚ด์šฉ์ธ์ง€, ๊ตฌ๊ธ€๋ง ๊ฒ€์ƒ‰์„ ํ•˜๋ฉด ์ฃ„๋‹ค ์ฑ… ๋‚ด์šฉ์„ ์š”์•ฝํ•œ ๋ธ”๋กœ๊ทธ ๋‚ด์šฉ๋ฐ–์— ์—†์—ˆ๊ณ , ๋น ๋ฅด๊ฒŒ ๋ฐ‘๊ทธ๋ฆผ๋งŒ ํ™•์ธํ•˜๊ณ  ์‹ถ์—ˆ๋Š”๋ฐ ์ง€์—ฝ์ ์ธ ์ง€์‹๋งŒ ๋‚˜์—ด๋˜์–ด ์žˆ์–ด, ๋‹ค๋ฅธ ์†Œ์Šค๋ฅผ ์ฐพ์•˜๋‹ค. ์œ„์˜ ๋‚ด์šฉ์„ ๊ฐ„๋‹จํžˆ ์ •๋ฆฌํ•˜์ž. native code๋Š” Window, Document, Function์™€ ๊ฐ™์€ ๋‚ด์žฅ๊ฐ์ฒด๋“ค์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ˜„๋˜์–ด์žˆ์ง€ ์•Š๊ณ , C์™€ C++๊ฐ™์€ ์ปดํŒŒ์ผ๋Ÿฌ ์–ธ์–ด๋กœ ์ฝ”๋”ฉ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์•ˆ์˜ ์ฝ”๋“œ๋“ค์„ ๋ณผ ์ˆ˜ ์—†๋‹ค. ๋•Œ๋ฌธ์— binary code๋ฅผ ๋ณด์—ฌ์ค˜๋ดค์ž, ์ฝ์„ ์ˆ˜๋„ ์—†๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์—†๊ธฐ๋•Œ๋ฌธ์— [native co..