Recommended Posts

Why Vite? JS ๋ชจ๋“ˆํ™”์˜ ์—ญ์‚ฌ, CJS, ESM, Webpack

์š”์ฆ˜ ์ผ ๋•Œ๋ฌธ์— ๊ต‰์žฅํžˆ ๋ฐ”์œ ๋‚˜๋‚ ์„ ๋ณด๋‚ด๊ณ  ์žˆ๋‹ค. ๋ช‡ ์ฃผ ์ „๋ถ€ํ„ฐ ์ฃผ 1ํšŒ์”ฉ ์ฃผ์ œ๋ฅผ ์ •ํ•˜์—ฌ ๊ธฐ์ˆ  ๋ฐœํ‘œ๋ฅผ ํ•˜๊ณ  ์žˆ๋‹ค. ๊ธฐ์กด์— ๊ณต๋ถ€ํ•œ ๋ถ€๋ถ„์ธ๋ฐ๋„ ์ œ๋Œ€๋กœ ์„ค๋ช…์„ ํ•  ์ˆ˜ ์—†์—ˆ์„ ๋ฟ๋”๋Ÿฌ ์ž˜๋ชป ์•Œ๊ณ  ์žˆ๋Š” ๋ถ€๋ถ„์ด ๋งŽ์•˜๋‹ค. velog ํฌํ•จ ํ˜„์žฌ ์ด ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ์— ์˜ฌ๋ ธ๋˜ ๋ถ€๋ถ„๋„ ์žˆ์—ˆ๊ธฐ์— ๋ถ€๋„๋Ÿฌ์›€์„ ๋ฌด๋ฆ…์“ฐ๊ณ  ์žฌ๊ฒŒ์‹œํ•˜๋ ค ํ•œ๋‹ค. ๊ตณ์ด ๊ทธ๋Ÿฌ์ง€ ์•Š์•„๋„ ๋˜๋ฉด์„œ ์ด๋ ‡๊ฒŒ ํ•˜๋ ค๋Š” ์ด์œ ๋Š” ์ฒซ ๋ฒˆ์งธ๋กœ ํ•ญ์ƒ ํ‹€๋ฆด ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ๋‹ค์งํ•˜๊ธฐ ์œ„ํ•ด์„œ์ด๊ณ , ๋‘ ๋ฒˆ์งธ๋กœ๋Š” ๊ณผ๊ฑฐ์˜ ๋‚˜๋ณด๋‹ค ํ˜„์žฌ์˜ ๋‚ด๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์ด ํ™•์žฅ๋˜์—ˆ๋‹ค๋Š” ํ™•์‹ ์œผ๋กœ, ์›๋™๋ ฅ์„ ๊ฐ–๊ธฐ ์œ„ํ•ด์„œ์ด๋‹ค.ย ย https://velog.io/@chocoallergie/F-Lab-%EB%AA%A8%EA%B0%81%EC%BD%94-%EC%B1%8C%EB%A6%B0%EC%A7%80-60%EC%..

2016, Left-pad ์‚ฌ๊ฑด์— ๋Œ€ํ•œ Rich Harris(Rollup)์˜ ๊ธ€๋กœ ์•Œ์•„๋ณด๋Š” ๋ฒˆ๋“ค๋ง์˜ ์ค‘์š”์„ฑ

