์ „์ฒด ๊ธ€ 35

[CLOUD] ์„œ๋น„์Šค ๋ฉ”์‹œ (Service Mesh)

์„œ๋น„์Šค ๋ฉ”์‹œ(Service Mesh)๋ž€? ์„œ๋น„์Šค ๋ฉ”์‹œ๋Š” ์„œ๋น„์Šค ๊ฐ„์˜ ํ†ต์‹ ์„ ์ œ์–ดํ•˜๊ณ  ํ‘œ์‹œํ•˜๊ณ  ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๋ฐ ํŠนํ™”๋œ ๋งˆ์ดํฌ๋กœ ์„œ๋น„์Šค๋ฅผ ์œ„ํ•œ ์ธํ”„๋ผ ๊ณ„์ธต์ž…๋‹ˆ๋‹ค. ๊ธฐ์กด์˜ ์„œ๋น„์Šค ์•„ํ‚คํ…์ฒ˜์—์„œ์˜ ํ˜ธ์ถœ์€ ์ง์—… ํ˜ธ์ถœ ๋ฐฉ์‹์ด์—ˆ๋‹ค๋ฉด, ์„œ๋น„์Šค ๋ฉ”์‹œ์—์„œ์˜ ํ˜ธ์ถœ์€ ์ž์ฒด ์ธํ”„๋ผ ๊ณ„์ธต์˜ proxy๊ฐ„์— ์ด๋ค„์ง‘๋‹ˆ๋‹ค. ์„œ๋น„์Šค ๋ฉ”์‹œ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ฐœ๋ณ„ proxy๋Š” ์„œ๋น„์Šค ๋‚ด๋ถ€๊ฐ€ ์•„๋‹ˆ๋ผ ๊ฐ ์„œ๋น„์Šค์™€ ํ•จ๊ป˜ ์‹คํ–‰๋˜๋ฏ€๋กœ 'sidecar'๋ผ๊ณ ๋„ ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ์„œ๋น„์Šค์—์„œ ๋ถ„๋ฆฌ๋œ ์ด๋Ÿฌํ•œ sidecar proxy๋“ค์ด ๋ชจ์—ฌ Mesh Network๋ฅผ ํ˜•์„ฑํ•ฉ๋‹ˆ๋‹ค. Mesh Network ๋งˆ์ดํฌ๋กœ ์„œ๋น„์Šค์˜ ๋‹จ์  ์„œ๋น„์Šค ๋ฉ”์‹œ ์—†์ด ๋™์ž‘ํ•˜๋Š” ๋งˆ์ดํฌ๋กœ ์„œ๋น„์Šค๋Š” ์„œ๋น„์Šค ๊ฐ„ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์„ ํ†ต์ œํ•˜๋Š” ๋กœ์ง์œผ๋กœ ์ฝ”๋”ฉํ•ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ๋ฐœ์ž๋“ค์ด ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์— ์ง‘์ค‘..

[JAVA] JAVA Thread(์Šค๋ ˆ๋“œ) ์‚ฌ์šฉ๋ฒ• & ์˜ˆ์ œ

