Skip to content

Latest commit

ย 

History

History
339 lines (243 loc) ยท 21.6 KB

README.md

File metadata and controls

339 lines (243 loc) ยท 21.6 KB

Hits



๐Ÿ†web12-algo-with-me

Algo With Me๋Š” ๋ชจ๋‘๊ฐ€ ์ฐธ์—ฌํ•˜๊ณ  ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๋Œ€ํšŒ ์„œ๋น„์Šค์ž…๋‹ˆ๋‹ค.

์ฃผ์š” ๊ธฐ๋Šฅ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ์‚ฌ์šฉ์ž๊ฐ€ ์ œ์ถœํ•œ ์ฝ”๋“œ๋ฅผ ์ฑ„์ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค
  • ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋Œ€ํšŒ์— ์ฐธ์—ฌํ•œ ๊ฒฝ์Ÿ์ž๋“ค์˜ ์ˆœ์œ„๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

์•Œ๊ณ ์œ—๋ฏธ ์ฒดํ—˜ํ•˜๊ธฐ

ํ”„๋กœ์ ํŠธ ๋ฌธ์„œ ๋ฐ”๋กœ๊ฐ€๊ธฐ



๐Ÿ“„๋ชฉ์ฐจ



๐ŸŽฌ๋ฐ๋ชจ ์˜์ƒ

_.mp4

์œ ํŠœ๋ธŒ ๋ฐ”๋กœ๊ฐ€๊ธฐ



๐Ÿš€Algo With Me ๊ธฐ๋Šฅ ์„ค๋ช…

์ฝ”๋“œ ์ฑ„์ ํ•˜๊ธฐ

right-wrong

๋Œ€ํšŒ ํŽ˜์ด์ง€๋Š”

  • ๋ฌธ์ œ ํ™”๋ฉด
  • ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ์—๋””ํ„ฐ
  • ์ œ์ถœ ๊ฒฐ๊ณผ ํ™”๋ฉด

์œผ๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค.
๋‚˜๋งŒ์˜ ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  "ํ…Œ์ŠคํŠธ ์‹คํ–‰"๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
"์ œ์ถœํ•˜๊ธฐ" ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ํžˆ๋“  ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค๋“ค์˜ ์ •๋‹ต ์—ฌ๋ถ€์™€ ์‹œ๊ฐ„, ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ๋Ÿ‰์„ ๋ฐ›์•„๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋Œ€์‹œ ๋ณด๋“œ ํ™•์ธ

dashboard

๋Œ€ํšŒ ์ฐธ์—ฌ์ž ์ˆœ์œ„ 100์œ„๊นŒ์ง€์™€, ๋‚˜์˜ ์ˆœ์œ„๋ฅผ ๋Œ€ํšŒ ์ง„ํ–‰ ์ค‘ ์‹ค์‹œ๊ฐ„์œผ๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋Œ€ํšŒ ์ฐธ์—ฌ์ž๊ฐ€ ์•„๋‹ˆ๋ผ๋„ ๋Œ€์‹œ๋ณด๋“œ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ทธ ์™ธ

๋ฉ”์ธ ํŽ˜์ด์ง€

๋ฉ”์ธ ํŽ˜์ด์ง€

algo-with-me ๋ฉ”์ธํŽ˜์ด์ง€์ž…๋‹ˆ๋‹ค. ํ˜„์žฌ๊นŒ์ง€์˜ ๋ชจ๋“  ๋Œ€ํšŒ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋Œ€ํšŒ ์ƒ์„ฑ

๋Œ€ํšŒ ์ƒ์„ฑ

๋Œ€ํšŒ ์ƒ์„ฑ ํŽ˜์ด์ง€ ์ž…๋‹ˆ๋‹ค. ์ตœ๋Œ€ ์ฐธ์—ฌ์ธ์› ์„ค์ •์ด ๊ฐ€๋Šฅํ•˜๊ณ  ๋Œ€ํšŒ ์‹œ๊ฐ„์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋“ฑ๋ก๋œ ๋ฌธ์ œ๋ฅผ ์„ ํƒํ•ด ๋Œ€ํšŒ์— ํฌํ•จ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋Œ€ํšŒ ์ƒ์„ธ ํŽ˜์ด์ง€

