๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๋…์„œ ๋ชฉ๋ก/IT 5๋ถ„ ์žกํ•™์‚ฌ์ „ (with ๋…ธ๊ฐœ๋ถ)

[IT 5๋ถ„ ์žกํ•™์‚ฌ์ „] Day 6. ์—ํ”ผ์†Œ๋“œ 16 ~ 21

728x90

๐Ÿ’œ ์˜ค๋Š˜์˜ TIL ์š”์•ฝ


๐Ÿ”ธ์ฟ ํ‚ค๋Š” ์„œ๋ฒ„์˜ ๊ธฐ์–ต์„ ๊ฐ€์ง€๊ณ  ์žˆ์Œ. 

๐Ÿ”ธ์„œ๋ฒ„๋Š” ํ•ญ์ƒ ์ผœ์ ธ์žˆ์œผ๋ฉฐ ์ธํ„ฐ๋„ท์ด ์—ฐ๊ฒฐ๋˜์–ด์žˆ๊ณ  ์š”์ฒญ์„ ๊ธฐ๋‹ค๋ฆฌ๋Š” ์ปดํ“จํ„ฐ

๐Ÿ”ธ์„œ๋ฒ„๋ฆฌ์Šค๋Š” ํ•จ์ˆ˜๋‹จ์œ„๋กœ ์ชผ๊ฐœ์ ธ์žˆ์œผ๋ฉฐ ํ•ด๋‹น ํ•จ์ˆ˜๊ฐ€ ์š”์ฒญ์˜ฌ๋•Œ๋งˆ๋‹ค ๊นจ์–ด๋‚˜ ์ž‘์—…ํ•˜๊ณ  ๋‹ค์‹œ ์ž ๋“ ๋‹ค

 

๐ŸŒ› ์ฑ…์—์„œ ๊ธฐ์–ตํ•˜๊ณ  ์‹ถ์€ ๋‚ด์šฉ


์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ
- CSS๋ฅผ ์ตœ์ดˆ๋กœ ์ ์šฉํ•œ ์›น๋ธŒ๋ผ์šฐ์ €
- ์—์ด์ ์Šค(Ajax, ์›น ์‚ฌ์ดํŠธ๋‚ด์šฉ์„ ์—…๋ฐ์ดํŠธํ•˜๋ฉด ์ƒˆ๋กœ ๊ณ ์นจ์—†์ด ๋ฐ”๋กœ ํ™•์ธ ๊ฐ€๋Šฅํ•œ ๊ธฐ์ˆ )๊ธฐ์ˆ  ์ตœ์ดˆ๋กœ ์ง€์›
- ๋ณด์•ˆ ๋ฌธ์ œ์™€ ๋’ค์ณ์ง€๋Š” ์—…๋ฐ์ดํŠธ๋กœ ์ง€์› ์ค‘๋‹จ ํ›„, ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ ์—ฃ์ง€๋กœ ์ƒˆ๋กœ ๊ฐœ๋ฐœ์— ๋ฐœํ‘œ
(์—ฃ์ง€์˜ ์—”์ง„ : ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ € ์—”์ง„ ๋ธ”๋งํฌ)

๋ธŒ๋ผ์šฐ์ € ์—”์ง„, ๋ Œ๋”๋ง ์—”์ง„
์›น ํ‘œ์ค€์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐœ๋ฐœ๋œ ์›น ๋ธŒ๋ผ์šฐ์ € ํ•ต์‹ฌ ํ”„๋กœ๊ทธ๋žจ
ํŒŒ์ด์–ดํญ์Šค - ๊ฒŒ์ฝ” ์—”์ง„ / ์‚ฌํŒŒ๋ฆฌ - ์›นํ‚ท ์—”์ง„ / ํฌ๋กฌ - ๋ธ”๋งํฌ ์—”์ง„
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ์—ํฌ๋งˆ์Šคํฌ๋ฆฝํŠธ(ECMAScript)ํ‘œ์ค€์•ˆ ์กด์žฌ
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์›น๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰ํ• ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ํ”„๋กœ๊ทธ๋žจ์ธ ์—”์ง„