Thread๋ž€? ํ•˜๋‚˜์˜ ํ”„๋กœ์„ธ์Šค ๋‚ด๋ถ€์—์„œ ๋…๋ฆฝ์ ์œผ๋กœ ์‹คํ–‰๋˜๋Š” ํ•˜๋‚˜์˜ ์ž‘์—… ๋‹จ์œ„ ์šด์˜์ฒด์ œ์— ์˜ํ•ด ๊ด€๋ฆฌ๋˜๋Š” ํ•˜๋‚˜์˜ ์ž‘์—…(Task) Thread = Task(์ž‘์—…) JVM์— ์˜ํ•ด ํ•˜๋‚˜์˜ ํ”„๋กœ์„ธ์Šค๊ฐ€ ๋ฐœ์ƒํ•˜๊ณ  main() ์•ˆ์˜ ์‹คํ–‰๋ฌธ๋“ค์ด ํ•˜๋‚˜์˜ ์Šค๋ ˆ๋“œ main() ์ด์™ธ์˜ ๋˜ ๋‹ค๋ฅธ ์Šค๋ ˆ๋“œ๋ฅผ ๋งŒ๋“ค๋ ค๋ฉด Thread ํด๋ž˜์Šค๋ฅผ ์ƒ์†ํ•˜๊ฑฐ๋‚˜ Runnable ์ธํ„ฐํŽ˜์ด์Šค ๊ตฌํ˜„ ๋ฉ€ํ‹ฐ ์Šค๋ ˆ๋“œ ์ž‘์—… ์‹œ, ๊ฐ ์Šค๋ ˆ๋“œ๋ผ๋ฆฌ ์ •๋ณด๋ฅผ ์ฃผ๊ณ ๋ฐ›์„ ์ˆ˜ ์žˆ์–ด ์ฒ˜๋ฆฌ ๊ณผ์ •์˜ ์˜ค๋ฅ˜๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์Œ ํ”„๋กœ์„ธ์Šค๋ผ๋ฆฌ๋Š” ์ •๋ณด ๊ตํ™˜ ๋ถˆ๊ฐ€๋Šฅ ๋ฉ€ํ‹ฐ ์Šค๋ ˆ๋“œ(Multi Thread)๋ž€? ์—ฌ๋Ÿฌ ์Šค๋ ˆ๋“œ๋ฅผ ๋™์‹œ์— ์‹คํ–‰์‹œํ‚ค๋Š” ์‘์šฉํ”„๋กœ๊ทธ๋žจ์„ ์ž‘์„ฑํ•˜๋Š” ๊ธฐ๋ฒ• ์žฅ์  ๋ฉ”๋ชจ๋ฆฌ ๊ณต์œ ๋กœ ์ธํ•œ ์‹œ์Šคํ…œ ์ž์› ์†Œ๋ชจ ์ค„์–ด๋“ฌ ๋™์‹œ ์ž‘์—…์ด ๊ฐ€๋Šฅ ๋‹จ์  ์ž์›์„ ๊ณต์œ ํ•˜๊ธฐ์— ์ถฉ๋Œ ๋ฐœ์ƒ ๊ฐ€๋Šฅ์„ฑ ์กด์žฌ ๋กœ์ง์˜ ๋ณต์žก๋„..

[JAVA] Map ์ „์ฒด ์ถœ๋ ฅ(entrySet, keySet, Iterator)

HTML ์‚ฝ์ž… ๋ฏธ๋ฆฌ๋ณด๊ธฐํ•  ์ˆ˜ ์—†๋Š” ์†Œ์Šค Map์˜ ๊ฐ’์„ ์ „์ฒด ์ถœ๋ ฅํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐฉ๋ฒ•1 : entrySet() HTML ์‚ฝ์ž… ๋ฏธ๋ฆฌ๋ณด๊ธฐํ•  ์ˆ˜ ์—†๋Š” ์†Œ์Šค key์™€ value์˜ ๊ฐ’ ๋ชจ๋‘ ํ•„์š”ํ•œ ๊ฒฝ์šฐ์— ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ฐฉ๋ฒ•2 : keySet() HTML ์‚ฝ์ž… ๋ฏธ๋ฆฌ๋ณด๊ธฐํ•  ์ˆ˜ ์—†๋Š” ์†Œ์Šค key์˜ ๊ฐ’๋งŒ ํ•„์š”ํ•œ ๊ฒฝ์šฐ์— ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ฐฉ๋ฒ•3 : entrySet().iterator() HTML ์‚ฝ์ž… ๋ฏธ๋ฆฌ๋ณด๊ธฐํ•  ์ˆ˜ ์—†๋Š” ์†Œ์Šค iterator ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ์ปฌ๋ ‰์…˜์ธ Map์—์„œ iterator ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” Map์— entrySet(), keySer() ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Set ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜๋ฐ›์€ ํ›„ iterator ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ฐฉ๋ฒ•4 : keySet().iterator() HTML..

[OS] ๋ฉ€ํ‹ฐ ์Šค๋ ˆ๋“œ(Multi Thread) vs ๋ฉ€ํ‹ฐ ํ”„๋กœ์„ธ์Šค(Multi Process)