๋Œ€ํšŒ ์ƒ์„ธ ํŽ˜์ด์ง€

๋Œ€ํšŒ ์ƒ์„ธ ํŽ˜์ด์ง€์—์„œ๋Š” ๋Œ€ํšŒ์˜ ์‹œ์ž‘, ์ข…๋ฃŒ ์‹œ๊ฐ„, ์ฐธ๊ฐ€์ž ๋“ฑ์˜ ์ •๋ณด๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ€ํšŒ ์‹œ์ž‘ ์‹œ๊ฐ„์ด ๋˜๋ฉด ๋Œ€ํšŒ ์ž…์žฅ ๋ฒ„ํŠผ๊ณผ ๋Œ€์‹œ๋ณด๋“œ ๋ณด๊ธฐ ๋ฒ„ํŠผ์ด ํ™œ์„ฑํ™”๋ฉ๋‹ˆ๋‹ค.

ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค ์ถ”๊ฐ€

ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค ์ถ”๊ฐ€

์ œ์ถœํ•˜๊ธฐ ์ „ ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ๋‚ด ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•ด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.



๐Ÿฅš๋ฌธ์ œ ํ•ด๊ฒฐ ๊ณผ์ •: ๋ฐฐ๊ฒฝ

์ €ํฌ ํŒ€์—๊ฒŒ ์ฃผ์–ด์ง„ ์ž์›์€ 2์ฝ”์–ด, 8GB RAM ๋„ค์ด๋ฒ„ ํด๋ผ์šฐ๋“œ ์ธ์Šคํ„ด์Šค ํ•˜๋‚˜์˜€์Šต๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ ๋ถ€์ŠคํŠธ์บ ํ”„ ์ „์›(200๋ช…)์ด ์ฐธ์—ฌํ•  ์ˆ˜ ์žˆ๋Š” ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ ๊ฐ€์ง„ ์ž์›์„ ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ์ตœ๋Œ€ํ•œ์œผ๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์„๊นŒ ๋ผ๋Š” ๋„์ „๊ณผ์ œ๋ฅผ ๋ชฉํ‘œ๋กœ ์„ค์ •ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.


๐Ÿฃ๋ฌธ์ œ ํ•ด๊ฒฐ ๊ณผ์ •: ์‹œ๋„ํ•œ ๊ฒƒ๋“ค

BE) ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„ ์ตœ์ ํ™”

์–ด๋–ป๊ฒŒ ๋งŽ์€ ์ฑ„์  ์š”์ฒญ์ด ๋“ค์–ด์˜ค๋”๋ผ๋„ ๋ˆ„๋ฝ ์—†์ด ๋ชจ๋‘ ์ฑ„์ ํ•  ์ˆ˜ ์žˆ์„๊นŒ?
์–ด๋–ค ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•ด์•ผ ์šฐ๋ฆฌ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ์— ์œ ๋ฆฌํ• ๊นŒ?

๐Ÿ‘‰ BE ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„ ๋ฐ DB ERD ์„ค๊ณ„
๐Ÿ‘‰ ๊ธฐ์ˆ  ์Šคํƒ ์„ ์ •

BE) ์ฑ„์  ๋กœ์ง

๋ณ‘๋ ฌ์ ์œผ๋กœ ์ฑ„์ ํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ๊ตฌ์กฐ๋ฅผ ์งœ์•ผ ํ• ๊นŒ?
๋ณด์•ˆ ์œ„ํ˜‘ ์—†์ด ์•ˆ์ „ํ•˜๊ฒŒ ์ฑ„์ ํ•  ์ˆ˜ ์žˆ์„๊นŒ?

๐Ÿ‘‰ ์ฑ„์ ์„œ๋ฒ„, ๋„์ปค์„œ๋ฒ„ ์‹คํ–‰ํ๋ฆ„
๐Ÿ‘‰ BE ์ฑ„์ ์„œ๋ฒ„ ์•„ํ‚คํ…์ฒ˜ ๊ด€๋ จ ํšŒ์˜

BE) ๋Œ€์‹œ๋ณด๋“œ