2024.08.10 - [Development Environment] - Why Vite? JS ๋ชจ๋“ˆํ™”์˜ ์—ญ์‚ฌ, CJS, ESM, Webpackย ์–ผ๋งˆ ์ „, Vite๋ฅผ ์จ์•ผ ํ•˜๋Š” ์ด์œ ์— ๋Œ€ํ•œ ๊ธ€์„ ์“ฐ๋ฉด์„œ Rollup ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ ‘ํ•˜๊ณ  JavaScript Module์˜ ์—ญ์‚ฌ, ๋ฒˆ๋“ค๋ง์— ๋Œ€ํ•œ ๊ฐœ๋…์„ ์•Œ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ๊ธ€์„ ์“ฐ๊ณ  ๋‚˜์„œ ES Modules์™€ CommonJS์˜ ์ฐจ์ด์ ์„ Tree-shaking ๊ด€์ ์œผ๋กœ ์ง‘์ค‘ํ•˜์—ฌ ๋˜ ํฌ์ŠคํŒ…ํ•˜๊ณ  ์‹ถ์–ด ์กŒ์Šต๋‹ˆ๋‹ค. (์ฐจ์ฃผ ๋ชฉ์š”์ผ์— ๋ฐœํ‘œ๋ผ ๋๋‚˜๊ณ  ํฌ์ŠคํŒ…ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.) ย ์ œ๊ฐ€ ์›๋ž˜ ์˜ํ™”๋“  ์ฑ…์ด๋“  ์ด๋Ÿฐ ์‹์œผ๋กœ ๋””๊น…์„ ์ข‹์•„ํ•˜๋Š”๋ฐ์š”...(tmi) ๊ทธ๋ž˜์•ผ ๊ฐœ๋…์ด ํ™•์žฅ๋˜๊ณ  ๊ธฐ์–ต๋„ ์ž˜๋‚˜๊ณ .. ๋จธ๋ฆฟ์†์— ์‹œ๊ฐํ™” ๋˜๋Š” ๊ฑธ ์ฆ๊ธฐ๋Š” ๋“ฏํ•ฉ๋‹ˆ๋‹ค.์—ฌํ•˜ํŠผ ๊ณต๋ถ€ ์ค‘ ์ œ ๋ˆˆ์„ ์‚ฌ๋กœ์žก์€ ๊ธ€์ด ์žˆ์—ˆ์Šต๋‹ˆ..

Difference between Process and Thread (+ Program)

ํ”„๋กœ์„ธ์Šค์™€ ์Šค๋ ˆ๋“œ์˜ ์ฐจ์ด๊ฐ€ ๋ญ์ฃ ? ์ฐจ์ด์ ๋„ ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”! ๊ธฐ์ˆ  ๋ฉด์ ‘ ๋‹จ๊ณจ ์งˆ๋ฌธ์œผ๋กœ ์•Œ๋ ค์ง„ ํ”„๋กœ์„ธ์Šค์™€ ์Šค๋ ˆ๋“œ์˜ ์ฐจ์ด์ , ๋ชฐ๋ž๋‹ค! ๋งค๋ฒˆ ์‹ค๋ฌด ์–˜๊ธฐ ํ•˜๋‹ค๊ฐ€ ๊ธฐ์ˆ  ์งˆ๋ฌธ์„ ๋˜์ ธ์ฃผ์‹œ๋Š” ์‚ฌ์ˆ˜๋ถ„๊ป˜ ๊ฐ์‚ฌํ•œ๋‹ค. (๊พธ๋ฒ…) ์ œ๋Œ€๋กœ ๊ณต๋ถ€ํ–ˆ์Œ์„ ์ฆ๋ช…? ํ•˜๊ธฐ ์œ„ํ•ด ๊ทธ๋ฆฌ๊ณ  ๊ธฐ๋กํ•˜๊ธฐ ์œ„ํ•ด ํฌ์ŠคํŒ…์„ ํ•œ๋‹ค. ๋‚˜์ฒ˜๋Ÿผ ํ”„๋กœ์„ธ์Šค์™€ ์Šค๋ ˆ๋“œ์˜ ์ฐจ์ด์ ์— ๋Œ€ํ•ด ์ž˜ ๋ชจ๋ฅด๋Š” ๋ถ„๋“ค๊ป˜ ๋„์›€์ด ๋˜๊ธฐ ์œ„ํ•œ ๊ธ€์ด๋‹ค. ๋‚˜๋Š” ์šด์˜์ฒด์ œ OS์™€ ๊ฐ™์€ CS ์ง€์‹์— ์–ด๋ ค์›€์„ ๋Š๋ผ๊ณ  ์žˆ๊ณ  ์ดํ•ด๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์—ฌ๋Ÿฌ ๋ฒˆ ๋ฐ˜๋ณตํ•ด์„œ ๊ณฑ์”น์–ด๋ณด์•„์•ผ ํ•œ๋‹ค. ์ตํžˆ๊ธฐ์— ์ข‹์€ ๋ฐฐ๊ฒฝ์„ ๊ฐ–๊ณ  ์žˆ์ง€ ์•Š์•˜์ง€๋งŒ ๋ถ€์กฑํ•จ์„ ์ฑ„์šฐ๋ ค ์ง€์†์ ์œผ๋กœ ๋…ธ๋ ฅ ์ค‘์ด๋‹ค. ์ด ๊ธ€์„ ๋ณด๊ณ ๋‚˜์„œ ๋ชจ๋“  ๋ถ„๋“ค์ด ํ—ท๊ฐˆ๋ฆฌ๋˜ ๊ฐœ๋…์— ๋Œ€ํ•ด ์ œ๋Œ€๋กœ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์—ˆ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค. ์šด์˜์ฒด์ œ๋Š” ํ˜„์žฌ ํ•˜๋“œ์›จ์–ด์˜ ์ƒํƒœ๋Š” ์–ด๋– ํ•œ์ง€, ์—ฌ๋Ÿฌ๋ถ„์˜ ์ฝ”๋“œ๊ฐ€ ์–ด..