๋ฉ€ํ‹ฐ ์Šค๋ ˆ๋”ฉ (Multi Threading) ๋ณดํ†ต ์šฐ๋ฆฌ๊ฐ€ ์ž‘์„ฑํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ํ•˜๋‚˜์˜ ํ”„๋กœ์„ธ์Šค๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. ๋˜, ํ•˜๋‚˜์˜ ํ”„๋กœ์„ธ์Šค๋Š” ๋ณดํ†ต ํ•˜๋‚˜์˜ ์Šค๋ ˆ๋“œ๋งŒ ์‚ฌ์šฉํ•˜์—ฌ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜์˜ ํŒŒ์ด์ฌ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. HTML ์‚ฝ์ž… ๋ฏธ๋ฆฌ๋ณด๊ธฐํ•  ์ˆ˜ ์—†๋Š” ์†Œ์Šค ์‹คํ–‰ ๊ฒฐ๊ณผ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. process_id : 25939 thread_id : 4539137536 ์ด๋ ‡๊ฒŒ ํ•˜๋‚˜์˜ ํ”„๋กœ์„ธ์Šค์—์„œ ํ•˜๋‚˜์˜ ์Šค๋ ˆ๋“œ๋งŒ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ "์‹ฑ๊ธ€ ์Šค๋ ˆ๋”ฉ"์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์ž‘์„ฑํ•˜๋Š” ๋Œ€๋ถ€๋ถ„์˜ ์ฝ”๋“œ๋“ค์€ ์ด๋ ‡๊ฒŒ ์‹ฑ๊ธ€ ์Šค๋ ˆ๋”ฉ์ž…๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด, ํ•˜๋‚˜์˜ ํ”„๋กœ์„ธ์Šค์—์„œ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์Šค๋ ˆ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. HTML ์‚ฝ์ž… ๋ฏธ๋ฆฌ๋ณด๊ธฐํ•  ์ˆ˜ ์—†๋Š” ์†Œ์Šค ์‹คํ–‰ ๊ฒฐ๊ณผ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. # ๊ฐ™์€ ํ”„๋กœ์„ธ์Šค process_id : 27180..

Computer Science/OS 2022.08.14

[OS] CPU Bound vs I/O Bound

์ปดํ“จํ„ฐ๊ฐ€ ์ˆ˜ํ–‰ํ•˜๋Š” ํ•˜๋‚˜์˜ ์ž‘์—…์€ CPU ์ž‘์—…(CPU Bounded Task)๊ณผ I/O ์ž‘์—…(I/O Bounded Task)์œผ๋กœ ์ด๋ฃจ์–ด์ง‘๋‹ˆ๋‹ค. CPU Bounded Task CPU Bounded Task๋Š” ์ž‘์—… ์ˆ˜ํ–‰ ์‹œ I/O๋ณด๋‹ค CPU๋ฅผ ๋” ๋งŽ์ด ์“ฐ๋Š” ์ž‘์—…์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๋งŽ์€ ์—ฐ์‚ฐ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์ด์— ํ•ด๋‹นํ•˜๋ฉฐ ์˜ˆ๋กœ๋Š” ๋จธ์‹ ๋Ÿฌ๋‹์ด ์žˆ์Šต๋‹ˆ๋‹ค. (I/O ์ž‘์—…๋„ ์žˆ์ง€๋งŒ CPU ์‚ฌ์šฉ๋Ÿ‰์ด ์••๋„์ ์ž…๋‹ˆ๋‹ค.) I/O Bounded Task I/O Bounded Task๋Š” ์ž‘์—… ์ˆ˜ํ–‰ ์‹œ CPU๋ณด๋‹ค๋Š” I/O ์ž‘์—…์ด ๋งŽ์€ ๊ฒฝ์šฐ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋กœ๋Š” ํฌ๋กค๋ง, DB ๋ฐ์ดํ„ฐ ์†ก์ˆ˜์‹  ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์›น, WAS ์„œ๋ฒ„๋Š” I/O Boundedํ•œ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค.

Computer Science/OS 2022.08.14

[OS] ๋ณ‘๋ ฌ์„ฑ๊ณผ ๋™์‹œ์„ฑ