ํด๋ง, ์›น ์†Œ์ผ“, SSE ๋ฌด์—‡์„ ์‚ฌ์šฉํ•ด์•ผ ํ• ๊นŒ?
DB, ๋ฉ”๋ชจ๋ฆฌ ์ž์›์„ ์–ด๋–ป๊ฒŒ ํšจ์œจ์ ์œผ๋กœ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์„๊นŒ?
์–ด๋–ป๊ฒŒ ํ•ด์•ผ ์„œ๋ฒ„ ๋ถ€๋‹ด์„ ์ค„์ด๋ฉด์„œ๋„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์„๊นŒ?

๐Ÿ‘‰ ๋Œ€์‹œ๋ณด๋“œ ๋ฐ์ดํ„ฐ redis ์ €์žฅ ๋ฐฉ์‹, ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ๋ณด๋‚ผ ์–‘์‹, db ์ €์žฅ ๋ฐฉ์‹
๐Ÿ‘‰ ๋Œ€์‹œ๋ณด๋“œ ์†Œ์ผ“ ์žฌ์‚ฌ์šฉ ๊ด€๋ จ ํšŒ์˜

FE) ํด๋ผ์ด์–ธํŠธ์—์„œ JS ์ฝ”๋“œ๋ฅผ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ์„๊นŒ?

์–ด๋–ป๊ฒŒ ํ•ด์•ผ ์„œ๋ฒ„๋กœ ๊ฐ€๋Š” ์š”์ฒญ์„ ์ค„์—ฌ์„œ ๋ฆฌ์†Œ์Šค๋ฅผ ์•„๋‚„ ์ˆ˜ ์žˆ์„๊นŒ?
์ฑ„์ ์€ ๋ชฐ๋ผ๋„ ํ…Œ์ŠคํŠธ ์ •๋„๋Š” ํด๋ผ์ด์–ธํŠธ์—์„œ ๋Œ๋ ค๋„ ๋˜์ง€ ์•Š์„๊นŒ?
Eval์„ ์‚ฌ์šฉํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™๊ธด ํ•œ๋ฐ, Eval์„ ์จ๋„ ๋ ๊นŒ?

๐Ÿ‘‰ eval์„ ์‚ฌ์šฉํ•ด์„  ์•ˆ ๋˜๋Š” ์ด์œ ์™€ ๋Œ€์•ˆ๋“ค

FE) Eval์€ ์•ˆ์ „ํ• ๊นŒ? ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ์•ˆ์ „ํ•ด์งˆ๊นŒ

Eval์„ ์‚ฌ์šฉํ•˜๋ฉด ๋ฌดํ•œ ๋ฃจํ”„๋ฅผ ๋งŒ๋‚ฌ์„ ๋•Œ ๋ฉ”์ธ ์Šค๋ ˆ๋“œ๊ฐ€ ๋ฉˆ์ถ”๋Š” ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธด๋‹ค.
์›น ์›Œ์ปค๋ฅผ ์ด์šฉํ•ด์„œ ์Šค๋ ˆ๋“œ๋ฅผ ๋ถ„๋ฆฌํ•ด ๋ณด์ž

๐Ÿ‘‰ ์›น ์›Œ์ปค๋ž€ ๋ฌด์—‡์ธ๊ฐ€? & ์•Œ๊ณ ์œ—๋ฏธ์—์„œ์˜ ํ™œ์šฉ ๋ฐฉ์•ˆ

Eval์€ ์–ธ์ œ ์œ„ํ—˜ํ• ๊นŒ?
Eval์€ ์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ ์œ„ํ—˜ํ•ด
์‚ฌ์ด๋“œ ์ดํŽ™ํŠธ๊ฐ€ ์ผ์–ด๋‚  ์ˆ˜ ์—†๋Š” ์ˆœ์ˆ˜ํ•œ JS ์—”์ง„์„ ์˜ฌ๋ ค์„œ ์‚ฌ์šฉํ•ด ๋ณด์ž

๐Ÿ‘‰ ์›น ์–ด์…ˆ๋ธ”๋ฆฌ๋ž€ ๋ฌด์—‡์ธ๊ฐ€? & ์•Œ๊ณ ์œ—๋ฏธ์—์„œ์˜ ํ™œ์šฉ ๋ฐฉ์•ˆ

