MapleStory Finger Point

โšช ๊ฐœ๋… ์ •๋ฆฌ 12

ํ—ฅ์‚ฌ๊ณ ๋‚  ์•„ํ‚คํ…์ฒ˜(Hexagonal Architecture) ๊ฐœ๋…

๋ชฉ์ฐจ    ํ—ฅ์‚ฌ๊ณ ๋‚  ์•„ํ‚คํ…์ฒ˜ ๊ฐœ๋… ํ—ฅ์‚ฌ๊ณ ๋‚  ์•„ํ‚คํ…์ฒ˜(Hexagonal Architecture)= ํฌํŠธ์™€ ์–ด๋Œ‘ํ„ฐ ์•„ํ‚คํ…์ฒ˜(Ports and Adapters Architecture)= ์œก๊ฐํ˜• ์•„ํ‚คํ…์ณ  ๐Ÿ“Œ ๋น„์ง€๋‹ˆ์Šค ๋ชจ๋ธ(๋„๋ฉ”์ธ)์„ ์™ธ๋ถ€์™€ ๊ฒฉ๋ฆฌ์‹œ์ผœ ์œ ์—ฐ+ํ…Œ์ŠคํŠธํ•˜๊ธฐ ์‰ฌ์šด ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ๋น„์ง€๋‹ˆ์Šค ์ฝ”๋“œ๋ฅผ ๊ธฐ์ˆ  ์ฝ”๋“œ์™€ ๋ถ„๋ฆฌ์‹œํ‚จ๋‹ค. (๋˜ํ•œ ๊ธฐ์ˆ ์ฝ”๋“œ๋„ ์ด์— ๋งž๊ฒŒ ๋ณ€๊ฒฝ ํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•จ) ๋น„์ง€๋‹ˆ์Šค ๋ชจ๋ธ์€ ์ค‘์•™์˜ ๋„๋ฉ”์ธ ์˜์—ญ, ์ž…๋ ฅ๊ณผ ์ถœ๋ ฅ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ํฌํŠธ , ์–ด๋Œ‘ํ„ฐ๋ฅผ ํ†ตํ•ด ์™ธ๋ถ€์™€ ์†Œํ†ตํ•จ    ์ˆ˜์ง์  ๊ณ„์ธตํ™”์™€ ๊ธฐ๋Šฅ ๊ธฐํŒ ํŒจํ‚ค์ง€ ์•„ํ‚คํ…์ฒ˜์˜  ์žฅ์ ์„ ๋™์‹œ์— ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค !๊ณ„์ธต๊ธฐ๋ฐ˜ ํŒจํ‚ค์ง• (MVC ์•„ํ‚คํ…์ณ) + ๊ธฐ๋Šฅ๊ธฐ๋ฐ˜ ํŒจํ‚ค์ง•(๋„๋ฉ”์ธ, ์—ญํ• ๋ผ๋ฆฌ ํŒจํ‚ค์ง•)  = โญ ๊ตฌ์กฐ ,์šฉ์–ด ํด๋”๊ตฌ์กฐadapter, apllication ,dom..

TDD (Test-Driven Development) ๋ฐฉ๋ฒ•๋ก  ๊ฐœ๋…