Software Engineering 2024.04.04 0

DNS Domain Name System์„ ๊นŠ๊ฒŒ ์•Œ์•„๋ณด์ž

DNS๋Š” "DNS ์„œ๋ฒ„์—๊ฒŒ IP์ฃผ์†Œ๋ฅผ ๋ฐ›์•„์˜จ๋‹ค"๋กœ ํ‰์ณ์ง€๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ๋‹ค. ์ด์ „์— ๊ณต๋ถ€๋ฅผ ํ–ˆ์œผ๋‚˜ ๋„คํŠธ์›Œํฌ์˜ ๊ฒฝ์šฐ ์ง์ ‘ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด ํœ˜๋ฐœ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ณต์Šต + ์กฐ๊ธˆ ๋” ๊นŠ๊ฒŒ ์•Œ์•„๋ณด๋ ค ํ•œ๋‹ค! What is DNS? DNS, Domain Name System์€ ํ˜ธ์ŠคํŠธ์˜ ๋„๋ฉ”์ธ ์ด๋ฆ„์„ ํ˜ธ์ŠคํŠธ์˜ ๋„คํŠธ์›Œํฌ ์ฃผ์†Œ๋กœ ๋ฐ”๊พธ๊ฑฐ๋‚˜ ๊ทธ ๋ฐ˜๋Œ€์˜ ๋ณ€ํ™˜์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ๋˜์—ˆ๋‹ค. ํŠน์ • ์ปดํ“จํ„ฐ ๋˜๋Š” ๋„คํŠธ์›Œํฌ๋กœ ์—ฐ๊ฒฐ๋œ ์ž„์˜์˜ ์žฅ์น˜์˜ ์ฃผ์†Œ๋ฅผ ์ฐพ๊ธฐ ์œ„ํ•ด, ์‚ฌ๋žŒ์ด ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์šด ๋„๋ฉ”์ธ ์ด๋ฆ„์„ ์ˆซ์ž๋กœ ๋œ IP์ฃผ์†Œ๋กœ ๋ณ€ํ™˜ํ•ด์ค€๋‹ค. ์ผ๋ฐ˜์ ์ธ DNS ์กฐํšŒ๋ฅผ ํ•  ๊ฒฝ์šฐ UDP, Zone Transfer(์˜์—ญ ์ „์†ก)์„ ์ˆ˜ํ–‰ํ•  ๊ฒฝ์šฐ ํ˜น์€ 512Byte๋ฅผ ์ดˆ๊ณผํ•˜๋Š” DNS ํŒจํ‚ท์„ ์ „์†กํ•ด์•ผ ํ•  ๊ฒฝ์šฐ TCP๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ํ”ํžˆ ์ „ํ™”๋ฒˆํ˜ธ๋ถ€์— ๋น„์œ ๋˜๋Š”..

Network 2023.09.24 0

Latest Post

more

Docker Compose V2์—์„œ .env๋ฅผ ๋ชป ์ฐพ๋Š”๋‹ค๋ฉด?