FE) QuickJS๋Š” ์—„๋ฐ€ํ•œ๊ฐ€?

QuickJS๋ผ๋Š” JS ์—”์ง„์„ ์‚ฌ์šฉํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™์•„.
ํ•˜์ง€๋งŒ ์ด๊ฒŒ ์ •๋ง ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ๊ณตํ‰ํ•˜๊ฒŒ ๋™์ž‘ํ• ๊นŒ?

๐Ÿ‘‰ [๊ฒ€์ฆ] QuickJS๋Š” ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ผํ•œ ์„ฑ๋Šฅ์„ ๋ณด์žฅํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€?
๐Ÿ‘‰ [๊ฒ€์ฆ] QuickJS๋Š” ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ผํ•œ Max Call Stack์„ ๋ณด์žฅํ•  ์ˆ˜ ์žˆ๋Š”๊ฐ€?

FE) ๊ณต์ •ํ•œ ํ™˜๊ฒฝ์„ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด์„  ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ์˜ ์‹œ๊ฐ„์„ ๋™๊ธฐํ™”ํ•ด์•ผ ํ•œ๋‹ค

์ฐธ์—ฌ์ž๋“ค์€ ์‹œํ—˜์ด ์ •ํ™•ํ•˜๊ฒŒ ๊ฐ™์€ ์‹œ๊ฐ„์— ์‹œ์ž‘ํ•˜๊ณ  ๊ฐ™์€ ์‹œ๊ฐ„์— ๋๋‚˜๊ธฐ๋ฅผ ๊ธฐ๋Œ€ํ•œ๋‹ค.
์ด๋ฅผ ์œ„ํ•ด์„œ ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ์˜ ์‹œ๊ฐ„์„ ๋™๊ธฐํ™”ํ•ด์•ผ ํ•˜๋Š”๋ฐ, ์–ด๋–ป๊ฒŒ ํ•  ์ˆ˜ ์žˆ์„๊นŒ?
์„œ๋ฒ„ ์ž์›์ด ๋ฌดํ•œํ•˜๋‹ค๋ฉด 1์ดˆ๋งˆ๋‹ค Http ์š”์ฒญ์„ ๋ณด๋‚ด๋ฉด ๋˜์ง€๋งŒ, ์„œ๋ฒ„ ์ž์›์€ ํ•œ์ •๋˜์–ด ์žˆ๋‹ค.
ํด๋ผ์ด์–ธํŠธ์˜ Date ๊ฐ์ฒด๋งŒ์œผ๋กœ๋Š” ์„œ๋ฒ„์™€ ์‹œ๊ฐ„ ๋™๊ธฐํ™”ํ•  ์ˆ˜ ์—†์„๊นŒ?

๐Ÿ‘‰ Date ๋‚ด์žฅ ๊ฐ์ฒด๋Š” ๋ฏฟ์„๋งŒํ•œ๊ฐ€?

๋ธŒ๋ผ์šฐ์ €์˜ Date ๋‚ด์žฅ ๊ฐ์ฒด๋กœ๋Š” ์—„๋ฐ€ํ•œ ์‹œ๊ฐ„ ๋™๊ธฐํ™”๊ฐ€ ๋ถˆ๊ฐ€๋Šฅํ•ด
5์ดˆ ๊ฐ„๊ฒฉ์œผ๋กœ ์‹œ๊ฐ„์„ ๊ฐฑ์‹ ํ•ด์ฃผ๋Š” ์ •๋„๋กœ ์š”์ฒญ์„ ์ตœ์†Œํ™”ํ•ด๋ณผ ์ˆ˜ ์žˆ์„๊นŒ?
setInterval์€ ์–ผ๋งˆ๋‚˜ ๋ฏฟ์„ ์ˆ˜ ์žˆ์„๊นŒ?

๐Ÿ‘‰ setInterval์€ ๋ฉ”์ธ์Šค๋ ˆ๋“œ๊ฐ€ ๋ฐ”๋น ๋„ ์ •ํ™•ํ•˜๊ฒŒ ๋™์ž‘ํ• ๊นŒ?


๐Ÿ“๋ฌธ์ œ ํ•ด๊ฒฐ ๊ณผ์ •: ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ…