๋ณ‘๋ ฌ์„ฑ๊ณผ ๋™์‹œ์„ฑ์€ ํ•œ์ •๋œ ์ž์›(CPU, ๋ฉ”๋ชจ๋ฆฌ)์—์„œ ํšจ์œจ์ ์œผ๋กœ ํ”„๋กœ์„ธ์Šค๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์ƒ๊ธด ๊ฐœ๋…์ž…๋‹ˆ๋‹ค. ๋™์‹œ์„ฑ ๋™์‹œ์„ฑ์€ ๊ธฐ๋ณธ์ ์œผ๋กœ CPU 1์ฝ”์–ด๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ด์•ผ๊ธฐํ•ฉ๋‹ˆ๋‹ค. (์‹ค์ œ๋Š” ๋ฌผ๋ฆฌ์ ์œผ๋กœ CPU 1๊ฐœ์˜ ์ฝ”์–ด์—์„œ๋งŒ ๋™์ž‘ํ•˜๋Š” ๊ฐœ๋…์ด ์•„๋‹Œ, ์ œํ•œ๋œ ์ž์›์—์„œ ์—ฌ๋Ÿฌ ์ž‘์—…์„ ํ•œ ๋ฒˆ์— ์‹คํ–‰์‹œํ‚ค๋ ค๋Š” ๋…ผ๋ฆฌ์  ๊ฐœ๋…์ž…๋‹ˆ๋‹ค.) ์ดํ•ด๋ฅผ ๋•๊ณ ์ž ์ปดํ“จํ„ฐ ๋ฐœ์ „์˜ ์ดˆ๊ธฐ ๋•Œ๋ฅผ ์˜ˆ๋กœ ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ปดํ“จํ„ฐ ๋ฐœ์ „ ์ดˆ๊ธฐ์—๋Š” ์ปดํ“จํ„ฐ ํ•œ ๋Œ€๋‹น CPU๋Š” ํ•˜๋‚˜์˜€์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ณด๋‹ˆ CPU๊ฐ€ ํ•œ ๋ฒˆ์— ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ช…๋ น๋„ ํ•˜๋‚˜์˜€์Šต๋‹ˆ๋‹ค. ๋งŒ์•ฝ ์ด๋Ÿฐ ์ƒํ™ฉ์—์„œ I/O ์ž‘์—…๋“ค์ด ๋งŽ์•„์ง„๋‹ค๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ์š”? I/O ์ž‘์—…์„ ํ•˜๋Š” ๋™์•ˆ CPU๋Š” ๋Œ€๊ธฐ ์ƒํƒœ์— ์žˆ๋Š” I/O Blocking์ด ๋ฐœ์ƒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. (์ด๋ฅผ CPU ๋ธ”๋ฝ ์ƒํƒœ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.) ๋งŒ์•ฝ ์ด I/O ..

Computer Science/OS 2022.08.14

[OS] ํ”„๋กœ์„ธ์Šค(Process)์™€ ์Šค๋ ˆ๋“œ(Thread)

ํ”„๋กœ์„ธ์Šค(Process) ํ”„๋กœ์„ธ์Šค๋Š” ์šด์˜์ฒด์ œ์— ์˜ํ•ด ์—ฐ์†์ ์œผ๋กœ ์‹คํ–‰๋˜๊ณ  ์žˆ๋Š” ํ”„๋กœ๊ทธ๋žจ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰ ์‹œ ์šด์˜์ฒด์ œ๊ฐ€ ๋ฉ”๋ชจ๋ฆฌ ์œ„์— ํ”„๋กœ์„ธ์Šค๋ฅผ ์ƒ์„ฑํ•˜๊ฒŒ ๋˜๋ฉฐ ์šด์˜์ฒด์ œ์— ์˜ํ•ด CPU, ๋ฉ”๋ชจ๋ฆฌ ์ž์›์„ ํ• ๋‹น๋ฐ›๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ํ”„๋กœ์„ธ์Šค๋Š” ๋…๋ฆฝ๋œ ๋ฉ”๋ชจ๋ฆฌ ์˜์—ญ์œผ๋กœ Code, Heap, Data, Stack์„ ํ• ๋‹น๋ฐ›์Šต๋‹ˆ๋‹ค. Code : ๊ฐœ๋ฐœ์ž๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ Data : ์ „์—ญ๋ณ€์ˆ˜, ์ •์ ๋ณ€์ˆ˜, ๋ฐฐ์—ด, ๊ตฌ์กฐ์ฒด ๋“ฑ ํ”„๋กœ๊ทธ๋žจ์ด ์‹คํ–‰๋˜๋ฉด์„œ ์ƒ๊ธฐ๋Š” ์ •์ ์ธ ๋ฐ์ดํ„ฐ Stack : ํ•จ์ˆ˜ ํ˜ธ์ถœ๊ณผ ๊ด€๋ จ๋œ ์ •๋ณด(์‹คํ–‰์ •๋ณด, ์ง€์—ญ๋ณ€์ˆ˜, ํŒŒ๋ผ๋ฏธํ„ฐ ๋“ฑ)์ด ์ €์žฅ๋ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์ปดํŒŒ์ผ ํƒ€์ž„์— Stack์˜ ํฌ๊ธฐ๊ฐ€ ๊ฒฐ์ •๋ฉ๋‹ˆ๋‹ค. Heap : ๋Ÿฐํƒ€์ž„์— ๋™์ ์œผ๋กœ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•˜๋Š” ์ƒํ™ฉ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค. ex) Array๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์™ธ๋ถ€ ..

Computer Science/OS 2022.08.13

[Vue.js] Vue.js ๊ธฐ๋ณธ - Vue Template