์ž‘๋…„, ์‹ค๋ฌด์—์„œ docker๋ฅผ ์ ‘ํ•˜๊ณ  docker-copmose.yml ํŒŒ์ผ์„ ์ฒ˜์Œ ์‚ฌ์šฉํ•ด ๋ณด์•˜๋‹ค. ๋‹น์‹œ์—” ๋‹น์—ฐํ•˜๋“ฏ docker-compose up ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ์ปจํ…Œ์ด๋„ˆ๋ฅผ ์ƒ์„ฑํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ ์–ด๋Š ๋‚ ์—”๊ฐ€๋ถ€ํ„ฐ docker compose๋ช…๋ น์–ด๊ฐ€ ๋ฐ”๋€Œ์—ˆ๋‹ค๋Š” ๊ฒฝ๊ณ  ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๊ฒŒ ๋˜์—ˆ๋‹ค.ํ™•์ธํ•ด ๋ณด๋‹ˆ Docker ์—…๋ฐ์ดํŠธ๊ฐ€ ์•„๋‹Œ Docker compose ๋ฒ„์ „์ด V1 โ‡’ V2๋กœ ์—…๋ฐ์ดํŠธ๋œ ์‚ฌํ•ญ์ด์—ˆ๋‹ค. ๋ญ ๊ทธ๋ฆฌ ํฐ ์ด์Šˆ๊ฐ€ ์—†์„ ๊ฑฐ๋ผ ์ƒ๊ฐํ•˜๊ณ  ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋„ ๊ทธ๋ ‡๊ฒŒ ์ž˜ ์ง„ํ–‰ํ•˜์˜€๋‹ค. ๋ฌธ์ œ๋Š” ์ถ”ํ›„์— ์ผ์–ด๋‚˜๊ฒŒ ๋˜๋Š”๋ฐโ€ฆย ์ž‘๋…„์— ๋งˆ๋ฌด๋ฆฌํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ณ ๋„ํ™”ํ•ด๋ณด๋Š” ๊ณผ์ •์—์„œ docker ์ด๋ฏธ์ง€ ๋ฒ„์ „๋„ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๊ณผ์ •์ด ์žˆ์—ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋„ํ†ต ์„œ๋ฒ„๊ฐ€ ์—ด๋ฆฌ์ง€ ์•Š๋Š” ๊ฒƒ์ด๋‹ค. ์ด์ƒํ•˜๋‹ค ์ƒ๊ฐํ•˜๊ณ  ๋””๋ฒ„๊น…ํ•ด๋ณด๋‹ˆ .envํŒŒ์ผ์„ ์•„์˜ˆ ์ธ์‹ํ•˜์ง€ ๋ชป..

Context API๋กœ Props Drilling ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ํ•ด๊ฒฐํ•˜๊ธฐ

์ž‘๋…„์— React deep dive ์Šคํ„ฐ๋””๋ฅผ ํ–ˆ์—ˆ๋‹ค. ๋‹น์‹œ context API๋ฅผ Props drilling์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ์˜์กด์„ฑ ์ฃผ์ž… ๋„๊ตฌ๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฑธ ๋ฐฐ์› ๋‹ค. ํ•˜์ง€๋งŒ ์‹ค๋ฌด์—์„œ props drilling์ด ๊นŠ์–ด์งˆ์ˆ˜๋ก ๋ณต์žกํ•ด์กŒ๊ณ  ๋ฌด์ž‘์ • ์ „์—ญ์ƒํƒœ๋กœ ๋„˜๊ฒจ๋ฒ„๋ฆฌ๋Š” ๋ฐฉ์‹์„ ํƒํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‹ค ์ตœ๊ทผ ํ† ์Šค FF ๋ ˆํฌ์ง€ํ† ๋ฆฌ์—์„œ ๋…ผ์˜๋˜๋Š” ๊ฒƒ๋“ค์„ ๋ณด๋ฉฐ ๋‹ค์‹œ๊ธˆ Context API์˜ ๋ณธ์งˆ์„ ๊ณ ๋ฏผํ•˜๊ฒŒ ๋˜์—ˆ๊ณ  ์ด๋ ‡๊ฒŒ ๊ธ€์„ ์“ฐ๊ฒŒ ๋˜์—ˆ๋‹ค.ย Props DrillingReact๋Š” ๋ถ€๋ชจ โ‡’ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ ์ด๋ฃจ์–ด์ง„ ํŠธ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.๋ถ€๋ชจ๊ฐ€ ๊ฐ€์ง„ ๋ฐ์ดํ„ฐ๋ฅผ ์ž์‹์—์„œ ์‚ฌ์šฉํ•˜๋ ค๋ฉด props๋ฅผ ํ†ตํ•ด ์ „๋‹ฌํ•ด์•ผ ํ•œ๋‹ค. ์œ„์™€ ๊ฐ™์€ ๊ตฌ์กฐ์—์„œ A โ‡’ D ๊นŒ์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋ ค๋ฉด ์ค‘๊ฐ„์— ์žˆ๋Š” ๋ชจ๋“  ์ปดํฌ..