BE) ๋Œ€์‹œ๋ณด๋“œ ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ Redis ์„ค์น˜ ๊ณผ์ •์—์„œ ๊ฒช์€ ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…

๋Œ€์‹œ๋ณด๋“œ ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด Redis๋ฅผ ์„ค์น˜ํ•˜๋ ค๊ณ  ํ–ˆ๋‹ค.
NestJS์—์„œ ์ œ๊ณตํ•˜๋Š” cache-module์„ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ, Redis์— ํŠนํ™”๋œ ์ž๋ฃŒ๊ตฌ์กฐ๋ฅผ(e.g. SortedSet) ์ œ์–ดํ•˜๋Š” ๋ช…๋ น์–ด๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์—ˆ๋‹ค.
redis-client๋ฅผ ์„ค์น˜ํ•˜์—ฌ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ๋‹ค.

๐Ÿ‘‰ ๋Œ€์‹œ๋ณด๋“œ ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ Redis ์„ค์น˜ ๊ณผ์ •์—์„œ ๊ฒช์€ ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…

BE) ํŠธ๋žœ์žญ์…˜๊ณผ ๋ฝ ๊ด€๋ จ ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…

์ผ๋ถ€ ์ฑ„์  ๊ฒฐ๊ณผ๊ฐ€ ๋ˆ„๋ฝ๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.
์ฑ„์ ์ด ๋ณ‘๋ ฌ์ ์œผ๋กœ ์ง„ํ–‰๋˜์–ด API ์„œ๋ฒ„์— ์š”์ฒญ์ด ๊ฑฐ์˜ ๋™์‹œ์— ๋“ค์–ด์™”๊ณ , ๊ฒฝ์Ÿ ์กฐ๊ฑด์ด ๋ฐœ์ƒํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ด์—ˆ๋‹ค.
ํŠธ๋žœ์žญ์…˜์„ ๊ฑธ์—ˆ์ง€๋งŒ, ๋ฌธ์ œ๋Š” ํ•ด๊ฒฐ๋˜์ง€ ์•Š์•˜๊ณ , ๋ฝ์„ ๊ฑด ์ดํ›„์—์•ผ ์ œ๋Œ€๋กœ ๋™์ž‘ํ–ˆ๋‹ค.

๐Ÿ‘‰ ๋„์ปค ์„œ๋ฒ„ ๊ฐœ์ˆ˜ 5๊ฐœ๋กœ ๋Š˜๋ฆฐ ์ดํ›„ ์ผ๋ถ€ ์ฑ„์  ๊ฒฐ๊ณผ๊ฐ€ ๋ˆ„๋ฝ๋˜๋Š” ๋ฌธ์ œ

BE) ๋„์ปค ๊ถŒํ•œ ๊ด€๋ จ ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…

๊ธฐ์กด์—๋Š” root ์‚ฌ์šฉ์ž๋กœ ๋ชจ๋“  ์„œ๋ฒ„๋ฅผ ์šด์˜ํ•˜๊ณ  ์žˆ์—ˆ๋‹ค.
๋ณด์•ˆ์ƒ์˜ ์ด์œ ๋กœ ์ฝ”๋“œ ์‹คํ–‰ ์„œ๋ฒ„์˜ ์œ ์ € ๊ถŒํ•œ์„ root์—์„œ ์ผ๋ฐ˜์‚ฌ์šฉ์ž๋กœ ๋ฐ”๊พธ์—ˆ๋Š”๋ฐ, ๊ถŒํ•œ์ด ์ค„์–ด๋“ค์–ด ํŒŒ์ผ ์ฝ๊ธฐ ์“ฐ๊ธฐ๊ฐ€ ๋˜์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.
๋„์ปค ์œ ์ € ์„ค์ •์„ ํ†ตํ•ด API ์„œ๋ฒ„์™€ ์ฑ„์  ์„œ๋ฒ„์˜ ๊ถŒํ•œ์„ ์ผ๋ฐ˜ ์‚ฌ์šฉ์ž๋กœ ๋ฐ”๊พธ์–ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ๋‹ค.

๐Ÿ‘‰ ์ฑ„์ ์„œ๋ฒ„ ๋„์ปค ๊ถŒํ•œ์œผ๋กœ ์ธํ•œ ์ฝ๊ธฐ/์“ฐ๊ธฐ ๋ถˆ๊ฐ€ ๋ฌธ์ œ

