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

์ „์ฒด ๊ธ€62

์›น ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ์œ„ํ•œ 10๊ฐ€์ง€ ํ•„์ˆ˜ ๊ธฐ๋ฒ• ์ด๋ฏธ์ง€ ์ตœ์ ํ™”์„ค๋ช…์ด๋ฏธ์ง€๋Š” ์›น ํŽ˜์ด์ง€์—์„œ ํฐ ๋ถ€๋ถ„์„ ์ฐจ์ง€ํ•˜๋ฉฐ, ์ตœ์ ํ™”๋˜์ง€ ์•Š์€ ์ด๋ฏธ์ง€๋Š” ๋กœ๋”ฉ ์‹œ๊ฐ„์„ ์ง€์—ฐ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.์ตœ์ ํ™” ๋ฐฉ๋ฒ•์ ์ ˆํ•œ ํ˜•์‹ ์„ ํƒ: JPEG๋Š” ์‚ฌ์ง„์—, PNG๋Š” ํˆฌ๋ช…๋„๊ฐ€ ํ•„์š”ํ•œ ์ด๋ฏธ์ง€์— ์‚ฌ์šฉ.์ด๋ฏธ์ง€ ์••์ถ•: TinyPNG, ImageOptim๊ณผ ๊ฐ™์€ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•ด ์ด๋ฏธ์ง€ ํŒŒ์ผ ํฌ๊ธฐ ์ถ•์†Œ.๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€ ์‚ฌ์šฉ: srcset ์†์„ฑ์„ ์‚ฌ์šฉํ•ด ๋‹ค์–‘ํ•œ ํ•ด์ƒ๋„์— ๋งž๋Š” ์ด๋ฏธ์ง€๋ฅผ ์ œ๊ณต. ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…์„ค๋ช…์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ฝ”๋“œ๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ž‘์€ ๋ฒˆ๋“ค๋กœ ๋ถ„ํ• ํ•˜์—ฌ ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๋กœ๋“œํ•˜๋„๋ก ํ•˜๋Š” ๊ธฐ๋ฒ•์ž…๋‹ˆ๋‹ค.์ตœ์ ํ™” ๋ฐฉ๋ฒ•Webpack ์‚ฌ์šฉ: Webpack์˜ Dynamic Imports๋ฅผ ํ™œ์šฉํ•ด ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ… ๊ตฌํ˜„.React.lazy์™€ Suspense ์‚ฌ์šฉ: React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ์ฝ”.. 2024. 7. 2.
2024๋…„ ์ตœ์‹  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋ ˆ์ž„์›Œํฌ ๋น„๊ต: React vs Angular vs Vue.js vs Svelte React๊ฐœ์š”React๋Š” Facebook์—์„œ ๊ฐœ๋ฐœํ•œ ํ”„๋ก ํŠธ์—”๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ, ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์ธ UI ๋นŒ๋“œ๋ฅผ ์œ„ํ•ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๊ฐ€์ƒ DOM(Virtual DOM)๊ณผ ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ํŠน์ง•์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค.์ฃผ์š” ํŠน์ง•์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜: ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑVirtual DOM: ์„ฑ๋Šฅ ์ตœ์ ํ™”ํ’๋ถ€ํ•œ ์ƒํƒœ๊ณ„: Redux, React Router ๋“ฑ์žฅ์ ๊ฐ•๋ ฅํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ: ํ’๋ถ€ํ•œ ์ž๋ฃŒ์™€ ํŠœํ† ๋ฆฌ์–ผ์œ ์—ฐ์„ฑ: ๋‹ค์–‘ํ•œ ํ”„๋กœ์ ํŠธ์— ์ ์šฉ ๊ฐ€๋Šฅํผํฌ๋จผ์Šค: ํšจ์œจ์ ์ธ ์—…๋ฐ์ดํŠธ๋‹จ์ ์ดˆ๊ธฐ ์„ค์ • ๋ณต์žก์„ฑ: ์ดˆ๋ณด์ž์—๊ฒŒ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์ŒJSX ๋ฌธ๋ฒ•: HTML๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ˜ผํ•ฉ์‚ฌ์šฉ ์‚ฌ๋ก€FacebookInstagramAirbnbAngular๊ฐœ์š”Angular๋Š” Google์—์„œ ๊ฐœ๋ฐœํ•œ ํ”„๋ ˆ์ž„์›Œํฌ๋กœ, Typescript ๊ธฐ๋ฐ˜ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ .. 2024. 6. 20.
์‚ฌ์ด๋ฒ„ ๋ณด์•ˆ: ์˜ค๋Š˜๋‚ ์˜ ํ•„์ˆ˜ ์•ˆ์ „์žฅ์น˜ ๋””์ง€ํ„ธ ์‹œ๋Œ€์— ์ ‘์–ด๋“ค๋ฉด์„œ ์‚ฌ์ด๋ฒ„ ๋ณด์•ˆ์€ ์ ์  ๋” ์ค‘์š”ํ•ด์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐœ์ธ ์ •๋ณด ์œ ์ถœ, ์•…์„ฑ ์†Œํ”„ํŠธ์›จ์–ด, ์‚ฌ์ด๋ฒ„ ๊ณต๊ฒฉ ๋“ฑ ๋‹ค์–‘ํ•œ ์œ„ํ˜‘์— ๋Œ€๋น„ํ•˜๊ธฐ ์œ„ํ•ด ์–ด๋–ค ์กฐ์น˜๋ฅผ ์ทจํ•ด์•ผ ํ• ๊นŒ์š”? ์ด ๋ธ”๋กœ๊ทธ์—์„œ๋Š” ์‚ฌ์ด๋ฒ„ ๋ณด์•ˆ์˜ ์ค‘์š”์„ฑ๊ณผ ์‹ค์ œ ๋Œ€๋น„ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 1. ์‚ฌ์ด๋ฒ„ ๊ณต๊ฒฉ์˜ ํ˜„์‹ค ํ˜„๋Œ€์˜ ๋น„์ฆˆ๋‹ˆ์Šค์™€ ๊ฐœ์ธ์€ ์ธํ„ฐ๋„ท์„ ํ†ตํ•ด ์—ฐ๊ฒฐ๋˜์–ด ์žˆ์œผ๋ฉฐ, ์ด๋Š” ์‚ฌ์ด๋ฒ„ ๊ณต๊ฒฉ์ž๋“ค์—๊ฒŒ ์ทจ์•ฝํ•œ ์ง€์ ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ํ•ดํ‚น, ๋žœ์„ฌ์›จ์–ด, ํ”ผ์‹ฑ ๋“ฑ ๋‹ค์–‘ํ•œ ์‚ฌ์ด๋ฒ„ ๊ณต๊ฒฉ ํ˜•ํƒœ๊ฐ€ ์กด์žฌํ•˜๋ฉฐ, ์ด๋กœ ์ธํ•ด ํฐ ํ”ผํ•ด๋ฅผ ์ž…๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋นˆ๋ฒˆํ•ฉ๋‹ˆ๋‹ค. 2. ๊ฐœ์ธ ๋ณด์•ˆ ์Šต๊ด€ ์‚ฌ์ด๋ฒ„ ๊ณต๊ฒฉ์— ๋Œ€๋น„ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ์ธ์€ ๊ฐ„๋‹จํ•œ ์•ˆ์ „ ์ˆ˜์น™์„ ๋”ฐ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ•๋ ฅํ•œ ์•”ํ˜ธ ์‚ฌ์šฉ, ์ •๊ธฐ์ ์ธ ๋น„๋ฐ€๋ฒˆํ˜ธ ๋ณ€๊ฒฝ, ์ด๋ฉ”์ผ ์ฒจ๋ถ€ ํŒŒ์ผ ์ฃผ์˜ ๋“ฑ์˜ ์Šต๊ด€์„ ํ†ตํ•ด ๊ฐœ์ธ ์ •๋ณด๋ฅผ ์•ˆ์ „ํ•˜๊ฒŒ ์œ ์ง€ํ•  ์ˆ˜.. 2024. 3. 7.
ํด๋ผ์šฐ๋“œ ๋„ค์ดํ‹ฐ๋ธŒ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ: ํšจ์œจ์„ฑ๊ณผ ํ™•์žฅ์„ฑ์„ ๊ณ ๋ คํ•œ ์„ค๊ณ„ ๋ฐฉ๋ฒ• ํด๋ผ์šฐ๋“œ ๋„ค์ดํ‹ฐ๋ธŒ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์€ ํด๋ผ์šฐ๋“œ ํ™˜๊ฒฝ์—์„œ์˜ ์ตœ์ ํ™”๋œ ์„ฑ๋Šฅ๊ณผ ์œ ์—ฐ์„ฑ์„ ํ™•๋ณดํ•˜๊ธฐ ์œ„ํ•œ ์ค‘์š”ํ•œ ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค. ์ด ๋ธ”๋กœ๊ทธ์—์„œ๋Š” ํด๋ผ์šฐ๋“œ ๋„ค์ดํ‹ฐ๋ธŒ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์„ค๊ณ„ํ•˜๊ณ  ๊ฐœ๋ฐœํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ์ฃผ์˜์‚ฌํ•ญ์— ๋Œ€ํ•ด ๋‹ค๋ค„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 1. ํด๋ผ์šฐ๋“œ ๋„ค์ดํ‹ฐ๋ธŒ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํŠน์ง• 1.1. ๋งˆ์ดํฌ๋กœ์„œ๋น„์Šค ์•„ํ‚คํ…์ฒ˜ ์„œ๋น„์Šค ๋ถ„๋ฆฌ: ๊ฐ ๊ธฐ๋Šฅ์„ ๋…๋ฆฝ์ ์ธ ์ž‘์€ ์„œ๋น„์Šค๋กœ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ฐœ๋ฐœ, ๋ฐฐํฌ, ํ™•์žฅ, ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์šฉ์ดํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ๋„์ปค์™€ ์ฟ ๋ฒ„๋„คํ‹ฐ์Šค ํ™œ์šฉ: ๋„์ปค ์ปจํ…Œ์ด๋„ˆ์™€ ์ฟ ๋ฒ„๋„คํ‹ฐ์Šค๋ฅผ ํ†ตํ•ด ๋งˆ์ดํฌ๋กœ์„œ๋น„์Šค๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ณ  ๋ฐฐํฌํ•ฉ๋‹ˆ๋‹ค. 1.2. ์ž๋™ํ™”๋œ ์ธํ”„๋ผ ์ธํ”„๋ผ์ŠคํŠธ๋Ÿญ์ฒ˜ ์ฝ”๋“œ (IaC): ํด๋ผ์šฐ๋“œ ๋ฆฌ์†Œ์Šค๋ฅผ ์ฝ”๋“œ๋กœ ์ •์˜ํ•˜๊ณ  ๊ด€๋ฆฌํ•˜์—ฌ ์ธํ”„๋ผ ํ”„๋กœ๋น„์ €๋‹์„ ์ž๋™ํ™”ํ•ฉ๋‹ˆ๋‹ค. ์ž๋™ ์Šค์ผ€์ผ๋ง: ํŠธ๋ž˜ํ”ฝ์— ๋”ฐ๋ผ ์ž๋™์œผ๋กœ ์ธํ”„๋ผ๋ฅผ ํ™•์žฅ ๋˜๋Š” ์ถ•์†Œ์‹œ.. 2024. 2. 15.
ํด๋ผ์šฐ๋“œ ๋น„์šฉ ์ตœ์ ํ™”: ๋น„์ฆˆ๋‹ˆ์Šค์˜ ์ง€์† ๊ฐ€๋Šฅํ•œ ์„ฑ์žฅ์„ ์œ„ํ•œ ์ „๋žต ํด๋ผ์šฐ๋“œ ๊ธฐ๋ฐ˜์˜ ์ธํ”„๋ผ๋ฅผ ํ™œ์šฉํ•˜๋ฉด์„œ ์ค‘์š”ํ•œ ๊ณ ๋ ค์‚ฌํ•ญ ์ค‘ ํ•˜๋‚˜๋Š” ๋น„์šฉ ์ตœ์ ํ™”์ž…๋‹ˆ๋‹ค. ์ด ๋ธ”๋กœ๊ทธ์—์„œ๋Š” ํด๋ผ์šฐ๋“œ ๋น„์šฉ ์ตœ์ ํ™”์˜ ํ•ต์‹ฌ ๊ฐœ๋…๊ณผ ํšจ๊ณผ์ ์ธ ์ „๋žต์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 1. ํด๋ผ์šฐ๋“œ ๋น„์šฉ ์ตœ์ ํ™”์˜ ๊ฐœ๋… ํด๋ผ์šฐ๋“œ ๋น„์šฉ ์ตœ์ ํ™”๋Š” ๊ธฐ์—…์ด ํด๋ผ์šฐ๋“œ ์„œ๋น„์Šค๋ฅผ ํšจ์œจ์ ์œผ๋กœ ์ด์šฉํ•˜์—ฌ ๋†’์€ ์„ฑ๋Šฅ์„ ์œ ์ง€ํ•˜๋ฉด์„œ๋„ ๋น„์šฉ์„ ์ตœ์†Œํ™”ํ•˜๋Š” ์ „๋žต์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๋‹ค์–‘ํ•œ ์ธก๋ฉด์—์„œ ๊ณ ๋ ค๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. 1.1 ์ž์› ํ• ๋‹น ๋ฐ ํฌ๊ธฐ ์กฐ์ • ํƒ„๋ ฅ์ ์ธ ์Šค์ผ€์ผ๋ง: ์„œ๋ฒ„ ๋ฐ ๋ฆฌ์†Œ์Šค๋ฅผ ํ•„์š”์— ๋”ฐ๋ผ ์ž๋™์œผ๋กœ ์กฐ์ •ํ•˜์—ฌ ์‚ฌ์šฉ๋Ÿ‰์— ๋”ฐ๋ผ ์ตœ์ ํ™”๋œ ์ž์›์„ ํ• ๋‹นํ•ฉ๋‹ˆ๋‹ค. ์˜ฌ๋ฐ”๋ฅธ ์ธ์Šคํ„ด์Šค ํฌ๊ธฐ ์„ ํƒ: ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์š”๊ตฌ์— ๋งž๋Š” ์ ์ ˆํ•œ ๊ฐ€์ƒ ๋จธ์‹  ํฌ๊ธฐ๋ฅผ ์„ ํƒํ•˜์—ฌ ๋‚ญ๋น„๋ฅผ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค. 1.2 ์˜ˆ์•ฝ ์ธ์Šคํ„ด์Šค ๋ฐ ์ปค๋ฐ‹๋“œ ๋ฆฌ์†Œ์Šค ์˜ˆ์•ฝ ์ธ์Šคํ„ด์Šค ํ™œ์šฉ: ์ผ์ • ๊ธฐ๊ฐ„ ๋™์•ˆ.. 2024. 2. 13.
ํด๋ผ์šฐ๋“œ ๊ธฐ๋ฐ˜์˜ DevOps ๊ตฌํ˜„: ํ˜„๋Œ€ ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ์˜ ํ•ต์‹ฌ ์ „๋žต ํด๋ผ์šฐ๋“œ ๊ธฐ๋ฐ˜์˜ DevOps๋Š” ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ๊ณผ ์šด์˜์˜ ๊ฐ„๊ทน์„ ์ค„์ด๊ณ , ์ง€์†์  ํ†ตํ•ฉ๊ณผ ๋ฐฐํฌ๋ฅผ ํ†ตํ•ด ๊ฐœ๋ฐœ ์ฃผ๊ธฐ๋ฅผ ๋‹จ์ถ•ํ•˜๋Š” ํ•ต์‹ฌ ์ „๋žต์ž…๋‹ˆ๋‹ค. ์ด ๋ธ”๋กœ๊ทธ์—์„œ๋Š” ํด๋ผ์šฐ๋“œ ๊ธฐ๋ฐ˜์˜ DevOps๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ํ•ต์‹ฌ ๊ฐœ๋…๊ณผ ์‹ค์ œ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. โ€ป DevOps: ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ์„œ๋น„์Šค๋ฅผ ๋น ๋ฅธ ์†๋„๋กœ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋„๋ก ์กฐ์ง์˜ ์—ญ๋Ÿ‰์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ๋ฌธํ™” ์ฒ ํ•™, ๋ฐฉ์‹ ๋ฐ ๋„๊ตฌ์˜ ์กฐํ•ฉ 1. ํด๋ผ์šฐ๋“œ ๊ธฐ๋ฐ˜์˜ DevOps์˜ ํ•ต์‹ฌ ๊ฐœ๋… 1.1 ์ž๋™ํ™” ์ง€์†์  ํ†ตํ•ฉ (CI): ๊ฐœ๋ฐœ์ž์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ์ž๋™์œผ๋กœ ํ†ตํ•ฉ๋˜๊ณ  ํ…Œ์ŠคํŠธ๋˜๋Š” ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ตฌ์ถ•ํ•ฉ๋‹ˆ๋‹ค. ์ง€์†์  ๋ฐฐํฌ (CD): ์ž๋™ํ™”๋œ ํ…Œ์ŠคํŠธ๋ฅผ ํ†ต๊ณผํ•œ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ์ž๋™์œผ๋กœ ํ”„๋กœ๋•์…˜ ํ™˜๊ฒฝ์— ๋ฐฐํฌ๋˜๋„๋ก ํ•˜๋Š” ํ”„๋กœ์„ธ์Šค๋ฅผ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. 1.2 ์ปจํ…Œ์ด๋„ˆํ™” ๋„์ปค ํ™œ์šฉ: ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ์ข…์†.. 2024. 2. 8.
ํด๋ผ์šฐ๋“œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜: ์•ˆ์ „ํ•˜๊ณ  ํšจ๊ณผ์ ์ธ ์ „๋žต ํด๋ผ์šฐ๋“œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์€ ๊ธฐ์—…์ด ์˜จํ”„๋ ˆ๋ฏธ์Šค ํ™˜๊ฒฝ์—์„œ ํด๋ผ์šฐ๋“œ๋กœ์˜ ์ „ํ™˜์„ ์œ„ํ•œ ํ•ต์‹ฌ์ ์ธ ๋‹จ๊ณ„ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ํด๋ผ์šฐ๋“œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์˜ ํ•ต์‹ฌ ๊ฐœ๋…๊ณผ ํšจ๊ณผ์ ์ธ ์ „๋žต์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 1. ํด๋ผ์šฐ๋“œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์˜ ๊ฐœ๋… ํด๋ผ์šฐ๋“œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜์€ ๊ธฐ์กด์˜ ์˜จํ”„๋ ˆ๋ฏธ์Šค ์ธํ”„๋ผ์—์„œ ํด๋ผ์šฐ๋“œ ๊ธฐ๋ฐ˜์˜ ์ธํ”„๋ผ๋กœ์˜ ์ด์ „์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๋กœ์จ ๊ธฐ์—…์€ ํด๋ผ์šฐ๋“œ์˜ ์œ ์—ฐ์„ฑ, ํ™•์žฅ์„ฑ, ๋น„์šฉ ํšจ์œจ์„ฑ์„ ๊ฒฝํ—˜ํ•˜๋ฉฐ ํ˜„๋Œ€์ ์ธ IT ์ธํ”„๋ผ๋กœ์˜ ์ „ํ™˜์„ ์ด๋ฃฐ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 1.1 ๋ฆฌํ”„ํŠธ ์•ค ์‰ฌํ”„ํŠธ vs. ๋ฆฌํฌ์ง€์…”๋‹ ๋ฆฌํ”„ํŠธ ์•ค ์‰ฌํ”„ํŠธ (Lift and Shift): ๊ธฐ์กด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฑฐ์˜ ๋ณ€๊ฒฝ ์—†์ด ํด๋ผ์šฐ๋“œ๋กœ ์ด์ „ํ•˜๋Š” ๋ฐฉ๋ฒ•. ์ดˆ๊ธฐ ๋น„์šฉ๊ณผ ์‹œ๊ฐ„์„ ์ ˆ์•ฝํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ํด๋ผ์šฐ๋“œ์˜ ์ด์ ์„ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•˜์ง€ ๋ชปํ•  ์ˆ˜ ์žˆ์Œ. ๋ฆฌํฌ์ง€์…”๋‹ (Rep.. 2024. 2. 7.
๋ฉ€ํ‹ฐ ํด๋ผ์šฐ๋“œ: ํ˜„๋Œ€ ๊ธฐ์—…์˜ ์ „๋žต์  ์„ ํƒ ๋ฉ€ํ‹ฐ ํด๋ผ์šฐ๋“œ๋Š” ํ˜„๋Œ€ ๊ธฐ์—…์ด ๋‹ค์–‘ํ•œ ํด๋ผ์šฐ๋“œ ์ œ๊ณต์—…์ฒด๋ฅผ ํ™œ์šฉํ•˜๋Š” ์ „๋žต์œผ๋กœ ์ฃผ๋ชฉ๋ฐ›๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ๋ฉ€ํ‹ฐ ํด๋ผ์šฐ๋“œ์˜ ๊ฐœ๋…๊ณผ ํšจ๊ณผ์ ์ธ ์ „๋žต์— ๋Œ€ํ•ด ํƒ๊ตฌํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 1. ๋ฉ€ํ‹ฐ ํด๋ผ์šฐ๋“œ์˜ ๊ฐœ๋… ๋ฉ€ํ‹ฐ ํด๋ผ์šฐ๋“œ๋Š” ๊ธฐ์—…์ด ๋‹จ์ผ ํด๋ผ์šฐ๋“œ ์ œ๊ณต์—…์ฒด๊ฐ€ ์•„๋‹Œ ์—ฌ๋Ÿฌ ํด๋ผ์šฐ๋“œ ์ œ๊ณต์—…์ฒด์˜ ์„œ๋น„์Šค๋ฅผ ํ™œ์šฉํ•˜๋Š” ์ „๋žต์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๋‹ค์–‘ํ•œ ์ด์ ์„ ์ œ๊ณตํ•˜๋ฉฐ, ์ฃผ์š” ๊ฐœ๋…์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. 1.1 ์œ ์—ฐ์„ฑ๊ณผ ์•ˆ์ •์„ฑ ๋ฉ€ํ‹ฐ ํด๋ผ์šฐ๋“œ๋Š” ์—ฌ๋Ÿฌ ์ œ๊ณต์—…์ฒด ๊ฐ„์— ์„œ๋น„์Šค๋ฅผ ๋ถ„์‚ฐํ•˜์—ฌ ์•ˆ์ •์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ณ , ํŠน์ • ์ œ๊ณต์—…์ฒด์— ์ข…์†๋˜์ง€ ์•Š๊ณ  ์œ ์—ฐํ•˜๊ฒŒ ๋ฆฌ์†Œ์Šค๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์žฅ์ ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. 1.2 ๋น„์šฉ ํšจ์œจ์„ฑ ์—ฌ๋Ÿฌ ํด๋ผ์šฐ๋“œ ์ œ๊ณต์—…์ฒด ๊ฐ„์˜ ๊ฒฝ์Ÿ์œผ๋กœ ์ธํ•ด ๋น„์šฉ ํšจ์œจ์„ฑ์ด ์ฆ๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ์ œ๊ณต์—…์ฒด์˜ ๊ฐ•์ ์„ ํ™œ์šฉํ•˜์—ฌ ์ตœ์ ์˜ ๊ฐ€๊ฒฉ ๋Œ€๋น„ ์„ฑ๋Šฅ์„ ์–ป์„ ์ˆ˜ ์žˆ์Šต.. 2024. 2. 5.
ํด๋ผ์šฐ๋“œ ๋ณด์•ˆ: ๊ฐœ๋…๊ณผ ํšจ๊ณผ์ ์ธ ์ „๋žต ํด๋ผ์šฐ๋“œ ๋ณด์•ˆ์€ ํ˜„๋Œ€ ๋น„์ฆˆ๋‹ˆ์Šค์—์„œ ํ•ต์‹ฌ์ ์ธ ์ด์Šˆ ์ค‘ ํ•˜๋‚˜๋กœ ๋ถ€์ƒํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ํด๋ผ์šฐ๋“œ ๋ณด์•ˆ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ํšจ๊ณผ์ ์ธ ์ „๋žต์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 1. ํด๋ผ์šฐ๋“œ ๋ณด์•ˆ์˜ ๊ฐœ๋… ํด๋ผ์šฐ๋“œ ๋ณด์•ˆ์€ ํด๋ผ์šฐ๋“œ ํ™˜๊ฒฝ์—์„œ์˜ ๋ฐ์ดํ„ฐ, ๋„คํŠธ์›Œํฌ, ์‹œ์Šคํ…œ ๋“ฑ์„ ๋ณดํ˜ธํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ์˜จํ”„๋ ˆ๋ฏธ์Šค ํ™˜๊ฒฝ๊ณผ๋Š” ๋‹ค๋ฅธ ๋…ํŠนํ•œ ๋„์ „๊ณผ์ œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ, ์ฃผ์š”ํ•œ ๊ฐœ๋…์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. 1.1 ๊ณต์œ  ์ฑ…์ž„ ๋ชจ๋ธ ํด๋ผ์šฐ๋“œ ์„œ๋น„์Šค ์ œ๊ณต์—…์ฒด์™€ ์‚ฌ์šฉ์ž ๊ฐ„์—๋Š” ๊ณต์œ  ์ฑ…์ž„ ๋ชจ๋ธ์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ ํด๋ผ์šฐ๋“œ ์ œ๊ณต์—…์ฒด๋Š” ์ธํ”„๋ผ์™€ ๋„คํŠธ์›Œํฌ๋ฅผ ๋ณดํ˜ธํ•˜๊ณ , ์‚ฌ์šฉ์ž๋Š” ์ž์ฒด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณดํ˜ธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. 1.2 ๋ฐ์ดํ„ฐ ์•”ํ˜ธํ™” ๋ฐ์ดํ„ฐ ์•”ํ˜ธํ™”๋Š” ํด๋ผ์šฐ๋“œ์—์„œ ์ €์žฅ๋˜๋Š” ๋ฐ์ดํ„ฐ์˜ ๋ณด์•ˆ์„ ๊ฐ•ํ™”ํ•˜๋Š” ํ•ต์‹ฌ์ ์ธ ์š”์†Œ์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๋ฐ์ดํ„ฐ๊ฐ€.. 2024. 2. 2.
ํด๋ผ์šฐ๋“œ ๋„ค์ดํ‹ฐ๋ธŒ ๊ธฐ์ˆ : ๊ฐœ๋…๊ณผ ํ™œ์šฉ ํด๋ผ์šฐ๋“œ ๋„ค์ดํ‹ฐ๋ธŒ ๊ธฐ์ˆ ์€ ํ˜„๋Œ€ ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ ๋ฐ ์šด์˜์—์„œ ํ•ต์‹ฌ์ ์ธ ์—ญํ• ์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ํด๋ผ์šฐ๋“œ ๋„ค์ดํ‹ฐ๋ธŒ์˜ ํ•ต์‹ฌ ๊ฐœ๋…๊ณผ ์‹ค์ œ ํ™œ์šฉ ์‚ฌ๋ก€์— ๋Œ€ํ•ด ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 1. ํด๋ผ์šฐ๋“œ ๋„ค์ดํ‹ฐ๋ธŒ์˜ ๊ฐœ๋… ํด๋ผ์šฐ๋“œ ๋„ค์ดํ‹ฐ๋ธŒ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ํด๋ผ์šฐ๋“œ ํ™˜๊ฒฝ์—์„œ ์›ํ™œํ•˜๊ฒŒ ๊ฐœ๋ฐœ, ๋ฐฐํฌ, ์šด์˜ํ•˜๋Š” ๋ฐฉ์‹์„ ์ง€์นญํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๊ธฐ์กด์˜ ์˜จํ”„๋ ˆ๋ฏธ์Šค ํ™˜๊ฒฝ๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ, ํด๋ผ์šฐ๋“œ์˜ ์ด์ ์„ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•˜๋Š” ๊ฐœ๋ฐœ ๋ฐฉ๋ฒ•๋ก ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. 1.1 ์ปจํ…Œ์ด๋„ˆํ™” ์ปจํ…Œ์ด๋„ˆ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ํ•„์š”ํ•œ ์ข…์†์„ฑ์„ ํŒจํ‚ค์ง€ํ™”ํ•˜๋Š” ๊ธฐ์ˆ ๋กœ, ํด๋ผ์šฐ๋“œ ๋„ค์ดํ‹ฐ๋ธŒ์—์„œ ํ•ต์‹ฌ์ ์ธ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. Docker์™€ Kubernetes ๋“ฑ์˜ ์ปจํ…Œ์ด๋„ˆ ์˜ค์ผ€์ŠคํŠธ๋ ˆ์ด์…˜ ํˆด์„ ์‚ฌ์šฉํ•˜์—ฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 1.2 ์„œ๋ฒ„๋ฆฌ์Šค ์•„ํ‚คํ…์ฒ˜ ์„œ๋ฒ„๋ฆฌ์Šค ์ปดํ“จํŒ…์€ ์• ํ”Œ๋ฆฌ์ผ€.. 2024. 2. 1.
bower ์„ค์น˜ํ•˜๋Š” ๋ฒ• (bower install) 1. ์ œ์ผ ๋จผ์ € ์‹œ์Šคํ…œ์— Node.js , npm์ด ์„ค์น˜๋˜์–ด์žˆ์–ด์•ผํ•จ. ์ดํ›„ npm์„ ์‚ฌ์šฉํ•˜์—ฌ bower ์„ค์น˜. npm install -g bower 2. ํ”„๋กœ์ ํŠธ ๋””๋ ‰ํ† ๋ฆฌ๋กœ ์ด๋™ํ•ด์•ผํ•จ. bower๋ฅผ ์„ค์น˜ํ•˜๊ณ ์ž ํ•˜๋Š” ๋””๋ ‰ํ† ๋ฆฌ๋กœ ์ด๋™ cd my_project 3. bower ์ดˆ๊ธฐํ™”๋ฅผ ํ•ด์ฃผ๋ฉฐ 'bower.json' ํŒŒ์ผ์„ ์ƒ์„ฑํ•จ bower init ๋ช‡๊ฐ€์ง€ ์งˆ๋ฌธ๋“ค์ด ๋‚˜์˜ค๋Š”๋ฐ ๋Œ€๋‹ต ์ž˜ํ•ด์ฃผ๋ฉด ๋จ. name (your_project_name): ํ”„๋กœ์ ํŠธ์˜ ์ด๋ฆ„์„ ์ง€์ •ํ•˜๋Š” ์งˆ๋ฌธ์œผ๋กœ ๊ธฐ๋ณธ๊ฐ’์€ ํ”„๋กœ์ ํŠธ ๋””๋ ‰ํ† ๋ฆฌ ์ด๋ฆ„์ž„. description: ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ์„ค๋ช…์„ ์š”๊ตฌํ•˜๋Š” ์งˆ๋ฌธ์œผ๋กœ ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•œ ๊ฐ„๋žตํ•œ ์„ค๋ช…์„ ์ž…๋ ฅํ•˜๋ฉด ๋จ. main file: ํ”„๋กœ์ ํŠธ์˜ ์ฃผ์š” ํŒŒ์ผ์„ ์ง€์ •ํ•˜๋Š” ์งˆ๋ฌธ์œผ๋กœ ๋‚œ index.js๋กœ ์„ค์ •ํ•จ.. 2024. 1. 31.
React v17 ์ถœ์‹œ ์†Œ์‹๊ณผ ์ฃผ์š” ์—…๋ฐ์ดํŠธ React์˜ ์ƒˆ๋กœ์šด ๋ฒ„์ „์ธ v17์— ๋Œ€ํ•œ ์†Œ์‹์„ ํ•จ๊ป˜ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. React ํŒ€์€ ์ƒˆ๋กœ์šด ์—…๋ฐ์ดํŠธ๋ฅผ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ๋” ๋‚˜์€ ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๊ณ ์ž ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. 1. ๋ฆฌ์•กํŠธ v17 ์†Œ๊ฐœ React v17์€ ์ด๋ฒˆ ์—…๋ฐ์ดํŠธ์—์„œ ์ฃผ๋ชฉํ• ๋งŒํ•œ ๋ช‡ ๊ฐ€์ง€ ๋ณ€ํ™”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฝ”์–ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ์ฃผ์š” ๊ธฐ๋Šฅ๋“ค์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ์†Œ๊ฐœ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. React v17์€ ๊ธฐ์กด์˜ ์ฃผ์š” ๋ณ€ํ™” ์—†์ด๋„ ์ƒˆ๋กœ์šด API ์ถ”๊ฐ€์™€ ํ•จ๊ป˜ ์•ˆ์ •์„ฑ๊ณผ ์„ฑ๋Šฅ ํ–ฅ์ƒ์„ ์ค‘์ ์œผ๋กœ ๋‘๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ๋ฒ„์ „์€ ์ด์ „๊ณผ์˜ ํ•˜์œ„ ํ˜ธํ™˜์„ฑ์„ ์œ ์ง€ํ•˜๋ฉด์„œ๋„ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์—…๊ทธ๋ ˆ์ด๋“œ๋ฅผ ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค. 2. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์—…๊ทธ๋ ˆ์ด๋“œ ๊ฐ€์ด๋“œ ๊ธฐ์กด์˜ React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ v17๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋Š” ๊ณผ์ •์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ด…์‹œ๋‹ค. ์—…๊ทธ๋ ˆ์ด๋“œ ๊ณผ์ •์—์„œ ์ฃผ์˜ํ•ด์•ผ ํ•  ์ ๊ณผ ์ฃผ.. 2024. 1. 30.
728x90
๋ฐ˜์‘ํ˜•