ํฌ๋กฌ-v8
๋…ธ๋“œ์ œ์ด์—์Šค, ๋””๋…ธ์™€ ๊ฐ™์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ•ด์„ํ•ด์•ผํ•˜๋Š” ๊ณณ ์—์„œ๋„ ์“ฐ์ž„

HTTP (HyperText Transfer Protocol)
์ธํ„ฐ๋„ท์—์„œ ์‚ฌ์šฉ์ž์™€ ์„œ๋ฒ„๊ฐ€ ์ •๋ณด๋ฅผ ์ฃผ๊ณ ๋ฐ›๊ธฐ ์œ„ํ•œ ํ”„๋กœํ† ์ฝœ
HTTP์—์„œ๋Š” ์‚ฌ์šฉ์ž์™€ ์„œ๋ฒ„๋Š” ํ•ญ์ƒ ์—ฐ๊ฒฐ๋˜์–ด์žˆ์ง€ ์•Š์Œ(stateless)
: ์„œ๋ฒ„๋Š” ์ฃผ์†Œ์— ํ•ด๋‹นํ•˜๋Š” ๋ฐ์ดํ„ฐ(HTML,CSS,JS ๋“ฑ)๋ฅผ ์ „๋‹ฌํ•˜๊ณ  ๋‚˜์„œ ์—ฐ๊ฒฐ ์ƒํƒœ๋ฅผ ๋Š์Œ

์ฟ ํ‚ค
์ฟ ํ‚ค๋Š” ์›น์‚ฌ์ดํŠธ์— ์ ‘์†ํ•  ๋•Œ๋งˆ๋‹ค ์„œ๋ฒ„์— ์ „์†ก๋˜์–ด ์„œ๋ฒ„์˜ ๊ธฐ์–ต์„ ๋˜์‚ด๋ฆผ
ํŽธ์˜, ๋ณด์•ˆ๋“ฑ์˜ ์ด์œ ๋กœ ๊ทœ์น™ ์กด์žฌ
์ฟ ํ‚ค๋Š” ๋„๋ฉ”์ธ 1๊ฐœ์—๋งŒ ํ•œ์ •
์ฟ ํ‚ค๋Š” ์ž๋™์œผ๋กœ ๋ณด๋‚ด์ง
์ฟ ํ‚ค๋Š” ์ปดํ“จํ„ฐ์— ์ž๋™์œผ๋กœ ์ €์žฅ๋จ

์„œ๋ฒ„
ํ•ญ์ƒ ์ผœ์ ธ์žˆ์œผ๋ฉฐ, ์ธํ„ฐ๋„ท์— ์—ฐ๊ฒฐ๋˜์–ด์žˆ๋Š” ์ ‘์† ์š”์ฒญ์— ์‘๋‹ตํ•˜๋Š” ์ปดํ“จํ„ฐ
์ €์žฅ์†Œ์™€ ๋ฉ”๋ชจ๋ฆฌํฌ๊ธฐ๊ฐ€ ํฐ ์ปดํ“จํ„ฐ
์„œ๋ฒ„๋Š” 24์‹œ๊ฐ„ ๋‚ด๋‚ด ์‚ฌ์šฉ์ž์˜ ์ฃผ์†Œ์ž…๋ ฅ์„ ๊ธฐ๋‹ค๋ฆผ
์ฃผ์†Œ๊ฐ€ ์ž…๋ ฅ๋˜๋ฉด ๊ทธ ์ฃผ์†Œ์— ํ•ด๋‹นํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๊บผ๋‚ด์„œ ๋ณด์—ฌ์คŒ
ํ’€์Šคํƒ = ํ”„๋ก ํŠธ์—”๋“œ + ๋ฐฑ์—”๋“œ + ๋ฐ๋ธŒ์˜ต์Šค(DevOps)