๋ชฉ์ฐจ   TDD ๊ฐœ๋…Test-Driven Development (ํ…Œ์ŠคํŠธ ์ฃผ๋„ ๊ฐœ๋ฐœ) ์˜ ์•ฝ์ž๊ฐœ๋ฐœ ๋ฐฉ์‹ ์ค‘ ํ•˜๋‚˜์ž„  ๐Ÿ“Œ๊ธฐ์กด์˜ ๊ฐœ๋ฐœ :์š”๊ตฌ์‚ฌํ•ญ ๋ถ„์„ -> ์„ค๊ณ„ -> ๊ฐœ๋ฐœ -> ํ…Œ์ŠคํŠธ -> ๋ฐฐํฌ(์žฌ์„ค๊ณ„๋กœ ์ธ ํ•œ  => ์œ ์ง€๋ณด์ˆ˜ ์–ด๋ ค์›€ ใ…œใ…œ) ๐Ÿ“Œ TDD :๋ชฉ์  ์ •์˜ -> (์ผ๋‹จ) ์‹คํŒจ ํ…Œ์ŠคํŠธ ์ž‘์„ฑ -> ํ…Œ์ŠคํŠธ๋ฅผ ํ†ต๊ณผํ•˜๋Š” ์ตœ์†Œํ•œ์˜ ์ฝ”๋“œ ์ž‘์„ฑ -> ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง (๋ฐ˜๋ณต)-> ๊ฐœ๋ฐœ ->  ๋ฐฐํฌ  TDD ํˆด JUnit : java ์—์„œ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ๋‹จ์œ„ ํ…Œ์ŠคํŠธ ํ”„๋ ˆ์ž„์›Œํฌ (์ด์™ธ์—๋„ xUnit ์ด๋ผ๊ณ  ๋‹ค๋ฅธ ์–ธ์–ด๋“ค๋„ ์žˆ์Œ) Mockito : Mocking(๋ชจ์˜) ํ•˜์—ฌ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ๊ฒŒํ•˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ     red-green-refactoring cycle   TDD ์žฅ๋‹จ์ ์žฅ์ - ๊ฐœ๋ฐœ์ƒ์‚ฐ์„ฑ, ๊ตฌํ˜„ ๋“ฑ๋“ฑ ํšจ์œจ์ ์ž„ ๋‹จ์ -..

Library | Framework | API ๊ฐœ๋…

๋ชฉ์ฐจ    ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(Library) ์ฃผ๋„๊ถŒ์ด ๊ฐœ๋ฐœ์ž (ํ•„์š”ํ•  ๋•Œ ํ˜ธ์ถœ) ์ฝ”๋“œ ๋ชจ์Œ์ž„์ฝ”๋“œ, ๋ชจ๋“ˆ, ํŒจํ‚ค์ง€ ํ˜•ํƒœ๋กœ ์ œ๊ณต๋จ๊ฐœ๋ฐœ์ž๊ฐ€ ์ฝ”๋“œ ํ๋ฆ„ ์ œ์–ด ๊ฐ€๋Šฅ  ๐Ÿ“Œ JavaScript jQuery์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ DOM ์กฐ์ž‘ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, Ajax ์š”์ฒญ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ ๊ฐœ์„ Lodash์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ  ๋ฐฐ์—ด, ๊ฐ์ฒด ์œ ํ‹ธ๋ฆฌํ‹ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฐ์ดํ„ฐ ์กฐ์ž‘ ์ตœ์ ํ™”Moment.js / Day.js์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‚ ์งœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‚ ์งœ ํฌ๋งท ๋ณ€ํ™˜Axios์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ HTTP ํด๋ผ์ด์–ธํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌREST API ํ˜ธ์ถœ   ํ”„๋ ˆ์ž„์›Œํฌ(Framework) ์ฃผ๋„๊ถŒ์ด ํ”„๋ ˆ์ž„์›Œํฌ (๊ฐœ๋ฐœ์ž๊ฐ€ ์ข…์†๋จ, ๊ทœ์น™๊ตฌ์กฐ๋ฅผ ๋”ฐ๋ฆ„)  ๐Ÿ“Œ ๋ฐฑ์—”๋“œSpringJava๋Œ€๊ทœ๋ชจ ์‹œ์Šคํ…œ, ๊ฐ์ฒด ์ง€ํ–ฅ๊ธฐ์—… ์‹œ์Šคํ…œ, ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜DjangoPython๋น ๋ฅธ ๊ฐœ๋ฐœ, ๋ณด์•ˆ ๊ฐ•ํ•จ๋ฐ์ดํ„ฐ ๋ถ„์„, ์Šคํƒ€ํŠธ..

HTTP(Hypertext Transfer Protocol) ๋ฉ”์„œ๋“œ์™€ ์‘๋‹ต์ฝ”๋“œ