FE) useEffect, ์ƒ๋ช…์ฃผ๊ธฐ๋ฅผ ์•Œ๊ณ  ์“ฐ์ž

socket์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„ ๋Œ€์‹œ๋ณด๋“œ๋ฅผ ๋ชจ๋‹ฌ๋กœ ๋ณด์—ฌ์ค˜์•ผ์ง€
๋ชจ๋‹ฌ์„ ๋‹ซ๊ณ  ๋‹ค์‹œ ์—ด๋ฉด ๋ฐ์ดํ„ฐ๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์ˆ˜์‹ ๋˜์ง€ ์•Š์•„
ํŽ˜์ด์ง€์—์„œ๋Š” ์ •์ƒ ์ž‘๋™ํ•˜๋Š”๋ฐ, ๋ชจ๋‹ฌ์—์„œ๋Š” ์™œ ์ž‘๋™ํ•˜์ง€ ์•Š์„๊นŒ?

๐Ÿ‘‰ [ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ…] useEffect, ์ƒ๋ช…์ฃผ๊ธฐ๋ฅผ ์•Œ๊ณ  ์“ฐ์ž

FE) ์‹ฑ๊ธ€ํ†ค ํŒจํ„ด์„ ์ด์šฉํ•œ ์›น์†Œ์ผ“ ๋‹ค์ค‘ ์—ฐ๊ฒฐ ์ƒํƒœ ํ•ด๊ฒฐ

ํ†ต์‹  ์˜ค๋ฒ„ํ—ค๋“œ๋ฅผ ์ค„์ด๊ธฐ ์œ„ํ•ด ์›น ์†Œ์ผ“์„ ์‚ฌ์šฉํ•˜๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค.
๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋กœ ์›น ์†Œ์ผ“ ์—ฐ๊ฒฐ์„ ํ™•์ธํ•˜๋‹ˆ 10๊ฐœ์˜ ์›น ์†Œ์ผ“์ด ์—ฐ๊ฒฐ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ–ˆ๋‹ค.
๋ฌด์—‡์ด ๋ฌธ์ œ๊ณ , ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ•ด ๋‚˜๊ฐ€์•ผํ• ๊นŒ?

๐Ÿ‘‰ [ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ…] ์‹ฑ๊ธ€ํ†ค ํŒจํ„ด์„ ์ด์šฉํ•œ ์›น์†Œ์ผ“ ๋‹ค์ค‘ ์—ฐ๊ฒฐ ์ƒํƒœ ํ•ด๊ฒฐ

FE) ๋ฐฐํฌํ•˜๊ณ  ์ƒˆ๋กœ๊ณ ์นจํ•˜๋ฉด 404ํŽ˜์ด์ง€๊ฐ€ ๋– ์š”

Netlify์— ์›นํŽ˜์ด์ง€๋Š” ๋ฐฐํฌ๋ฅผ ๋งˆ์ณค๋‹ค.
ํ•˜์ง€๋งŒ ๋ฉ”์ธ ํŽ˜์ด์ง€๋ฅผ ์ œ์™ธํ•œ ๋‹ค๋ฅธ ํŽ˜์ด์ง€์—์„œ ์ƒˆ๋กœ๊ณ ์นจ์„ ํ•˜๋ฉด 404 ํŽ˜์ด์ง€๊ฐ€ ๋‚˜์˜ค๋Š” ๋ฌธ์ œ๋ฅผ ๊ฒช๊ฒŒ ๋œ๋‹ค.
๊ฐœ๋ฐœ ํ™˜๊ฒฝ๊ณผ ๋ฐฐํฌ ํ™˜๊ฒฝ์€ ๋ฌด์—‡์ด ๋‹ฌ๋ผ ์ด๋Ÿฐ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ์„๊นŒ? ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์„๊นŒ?

๐Ÿ‘‰ [ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ…] ๋ฐฐํฌํ•˜๊ณ  ์ƒˆ๋กœ๊ณ ์นจํ•˜๋ฉด 404ํŽ˜์ด์ง€๊ฐ€ ๋– ์š”