Vue Template Vue์˜ Template ๋ฌธ๋ฒ•์ด๋ž€, Vue๋กœ ํ™”๋ฉด์„ ์กฐ์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. Template ๋ฌธ๋ฒ•์€ ํฌ๊ฒŒ 1. Data Binding, 2.Directive ์œผ๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค. Data Binding : Vue Instance์—์„œ ์ •์˜ํ•œ ์†์„ฑ๋“ค์„ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. Instance์˜ ์†์„ฑ์„ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๊ตฌ์กฐ : {{data}} Directive : Vue๋กœ ํ™”๋ฉด์˜ ์š”์†Œ๋ฅผ ๋” ์‰ฝ๊ฒŒ ์กฐ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ๋ฌธ๋ฒ•์ž…๋‹ˆ๋‹ค. ํ™”๋ฉด ์กฐ์ž‘์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๋ฐฉ์‹๋“ค์„ ๋ชจ์•„ Directive ํ˜•ํƒœ๋กœ ์ œ๊ณตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๊ตฌ์กฐ : v- (ex. v-bind, v-if, v-else, v-show, v-on, v-model ๋“ฑ) !-- seen์˜ ์ง„์œ„ ๊ฐ’์— ๋”ฐ๋ผ p ํƒœ๊ทธ๊ฐ€ ํ™”๋ฉด์— ํ‘œ์‹œ..

Framework/Vue.js 2022.07.25

[Vue.js] Vue.js ๊ธฐ๋ณธ - Vue Router, Axios

Router Vue Router๋Š” Vue ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•˜์—ฌ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌํ˜„ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ์ด๋™ ์‹œ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋Šฅ์œผ๋กœ, ํ”„๋กœ์ ํŠธ์— Vue Router๋ฅผ ์„ค์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ CDN, NPM 2๊ฐ€์ง€ ๋ฐฉ์‹์ด ์žˆ์Šต๋‹ˆ๋‹ค. CDN ๋ฐฉ์‹ Axios Axios๋Š” Vue์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” Promise ๊ธฐ๋ฐ˜ HTTP ํ†ต์‹  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. CDN๊ณผ NPM ์„ค์น˜ ๋ฐฉ์‹ ๋ชจ๋‘ ์ง€์›ํ•˜๋ฉฐ ์ƒ๋Œ€์ ์œผ๋กœ ๋‹ค๋ฅธ HTTP ํ†ต์‹  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์— ๋น„ํ•ด ๋ฌธ์„œํ™”๊ฐ€ ์ž˜๋˜์–ด ์žˆ๊ณ  API๊ฐ€ ๋‹ค์–‘ํ•ฉ๋‹ˆ๋‹ค. script ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜๊ณ  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค. npm install axios axios์˜ ๊ธฐ๋ณธ๊ตฌ์กฐ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. methods: { fetchData: function() { axios.get(..

Framework/Vue.js 2022.07.25

[Vue.js] Vue.js ๊ธฐ๋ณธ - Component ํ†ต์‹ 

Component ํ†ต์‹  ๋ฐฉ์‹ - ๋ถ€๋ชจ / ์ž์‹ ๋ ˆ๋ฒจ Vue Component๋Š” ๊ฐ๊ฐ ๊ณ ์œ ํ•œ ๋ฐ์ดํ„ฐ ์œ ํšจ ๋ฒ”์œ„๋ฅผ ๊ฐ–์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ Component ๊ฐ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ  ๋ฐ›๊ธฐ ์œ„ํ•ด์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ๊ทœ์น™์„ ๋”ฐ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ž์‹ Component → ๋ถ€๋ชจ Component : Event ๋ฐœ์ƒ ๋ถ€๋ชจ Component → ์ž์‹ Component : Props ์ „๋‹ฌ ์ฆ‰, ์ž์‹ Component๋Š” ๋ถ€๋ชจ Component์—๊ฒŒ Event๋ฅผ ๋ฐœ์ƒ์‹œ์ผœ ์˜ฌ๋ ค์คŒ์œผ๋กœ์จ, ๋ถ€๋ชจ Component๋Š” ์ž์‹ Component์—๊ฒŒ props ์†์„ฑ์„ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. Props ๋ถ€๋ชจ Component → ์ž์‹ Component Props๋ฅผ ์ด์šฉํ•œ ์˜ˆ์ œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์œ„์˜ ์˜ˆ์ œ๋ฅผ ์ชผ๊ฐœ์–ด ๋ณธ๋‹ค๋ฉด ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. 1. ๋ถ€๋ชจ ..

Framework/Vue.js 2022.07.24
๋ฐ˜์‘ํ˜•