ํ”„๋ก ํŠธ์—”๋“œ
์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค(user inteface, UI) : ์‚ฌ์šฉ์ž์™€ ์ƒํ˜ธ์ž‘์šฉ
HTML, CSS, JS, react, Jqeury , Vue.js etc.
์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋Š” UI ์ƒ์„ฑ

๋ฐฑ์—”๋“œ
์‚ฌ์šฉ์ž๊ฐ€ ๋ˆˆ์œผ๋กœ ๋ณผ ์ˆ˜ ์—†์ง€๋งŒ, ์‹ค์ œ๋กœ๋Š” ์‚ฌ์šฉํ•ด์•ผํ•˜๋Š” ๊ธฐ๋Šฅ
์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅ์„ ํ•˜๊ณ ๋‚˜์„œ์˜ ๋ฐ์ดํ„ฐ์ฒ˜๋ฆฌ

๋ฐ๋ธŒ์˜ต์Šค
์„œ๋ฒ„๋ฅผ ์˜ฌ๋ ค์•ผํ•จ : ์„œ๋ฒ„๋ฅผ ์„ ํƒ, ์„ค์ •, ์„œ๋ฒ„์— ์†Œํ”„ํŠธ์›จ์–ด์„ค์น˜,
๋ฐ์ดํ„ฐ ๋ฒ ์ด์Šค ์„ค์ •, ๋ณด์•ˆ etc.
๊ณผ๊ฑฐ์—๋Š” ์‹ค์ œ๋กœ ์„œ๋ฒ„๋ฅผ ๊ตฌ๋งคํ•˜๊ณ  ์ „์›, ์ธํ„ฐ๋„ท์„ ์—ฐ๊ฒฐํ•ด ์ „๋ถ€ ์ˆ˜๋™์œผ๋กœ ๊ด€๋ฆฌํ•จ.
์•„๋งˆ์กด์˜ EC2 : ์•„๋งˆ์กด ์—˜๋ผ์Šคํ‹ฑ ์ปดํ“จํŠธ ํด๋ผ์šฐ๋“œ
์•„๋งˆ์กด์ด ์„œ๋ฒ„๋ฅผ ๋Œ€์‹  ์šด์˜ ํ•ด์คŒ
์ตœ์‹  ์„œ๋ฒ„๋ฅผ ์ •์ „ ๋ฐ ๊ฐ์ข… ์‚ฌ๊ณ  ์—†์ด ์•ˆ์ „ํ•˜๊ฒŒ ์ œ๊ณต, ๊ด€๋ฆฌํ•ด์ฃผ๋Š” ์„œ๋น„์Šค
์•„๋งˆ์กด๋ฟ๋งŒ์•„๋‹ˆ๋ผ, ๊ตฌ๊ธ€, ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ์›จ์–ด์—์„œ ๊ฐ์ข… ์„œ๋น„์Šค ์ œ๊ณต
ํ•˜๋“œ์›จ์–ด๋ฅผ ์ œ๊ณตํ•ด์ฃผ๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ์†Œํ”„ํŠธ์›จ์›Œ ๊ด€๋ฆฌ๋Š” ์ง์ ‘ํ•ด์•ผํ•จ
์„œ๋ฒ„ ์šด์˜์ฒด์ œ ์—…๋ฐ์ดํŠธ, ๋ณด์•ˆ ์ ๊ฒ€, ์žฅ์•  ํšŒ๋ณต ์‹œ์Šคํ…œ ๊ตฌ์ถ•, ๋ฐ์ดํ„ฐ ๋ฐฑ์—…๋“ฑ