๐Ÿ—๋ฌธ์ œ ํ•ด๊ฒฐ ๊ณผ์ •: ๊ฒฐ๊ณผ

BE) ๋ถ€ํ•˜ ํ…Œ์ŠคํŠธ ๊ฒฐ๊ณผ

JMeter๋กœ ๋ถ€ํ•˜ํ…Œ์ŠคํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•˜์—ฌ ๋ถ€์ŠคํŠธ์บ ํ”„ ์ „ ์ธ์›์ด ์šฐ๋ฆฌ ์„œ๋น„์Šค๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ์„์ง€ ์•Œ์•„๋ณด์•˜๋‹ค.
200๋ช…์ด ๋™์‹œ์— WebSocket์„ ํ†ตํ•ด ๋Œ€์‹œ๋ณด๋“œ ๋ฐ์ดํ„ฐ๋ฅผ ์›ํ™œํ•˜๊ฒŒ ๋ฐ›์„ ์ˆ˜ ์žˆ์Œ์„ ํ™•์ธํ•˜์˜€๋‹ค.
๊ทธ๋ฆฌ๊ณ , 100๋ช…์ด 0~10์ดˆ ๊ท ๋“ฑํ™•๋ฅ ๋ถ„ํฌ๋กœ ์ฝ”๋“œ ์ œ์ถœ ์š”์ฒญ์„ ๋ณด๋ƒˆ์„ ๋•Œ, ์ฑ„์ ์„ ์›ํ™œํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Œ์„ ํ™•์ธํ–ˆ๋‹ค.

๐Ÿ‘‰ ๋ถ€ํ•˜ ํ…Œ์ŠคํŠธ ์ˆ˜ํ–‰ ๋ฐ ๊ฒฐ๊ณผ ์ •๋ฆฌ



๐Ÿ‘จโ€๐Ÿ‘จโ€๐Ÿ‘งโ€๐Ÿ‘ง๋ฏธ๋‹ˆ ๊ฐœ๋ฐœ ์„ธ๋ฏธ๋‚˜

๋ฏธ๋‹ˆ ๊ฐœ๋ฐœ ์„ธ๋ฏธ๋‚˜ 5ํšŒ

๋ฏธ๋‹ˆ ๊ฐœ๋ฐœ ์„ธ๋ฏธ๋‚˜๋ž€?

๋ฏธ๋‹ˆ ๊ฐœ๋ฐœ ์„ธ๋ฏธ๋‚˜๋Š” Web12 ์ฝ”๋“œ ์‚ฌํ”ผ์—”์ŠคํŒ€ ๋‚ด๋ถ€์—์„œ ๊ณต์œ  ๋ฌธํ™”๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์‹œ์ž‘๋œ ์†Œ๊ทœ๋ชจ ์„ธ๋ฏธ๋‚˜์ž…๋‹ˆ๋‹ค. 5 ~ 10๋ถ„ ๋™์•ˆ ์ž์œ ์ฃผ์ œ ํ˜น์€ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ๊ณต์œ ํ•˜๊ณ  ์‹ถ์€ ๋‚ด์šฉ์„ ๋ฐœํ‘œํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค. ๋ฐœํ‘œ์ž๋Š” ํŒ€์›๋“ค๋กœ ๊ตฌ์„ฑ๋˜์ง€๋งŒ, ๋‹ค๋ฅธ ์บ ํผ๋“ค๋„ ์ž์œ ๋กญ๊ฒŒ ๋“ฃ๊ณ  ์งˆ๋ฌธํ•  ์ˆ˜ ์žˆ๋„๋ก ์™ธ๋ถ€์ ์œผ๋กœ ๊ณต๊ฐœํ•˜์˜€์Šต๋‹ˆ๋‹ค. 2023/11/08 ์ฒซ ์„ธ๋ฏธ๋‚˜๋ฅผ ์‹œ์ž‘์œผ๋กœ 5ํšŒ ์ง„ํ–‰๋˜์—ˆ์œผ๋ฉฐ, ๋ถ€์ŠคํŠธ์บ ํ”„๊ฐ€ ๋๋‚˜๊ณ ๋„ ์ด์–ด๊ฐˆ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

๐Ÿ‘‰ ์ „์ฒด ๋ณด๊ธฐ

