๋ค์ ํ์คํ ์ธํฐ๋ทฐ๋ฅผ ์๋ฒฝํ๊ฒ ์ค๋นํ์ธ์. ์ด ์ข ํฉ ๊ฐ์ด๋๋ ๊ธ๋ก๋ฒ ๊ฐ๋ฐ์๋ฅผ ์ํด ํ๋ก ํธ์๋, ๋ฐฑ์๋, ๋ฐ์ดํฐ๋ฒ ์ด์ค, DevOps, ์์คํ ์ค๊ณ์ ๋ํ ํต์ฌ ์ง๋ฌธ์ ๋ค๋ฃน๋๋ค.
ํ์คํ ์ธํฐ๋ทฐ ์ ๋ณต: ๊ธ๋ก๋ฒ ๊ฐ๋ฐ์๋ฅผ ์ํ ํํ ์ง๋ฌธ ๊ฐ์ด๋
ํ์คํ ๊ฐ๋ฐ์์ ์ญํ ์ ๊ธฐ์ ์ฐ์ ์์ ๊ฐ์ฅ ์ญ๋์ ์ด๊ณ ๋์ ์ ์ธ ์ง๋ฌด ์ค ํ๋์ ๋๋ค. ์ฌ์ฉ์์ ๋ธ๋ผ์ฐ์ ์์๋ถํฐ ๋ฐ์ดํฐ๋ฒ ์ด์ค ๋ฐ ๋ฐฐํฌ ์ธํ๋ผ์ ์ด๋ฅด๊ธฐ๊น์ง, ๋ค์ํ ๊ธฐ์ ์ ๋ ํนํ ์กฐํฉ์ด ํ์ํฉ๋๋ค. ๋ฐ๋ผ์ ํ์คํ ์ง๋ฌด์ ๋ฉด์ ๊ณผ์ ์ ์ง์์์ ์ง์์ ํญ๊ณผ ๊น์ด๋ฅผ ํ ์คํธํ๊ธฐ ์ํด ์ ๋ช ๋์ ์ ๋๋ก ์๊ฒฉํ๊ฒ ์ค๊ณ๋์์ต๋๋ค. ์ฒซ ์ง์ฅ์ ๊ตฌํ๋ ์ฃผ๋์ด ๊ฐ๋ฐ์๋ , ์๋ก์ด ๋์ ์ ์ฐพ๋ ๊ฒฝ๋ ฅ ์ ๋ฌธ๊ฐ๋ , ์ฑ๊ณต์ ์ด์ ๋ ์ค๋น์ ์์ต๋๋ค.
์ด ์ข ํฉ ๊ฐ์ด๋๋ ์ ์ธ๊ณ ๊ฐ๋ฐ์๋ค์ ์ํด ์ค๊ณ๋์์ต๋๋ค. ๋จ์ํ ๋ชฉ๋ก์ ๋์ด ๊ฐ ์ง๋ฌธ ๋ค์ ์จ๊ฒจ์ง ์ด์ ๋ฅผ ํ๊ตฌํ๋ฉฐ, ์ฌ๋ฌ๋ถ์ด ๋ง์ฃผํ ๊ฐ๋ฅ์ฑ์ด ๋์ ์ผ๋ฐ์ ์ธ ์ธํฐ๋ทฐ ์ง๋ฌธ๋ค์ ๋ถ์ํ ๊ฒ์ ๋๋ค. ์ฐ๋ฆฌ์ ๋ชฉํ๋ ์ฌ๋ฌ๋ถ์ด ๋จ์ํ ์ง๋ฌธ์ ๋ตํ๋ ๊ฒ์ ๋์ด, ์ง์ ํ ํ์คํ ์ ๋ฌธ๊ฐ๋ก์์ ๊ฐ์น๋ฅผ ์ฆ๋ช ํ ์ ์๋ ์ฌ๊ณ ๋ฐฉ์๊ณผ ์ง์์ ๊ฐ์ถ๋๋ก ๋๋ ๊ฒ์ ๋๋ค.
ํ์คํ ๋ง์ธ๋์ : ๋ฉด์ ๊ด์ด ์ ๋ง๋ก ์ํ๋ ๊ฒ
๊ตฌ์ฒด์ ์ธ ์ง๋ฌธ์ผ๋ก ๋ค์ด๊ฐ๊ธฐ ์ ์, ๋ฉด์ ๊ด์ ๊ด์ ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๊ทธ๋ค์ ๋จ์ํ ์ฒดํฌ๋ฆฌ์คํธ์ ํ์๋ฅผ ํ๋ ๊ฒ์ด ์๋๋๋ค. ๊ทธ๋ค์ ์ฌ๋ฌ๋ถ์ ๋ค์ ๋ฅ๋ ฅ์ ํ๊ฐํ๊ณ ์์ต๋๋ค:
- ๋ฌธ์ ํด๊ฒฐ ๋ฅ๋ ฅ: ๋ณต์กํ ๋ฌธ์ ๋ฅผ ๊ด๋ฆฌ ๊ฐ๋ฅํ ๋ถ๋ถ์ผ๋ก ๋๋๊ณ ๋ช ํํ ํด๊ฒฐ์ฑ ์ ์ค๋ช ํ ์ ์๋๊ฐ?
- ์ ์ฒด์ ์ธ ์ฌ๊ณ : ํ๋ก ํธ์๋์ ๋ณํ๊ฐ ๋ฐฑ์๋์ ์ด๋ค ์ํฅ์ ๋ฏธ์น ์ง, ๋๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ ํ์ด ์ฑ๋ฅ๊ณผ ํ์ฅ์ฑ์ ์ด๋ป๊ฒ ์ํฅ์ ๋ฏธ์น๋์ง ์ดํดํ๊ณ ์๋๊ฐ?
- ํจ๊ณผ์ ์ธ ์์ฌ์ํต: ๊ธฐ์ ์ ์ธ ๊ฐ๋ ์ ๊ธฐ์ ๋ฐ ๋น๊ธฐ์ ์ดํด๊ด๊ณ์ ๋ชจ๋์๊ฒ ๋ช ํํ๊ฒ ์ค๋ช ํ ์ ์๋๊ฐ? ์ด๋ ๋ง์ ์์ญ์ ์ฐ๊ฒฐํ๋ ์ญํ ์์ ํ์์ ์ ๋๋ค.
- ํ์ต ๋ฐ ์ ์ ๋ฅ๋ ฅ: ๊ธฐ์ ํ๊ฒฝ์ ๋์์์ด ๋ณํํฉ๋๋ค. ๋ฉด์ ๊ด์ ์ฌ๋ฌ๋ถ์ด ํ์ต์ ๋ํ ์ด์ ๊ณผ ์ต์ ๊ธฐ์ ์ ์ ์งํ๊ธฐ ์ํ ์ ๋ต์ ๊ฐ์ง๊ณ ์๋์ง ๋ณด๊ณ ์ถ์ด ํฉ๋๋ค.
- ํธ๋ ์ด๋์คํ ์์ฉ: ์ํํธ์จ์ด ์์ง๋์ด๋ง์๋ ๋จ ํ๋์ "์ ๋ต"์ด ๊ฑฐ์ ์์ต๋๋ค. ๊ฐ๋ ฅํ ํ๋ณด์๋ ๋ค์ํ ์ ๊ทผ ๋ฐฉ์์ ์ฅ๋จ์ (์: ์ฑ๋ฅ ๋ ๊ฐ๋ฐ ์๋, SQL ๋ NoSQL)์ ๋ ผ์ํ ์ ์์ต๋๋ค.
์ธํฐ๋ทฐ ์ ์ฒด์ ๊ฑธ์ณ ์ฌ๋ฌ๋ถ์ ๋ชฉํ๋ ์ด๋ฌํ ์์ง์ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ ๋๋ค. ๋ชจ๋ ์ง๋ฌธ์ ์ฌ๋ฌ๋ถ์ ๊ธฐ์ ๊ณผ ๊ฒฝํ์ ๋ํ ์ด์ผ๊ธฐ๋ฅผ ํ ์ ์๋ ๊ธฐํ๋ก ์๊ฐํ์ธ์.
์น์ 1: ํ๋ ๋ฐ ๊ธฐ์ด ์ง๋ฌธ
์ธํฐ๋ทฐ์ ์์์ ์๋ฆฌ๋ ์ด ์ง๋ฌธ๋ค์ ๋ถ์๊ธฐ๋ฅผ ์กฐ์ฑํ๊ณ ๋ฉด์ ๊ด์๊ฒ ์ฌ๋ฌ๋ถ์ ์ฑ๊ฒฉ, ์ด์ , ์์ฌ์ํต ์คํ์ผ์ ํ์ ํ ๊ธฐํ๋ฅผ ์ค๋๋ค. ์ด ์ง๋ฌธ๋ค์ ๊ณผ์ํ๊ฐํ์ง ๋ง์ธ์.
1. "๋น์ ์ด ์ฐธ์ฌํ๋ ๋์ ์ ์ธ ํ๋ก์ ํธ์ ๋ํด ์ค๋ช ํด์ฃผ์ธ์."
๋ฉด์ ๊ด์ ์๋: "๋น์ ์ด ๋ณต์ก์ฑ์ ๋ค๋ฃจ๊ณ , ์ฃผ์ธ์์์ ๊ฐ์ง๋ฉฐ, ์ค์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋ค๋ ๊ฒ์ ๋ณด์ฌ์ฃผ์ธ์."
๋ต๋ณ ๋ฐฉ๋ฒ: STAR ๊ธฐ๋ฒ(Situation, Task, Action, Result)์ ์ฌ์ฉํ์ธ์.
- ์ํฉ(Situation): ํ๋ก์ ํธ์ ๊ทธ ๋น์ฆ๋์ค ๋งฅ๋ฝ์ ๊ฐ๋ตํ๊ฒ ์ค๋ช ํฉ๋๋ค. (์: "์ ํฌ๋ ์ด์ปค๋จธ์ค ํ๋ซํผ์ ์ํ ์ค์๊ฐ ๋ถ์ ๋์๋ณด๋๋ฅผ ๊ตฌ์ถํ๊ณ ์์์ต๋๋ค.")
- ๊ณผ์ (Task): ๋น์ ์ ๊ตฌ์ฒด์ ์ธ ์ญํ ๊ณผ ์ง๋ฉดํ๋ ๊ณผ์ ๋ฅผ ์ค๋ช ํฉ๋๋ค. (์: "์ ๊ณผ์ ๋ ๋ฎ์ ์ง์ฐ ์๊ฐ์ผ๋ก ํ๋ฃจ์ ์๋ฐฑ๋ง ๊ฐ์ ์ฌ์ฉ์ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๊ณ ์ง๊ณํ๋ ๋ฐฑ์๋ ์๋น์ค๋ฅผ ์ค๊ณํ๊ณ ๊ตฌํํ๋ ๊ฒ์ด์์ต๋๋ค. ํต์ฌ ๊ณผ์ ๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๊ณผ๋ถํ๋ฅผ ์ฃผ์ง ์์ผ๋ฉด์ ๋ฐ์ดํฐ๋ฅผ ๊ฑฐ์ ์ค์๊ฐ์ผ๋ก ๋ณด์ฅํ๋ ๊ฒ์ด์์ต๋๋ค.")
- ํ๋(Action): ๋น์ ์ด ์ทจํ ๋จ๊ณ๋ฅผ ์์ธํ ์ค๋ช ํฉ๋๋ค. ์ฌ๊ธฐ์ ๊ธฐ์ ์ ํ, ์ํคํ ์ฒ, ํ์ ์ ๋ํด ์ด์ผ๊ธฐํฉ๋๋ค. (์: "์ด๋ฒคํธ ์์ง๊ณผ ์ฒ๋ฆฌ๋ฅผ ๋ถ๋ฆฌํ๊ธฐ ์ํด RabbitMQ์ ๊ฐ์ ๋ฉ์์ง ํ๋ฅผ ์ฌ์ฉํ๊ธฐ๋ก ๊ฒฐ์ ํ์ต๋๋ค. ์ ๋ Node.js๋ก ์๋น์ ์๋น์ค๋ฅผ ๊ฐ๋ฐํ์ฌ ๋ฉ์์ง๋ฅผ ๋ฐฐ์น๋ก ์ฒ๋ฆฌํ๊ณ ์ง๊ณ๋ ๊ฒฐ๊ณผ๋ฅผ PostgreSQL ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๊ธฐ๋กํ์ต๋๋ค. ๋ํ Redis๋ก ์บ์ฑ์ ๊ตฌํํ์ฌ ๊ฐ์ฅ ๋น๋ฒํ ์ฟผ๋ฆฌ๋ฅผ ์ฆ์ ์ ๊ณตํ์ต๋๋ค.")
- ๊ฒฐ๊ณผ(Result): ๊ฒฐ๊ณผ๋ฅผ ์์นํํฉ๋๋ค. ๋น์ ์ ์์ ์ด ์ด๋ค ์ํฅ์ ๋ฏธ์ณค๋์? (์: "๊ฒฐ๊ณผ์ ์ผ๋ก ๋์๋ณด๋ ๋ก๋ ์๊ฐ์ 70% ๋จ์ถํ์ผ๋ฉฐ, ์ฑ๋ฅ ์ ํ ์์ด ํธ๋ํฝ์ด 5๋ฐฐ ์ฆ๊ฐํ๋ ๊ฒ์ ์ฒ๋ฆฌํ ์ ์์์ต๋๋ค. ์ด๋ ๋ถ์ ๊ธฐ๋ฅ์ ๋ํ ์ฌ์ฉ์ ์ฐธ์ฌ๋๋ฅผ 15% ์ฆ๊ฐ์์ผฐ์ต๋๋ค.")
2. "์ต์ ๊ธฐ์ ๊ณผ ํธ๋ ๋๋ฅผ ์ด๋ป๊ฒ ๋ฐ๋ผ๊ฐ๋์?"
๋ฉด์ ๊ด์ ์๋: "๋น์ ์ ๋น์ ์ ์ ๋ฌธ์ฑ ์ฑ์ฅ์ ๋ํด ์ด์ ์ ์ด๊ณ ์ ๊ทน์ ์ธ๊ฐ์?"
๋ต๋ณ ๋ฐฉ๋ฒ: ๊ตฌ์ฒด์ ์ผ๋ก ๋ตํ์ธ์. ์ง์ ํ ๊ด์ฌ์ ๋ณด์ฌ์ฃผ๋ ๋ค์ํ ์ ๋ณด์์ ์ธ๊ธํ์ธ์.
- ๋ธ๋ก๊ทธ ๋ฐ ๋ด์ค๋ ํฐ: ์ ๋ขฐํ ์ ์๋ ์ถ์ฒ๋ฅผ ์ธ๊ธํ์ธ์ (์: Smashing Magazine, CSS-Tricks, Netflix๋ Uber ๊ฐ์ ํ์ฌ์ ๊ณต์ ๊ธฐ์ ๋ธ๋ก๊ทธ, JavaScript Weekly ๊ฐ์ ๋ด์ค๋ ํฐ).
- ์ปค๋ฎค๋ํฐ: Stack Overflow, Reddit(์: r/webdev, r/programming) ๋๋ ์ง์ญ ๊ฐ๋ฐ์ ๋ฐ์ ๊ณผ ๊ฐ์ ํ๋ซํผ์์์ ์ฐธ์ฌ์ ๋ํด ์ด์ผ๊ธฐํ์ธ์.
- ์ฌ์ด๋ ํ๋ก์ ํธ: ์ด๊ฒ์ ๊ฐ๋ ฅํ ์ ํธ์ ๋๋ค. ์๋ก์ด ๊ธฐ์ ์ ์คํํด ๋ณธ ์์ ํ๋ก์ ํธ์ ๋ํด ์ค๋ช ํ์ธ์ (์: "Svelte์ Supabase์ ๊ฐ๋ฐ์ ๊ฒฝํ์ ์ดํดํ๊ธฐ ์ํด ์์ ์ฑ์ ๋ง๋ค์ด๋ณด๊ณ ์์ต๋๋ค.").
- ํ์บ์คํธ ๋๋ ๊ฐ์ข: ๊ด๋ จ ํ์บ์คํธ(์: Syntax.fm, Software Engineering Daily)๋ ์ต๊ทผ์ ์๊ฐํ ์จ๋ผ์ธ ๊ฐ์ข๋ฅผ ์ธ๊ธํ๋ ๊ฒ์ ํ์ต์ ์๊ฐ์ ํฌ์ํ๋ค๋ ๊ฒ์ ๋ณด์ฌ์ค๋๋ค.
3. "๋๋ฃ์ ๊ธฐ์ ์ ์ธ ์๊ฒฌ ์ถฉ๋์ด ์์๋ ๊ฒฝํ์ ์ค๋ช ํด์ฃผ์ธ์. ์ด๋ป๊ฒ ํด๊ฒฐํ๋์?"
๋ฉด์ ๊ด์ ์๋: "๋น์ ์ ์ ๋ฌธ์ ์ผ๋ก ํ์ ํ๊ณ ์์ ์ ์์กด์ฌ๋ณด๋ค ํ๋ก์ ํธ์ ์ฑ๊ณต์ ์ฐ์ ์ํ ์ ์๋์?"
๋ต๋ณ ๋ฐฉ๋ฒ: ๋ฐ์ดํฐ ๊ธฐ๋ฐ์ ์กด์คํ๋ ์ ๊ทผ ๋ฐฉ์์ ์ด์ ์ ๋ง์ถ์ธ์. ์๋๋ฐฉ์ ๋น๋ํ๋ ๊ฒ์ ํผํ์ธ์. ์ด์์ ์ธ ์ด์ผ๊ธฐ๋ ๋จ์ํ ์๊ฒฌ์ด ์๋ ์ฆ๊ฑฐ์ ๊ธฐ๋ฐํ ํํ์ด๋ ๊ฒฐ์ ์ผ๋ก ๋๋ฉ๋๋ค.
์: "๋๋ฃ์ ์ ๋ ์๋ก์ด ์๋น์ค๋ฅผ ์ํด GraphQL์ ์ฌ์ฉํ ์ง ์ ํต์ ์ธ REST API๋ฅผ ์ฌ์ฉํ ์ง์ ๋ํด ๋ ผ์ํ์ต๋๋ค. ์ ๋ ๋จ์ํจ ๋๋ฌธ์ REST๋ฅผ ์ ํธํ๊ณ , ๋๋ฃ๋ GraphQL์ ์ ์ฐ์ฑ์ ์ฃผ์ฅํ์ต๋๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด, ์ฐ๋ฆฌ๋ ๋ ๊ฐ์ง ์ ๊ทผ ๋ฐฉ์์ ๋ชจ๋ ์ฌ์ฉํ์ฌ ๋ช ๊ฐ์ง ํต์ฌ ๊ธฐ๋ฅ์ ๋ํ ์์ ๊ฐ๋ ์ฆ๋ช (POC)์ ๋ง๋ค๊ธฐ๋ก ๊ฒฐ์ ํ์ต๋๋ค. ๊ทธ๋ฐ ๋ค์ ๊ฐ๋ฐ์ ๊ฒฝํ, ์ฑ๋ฅ, ์ฅ๊ธฐ์ ์ธ ์ ์ง๋ณด์์ฑ์ ์ด์ ์ ๋ง์ถฐ ํ์ ์ฅ๋จ์ ์ ๋ฐํํ์ต๋๋ค. POC๋ฅผ ํตํด ๋ชจ๋ฐ์ผ ์ฑ์ ๋คํธ์ํฌ ์์ฒญ ์๋ฅผ ์ด๋ป๊ฒ ์ค์ผ ์ ์๋์ง ๋ณด์ฌ์ฃผ์๊ธฐ ๋๋ฌธ์ ํ์ ๊ถ๊ทน์ ์ผ๋ก GraphQL์ ์ ํํ์ต๋๋ค. ์ ๋ ๊ทธ ๊ณผ์ ์์ GraphQL์ ์ฅ์ ์ ๋ํด ๋ง์ ๊ฒ์ ๋ฐฐ์ ์ต๋๋ค."
์น์ 2: ํ๋ก ํธ์๋ ๊ฐ๋ฐ ์ง๋ฌธ
์ด ์น์ ์ ์ง๊ด์ ์ด๊ณ , ์ ๊ทผ ๊ฐ๋ฅํ๋ฉฐ, ์ฑ๋ฅ์ด ์ข์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋๋ ๋ฅ๋ ฅ์ ํ ์คํธํฉ๋๋ค. ๋น์ ์ ๊ฐ์ ์ด ๋ฐฑ์๋๋ผ ํ ์ง๋ผ๋, ์ฌ๊ธฐ์์๋ ๋ฅ์ํ ๊ฒ์ผ๋ก ๊ธฐ๋๋ฉ๋๋ค.
HTML & CSS
1. "์๋งจํฑ HTML์ด๋ ๋ฌด์์ด๋ฉฐ ์ ์ค์ํ๊ฐ์?"
์๋งจํฑ HTML์ ๋จ์ํ ํํ(<div>๋ <span>์ฒ๋ผ)์ด ์๋ ์ฝํ
์ธ ์ ์๋ฏธ์ ๊ตฌ์กฐ๋ฅผ ์ค๋ช
ํ๋ ํ๊ทธ(์: <header>, <nav>, <main>, <article>, <footer>)๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด๋ผ๊ณ ์ค๋ช
ํ์ธ์. ๊ทธ ์ค์์ฑ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
์ ๊ทผ์ฑ: ์คํฌ๋ฆฐ ๋ฆฌ๋๋ ์ด ํ๊ทธ๋ค์ ์ฌ์ฉํ์ฌ ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ํ์ํ๋ ๋ฐ ๋์์ ์ค๋๋ค.
SEO: ๊ฒ์ ์์ง์ ์ฝํ
์ธ ๋ฅผ ๋ ์ ์ดํดํ๊ธฐ ์ํด ์ด ํ๊ทธ๋ค์ ์ฌ์ฉํ๋ฉฐ, ์ด๋ ์์๋ฅผ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์ ์ง๋ณด์์ฑ: ๋ค๋ฅธ ๊ฐ๋ฐ์๋ค์ด ์ฝ๋๋ฅผ ์ฝ๊ณ ์ดํดํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
2. "CSS ๋ฐ์ค ๋ชจ๋ธ์ ๋ํด ์ค๋ช ํด์ฃผ์ค ์ ์๋์?"
๋ฌธ์ ํธ๋ฆฌ ๋ด ์์์ ๋ํด ์์ฑ๋๋ ์ฌ๊ฐํ ๋ฐ์ค์ ๋ํด ์ค๋ช
ํ์ธ์. ๊ฐ ๋ฐ์ค๋ ์ฝํ
์ธ ์์ญ(content edge), ํจ๋ฉ ์์ญ(padding edge), ํ
๋๋ฆฌ ์์ญ(border edge), ๋ง์ง ์์ญ(margin edge)์ ๋ค ๊ฐ์ง ๊ฒฝ๊ณ๋ฅผ ๊ฐ์ง๋๋ค. ๋ํ box-sizing ์์ฑ, ํนํ ๊ธฐ๋ณธ๊ฐ์ธ content-box์, ๋ง์ ๊ฐ๋ฐ์๋ค์ด ์ ํธํ๋ border-box(์์์ ์ด ๋๋น์ ๋์ด์ ํจ๋ฉ๊ณผ ํ
๋๋ฆฌ๋ฅผ ํฌํจ์ํด)์ ์ฐจ์ด์ ์ ์ค๋ช
ํ ์ ์์ด์ผ ํฉ๋๋ค.
3. "์ธ์ Flexbox ๋์ CSS Grid๋ฅผ ์ฌ์ฉํ๊ฒ ์ต๋๊น?"
์ด ์ง๋ฌธ์ ํ๋์ ์ธ ๋ ์ด์์ ๊ธฐ์ ์ ๋ํ ์ดํด๋๋ฅผ ํ
์คํธํฉ๋๋ค. ์ข์ ๋ต๋ณ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
Flexbox๋ 1์ฐจ์ ๋ ์ด์์, ์ฆ ํ ๋๋ ์ด์ ์ด์์ ์
๋๋ค. ๋ด๋น๊ฒ์ด์
๋ฐ์ ํญ๋ชฉ์ ์ ๋ ฌํ๊ฑฐ๋ ์ปจํ
์ด๋ ๋ด์ ํญ๋ชฉ์ ๋ฐฐ๋ถํ๋ ๊ฒ์ ์๊ฐํด๋ณด์ธ์.
Grid๋ 2์ฐจ์ ๋ ์ด์์, ์ฆ ํ๊ณผ ์ด์ ๋์์ ๋ค๋ฃจ๊ธฐ ์ํด ์ค๊ณ๋์์ต๋๋ค. ๊ฐค๋ฌ๋ฆฌ๋ ํค๋, ์ฌ์ด๋๋ฐ, ๋ฉ์ธ ์ฝํ
์ธ , ํธํฐ๊ฐ ์๋ ์น ํ์ด์ง์ ์ ์ฒด ๊ตฌ์กฐ์ ๊ฐ์ ๋ณต์กํ ํ์ด์ง ๋ ์ด์์์ ๋ง๋๋ ๋ฐ ์๋ฒฝํฉ๋๋ค.
JavaScript
1. "์๋ฐ์คํฌ๋ฆฝํธ์ ํด๋ก์ ์ ๋ํด ์ค๋ช ํ๊ณ , ์ค์ ์ ์ธ ์๋ฅผ ๋ค์ด์ฃผ์ค ์ ์๋์?"
ํด๋ก์ ๋ ์์ ์ด ์์ฑ๋ ํ๊ฒฝ์ ๊ธฐ์ตํ๋ ํจ์์
๋๋ค. ํด๋ก์ ๋ ์์ ์ ์ค์ฝํ, ์ธ๋ถ ํจ์์ ์ค์ฝํ, ๊ทธ๋ฆฌ๊ณ ์ ์ญ ์ค์ฝํ์ ์ ๊ทผํ ์ ์์ต๋๋ค.
์ ํ์ ์ธ ์๋ ์ ์ญ ์ค์ฝํ๋ฅผ ์ค์ผ์ํค์ง ์๋ ์นด์ดํฐ ํจ์์
๋๋ค:
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter1 = createCounter();
console.log(counter1()); // 1
console.log(counter1()); // 2
const counter2 = createCounter(); // ์๋กญ๊ณ ๋ถ๋ฆฌ๋ ํด๋ก์
console.log(counter2()); // 1
ํด๋ก์ ๋ ๋ฐ์ดํฐ ํ๋ผ์ด๋ฒ์์ ์ฝ๋ฐฑ์ ํฌํจํ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ง์ ํจํด์ ์์ด ๊ทผ๋ณธ์ ์ ๋๋ค.
2. "`Promise.all`๊ณผ `Promise.race`์ ์ฐจ์ด์ ์ ๋ฌด์์ธ๊ฐ์?"
Promise.all(iterable): ํ๋ก๋ฏธ์ค์ ์ดํฐ๋ฌ๋ธ์ ๋ฐ์ ํ๋์ ์๋ก์ด ํ๋ก๋ฏธ์ค๋ฅผ ๋ฐํํฉ๋๋ค. ์ด ์๋ก์ด ํ๋ก๋ฏธ์ค๋ ์
๋ ฅ๋ ๋ชจ๋ ํ๋ก๋ฏธ์ค๊ฐ ์ดํ(resolve)๋์์ ๋ ๊ทธ ๊ฒฐ๊ณผ๊ฐ๋ค์ ๋ฐฐ์ด๊ณผ ํจ๊ป ์ดํ๋ฉ๋๋ค. ์
๋ ฅ๋ ํ๋ก๋ฏธ์ค ์ค ํ๋๋ผ๋ ๊ฑฐ๋ถ(reject)๋๋ฉด ๊ฑฐ๋ถ๋ฉ๋๋ค.
Promise.race(iterable): ์ด ๋ํ ํ๋ก๋ฏธ์ค์ ์ดํฐ๋ฌ๋ธ์ ๋ฐ์ต๋๋ค. ์ดํฐ๋ฌ๋ธ ๋ด์ ํ๋ก๋ฏธ์ค ์ค ๊ฐ์ฅ ๋จผ์ ์ดํ๋๊ฑฐ๋ ๊ฑฐ๋ถ๋๋ ํ๋ก๋ฏธ์ค์ ๊ฒฐ๊ณผ๊ฐ์ด๋ ์ด์ ๋ฅผ ๊ฐ์ง๊ณ ์ดํ๋๊ฑฐ๋ ๊ฑฐ๋ถ๋๋ ์๋ก์ด ํ๋ก๋ฏธ์ค๋ฅผ ๋ฐํํฉ๋๋ค.
3. "`async/await`์ ๋ํด ์ค๋ช ํ๊ณ , ์ด๊ฒ์ด Promise์ ์ด๋ป๊ฒ ๊ด๋ จ๋๋์ง ์ค๋ช ํด์ฃผ์ธ์."
async/await๋ Promise ์์ ๊ตฌ์ถ๋ ๋ฌธ๋ฒ์ ์คํ(syntactic sugar)์
๋๋ค. ๋น๋๊ธฐ ์ฝ๋๋ฅผ ๋๊ธฐ ์ฝ๋์ฒ๋ผ ๋ณด์ด๊ฒ ํ๊ณ ๋์ํ๊ฒ ํ์ฌ ์ฝ๊ณ ์ถ๋ก ํ๊ธฐ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
- ํจ์ ์ ์ธ ์์
asyncํค์๋๋ ํจ์๊ฐ ์๋ฌต์ ์ผ๋ก Promise๋ฅผ ๋ฐํํ๋๋ก ๋ง๋ญ๋๋ค. awaitํค์๋๋asyncํจ์ ๋ด์์๋ง ์ฌ์ฉํ ์ ์์ต๋๋ค. ํจ์ ์คํ์ ์ผ์ ์ค์งํ๊ณ Promise๊ฐ ํด๊ฒฐ๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฐ ๋ค์, ํจ์๋ฅผ ์ฌ๊ฐํ๊ณ ํด๊ฒฐ๋ ๊ฐ์ ๋ฐํํฉ๋๋ค.
.then() ์ฒด์ธ์ ๋ ๊น๋ํ async/await ํจ์๋ก ๋ฆฌํฉํ ๋งํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ฃผ์ธ์.
ํ๋ ์์ํฌ (React, Vue, Angular ๋ฑ)
์ฌ๊ธฐ์์ ์ง๋ฌธ์ ์ฑ์ฉ ๊ณต๊ณ ์ ๋ช ์๋ ํ๋ ์์ํฌ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค. ๋น์ ์ด ๊ฐ์ฅ ์ ์๋ ํ๋ ์์ํฌ์ ๋ํด ๋ ผ์ํ ์ค๋น๋ฅผ ํ์ธ์.
1. (React) "๊ฐ์ DOM(Virtual DOM)์ด๋ ๋ฌด์์ด๋ฉฐ ์ ์ ์ฉํ๊ฐ์?"
๊ฐ์ DOM(VDOM)์ UI์ ๊ฐ์ ํํ์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์งํ๊ณ "์ค์ " DOM๊ณผ ๋๊ธฐํํ๋ ํ๋ก๊ทธ๋๋ฐ ๊ฐ๋ ์ ๋๋ค. ์ปดํฌ๋ํธ์ ์ํ๊ฐ ๋ณ๊ฒฝ๋๋ฉด ์๋ก์ด VDOM ํํ์ด ์์ฑ๋ฉ๋๋ค. ๊ทธ๋ฌ๋ฉด React๋ ์ด ์๋ก์ด VDOM์ ์ด์ VDOM๊ณผ ๋น๊ตํฉ๋๋ค(์ด ๊ณผ์ ์ "diffing"์ด๋ผ๊ณ ํฉ๋๋ค). ์ด๋ฅผ ํตํด ์ค์ DOM์์ ์ด๋ฌํ ๋ณ๊ฒฝ ์ฌํญ์ ์ ์ฉํ๋ ๊ฐ์ฅ ํจ์จ์ ์ธ ๋ฐฉ๋ฒ์ ๊ณ์ฐํ์ฌ, ์ข ์ข ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์ผ์ผํค๋ ์ง์ ์ ์ธ ์กฐ์์ ์ต์ํํฉ๋๋ค.
2. (์ผ๋ฐ) "๋๊ท๋ชจ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์ํ๋ฅผ ์ด๋ป๊ฒ ๊ด๋ฆฌํ๋์?"
์ด๊ฒ์ ์ค์ํ ์ง๋ฌธ์ ๋๋ค. ๋น์ ์ ๋ต๋ณ์ ๊ฐ๋จํ ํด๊ฒฐ์ฑ ์์ ๋ณต์กํ ํด๊ฒฐ์ฑ ์ผ๋ก ์งํ๋์ด์ผ ํฉ๋๋ค.
- ์ปดํฌ๋ํธ ์ํ(Component State): ๊ณต์ ํ ํ์ ์๋ ๊ฐ๋จํ UI ์ํ(์: ๋๋กญ๋ค์ด์ด ์ด๋ ค ์๋์ง ์ฌ๋ถ)์๋ ๋ก์ปฌ ์ปดํฌ๋ํธ ์ํ(React์
useState๋ฑ)๊ฐ ์ถฉ๋ถํฉ๋๋ค. - Prop ๋๋ฆด๋ง(Prop Drilling): ๋ถ๋ชจ์ ๋ช๋ช ์ค์ฒฉ๋ ์์ ๊ฐ์ ์ํ๋ฅผ ๊ณต์ ํ๋ ๊ฒฝ์ฐ props๋ฅผ ๋ด๋ ค์ฃผ๋ ๊ฒ์ ๊ด์ฐฎ์ง๋ง, ๊น์ ๊ณ์ธต ๊ตฌ์กฐ์์๋ ๋ฒ๊ฑฐ๋ก์์ง๋๋ค.
- Context API (React): ๋ชจ๋ ๋ ๋ฒจ์์ ์๋์ผ๋ก props๋ฅผ ์ ๋ฌํ ํ์ ์์ด ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ฅผ ํตํด ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๋ ๋ด์ฅ๋ ๋ฐฉ๋ฒ์ ๋๋ค. ํ ๋ง๋ ์ฌ์ฉ์ ์ธ์ฆ๊ณผ ๊ฐ์ด ์์ฃผ ์ ๋ฐ์ดํธ๋์ง ์๋ ์ ์ญ ๋ฐ์ดํฐ์ ์ข์ต๋๋ค.
- ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ (Redux, Zustand, Vuex, Pinia): ๋ณต์กํ๊ณ , ์์ฃผ ์ ๋ฐ์ดํธ๋๋ฉฐ, ๊ณต์ ๋๋ ์ ํ๋ฆฌ์ผC์ด์ ์ํ๋ฅผ ์ํด ์ด๋ฌํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ์ค์ ์ง์ค์ ์ ์ฅ์์ ์์ธก ๊ฐ๋ฅํ ์ํ ์ ๋ฐ์ดํธ ํจํด์ ์ ๊ณตํฉ๋๋ค. ํต์ฌ ๊ฐ๋ ์ ์ค๋ช ํ์ธ์: ๋จ์ผ ์ง์ค ๊ณต๊ธ์(์คํ ์ด), ์ด๋ค ์ผ์ด ์ผ์ด๋ฌ๋์ง ์ค๋ช ํ๋ ์ก์ ๋์คํจ์น, ๊ทธ๋ฆฌ๊ณ ์ํ๋ฅผ ์ ๋ฐ์ดํธํ๊ธฐ ์ํด ์์ ํจ์(๋ฆฌ๋์) ์ฌ์ฉ.
์น์ 3: ๋ฐฑ์๋ ๊ฐ๋ฐ ์ง๋ฌธ
์ฌ๊ธฐ์๋ ์๋ฒ, API, ๋ฐ์ดํฐ ์์์ฑ์ ์ด์ ์ด ๋ง์ถฐ์ง๋๋ค. ๋ฉด์ ๊ด์ ๋น์ ์ด ๊ฒฌ๊ณ ํ๊ณ , ํ์ฅ ๊ฐ๋ฅํ๋ฉฐ, ์์ ํ ์๋น์ค๋ฅผ ๊ตฌ์ถํ ์ ์๋์ง ์๊ณ ์ถ์ด ํฉ๋๋ค.
API & ์ํคํ ์ฒ
1. "RESTful API์ ์์น์ ๋ฌด์์ธ๊ฐ์?"
REST (Representational State Transfer)๋ ์ํคํ ์ฒ ์คํ์ผ์ ๋๋ค. ์ง์ ํ RESTful API๋ ์ฌ๋ฌ ์ ์ฝ ์กฐ๊ฑด์ ๋ฐ๋ฆ ๋๋ค:
- ํด๋ผ์ด์ธํธ-์๋ฒ ์ํคํ ์ฒ: UI(ํด๋ผ์ด์ธํธ)์ ๋ฐ์ดํฐ ์ ์ฅ์(์๋ฒ) ๊ฐ์ ๊ด์ฌ์ฌ ๋ถ๋ฆฌ.
- ๋ฌด์ํ์ฑ(Statelessness): ํด๋ผ์ด์ธํธ์์ ์๋ฒ๋ก์ ๊ฐ ์์ฒญ์ ์์ฒญ์ ์ดํดํ๊ณ ์๋ฃํ๋ ๋ฐ ํ์ํ ๋ชจ๋ ์ ๋ณด๋ฅผ ํฌํจํด์ผ ํฉ๋๋ค. ์๋ฒ๋ ์์ฒญ ๊ฐ์ ํด๋ผ์ด์ธํธ ์ปจํ ์คํธ๋ฅผ ์ ์ฅํด์๋ ์ ๋ฉ๋๋ค.
- ์บ์ ๊ฐ๋ฅ์ฑ(Cacheability): ์๋ต์ ํด๋ผ์ด์ธํธ๊ฐ ์ค๋๋ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฌ์ฉํ๋ ๊ฒ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์บ์ ๊ฐ๋ฅ ์ฌ๋ถ๋ฅผ ์ค์ค๋ก ์ ์ํด์ผ ํฉ๋๋ค.
- ๊ณ์ธตํ๋ ์์คํ (Layered System): ํด๋ผ์ด์ธํธ๋ ์ผ๋ฐ์ ์ผ๋ก ์ต์ข ์๋ฒ์ ์ง์ ์ฐ๊ฒฐ๋์ด ์๋์ง ๋๋ ์ค๊ฐ(๋ก๋ ๋ฐธ๋ฐ์๋ ์บ์ ๋ฑ)์ ์ฐ๊ฒฐ๋์ด ์๋์ง ์ ์ ์์ต๋๋ค.
- ๊ท ์ผํ ์ธํฐํ์ด์ค(Uniform Interface): ์ด๊ฒ์ด ํต์ฌ ์ ์ฝ ์กฐ๊ฑด์ด๋ฉฐ, ๋ฆฌ์์ค ๊ธฐ๋ฐ URL(์:
/users/123), ํด๋น ๋ฆฌ์์ค์ ๋ํ ์์ ์ ์ํํ๊ธฐ ์ํ ํ์ค HTTP ๋ฉ์๋(GET,POST,PUT,DELETE) ์ฌ์ฉ, ๊ทธ๋ฆฌ๊ณ JSON๊ณผ ๊ฐ์ ๋ฆฌ์์ค ํํ์ ํฌํจํฉ๋๋ค.
2. "์ธ์ REST ๋์ GraphQL์ ์ฌ์ฉํ๊ฒ ์ต๋๊น?"
์ด ์ง๋ฌธ์ ํ๋ API ํจ๋ฌ๋ค์์ ๋ํ ๋น์ ์ ์ธ์ง๋๋ฅผ ํ
์คํธํฉ๋๋ค.
REST๋ฅผ ์ฌ์ฉํ ๋: ๋จ์ํ๊ณ ์ ์ ์๋ ๋ฆฌ์์ค๊ฐ ์๊ณ , ํ์ค์ ์ด๊ณ ์บ์ ๊ฐ๋ฅํ๋ฉฐ ๊ฐ๋จํ API๊ฐ ์ถฉ๋ถํ ๋. ๋๋ฆฌ ์ดํด๋๊ณ ์์ผ๋ฉฐ ๊ฑฐ๋ํ ์ํ๊ณ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค.
GraphQL์ ์ฌ์ฉํ ๋:
- ์ค๋ฒํ์นญ/์ธ๋ํ์นญ ๋ฐฉ์ง: ํด๋ผ์ด์ธํธ๋ ํ์ํ ๋ฐ์ดํฐ๋ง ์ ํํ ์์ฒญํ ์ ์์ต๋๋ค. ์ด๋ ๋๋ฆฐ ๋คํธ์ํฌ๋ฅผ ์ฌ์ฉํ๋ ๋ชจ๋ฐ์ผ ํด๋ผ์ด์ธํธ์๊ฒ ํนํ ์ ์ฉํฉ๋๋ค.
- ๋ณต์กํ ๋ฐ์ดํฐ ๊ด๊ณ: ๊ทธ๋ํ์ ๊ฐ์ ๋ฐ์ดํฐ ๋ชจ๋ธ(์: ์ฌ์ฉ์, ๊ฒ์๋ฌผ, ๋๊ธ, ์ข์์๊ฐ ์๋ ์์ ๋คํธ์ํฌ)์ด ์๊ณ ์ค์ฒฉ๋ ๋ฐ์ดํฐ๋ฅผ ๋จ์ผ ์์ฒญ์ผ๋ก ๊ฐ์ ธ์์ผ ํ ๋.
- ์งํํ๋ API: ํ๋ก ํธ์๋ ํ์ด ๋ฐฑ์๋ ๋ณ๊ฒฝ์ ๊ธฐ๋ค๋ฆฌ์ง ์๊ณ ์ฟผ๋ฆฌ์ ์๋ก์ด ํ๋๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค.
3. "API๋ฅผ ์ด๋ป๊ฒ ๋ณดํธํ๊ฒ ์ต๋๊น?"
์ฌ๋ฌ ๊ณ์ธต์ ๋ณด์์ ๋ค๋ฃจ์ธ์:
- ์ธ์ฆ(Authentication): ์ฌ์ฉ์๊ฐ ๋๊ตฌ์ธ์ง ํ์ธํ๋ ๊ฒ. ํด๋ผ์ด์ธํธ๊ฐ ๋ก๊ทธ์ธ ํ ํ ํฐ์ ๋ฐ์ ํ์ ์์ฒญ์ `Authorization` ํค๋์ ํฌํจ์ํค๋ JWT (JSON Web Tokens)์ ๊ฐ์ ์ผ๋ฐ์ ์ธ ๋ฐฉ๋ฒ์ ๋ ผ์ํ์ธ์. ๋ํ ์ 3์ ์ธ์ฆ์ ์ํ OAuth 2.0๋ ์ธ๊ธํ์ธ์.
- ์ธ๊ฐ(Authorization): ์ธ์ฆ๋ ์ฌ์ฉ์๊ฐ ๋ฌด์์ ํ ์ ์๋์ง ํ์ธํ๋ ๊ฒ. ์ฌ์ฉ์์ ๊ถํ์ด ํ ๋น๋ ์ญํ (์: ๊ด๋ฆฌ์, ํธ์ง์, ๋ทฐ์ด)์ ๊ธฐ๋ฐํ๋ ์ญํ ๊ธฐ๋ฐ ์ ๊ทผ ์ ์ด(RBAC)์ ๋ํด ๋ ผ์ํ์ธ์.
- ๋ฐ์ดํฐ ์ ํจ์ฑ ๊ฒ์ฌ(Data Validation): SQL ์ธ์ ์ ๋ฐ ์ฌ์ดํธ ๊ฐ ์คํฌ๋ฆฝํ (XSS)๊ณผ ๊ฐ์ ๊ณต๊ฒฉ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์๋ฒ ์ธก์์ ํด๋ผ์ด์ธํธ๋ก๋ถํฐ์ ์ ๋ ฅ์ ํญ์ ๊ฒ์ฆํ๊ณ ์ด๊ท ์ฒ๋ฆฌํ์ธ์.
- HTTPS/TLS: ์ค๊ฐ์ ๊ณต๊ฒฉ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ ์ก ์ค์ธ ๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ์ํธํํ์ธ์.
- ์๋ ์ ํ(Rate Limiting): ํด๋ผ์ด์ธํธ๊ฐ ์ฃผ์ด์ง ์๊ฐ ๋ด์ ํ ์ ์๋ ์์ฒญ ์๋ฅผ ์ ํํ์ฌ ์๋น์ค ๊ฑฐ๋ถ(DoS) ๊ณต๊ฒฉ์ด๋ ๋จ์ฉ์ผ๋ก๋ถํฐ API๋ฅผ ๋ณดํธํ์ธ์.
๋ฐ์ดํฐ๋ฒ ์ด์ค
1. "SQL๊ณผ NoSQL ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ฐจ์ด์ ์ ๋ฌด์์ด๋ฉฐ, ์ธ์ ํ๋๋ฅผ ๋ค๋ฅธ ๊ฒ๋ณด๋ค ์ ํํ๊ฒ ์ต๋๊น?"
์ด๊ฒ์ ๊ทผ๋ณธ์ ์ธ ํ์คํ ์ง๋ฌธ์
๋๋ค.
SQL (๊ด๊ณํ ๋ฐ์ดํฐ๋ฒ ์ด์ค) ์: PostgreSQL, MySQL:
- ๊ตฌ์กฐ: ๋ฐ์ดํฐ๋ ๋ฏธ๋ฆฌ ์ ์๋ ์คํค๋ง(ํ๊ณผ ์ด)๊ฐ ์๋ ํ ์ด๋ธ์ ์ ์ฅ๋ฉ๋๋ค.
- ๊ฐ์ : ๊ด๊ณ๊ฐ ์ค์ํ ๊ตฌ์กฐํ๋ ๋ฐ์ดํฐ์ ์ ํฉํฉ๋๋ค. ๋ฐ์ดํฐ ๋ฌด๊ฒฐ์ฑ์ ๊ฐ์ ํ๊ณ JOIN์ ์ฌ์ฉํ ๋ณต์กํ ์ฟผ๋ฆฌ๋ฅผ ์ง์ํฉ๋๋ค. ์ ๋ขฐํ ์ ์๋ ํธ๋์ญ์ ์ ๋ณด์ฅํ๋ ACID(์์์ฑ, ์ผ๊ด์ฑ, ๊ณ ๋ฆฝ์ฑ, ์ง์์ฑ)๋ฅผ ์ค์ํฉ๋๋ค.
- ์ฌ์ฉ ์ฌ๋ก: ์ด์ปค๋จธ์ค ์ฌ์ดํธ, ๊ธ์ต ์ ํ๋ฆฌ์ผ์ด์ , ๋ฐ์ดํฐ ์ผ๊ด์ฑ์ด ๊ฐ์ฅ ์ค์ํ ๋ชจ๋ ์์คํ .
- ๊ตฌ์กฐ: ๋ฌธ์ ๊ธฐ๋ฐ, ํค-๊ฐ, ์์ด๋ ์ปฌ๋ผ ๋๋ ๊ทธ๋ํ ๊ธฐ๋ฐ์ผ ์ ์์ต๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋์ ๋๋ ์ ์ฐํ ์คํค๋ง๋ฅผ ๊ฐ์ง๋๋ค.
- ๊ฐ์ : ๋น๊ตฌ์กฐ์ ์ด๊ฑฐ๋ ๋ฐ๊ตฌ์กฐ์ ์ธ ๋ฐ์ดํฐ์ ํ์ํฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ์ํ์ ์ผ๋ก ๋งค์ฐ ์ ํ์ฅ๋๋ฉฐ ํน์ ์ ๊ทผ ํจํด์ ๋ํด ๊ณ ์ฑ๋ฅ์ ์ ๊ณตํฉ๋๋ค. ์ข ์ข BASE(Basically Available, Soft state, Eventual consistency) ๋ชจ๋ธ์ ๋ฐ๋ฆ ๋๋ค.
- ์ฌ์ฉ ์ฌ๋ก: ๋น ๋ฐ์ดํฐ ์ ํ๋ฆฌ์ผ์ด์ , ์ค์๊ฐ ๋ถ์, ์ฝํ ์ธ ๊ด๋ฆฌ ์์คํ , IoT ๋ฐ์ดํฐ.
2. "๋ฐ์ดํฐ๋ฒ ์ด์ค ์ธ๋ฑ์ค๋ ๋ฌด์์ด๋ฉฐ ์ฑ๋ฅ์ ์ ์ค์ํ๊ฐ์?"
์ธ๋ฑ์ค๋ ์ถ๊ฐ์ ์ธ ์ฐ๊ธฐ ๋ฐ ์ ์ฅ ๊ณต๊ฐ์ ๋น์ฉ์ผ๋ก ๋ฐ์ดํฐ๋ฒ ์ด์ค ํ ์ด๋ธ์ ๋ฐ์ดํฐ ๊ฒ์ ์์ ์๋๋ฅผ ํฅ์์ํค๋ ๋ฐ์ดํฐ ๊ตฌ์กฐ(์ผ๋ฐ์ ์ผ๋ก B-ํธ๋ฆฌ)์ ๋๋ค. ์ธ๋ฑ์ค๊ฐ ์์ผ๋ฉด ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ ๊ด๋ จ ํ์ ์ฐพ๊ธฐ ์ํด ์ ์ฒด ํ ์ด๋ธ์ ์ค์บํด์ผ ํฉ๋๋ค("ํ ํ ์ด๋ธ ์ค์บ"). ํน์ ์ด(์: `user_email`)์ ์ธ๋ฑ์ค๊ฐ ์์ผ๋ฉด ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ ์ธ๋ฑ์ค์์ ๊ฐ์ ์ฐพ์ ํด๋น ๋ฐ์ดํฐ์ ์์น๋ก ์ง์ ์ด๋ํ ์ ์์ด ํจ์ฌ ๋น ๋ฆ ๋๋ค. ํธ๋ ์ด๋์คํ์ ๋ํด ๋ ผ์ํ์ธ์: ์ธ๋ฑ์ค๋ `SELECT` ์ฟผ๋ฆฌ ์๋๋ฅผ ๋์ด์ง๋ง, ์ธ๋ฑ์ค๋ ์ ๋ฐ์ดํธ๋์ด์ผ ํ๋ฏ๋ก `INSERT`, `UPDATE`, `DELETE` ์์ ์๋๋ฅผ ๋ฆ์ถ ์ ์์ต๋๋ค.
์น์ 4: "ํ์คํ"์ ์ ์ฐฉ์ : DevOps, ํ ์คํธ ๋ฐ ์์คํ ์ค๊ณ
์ด๊ณณ์ ์๋์ด ํ๋ณด์๋ค์ด ์ง์ ์ผ๋ก ๋น์ ๋ฐํ๋ ๊ณณ์ ๋๋ค. ์ด ์ง๋ฌธ๋ค์ ์ฝ๋ ์์ฑ์์๋ถํฐ ๋๊ท๋ชจ ๋ฐฐํฌ ๋ฐ ์ ์ง๋ณด์์ ์ด๋ฅด๊ธฐ๊น์ง ์ ์ฒด ์ํํธ์จ์ด ๊ฐ๋ฐ ์๋ช ์ฃผ๊ธฐ์ ๋ํด ์๊ฐํ๋ ๋ฅ๋ ฅ์ ํ ์คํธํฉ๋๋ค.
DevOps & CI/CD
1. "CI/CD๋ ๋ฌด์์ด๋ฉฐ ์ด๋ฅผ ๊ตฌํํ๊ธฐ ์ํด ์ด๋ค ๋๊ตฌ๋ฅผ ์ฌ์ฉํด ๋ณด์ จ๋์?"
CI (์ง์์ ํตํฉ, Continuous Integration)๋ ๋ชจ๋ ๊ฐ๋ฐ์์ ์์
์ฝ๋ ๋ณต์ฌ๋ณธ์ ๊ณต์ ๋ฉ์ธ๋ผ์ธ์ ์์ฃผ ๋ณํฉํ๋ ๊ดํ์
๋๋ค. ๊ฐ ํตํฉ์ ์๋ํ๋ ๋น๋(๋ฐ ์๋ํ๋ ํ
์คํธ)์ ์ํด ๊ฒ์ฆ๋์ด ํตํฉ ์ค๋ฅ๋ฅผ ๊ฐ๋ฅํ ํ ๋นจ๋ฆฌ ๊ฐ์งํฉ๋๋ค.
CD (์ง์์ ์ ๊ณต/๋ฐฐํฌ, Continuous Delivery/Deployment)๋ ๋น๋ ๋จ๊ณ ํ ๋ชจ๋ ์ฝ๋ ๋ณ๊ฒฝ ์ฌํญ์ ํ
์คํธ ๋ฐ/๋๋ ํ๋ก๋์
ํ๊ฒฝ์ ์๋์ผ๋ก ๋ฐฐํฌํ๋ ๊ดํ์
๋๋ค.
๋น ๋ฅธ ๋ฆด๋ฆฌ์ค ์ฃผ๊ธฐ, ๊ฐ๋ฐ์ ์์ฐ์ฑ ํฅ์, ์ ์ํ ๋ฆด๋ฆฌ์ค์ ๊ฐ์ ์ด์ ์ ์ค๋ช
ํ์ธ์. Jenkins, GitLab CI, GitHub Actions ๋๋ CircleCI์ ๊ฐ์ด ์ฌ์ฉํด ๋ณธ ๋๊ตฌ๋ฅผ ์ธ๊ธํ์ธ์.
2. "Docker๋ ๋ฌด์์ด๋ฉฐ ์ด๋ป๊ฒ ์ฌ์ฉํด ๋ณด์ จ๋์?"
Docker๋ฅผ ์ปจํ
์ด๋์์ ์ ํ๋ฆฌ์ผ์ด์
์ ๊ฐ๋ฐ, ๋ฐฐ์ก ๋ฐ ์คํํ๊ธฐ ์ํ ํ๋ซํผ์ผ๋ก ์ค๋ช
ํ์ธ์. ์ปจํ
์ด๋๋ ์ฝ๋์ ๋ชจ๋ ์ข
์์ฑ์ ํจํค์งํ์ฌ ์ ํ๋ฆฌ์ผ์ด์
์ด ํ ์ปดํจํ
ํ๊ฒฝ์์ ๋ค๋ฅธ ํ๊ฒฝ์ผ๋ก ๋น ๋ฅด๊ณ ์์ ์ ์ผ๋ก ์คํ๋๋๋ก ํฉ๋๋ค. ๋ค์๊ณผ ๊ฐ์ด ์ฌ์ฉํ ๋ฐฉ๋ฒ์ ์ธ๊ธํ์ธ์:
๊ฐ๋ฐ ํ๊ฒฝ ํ์คํ: ํ์ ๋ชจ๋ ๊ฐ๋ฐ์๊ฐ ๋์ผํ ์ข
์์ฑ์ผ๋ก ์์
ํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
๋ฐฐํฌ ๋จ์ํ: ๋ก์ปฌ ๋จธ์ ์์ ํด๋ผ์ฐ๋ VM์ ์ด๋ฅด๊ธฐ๊น์ง Docker๊ฐ ์ค์น๋ ๋ชจ๋ ๊ณณ์์ ์คํํ ์ ์๋ ์ด์ ๊ฐ๋ฅํ ์ํฐํฉํธ(์ด๋ฏธ์ง)๋ฅผ ์์ฑํฉ๋๋ค.
๋ง์ดํฌ๋ก์๋น์ค ํ์ฑํ: ๊ฐ ์๋น์ค๋ ์์ฒด ๊ฒฉ๋ฆฌ๋ ์ปจํ
์ด๋์์ ์คํ๋ ์ ์์ต๋๋ค.
์์คํ ์ค๊ณ
์ค๊ธ์์ ์๋์ด ์ญํ ์ ๊ฒฝ์ฐ, ๊ด๋ฒ์ํ๊ณ ๊ฐ๋ฐฉ์ ์ธ ์์คํ ์ค๊ณ ์ง๋ฌธ์ ๋ฐ์ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค. ๋ชฉํ๋ 30๋ถ ์์ ์๋ฒฝํ๊ณ ์์ธํ ์ํคํ ์ฒ๋ฅผ ๋ง๋๋ ๊ฒ์ด ์๋๋ผ, ๋น์ ์ ์ฌ๊ณ ๊ณผ์ ์ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ ๋๋ค.
์์ ์ง๋ฌธ: "TinyURL๊ณผ ๊ฐ์ URL ๋จ์ถ ์๋น์ค๋ฅผ ์ค๊ณํด๋ณด์ธ์."
์ฒด๊ณ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ๋ฐ๋ฅด์ธ์:
- ์๊ตฌ์ฌํญ ๋ช
ํํ (๊ธฐ๋ฅ์ & ๋น๊ธฐ๋ฅ์ ):
- ๊ธฐ๋ฅ์ : ์ฌ์ฉ์๋ ๊ธด URL์ ์ ๋ ฅํ๊ณ ์งง์ URL์ ์ป์ ์ ์์ต๋๋ค. ์ฌ์ฉ์๊ฐ ์งง์ URL์ ์ ์ํ๋ฉด ์๋์ ๊ธด URL๋ก ๋ฆฌ๋๋ ์ ๋ฉ๋๋ค. ์ฌ์ฉ์๋ ์ฌ์ฉ์ ์ง์ ์งง์ URL์ ๊ฐ์ง ์ ์์ต๋๋ค.
- ๋น๊ธฐ๋ฅ์ : ์๋น์ค๋ ๊ณ ๊ฐ์ฉ์ฑ์ด์ด์ผ ํฉ๋๋ค(๋ค์ดํ์ ์์). ๋ฆฌ๋๋ ์ ์ ๋งค์ฐ ๋นจ๋ผ์ผ ํฉ๋๋ค(๋ฎ์ ์ง์ฐ ์๊ฐ). ์งง์ URL์ ์ถ์ธกํ ์ ์์ด์ผ ํฉ๋๋ค. ์์คํ ์ ์๋ฐฑ๋ง ๊ฐ์ URL๊ณผ ๋ฆฌ๋๋ ์ ์ ์ฒ๋ฆฌํ ์ ์๋๋ก ํ์ฅ ๊ฐ๋ฅํด์ผ ํฉ๋๋ค.
- ๊ณ ์์ค ์ค๊ณ (๋ค์ด์ด๊ทธ๋จ):
์ฃผ์ ๊ตฌ์ฑ ์์๋ฅผ ์ค์ผ์นํ์ธ์. ์ฌ๊ธฐ์๋ ํด๋ผ์ด์ธํธ(์น ๋ธ๋ผ์ฐ์ ), ์น ์๋ฒ/API ๊ฒ์ดํธ์จ์ด, ์ ํ๋ฆฌ์ผ์ด์ ์๋น์ค ๋ฐ ๋ฐ์ดํฐ๋ฒ ์ด์ค๊ฐ ํฌํจ๋ ๊ฒ์ ๋๋ค.
- API ์๋ํฌ์ธํธ:
- ์งง์ URL์ ์์ฑํ๊ธฐ ์ํ
POST /api/v1/url, ๋ณธ๋ฌธ:{"longUrl": "http://..."} - ๋ฆฌ๋๋ ์
์ ์ฒ๋ฆฌํ๊ธฐ ์ํ
GET /{shortUrlCode}
- ์งง์ URL์ ์์ฑํ๊ธฐ ์ํ
- ๋ฐ์ดํฐ๋ฒ ์ด์ค ์คํค๋ง:
๋ฐ์ดํฐ๋ฒ ์ด์ค ์ ํ์ ๋ํด ๋ ผ์ํ์ธ์. Redis๋ DynamoDB์ ๊ฐ์ NoSQL ํค-๊ฐ ์ ์ฅ์๋ ๋น ๋ฅธ ์ฝ๊ธฐ ์ฑ๋ฅ์ผ๋ก ์ธํด
shortUrlCode -> longUrl๋งคํ์ ํ์ํ ๊ฒ์ ๋๋ค. `short_code`๊ฐ ๊ธฐ๋ณธ ํค์ด๊ณ ์ธ๋ฑ์ฑ๋Urls(short_code, long_url, created_at)์ ๊ฐ์ ํ ์ด๋ธ์ด ์๋ SQL ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ์ฌ์ฉํ ์๋ ์์ต๋๋ค. - ํต์ฌ ๋ก์ง (์งง์ URL ์์ฑ):
shortUrlCode๋ฅผ ์ด๋ป๊ฒ ์์ฑํ๋์? ์ต์ ์ ๋ ผ์ํ์ธ์:
a) ๊ธด URL์ ํด์ฑ(์: MD5)ํ๊ณ ์ฒ์ 6-7์๋ฅผ ๊ฐ์ ธ์ต๋๋ค. ์ถฉ๋์ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ ๊น์?
b) ์ URL๋ง๋ค ์ฆ๊ฐํ๋ ์นด์ดํฐ๋ฅผ ์ฌ์ฉํ ๋ค์ base-62๋ก ์ธ์ฝ๋ฉํ์ฌ ์งง์ ์์ซ์ ๋ฌธ์์ด์ ์ป์ต๋๋ค. ์ด๋ ๊ณ ์ ์ฑ์ ๋ณด์ฅํฉ๋๋ค. - ์์คํ
ํ์ฅ:
์ด ๋ถ๋ถ์์ ํฐ ์ ์๋ฅผ ์ป์ ์ ์์ต๋๋ค. ๋ค์์ ๋ ผ์ํ์ธ์:
- ๋ก๋ ๋ฐธ๋ฐ์: ์ฌ๋ฌ ์น ์๋ฒ์ ํธ๋ํฝ์ ๋ถ์ฐ์ํต๋๋ค.
- ์บ์ฑ: ๋ง์ URL์ด ์์ฃผ ์์ฒญ๋๋ฏ๋ก Redis๋ Memcached์ ๊ฐ์ ๋ถ์ฐ ์บ์์
shortUrlCode -> longUrl๋งคํ์ ์บ์ฑํ๋ฉด ๋ฐ์ดํฐ๋ฒ ์ด์ค ๋ถํ๋ฅผ ๊ทน์ ์ผ๋ก ์ค์ด๊ณ ๋ฆฌ๋๋ ์ ์๋๋ฅผ ํฅ์์ํฌ ์ ์์ต๋๋ค. - ๋ฐ์ดํฐ๋ฒ ์ด์ค ํ์ฅ: ๋ฆฌ๋๋ ์ ์ ๋ํ ๋์ ์ฝ๊ธฐ ํธ๋ํฝ์ ์ฒ๋ฆฌํ๊ธฐ ์ํ ์ฝ๊ธฐ ๋ณต์ ๋ณธ(read replicas)๊ณผ ์์คํ ์ด ๊ฑฐ๋ํด์ง ๊ฒฝ์ฐ ์ฐ๊ธฐ ์ค์ฌ ๋ถํ๋ฅผ ์ํ ์ค๋ฉ(sharding)์ ๋ํด ๋ ผ์ํ์ธ์.
- ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN): ๋ ๋น ๋ฅธ ๊ธ๋ก๋ฒ ์๋ต์ ์ํด ๋ฆฌ๋๋ ์ ๋ก์ง์ ์ ์ฌ์ ์ผ๋ก ์ฃ์ง ๋ก์ผ์ด์ ์ผ๋ก ํธ์ํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก : ์ฑ๊ณต์ผ๋ก ๊ฐ๋ ๊ธธ
ํ์คํ ๊ฐ๋ฐ์ ๋ฉด์ ์ ํค์ณ๋๊ฐ๋ ๊ฒ์ ๋จ๊ฑฐ๋ฆฌ ๊ฒฝ์ฃผ๊ฐ ์๋ ๋ง๋ผํค์ ๋๋ค. ํ์ ์ ์ ์์๋ถํฐ ๊น์ ๊ธฐ์ ์ง์์ ์ด๋ฅด๊ธฐ๊น์ง ๋น์ ์ ๋ฅ๋ ฅ์ ์ ๋ฐ์ ์ธ ์คํํธ๋ผ์ ํ ์คํธํฉ๋๋ค. ํต์ฌ์ ๋ต์ ์๊ธฐํ๋ ๊ฒ์ด ์๋๋ผ ๊ทธ ๋ค์ ์๋ ์๋ฆฌ๋ฅผ ์ดํดํ๋ ๊ฒ์ ๋๋ค.
๋น์ ์ ์ฌ๊ณ ๊ณผ์ ์ ๋ช ํํ๊ฒ ์ค๋ช ํ๋ ์ฐ์ต์ ํ์ธ์. ๋ชจ๋ ๊ธฐ์ ์ ์ ํ์ ๋ํด "์"๋ฅผ ์ค๋ช ํ๊ณ ํธ๋ ์ด๋์คํ๋ฅผ ๋ ผ์ํ ์ค๋น๋ฅผ ํ์ธ์. ๊ณผ๊ฑฐ ํ๋ก์ ํธ๋ฅผ ๋น์ ์ ๊ธฐ์ ์ ๋ํ ์ฆ๊ฑฐ๋ก ์ฌ์ฉํ์ธ์. ๊ทธ๋ฆฌ๊ณ ๊ฐ์ฅ ์ค์ํ ๊ฒ์, ํ๋ฅญํ ์ํํธ์จ์ด๋ฅผ ๋ง๋๋ ๊ฒ์ ๋ํ ๋น์ ์ ์ด์ ์ด ๋น๋๊ฒ ํ์ธ์.
ํ๋, ํ๋ก ํธ์๋, ๋ฐฑ์๋, ์์คํ ์ฌ๊ณ ๋ฑ ์ด๋ฌํ ๋ค์ํ ์์ญ์ ๊ฑธ์ณ ์ค๋นํจ์ผ๋ก์จ, ๋น์ ์ ์ ์ธ๊ณ ์ด๋์ ๊ธฐํ๊ฐ ์๋ ํ๋ ํ์คํ ์ญํ ์ ๋์ ์ ํด๊ฒฐํ ์ค๋น๊ฐ ๋ ์ ๋ฅํ๊ณ ๋ค์ฌ๋ค๋ฅํ ์์ง๋์ด๋ก ์๋ฆฌ๋งค๊นํ๊ฒ ๋ ๊ฒ์ ๋๋ค. ํ์ด์ ๋น๋๋ค!