HTTP ์ƒํƒœ ์ฝ”๋“œ ์ •๋ฆฌ1xx (์ •๋ณด ์‘๋‹ต)100 Continue: ์š”์ฒญ์„ ๊ณ„์† ์ง„ํ–‰ํ•ด๋„ ๋จ.101 Switching Protocols: ํ”„๋กœํ† ์ฝœ ๋ณ€๊ฒฝ ์š”์ฒญ ์Šน์ธ.102 Processing: ์š”์ฒญ์ด ์ฒ˜๋ฆฌ ์ค‘ (WebDAV).103 Early Hints: ๋ณธ๋ฌธ ์ „์†ก ์ „์— ๋ฏธ๋ฆฌ ํ—ค๋” ์ œ๊ณต. 2xx (์„ฑ๊ณต ์‘๋‹ต)200 OK: ์ •์ƒ ์‘๋‹ต.201 Created: ์ƒˆ๋กœ์šด ๋ฆฌ์†Œ์Šค ์ƒ์„ฑ ์™„๋ฃŒ.202 Accepted: ์š”์ฒญ์ด ์ ‘์ˆ˜๋˜์—ˆ์œผ๋‚˜ ์ฒ˜๋ฆฌ ๋ฏธ์™„๋ฃŒ or ์‹œ์ž‘๋˜์ง€ ์•Š์•˜์„ ์ˆ˜ ์žˆ์Œ203 Non-Authoritative Information: ์‹ ๋ขฐํ•  ์ˆ˜ ์—†๋Š” ์ถœ์ฒ˜์—์„œ ์ •๋ณด ์ œ๊ณต.204 No Content: ๋ณธ๋ฌธ ์—†์ด ์„ฑ๊ณต ์‘๋‹ต.205 Reset Content: ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋ทฐ๋ฅผ ์ดˆ๊ธฐํ™”ํ•ด์•ผ ํ•จ.206 Partial Conte..

MSA(Microservices Architecture) ๊ฐœ๋…

๋ชฉ์ฐจ    ์ด๋ฒˆ์— ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ MSA ๋ฐฉ์‹์„ ๋„์ž…ํ•ด๋ณด๊ธฐ๋กœ ํ–ˆ์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ MSA ์— ๋Œ€ํ•œ ๊ณต๋ถ€๋„ ํ•˜๊ณ  ์–ด๋ ต๊ฒŒ ํ”„๋กœ์ ํŠธ ์„ธํŒ…๊นŒ์ง€ ํ–ˆ์ง€๋งŒ.. ์ง„ํ–‰ํ•˜๋ ค๋˜ ํ”„๋กœ์ ํŠธ๊ฐ€ MSA ๋ฅผ ์‚ฌ์šฉํ•  ๋งŒํ•œ ํ”„๋กœ์ ํŠธ๋„ ์•„๋‹ ๋ฟ๋”๋Ÿฌ, ๋น„ํšจ์œจ์ ์ธ ๋ถ€๋ถ„์ด ๋งŽ์•„์„œ (์„œ๋ฒ„๋ฅผ ์—ฌ๋Ÿฌ๊ฐœ ์ผœ์•ผํ•จ) ๊ฒฐ๊ตญ MSA ๋ฐฉ์‹์€ ํฌ๊ธฐํ•˜๊ฒŒ๋˜์—ˆ๋‹ค. ใ…œใ…œ ๊ทธ๋ž˜์„œ ์ด๋ก ์ด๋ผ๋„ ๋„์ ๋„์  ํ•ด ๋ณผ ์˜ˆ์ •..  ๋Œ€ํ‘œ ๊ฐœ๋… API Gateway : Spring Cloud Gateway ์™€ Webflux ๋กœ ๊ตฌํ˜„Service Discovery : Netflix Eureka ์‚ฌ์šฉ์œผ๋กœ ๊ตฌํ˜„Config Server : Spring Cloud Config ์‚ฌ์šฉ์œผ๋กœ ๊ตฌํ˜„  MSA๋ž€?MSA(Microservices Architecture, ๋งˆ์ดํฌ๋กœ์„œ๋น„์Šค ์•„ํ‚คํ…์ฒ˜)๋Š”์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ..

์›น ์†Œ์ผ“ (WebSocket) ๊ฐœ๋…