React 2025.02.12 0

ํ•œ ๋‹ฌ๊ฐ„ ์ฝ”๋“œํŠธ๋ฆฌ๋กœ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ธฐ์ดˆ ๋‹ค์ ธ๋ณธ ํ›„๊ธฐ ๐Ÿ’ช

๊ฐœ์ธ์ ์œผ๋กœ ์Šค์Šค๋กœ ์•Œ๊ณ ๋ฆฌ์ฆ˜์— ์ข€ ์•ฝํ•˜๋‹ค๊ณ  ์ƒ๊ฐ์ด ๋งŽ์ด ๋“ค๊ณ  ์žˆ๋˜ ์ฐธ์ด์—ˆ๋Š”๋ฐ ์ฝ”๋“œํŠธ๋ฆฌ๋ฅผ ์ ‘ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.์ด๋•Œ๊นŒ์ง€ ์จ๋ณธ ๊ฑด ๋ฐฑ์ค€, ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค์—์„œ ๋ ˆ๋ฒจ ์ˆœ์œผ๋กœ ๊ทธ๋ƒฅ ์ฐ๋จน ์ •๋„ ํ•ด๋ณธ ๊ฒƒ ๊ฐ™๋‹ค.๋ถ€๋„๋Ÿฝ์ง€๋งŒ ์ œ๋Œ€๋กœ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ณต๋ถ€๋ฅผ ํ•œ ์ ์€ ์—†๋‹ค. ๊พธ์ค€ํžˆ ํ•ด์•ผ ๋˜๋Š” ๊ฑธ ์•Œ๊ณ  ์žˆ๊ธฐ์— ๋ฃจํ‹ด ์žก๊ธฐ๊ฐ€ ์–ด๋ ค์› ๋‹คย ์ฝ”๋“œํŠธ๋ฆฌ์—์„œ ์ œ๊ณตํ•˜๋Š” ํ…Œ์ŠคํŠธ๊ฐ€ ์žˆ๋Š”๋ฐ ๊ธฐ์ดˆ๋ฅผ ์•„์˜ˆ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์ ธ๋ณด๊ณ  ์‹ถ์–ด์„œ Level 1๋ถ€ํ„ฐ ๊ทธ๋ƒฅ ๋ƒ…๋‹ค~ ์‹œ์ž‘ํ–ˆ๋‹ค.ํ•œ ๋‹ฌ ๋™์•ˆ ์ด์šฉํ•ด ๋ณธ ์ฝ”๋“œํŠธ๋ฆฌ์˜ ์žฅ์ ๋“ค์„ ์ ์–ด๋ณด๊ณ , ๊ฐœ์„ ๋˜์—ˆ์œผ๋ฉด ์ข‹๊ฒ ๋Š” ๋ฐฉํ–ฅ๋„ ๋งํ•ด๋ณด๊ฒ ๋‹ค.ย ๊ธฐ๋ณธ๊ฐœ๋…์— ๋Œ€ํ•ด ์•Œ๋ ค์ฃผ๊ณ  ๋ฐฉํ–ฅ ์ œ์‹œ๋ฅผ ํ•ด์ฃผ์–ด ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ธฐ์ดˆ๋ฅผ ๋‹ค์ง€๋ ค๋Š” ์‚ฌ๋žŒ์—๊ฒŒ ํ™•์‹คํžˆ ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.ย ๋‹ค๋ฅธ ๊ฒƒ๋ณด๋‹ค ๋ฌธ์ œ์˜ ๊ธฐ์ดˆ๋ฅผ ํ™•์‹คํžˆ ์ž˜ ๋‹ค์ ธ์ฃผ๋Š” ๊ฒŒ ๋Š๊ปด์กŒ๋‹ค. ํƒ€ ํ”Œ๋žซํผ์˜ ๊ฒฝ์šฐ ์ด๋ฏธ ์•Œ๊ณ  ์žˆ๋‹ค๋Š” ์ „์ œํ•˜์— ์‹œ์ž‘์„ ..

2025 2025.02.02 0

JWT๋ž€? NestJS๋กœ ํ’€์–ด๋ณด๋Š” ํ† ํฐ ๊ธฐ๋ฐ˜ ์ธ์ฆ๊ณผ ์ธ๊ฐ€