Best Pick

์ธ๋„ค์ผ ํ•œ ์ค„ ์†Œ๊ฐœ ๋งํฌ
๊ทธ๋Œ€๋“ค ์–ด๋–ป๊ฒŒ ๊ฐœ๋ฐœํ•  ๊ฒƒ์ธ๊ฐ€? ์ œ๊ฐ€ ๊ฐœ๋ฐœ์ž์˜ ๊ธธ์„ ๊ฑท๊ฒŒ ๋˜๋ฉด์„œ ์Šค์Šค๋กœ ๊ฐ€์ง€๊ณ  ์žˆ๋˜ ๊ฐœ๋ฐœ์ž์˜ ์ •์˜๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ฐ”๋€Œ์—ˆ๋Š”์ง€ ํšŒ๊ณ ํ•˜๊ณ  ์งˆ๋ฌธ์„ ๋˜์ง‘๋‹ˆ๋‹ค ๊ทธ๋Œ€๋“ค ์–ด๋–ป๊ฒŒ ๊ฐœ๋ฐœํ•  ๊ฒƒ์ธ๊ฐ€?
WebSocket์„ ์„ ํƒํ•œ ์ด์œ  ์–‘๋ฐฉํ–ฅ ํ†ต์‹ ๋“ค์˜ ๊ธฐ๋ฒ•์— ๋Œ€ํ•ด์„œ ๊ฐ„๋žตํžˆ ์•Œ์•„๋ณด๊ณ , ์™œ ์šฐ๋ฆฌ๊ฐ€ webSocket์„ ์„ ํƒํ–ˆ๋Š”์ง€ ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค. WebSocket์„ ์„ ํƒํ•œ ์ด์œ 
ํด๋ฆฐ ์ฝ”๋“œ, ์ฃผ์„ ํด๋ฆฐ ์ฝ”๋“œ๋ฅผ ์™œ ์ง€ํ–ฅํ•ด์•ผ ํ•˜๋Š”์ง€, ํด๋ฆฐ ์ฝ”๋“œ์™€ ์ฃผ์„์˜ ์ƒ๊ด€๊ด€๊ณ„๋Š” ๋ฌด์—‡์ธ์ง€์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค. ํด๋ฆฐ ์ฝ”๋“œ, ์ฃผ์„
Why MSA? MicroService Architecture๊ฐ€ ๋ฌด์—‡์ธ์ง€, ์–ด๋–ค ์žฅ์ ์ด ์žˆ๋Š”์ง€, ์–ธ์ œ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”์ง€ ์‚ดํŽด๋ด…๋‹ˆ๋‹ค. Why MSA?
๋Œ€์‹œ๋ณด๋“œ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•˜์ง€ ๋Œ€์‹œ๋ณด๋“œ ์‹ค์‹œ๊ฐ„ ๊ฐฑ์‹ ์„ ์œ„ํ•ด WebSocket๊ณผ Redis๋ฅผ ๋„์ž…ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ ๊ณผ์ •์„ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ๋Œ€์‹œ๋ณด๋“œ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•˜์ง€



๐Ÿ‘ท์•„ํ‚คํ…์ฒ˜

์บก์ฒ˜ ์•„ํ‚คํ…์ฒ˜



๐Ÿ› ๊ธฐ์ˆ ์Šคํƒ

Language

TypeScript JavaScript

BE Skill

NestJS Socket.io Postgres Redis Docker Express.js NodeJS Nginx TypeORM

FE Skill

React Socket.io PandaCSS

Etc

Netlify Notion Slack Figma GitHub Actions



๐Ÿ—บ๋””์ž์ธ ๋ฐ ๊ธฐํš



๐ŸŽธ๊ธฐํƒ€ ๋“ฑ๋“ฑ



๐Ÿ™‰ํŒ€์› ์†Œ๊ฐœ

FE FE FE BE BE

J079 ์–‘๊ธฐ์กฐ
(dev2820)

J111 ์ด์šฐ์ฐฌ
(dmdmdkdkr)

J140 ์ •์œ ์„
(mahwin)

J026 ๊น€์šฉํ›„
(rladydgn)

J109 ์ด์˜ˆ์ฐฌ
(yechan2468)