HTTPํด๋ผ์ด์–ธํŠธ๊ฐ€ ์š”์ฒญ(Request) → ์„œ๋ฒ„๊ฐ€ ์‘๋‹ต(Response)์‘๋‹ต ํ›„ ์—ฐ๊ฒฐ์ด ๋‹ซํž˜ (Stateless)์ƒˆ๋กœ์šด ์š”์ฒญ๋งˆ๋‹ค ๋‹ค์‹œ ์—ฐ๊ฒฐ ํ•„์š”์ฃผ๋กœ ๋‹จ๋ฐฉํ–ฅ ํ†ต์‹  (ํด๋ผ์ด์–ธํŠธ → ์„œ๋ฒ„)๋ฐ์ดํ„ฐ๋ฅผ ํ—ค๋”์— ํฌํ•จ์‹œ์ผœ์„œ ์ „๋‹ฌํ•จ ํด๋ง(Polling)ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์ผ์ • ์ฃผ๊ธฐ๋กœ ์„œ๋ฒ„์— ์š”์ฒญํ•˜์—ฌ ๋ฐ์ดํ„ฐ ๊ฐฑ์‹ ์„ ํ™•์ธํ•˜๋Š” ๋ฐฉ์‹์žฅ์ : ๊ธฐ์กด HTTP ๋ฐฉ์‹์—์„œ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ ๊ฐ€๋Šฅ๋‹จ์ : ์‘๋‹ต์ด ์—†๋”๋ผ๋„ ๊ณ„์† ์š”์ฒญ์„ ๋ณด๋‚ด๋ฏ€๋กœ ๋„คํŠธ์›Œํฌ ๋‚ญ๋น„ ๋ฐœ์ƒ, ๋ฆฌ์†Œ์Šค ๋‚ญ๋น„๊ฐ€ ๋งค์šฐ ์‹ฌํ•จ, ์‹ค์‹œ๊ฐ„์„ฑ์ด ๋‚ฎ๋‹ค.* ๋„คํŠธ์›Œํฌ ์˜ค๋ฒ„ํ—ค๋“œ : ์‹ค์ œ ๋ฐ์ดํ„ฐ ์ด์™ธ์˜ ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ๋“ค์˜ ๋ถˆํ•„์š”ํ•œ ๋„คํŠธ์›Œํฌ ๋ถ€ํ•˜ WebSocketํ•œ ๋ฒˆ ์—ฐ๊ฒฐํ•˜๋ฉด ์ข…๋ฃŒ ์ „๊นŒ์ง€ ์œ ์ง€ ( Persistent  Connection)์–‘๋ฐฉํ–ฅ ํ†ต์‹  ๊ฐ€๋Šฅ ํ”„๋กœํ† ์ฝœ (ํด๋ผ์ด์–ธํŠธ ↔ ์„œ๋ฒ„)์ง€์—ฐ ์‹œ๊ฐ„์ด ์งง์Œ (๋น ๋ฅธ ..

SPA vs MPA | SSR vs CSR

SPA ์™€ MPA ๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ตฌ์กฐ์™€ ๋™์ž‘ ๋ฐฉ์‹์— ๊ตฌ๋ถ„๋˜๋Š” ํŒจํ„ด์ด๋‹ค.์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๊ณ  ์–ด๋–ป๊ฒŒ ํŽ˜์ด์ง€๋ฅผ ๋žœ๋”๋งํ•˜๋Š” ์ง€๊ฐ€ ์ค‘์ ์ด๋‹ค.   MPA (Multi-Page Application)์ •์˜:MPA๋Š” ๋‹ค์ค‘ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์˜๋ฏธํ•˜๋ฉฐ, ๊ฐ ํŽ˜์ด์ง€๋งˆ๋‹ค ๊ฐœ๋ณ„์ ์ธ HTML ํŒŒ์ผ์ด ๋กœ๋“œ๋˜๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ž…๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์„œ๋ฒ„์—์„œ ๊ฐ ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•˜๊ณ , ๊ฐ URL์€ ํ•˜๋‚˜์˜ ๊ณ ์œ ํ•œ ํŽ˜์ด์ง€๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.ํŠน์ง•:ํŽ˜์ด์ง€ ์ „ํ™˜: ์‚ฌ์šฉ์ž๊ฐ€ ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•  ๋•Œ๋งˆ๋‹ค, ์ƒˆ๋กœ์šด HTML ํŽ˜์ด์ง€๋ฅผ ์„œ๋ฒ„์—์„œ ๋กœ๋“œํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.์„œ๋ฒ„ ๋ Œ๋”๋ง: ์š”์ฒญ์ด ์žˆ์„ ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„์—์„œ HTML์„ ๋ Œ๋”๋งํ•˜๊ณ , ์ด๋ฅผ ํด๋ผ์ด์–ธํŠธ์— ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.๋™์  ํŽ˜์ด์ง€: ํด๋ผ์ด์–ธํŠธ๊ฐ€ ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๋ฉด ์„œ๋ฒ„๊ฐ€ ์ด๋ฅผ ์ฒ˜๋ฆฌํ•˜์—ฌ ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.์žฅ..

MIME type = media type = Content-Type

๋ชฉ์ฐจ    Content-Type, MIME type, media type์˜ ๊ด€๊ณ„ ์ด๋“ค์€ ๋ชจ๋‘ ๊ฐ™์€ ๊ฐœ๋…์œผ๋กœ, ์ธํ„ฐ๋„ท์—์„œ ํŒŒ์ผ ํฌ๋งท๊ณผ ์ฝ˜ํ…์ธ ๋ฅผ ์‹๋ณ„ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๊ณผ๊ฑฐ์—๋Š” MIME type ์œผ๋กœ ๋ถˆ๋ ธ์ง€๋งŒ, ์ง€๊ธˆ์€ media type ์œผ๋กœ ์‚ฌ์šฉํ•จ. ๋•Œ๋•Œ๋กœ content type ์ด๋ผ๊ณ ๋„ ๋ถˆ๋ฆผ     MIME( Multipurpose Internet Mail Extensions ) typeํŒŒ์ผ์˜ ํ˜•์‹์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฌธ์ž์—ด๋กœ ํŒŒ์ผ๊ณผ ๊ฐ™์ด ์†ก์‹ ๋˜๋Š”๋ฐ content์˜ ํ˜•์‹์„ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ์œˆ๋„์šฐ์˜ ํŒŒ์ผ ํ™•์žฅ์ž์™€ ๋™์ผํ•œ ์—ญํ• ์ด๋ฉ”์ผ ๋ฉ”์„ธ์ง€ , ์ฒจ๋ถ€ํŒŒ์ผ ์ข…๋ฅ˜๋ฅผ ๊ณ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์ •์˜๋˜์—ˆ๊ณ  ์ด๋ฅผ ๊ทผ๊ฑฐ๋กœ MIME ํƒ€์ž…์ด๋ผ๋Š” ์ด๋ฆ„์ด ๋งŒ๋“ค์–ด์ง์ง€๊ธˆ์€ Media Type ์ด๋ผ๋Š” ์šฉ์–ด๋กœ ์‚ฌ์šฉ ๋œ๋‹ค.   media type ๋ฏธ๋””์–ด ํƒ€์ž…์€ ..

HTTP (Hypertext Transfer Protocol) ๊ฐœ๋…

๋ชฉ์ฐจ    HTTP ๋ž€? HTTP๋Š” HTML ๋ฌธ์„œ์™€ ๊ฐ™์€ ๋ฆฌ์†Œ์Šค๋“ค์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ณ„์ธต ํ”„๋กœํ† ์ฝœ  (ํด๋ผ์ด์–ธํŠธ-์„œ๋ฒ„ ํ”„๋กœํ† ์ฝœ)  * ํ”„๋ก์‹œ :  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ณ„์ธต์—์„œ ๋™์ž‘ํ•˜๋Š” ๊ฒƒ๋“ค์„ ์ผ๋ฐ˜์ ์œผ๋กœ ๋ถ€๋ฅด๋Š” ๋ง, ํ•˜๋‹จ์˜ ๊ธฐ๋Šฅ๋“ค์„ ์ˆ˜ํ–‰ ํ•  ์ˆ˜ ์žˆ๋‹ค.์บ์‹ฑ (์บ์‹œ๋Š” ๊ณต๊ฐœ ๋˜๋Š” ๋น„๊ณต๊ฐœ๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค (์˜ˆ: ๋ธŒ๋ผ์šฐ์ € ์บ์‹œ))ํ•„ํ„ฐ๋ง (๋ฐ”์ด๋Ÿฌ์Šค ๋ฐฑ์‹  ์Šค์บ”, ์œ ํ•ด ์ปจํ…์ธ  ์ฐจ๋‹จ(์ž๋…€ ๋ณดํ˜ธ) ๊ธฐ๋Šฅ)๋กœ๋“œ ๋ฐธ๋Ÿฐ์‹ฑ (์—ฌ๋Ÿฌ ์„œ๋ฒ„๋“ค์ด ์„œ๋กœ ๋‹ค๋ฅธ ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•˜๋„๋ก ํ—ˆ์šฉ)์ธ์ฆ (๋‹ค์–‘ํ•œ ๋ฆฌ์†Œ์Šค์— ๋Œ€ํ•œ ์ ‘๊ทผ ์ œ์–ด)๋กœ๊น… (์ด๋ ฅ ์ •๋ณด๋ฅผ ์ €์žฅ) HTTP ํŠน์ง• ๋ฌด์ƒํƒœ(Stateless) : HTTP๋Š” ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜์ง€ ์•Š๊ณ ,๊ฐ๊ฐ์˜ ์š”์ฒญ๊ณผ ์‘๋‹ต์ด ๋…๋ฆฝ์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋จ, ์„œ๋ฒ„๋Š” ์š”์ฒญ ๊ฐ„์˜ ์—ฐ๊ฒฐ ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ํšจ์œจ์ ์ด์ง€๋งŒ, ..

AJAX, Fetch, Axios

๋ชฉ์ฐจ   1. AJAX (Asynchronous JavaScript and XML) 2005๋…„ ํƒ„์ƒ ๊ธฐ์กด: ์›น ํŽ˜์ด์ง€์—์„œ ์„œ๋ฒ„์™€ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›์„ ๋•Œ ํŽ˜์ด์ง€ ์ „์ฒด๋ฅผ ์ƒˆ๋กœ ๊ณ ์น˜๋Š” ๋ฐฉ์‹ (๋น„ํšจ์œจ์ )ํ˜„์žฌ: ํŽ˜์ด์ง€ ์ผ๋ถ€๋งŒ ๋™์ ์œผ๋กœ ๊ฐฑ์‹  (๋น„๋™๊ธฐ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋จ)*๋น„๋™๊ธฐ: ์ž‘์—…์„ ์š”์ฒญํ•˜๊ณ  ๊ทธ ์ž‘์—…์ด ๋๋‚  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆฌ์ง€ ์•Š๊ณ  ๋‹ค๋ฅธ ์ผ์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๋ฐฉ์‹ ๐Ÿ“Œ๋‹จ์ ๋ณต์žกํ•œ ์ฝ”๋“œ: AJAX๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋Š” XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ง์ ‘ ๋‹ค๋ค„์•ผ ํ•ด์„œ ์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์ง€๊ณ  ๋ณต์žก๋ธŒ๋ผ์šฐ์ € ๊ฐ„ ์ฐจ์ด: ์ดˆ๊ธฐ์—๋Š” ๋ธŒ๋ผ์šฐ์ € ๊ฐ„ ํ˜ธํ™˜์„ฑ ๋ฌธ์ œ์ง€์› ๋ถ€์กฑ: ์ผ๋ถ€ ๊ธฐ๋Šฅ์€ ๊ตฌํ˜• ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๋Œ€๋กœ ์ง€์›๋˜์ง€ ์•Š์Œ 2. Fetch API2015๋…„ W3C ์›น ํ‘œ์ค€ ์ฑ„ํƒ๋จ (2014๋…„ ์ฏค ๋“ฑ์žฅ) ๊ธฐ์กด: AJAX์˜ XMLHttpReques..