2023๋…„ 6์›” 27์ผ JWT์— ๋Œ€ํ•œ ๊ธ€์„ ์“ด ๊ณผ๊ฑฐ Velog ํฌ์ŠคํŒ…์„ ๋ณด์•˜๋‹ค. ์‹ค๋ฌด ๊ฒฝํ—˜๋„ ์—†๊ณ , ์ด๋ก ์ ์œผ๋กœ ์ดํ•ด๊ฐ€ ๋˜์ง€๋„ ์•Š์•˜๋˜ ๋•Œ์ด์ง€๋งŒ ์–ด๋–ป๊ฒŒ๋“  ์ ์–ด๋ณด๋ฉฐ ์ต์ˆ™ํ•ด์งˆ ๋•Œ๊ฐ€ ์žˆ์ง€ ์•Š์„๊นŒ ํ•˜๋ฉฐ ์ ์€ ๋‹น์‹œ๊ฐ€ ์ƒ๊ฐ๋‚ฌ๋‹ค. ๋‹ค์‹œ JWT์— ๋Œ€ํ•ด ์ ์–ด๋ณด๋ฉด ์–ผ๋งˆ๋‚˜ ๋‹ฌ๋ผ์กŒ๋Š”์ง€ ๋น„๊ตํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•˜๋‹ค. JWT๋ฅผ ์ ‘ํ•œ ์‚ฌ๋žŒ, ์ ‘ํ•˜์ง€ ๋ชปํ•œ ์‚ฌ๋žŒ ์ „๋ถ€ ๋ˆ„๊ตฌ๋‚˜ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์‰ฝ๊ฒŒ ์ ์–ด๋ณด๋ ค ํ•œ๋‹ค.JWT JSON Web Token์›น์—์„œ ์‚ฌ์šฉ๋˜๋Š” JSON ํ˜•์‹์˜ ํ† ํฐ ๊ธฐ๋ฐ˜ ์ธ์ฆ ๋ฐฉ์‹์ด๋‹ค. ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ๊ฐ„ JSON ๋ฐ์ดํ„ฐ๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ๊ณต์œ ํ•˜๊ธฐ ์œ„ํ•œ ๊ฐœ๋ฐฉํ˜• ํ‘œ์ค€(RFC 7519). ๊ฐ„๊ฒฐํ•˜๊ณ  URL์— ์•ˆ์ „ํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.ย Session-Based Authoentication VS Token-Based Auth..

Node.js 2025.01.30 0

JavaScript๋กœ ์ง„์ •ํ•œ ๊ฐ์ฒด์ง€ํ–ฅ(Object-Oriented Programming)ํ•˜๊ธฐ