์„œ๋ฒ„๋ฆฌ์Šค
์„œ๋ฒ„๋ฅผ ์œ„ํ•œ ์†Œํ”„ํŠธ์›จ์–ด(๋ฐฑ์—”๋“œ์ฝ”๋“œ)๋ฅผ ์ž‘์€ ํ•จ์ˆ˜ ๋‹จ์œ„๋กœ ์ชผ๊ฐœ์„œ ์„œ๋น„์Šค(์„œ๋ฒ„)์— ์˜ฌ๋ฆฌ๋Š” ๊ฒƒ
24์‹œ๊ฐ„ ๊นจ์–ด์žˆ์œผ๋ฉฐ ์š”์ฒญ์— ์‘๋‹ต์„ ๊ธฐ๋‹ค๋ฆฌ๋Š” ์„œ๋ฒ„์™€ ๋‹ฌ๋ฆฌ ์„œ๋ฒ„๋ฆฌ์Šค๋Š” ํ•ด๋‹น ํ•จ์ˆ˜๊ฐ€ ํ•„์š”ํ•  ๋•Œ(์š”์ฒญ) ๊นจ์›Œ์„œ ์š”์ฒญํ•œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๊ณ  ๋‹ค์‹œ ์ž ์ด๋“ฌ!
์ „๋ ฅ๋‚ญ๋น„ ๊ฐ์†Œ. ํšจ์œจ์ ์ธ ํ•˜๋“œ์›จ์–ด ์‚ฌ์šฉ. ์š”์ฒญ์ด ์˜ฌ๋•Œ๋งˆ๋‹ค ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์— ๊ธˆ์•ก๋„ ์ €๋ ดํ•ด์ง
- ๋‹จ์ 
์„œ๋ฒ„๋ฆฌ์Šค์˜ ํ•จ์ˆ˜๋Š” ์ž ์—์„œ ๊นฐ ๋•Œ ์‹œ๊ฐ„์ด ํ•„์š”ํ•จ : ์ฝœ๋“œ ์Šคํƒ€ํŠธ
AWS(Amazone Web Service)๊ฐ€ ํ•จ์ˆ˜๋ฅผ ๊นจ์šฐ๋ ค๋ฉด ์‹œ๊ฐ„์ด ํ•„์š”ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‹œ๊ฐ„์ด ์ค‘์š”ํ•œ ์„œ๋น„์Šค์—์„œ๋Š” ๋งž์ง€์•Š๋Š” ์„ ํƒ์ผ ์ˆ˜ ์žˆ์Œ
์„œ๋ฒ„ ์ œ๊ณต์ž์—๊ฒŒ ์ง€๋‚˜์น˜๊ฒŒ ์˜์กดํ•จ
๋‹ค๋ฅธ ํšŒ์‚ฌ์˜ ์„œ๋น„์Šค๋กœ ์˜ฎ๊ธฐ๊ธฐ ํž˜๋“ฌ
์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ, ํ”„๋กœํ†  ํƒ€์ž… ๋“ฑ์— ์‚ฌ์šฉํ•˜๊ธฐ ์ข‹์Œ
serverless.com , AWS ๋žŒ๋‹ค, ๊ตฌ๊ธ€ ํด๋ผ์šฐ๋“œ ํŽ‘์…˜(Google Cloud Function), ์•„ํŽ™์Šค(Apex) , ํ…Œ๋ผํผ(Teraform)

 

๐ŸŒท ์ฝ์€ ์†Œ๊ฐ ๋ฐ ๋– ์˜ค๋ฅด๋Š” ์ƒ๊ฐ


์ „์—๋Š” ๊ฐ€๋ณ๊ฒŒ ์ฝ์—ˆ์—ˆ๋Š”๋ฐ, ์ ์  ๊ผญ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•˜๋Š” ๋‚ด์šฉ๋“ค์ด ๋‚˜์™€์„œ ์ž˜ ์ตํ˜€์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ ๋‹ค. 

 

 

 

 

728x90
๋ฐ˜์‘ํ˜•