Javascript๋กœ ์ง„์ •ํ•œ ๊ฐ์ฒด์ง€ํ–ฅ์ด ๊ฐ€๋Šฅํ• ๊นŒ? ์‚ฌ์‹ค ์–ด๋Š ์ •๋„ ๋„๋ฐœ์ด์ง€๋งŒ ์Šค์Šค๋กœ ์ด ๊ฐ„๊ทน์„ ํƒ๊ตฌํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ฐœ์ธ์ ์ธ ์š•์‹ฌ์œผ๋กœ๋Š” ์–ด๋ ต๊ธฐ๋ณด๋‹ค ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•˜๊ณ  ์‹ถ๋‹ค. Javascript์™€ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ๊ฐ„๊ทน์„ ์ขํ˜€๋ณด๊ณ  ์ง„์ •ํ•œ ๊ฐ์ฒด์ง€ํ–ฅ์ด๋ž€ ๋ฌด์—‡์ธ์ง€ ์‰ฝ๊ณ  ํŽธ์•ˆํ•˜๊ฒŒ ํƒ๊ตฌํ•˜๊ณ ์ž ํ•œ๋‹ค!ย ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ(Object-Oriented Programming)์ด๋ž€? ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ํŒจ๋Ÿฌ๋‹ค์ž„ ์ค‘ ํ•˜๋‚˜์ด๋‹ค. ํ”„๋กœ๊ทธ๋žจ์„ ๋ช…๋ น์–ด์˜ ๋ชฉ๋ก์œผ๋กœ ๋ณด๋Š” ์‹œ๊ฐ์—์„œ ๋ฒ—์–ด๋‚˜, ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋…๋ฆฝ๋œ ๋‹จ์œ„. ์ฆ‰, "๊ฐ์ฒด"๋“ค์˜ ๋ชจ์ž„์œผ๋กœ ํŒŒ์•…ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.ย ์ด๋Š” Wiki์—์„œ ์ •์˜ํ•œ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ๊ฐœ๋…์ด๋‹ค. ์—ฌ๊ธฐ์„œ 'ํ”„๋กœ๊ทธ๋žจ์„ ๋ช…๋ น์–ด์˜ ๋ชฉ๋ก์œผ๋กœ ๋ณด๋Š” ์‹œ๊ฐ'์€ ์ ˆ์ฐจ์  ํ”„๋กœ๊ทธ๋ž˜๋ฐ(Procedural progr..

JavaScript 2025.01.19 4

Best

Docker Compose V2์—์„œ .env๋ฅผ ๋ชป ์ฐพ๋Š”๋‹ค๋ฉด?

์ž‘๋…„, ์‹ค๋ฌด์—์„œ docker๋ฅผ ์ ‘ํ•˜๊ณ  docker-copmose.yml ํŒŒ์ผ์„ ์ฒ˜์Œ ์‚ฌ์šฉํ•ด ๋ณด์•˜๋‹ค. ๋‹น์‹œ์—” ๋‹น์—ฐํ•˜๋“ฏ docker-compose up ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ์ปจํ…Œ์ด๋„ˆ๋ฅผ ์ƒ์„ฑํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ ์–ด๋Š ๋‚ ์—”๊ฐ€๋ถ€ํ„ฐ docker compose๋ช…๋ น์–ด๊ฐ€ ๋ฐ”๋€Œ์—ˆ๋‹ค๋Š” ๊ฒฝ๊ณ  ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๊ฒŒ ๋˜์—ˆ๋‹ค.ํ™•์ธํ•ด ๋ณด๋‹ˆ Docker ์—…๋ฐ์ดํŠธ๊ฐ€ ์•„๋‹Œ Docker compose ๋ฒ„์ „์ด V1 โ‡’ V2๋กœ ์—…๋ฐ์ดํŠธ๋œ ์‚ฌํ•ญ์ด์—ˆ๋‹ค. ๋ญ ๊ทธ๋ฆฌ ํฐ ์ด์Šˆ๊ฐ€ ์—†์„ ๊ฑฐ๋ผ ์ƒ๊ฐํ•˜๊ณ  ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋„ ๊ทธ๋ ‡๊ฒŒ ์ž˜ ์ง„ํ–‰ํ•˜์˜€๋‹ค. ๋ฌธ์ œ๋Š” ์ถ”ํ›„์— ์ผ์–ด๋‚˜๊ฒŒ ๋˜๋Š”๋ฐโ€ฆย ์ž‘๋…„์— ๋งˆ๋ฌด๋ฆฌํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ณ ๋„ํ™”ํ•ด๋ณด๋Š” ๊ณผ์ •์—์„œ docker ์ด๋ฏธ์ง€ ๋ฒ„์ „๋„ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๊ณผ์ •์ด ์žˆ์—ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋„ํ†ต ์„œ๋ฒ„๊ฐ€ ์—ด๋ฆฌ์ง€ ์•Š๋Š” ๊ฒƒ์ด๋‹ค. ์ด์ƒํ•˜๋‹ค ์ƒ๊ฐํ•˜๊ณ  ๋””๋ฒ„๊น…ํ•ด๋ณด๋‹ˆ .envํŒŒ์ผ์„ ์•„์˜ˆ ์ธ์‹ํ•˜์ง€ ๋ชป..

Context API๋กœ Props Drilling ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ํ•ด๊ฒฐํ•˜๊ธฐ

์ž‘๋…„์— React deep dive ์Šคํ„ฐ๋””๋ฅผ ํ–ˆ์—ˆ๋‹ค. ๋‹น์‹œ context API๋ฅผ Props drilling์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ์˜์กด์„ฑ ์ฃผ์ž… ๋„๊ตฌ๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฑธ ๋ฐฐ์› ๋‹ค. ํ•˜์ง€๋งŒ ์‹ค๋ฌด์—์„œ props drilling์ด ๊นŠ์–ด์งˆ์ˆ˜๋ก ๋ณต์žกํ•ด์กŒ๊ณ  ๋ฌด์ž‘์ • ์ „์—ญ์ƒํƒœ๋กœ ๋„˜๊ฒจ๋ฒ„๋ฆฌ๋Š” ๋ฐฉ์‹์„ ํƒํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‹ค ์ตœ๊ทผ ํ† ์Šค FF ๋ ˆํฌ์ง€ํ† ๋ฆฌ์—์„œ ๋…ผ์˜๋˜๋Š” ๊ฒƒ๋“ค์„ ๋ณด๋ฉฐ ๋‹ค์‹œ๊ธˆ Context API์˜ ๋ณธ์งˆ์„ ๊ณ ๋ฏผํ•˜๊ฒŒ ๋˜์—ˆ๊ณ  ์ด๋ ‡๊ฒŒ ๊ธ€์„ ์“ฐ๊ฒŒ ๋˜์—ˆ๋‹ค.ย Props DrillingReact๋Š” ๋ถ€๋ชจ โ‡’ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ ์ด๋ฃจ์–ด์ง„ ํŠธ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.๋ถ€๋ชจ๊ฐ€ ๊ฐ€์ง„ ๋ฐ์ดํ„ฐ๋ฅผ ์ž์‹์—์„œ ์‚ฌ์šฉํ•˜๋ ค๋ฉด props๋ฅผ ํ†ตํ•ด ์ „๋‹ฌํ•ด์•ผ ํ•œ๋‹ค. ์œ„์™€ ๊ฐ™์€ ๊ตฌ์กฐ์—์„œ A โ‡’ D ๊นŒ์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๋ ค๋ฉด ์ค‘๊ฐ„์— ์žˆ๋Š” ๋ชจ๋“  ์ปดํฌ..

React 2025.02.12 0
JWT๋ž€? NestJS๋กœ ํ’€์–ด๋ณด๋Š” ํ† ํฐ ๊ธฐ๋ฐ˜ ์ธ์ฆ๊ณผ ์ธ๊ฐ€

2023๋…„ 6์›” 27์ผ JWT์— ๋Œ€ํ•œ ๊ธ€์„ ์“ด ๊ณผ๊ฑฐ Velog ํฌ์ŠคํŒ…์„ ๋ณด์•˜๋‹ค. ์‹ค๋ฌด ๊ฒฝํ—˜๋„ ์—†๊ณ , ์ด๋ก ์ ์œผ๋กœ ์ดํ•ด๊ฐ€ ๋˜์ง€๋„ ์•Š์•˜๋˜ ๋•Œ์ด์ง€๋งŒ ์–ด๋–ป๊ฒŒ๋“  ์ ์–ด๋ณด๋ฉฐ ์ต์ˆ™ํ•ด์งˆ ๋•Œ๊ฐ€ ์žˆ์ง€ ์•Š์„๊นŒ ํ•˜๋ฉฐ ์ ์€ ๋‹น์‹œ๊ฐ€ ์ƒ๊ฐ๋‚ฌ๋‹ค. ๋‹ค์‹œ JWT์— ๋Œ€ํ•ด ์ ์–ด๋ณด๋ฉด ์–ผ๋งˆ๋‚˜ ๋‹ฌ๋ผ์กŒ๋Š”์ง€ ๋น„๊ตํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•˜๋‹ค. JWT๋ฅผ ์ ‘ํ•œ ์‚ฌ๋žŒ, ์ ‘ํ•˜์ง€ ๋ชปํ•œ ์‚ฌ๋žŒ ์ „๋ถ€ ๋ˆ„๊ตฌ๋‚˜ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์‰ฝ๊ฒŒ ์ ์–ด๋ณด๋ ค ํ•œ๋‹ค.JWT JSON Web Token์›น์—์„œ ์‚ฌ์šฉ๋˜๋Š” JSON ํ˜•์‹์˜ ํ† ํฐ ๊ธฐ๋ฐ˜ ์ธ์ฆ ๋ฐฉ์‹์ด๋‹ค. ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ๊ฐ„ JSON ๋ฐ์ดํ„ฐ๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ๊ณต์œ ํ•˜๊ธฐ ์œ„ํ•œ ๊ฐœ๋ฐฉํ˜• ํ‘œ์ค€(RFC 7519). ๊ฐ„๊ฒฐํ•˜๊ณ  URL์— ์•ˆ์ „ํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.ย Session-Based Authoentication VS Token-Based Auth..

Node.js 2025.01.30 0