![Git ๊ทธ๋ฆฌ๊ณ VS Code๊ฐ์ ์ธ๋ค์ผ](https://cdn.inflearn.com/public/courses/333266/cover/fd58cb0a-7ce6-4714-806c-320eff83dcb2/333266.png?w=420)
Git ๊ทธ๋ฆฌ๊ณ VS Code
Kenu ํ๊ด๋จ
โฉ11,000
์ ๋ฌธ / Git, GitHub, VSCode, gitlens, git-bash
5.0
(3)
* Git, GitHub ์ฒ์ ์ฌ์ฉํ๋ ๋ถ์ ์ํ ๊ฐ์ * VS Code์ Git ๊ธฐ๋ณธ ๊ธฐ๋ฅ๊ณผ Git๊ด๋ จ ํ๋ฌ๊ทธ์ธ ํ์ฉ
์ ๋ฌธ
Git, GitHub, VSCode
SPA์ ๋๋ช ์ฌ์ธ React ๊ฐ๋ฐ ํ๊ฒฝ์ ๋ง๋ค๊ณ , Node.js ๊ธฐ๋ฐ์ API Server์ Swagger๋ฅผ ํตํ API ๋ฌธ์๋ฅผ ์๋ ์์ฑํฉ๋๋ค. ๋ก์ปฌ ๊ฐ๋ฐํ๊ฒฝ๊ณผ ๊ฐ๋ฐ์๋ฒ์ ์ฐจ์ด๋ฅผ ์ดํดํ๊ณ , AWS๋ฅผ ์ฝ๊ฒ ๋ฐ๋ผ์ ์ด์ฉํ ์ ์์ต๋๋ค.
React ๊ฐ๋ฐ ํ๊ฒฝ๊ณผ ์๋ฒ ๊ตฌ์ฑ
Vite ๊ธฐ๋ฐ์ React ๊ฐ๋ฐํ๊ฒฝ ๋ง๋ค๊ธฐ
Node.js ๊ธฐ๋ฐ์ API Server
Swagger๋ฅผ ํตํ API ๋ฌธ์ ์๋ํ
๋ก์ปฌ ๊ฐ๋ฐํ๊ฒฝ๊ณผ ๊ฐ๋ฐ์๋ฒ ์ฐจ์ด
CORS ์ด์ ํด๊ฒฐ
AWS EC2 ์๋ฒ ๊ตฌ์ถ ๊ธฐ๋ณธ
Nginx(์น์๋ฒ) ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
Nginx์ Node.js ์ฐ๊ฒฐ
๋ฌด๋ฃ HTTPS ์ธ์ฆ์ ๋ฐ๊ธ
GitHub Actions๋ฅผ ์ด์ฉํ CI/CD ์๋ํ
SPA ํ๋ก์ ํธ ๋ก์ปฌ ๊ฐ๋ฐํ๊ฒฝ ๊ตฌ์ถ๋ถํฐ
์๋ฒ ๋ฐฐํฌ ์๋ํ๊น์ง ์ง์ ๋์ ํด๋ณด์ธ์! โ
๐ข ์๊ฐ ์ ํ์ธํด์ฃผ์ธ์!
ํ๋ก ํธ์๋ ํ๊ฒฝ๊ณผ API ์๋ฒ๋ฅผ ๊ฐ๋ฐํ์ง๋ง ๋ง์ ์ด๋ป๊ฒ ๋ฐฐํฌ๋ฅผ ํด์ผ ํ ์ง ๋ง๋งํ์ ๊ฐ์? ์์ํ ๊ฐ๋ฐ ํ๊ฒฝ ์ธํ ๊ณผ ๋ฐฐํฌ CI/CD๋ฅผ ์ํ ํ๋ฆ์ ์ตํ๊ณ ์ถ์ผ์ ๊ฐ์
์ด ๊ฐ์์์๋ ๋ฆฌ์กํธ ํ๋ก์ ํธ์ ๋ก์ปฌ ๊ฐ๋ฐํ๊ฒฝ ๊ตฌ์ถ ๋ฐ ์๋ฒ ๋ฐฐํฌ ์๋ํ ๊ณผ์ ์ ์ง์ ๊ฒฝํํด๋ด ๋๋ค. ๊ธฐ์กด ์น ๊ฐ๋ฐ ๋ฐฉ์๊ณผ ๋ฌ๋ผ์ง ๋ฆฌ์กํธ๋ฅผ ์ด์ฉํ ์ฑ๊ธ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA) ๊ฐ๋ฐ ํ๊ฒฝ์ ๋ค๋ฃจ๋ฉฐ, ์ด๋ฅผ ์๋ฒ์ ๋ฐฐํฌํด์ ์๋น์คํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์๊ฐํฉ๋๋ค. ๋ํ Swagger๋ฅผ ์ด์ฉํ API ๋ฌธ์ ์๋ํ๋ฅผ ํจ๊ป ๋ค๋ฃจ๋ฉฐ, ๋ก์ปฌ ๊ฐ๋ฐ ํ๊ฒฝ๊ณผ ๋ฐฐํฌ๋๋ ์๋ฒ ํ๊ฒฝ๊ณผ์ ์ฐจ์ด๋ฅผ ๋ฐฐ์ธ ์ ์์ต๋๋ค.
์๋์ฐ ๊ธฐ์ค์ผ๋ก ์์์ ๋ง๋ค์์ง๋ง, ๋งฅ๊ณผ ๋ฆฌ๋ ์ค์์๋ ๊ฑฐ์ ๋๋ถ๋ถ ๋์ผํ๊ฒ ๋ฐ๋ผํ ์ ์์ต๋๋ค. ๊ฐ๋ฐ ํ๊ฒฝ ์ธํ ๋ถํฐ ๋ฐฐํฌ, ์๋ํ๊ฐ ์ด๋ป๊ฒ ์ด๋ฃจ์ด์ง๋์ง ๊ฐ์์์ ์ง์ ํ์ธํด ๋ณด์ธ์!
VSCode
Node.js
Git
GitHub
GitHub Actions
AWS EC2
AWS Route53
Nginx + HTTPS
(SSL ์ธ์ฆ์)
01. ์ค๋นํ๊ธฐ
๊ผญ ํ์ํ ๊ฐ๋ฐ ํ๋ซํผ๊ณผ ๊ฐ๋ฐ ๋๊ตฌ, ๊ด๋ จ๋ ๊ณ์ ๋ฑ๋ก ์๊ฐ
02. SPA ๊ฐ๋ฐ ํ๊ฒฝ ๊ตฌ์ฑ
๋ก์ปฌ ์ปดํจํฐ์์ ์์ ํ๊ธฐ ์ํ ํ๋ก ํธ์๋์ ๋ฐฑ์๋์ ๊ธฐ๋ณธ์ ์ธ ํ๋ก์ ํธ ํ๊ฒฝ ๊ตฌ์ฑ
03. ๋ฐฐํฌ ํ๋ก์ธ์ค
์๋น์ค๋ฅผ ์ํด ์๋ฒ์ ๋ฐฐํฌํ๋ ์ ์ฐจ, ๋ฐฉ๋ฒ ์๊ฐ
04. ๋๋ฉ์ธ ๋ฑ๋ก๊ณผ HTTPS ์ค์
๋๋ฉ์ธ๊ณผ ์๋ฒ๋ฅผ ์ฐ๊ฒฐํ๊ณ , HTTPS ์ฐ๊ฒฐ์ ์ํ ๋ฐฉ๋ฒ ์๊ฐ
05. ๋ฐฐํฌ ์๋ํํ๊ธฐ
์ฝ๋๊ฐ ๋ณ๊ฒฝ๋๋ฉด ์๋์ผ๋ก ๊ฐ๋ฐ ์๋ฒ์ ๋ฐฐํฌ๋๋ ์์ ์ค๋ช
06. CORS ์ค์
๋ก์ปฌ ๊ฐ๋ฐ ํ๊ฒฝ์์ ๋ฐ์ํ๋ CORS ์ด์์ ๋น๋ ํ๊ฒฝ ๋ณ์ ๊ตฌ์ฑ
์ข ์ข ์ ํ๋ธ์์ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์ก์ ํ๊ณ ์์ต๋๋ค.
Hello World๋ฅผ ์ฐ์ผ๋ฉด ๊ฐ๋ฐ ์ค๋น๋ ๋๋ฌ์ต๋๋ค! ๋จ์ํ ์ฝ๋๋ฅผ ์ง๋ณธ ๊ฒฝํ์ด ์๋ค๋ ์์ค์์ ๊ทธ์น๋ ๊ฒ์ด ์๋๋ผ, ๋ด๊ฐ ๋ง๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ๋๋ค์ด ์ฌ์ฉํ ์ ์๋๋ก ์๋ฒ์ ์์ ์ด ๋ง๋ ์ฝ๋๋ฅผ ์ฌ๋ ค์ ์๋น์คํ ์ ์๋ ์์ ๊ฐ์ด ์๊น๋๋ค.
Q. ๋น์ ๊ณต์๋ ๋ค์ ์ ์๋ ๊ฐ์์ธ๊ฐ์?
๋ค, ๋น์ ๊ณต์๋ ์ถฉ๋ถํ ๋ค์ ์ ์์ต๋๋ค. ๊ด๋ จ ํ๋ก๊ทธ๋จ ์ค์น๋ถํฐ ์ด์ดํ๊ฒ ์ค๋ช
ํด๋๋ ค์!
(์ ์ ์ง์์ผ๋ก JavaScript๋ฅผ ์๊ณ ๊ณ์
์ผ ํฉ๋๋ค!)
Q. ์์ ๋ด์ฉ์ ์ด๋ ์์ค๊น์ง ๋ค๋ฃจ๋์?
React์ Node.js์ ๋ฌธ๋ฒ์ ๋ค๋ฃจ์ง ์๊ณ , ๊ฐ๋ฐํ๊ฒฝ ๊ตฌ์ถ๊ณผ ๋ฐฐํฌ ๋ฐ ์๋ํ์ ๋ํ์ฌ ์ค๋ช ํฉ๋๋ค.
Q. ๊ฐ์์ ์ฌ์ฉ๋๋ ๊ธฐ์ ๋ค์ ๋ฒ์ ์ด ์ฌ๋ผ๊ฐ๋ฉด, ๊ฐ์ ์ ๋ฐ์ดํธ๊ฐ ์ด๋ฃจ์ด์ง๋์?
๊ฐ์ ์งํ์ด ์ด๋ ค์ธ ์ ๋๋ก ๋ฉ์ด์ ๋ฒ์ ์ด ์ฌ๋ผ๊ฐ ๊ฒฝ์ฐ ๊ฐ์ ๋ด์ฉ ์ ๋ฐ์ดํธ๋ ํ์ํฉ๋๋ค. ๋ฐ๋ผ์ 2025๋ ๊น์ง๋ ์ ๋ฐ์ดํธ๋ฅผ ์ผ๋์ ๋๊ณ ์์ต๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
์คํํธ์ ๊ฐ๋ฐ์๋ก ์ ์ฌํ๋๋ฐ ์ฌ์ ์๋ ๋ถ
SPA ๊ฐ๋ฐํ๊ฒฝ๊ณผ ์๋ฒ ๋ฐฐํฌ๊ฐ ์ฒ์์ด์ ๋ถ
AWS ์ฌ์ฉ์ด ์ฒ์์ด์ ๋ถ
HTTPS ์๋ฒ ๊ตฌ์ฑ์ ๋ฐฐ์ฐ๊ณ ์ถ์ ๋ถ
CI/CD ์ ๋ฌธ์
์ ์ ์ง์,
ํ์ํ ๊น์?
JavaScript
687
๋ช
์๊ฐ์
46
๊ฐ
์๊ฐํ
42
๊ฐ
๋ต๋ณ
4.6
์
๊ฐ์ ํ์
2
๊ฐ
๊ฐ์
https://okky.kr ์ฐฝ๋ฆฝ์์ด๋ฉฐ, https://github.com/kenu/okdevtv ์์ ๋ฐฐ์ด ๊ฒ์ ๊ณต์ ํ๊ณ ์์ต๋๋ค.
https://mp4.okdevtv.com ์ ๊ฐ๋ฐ๊ด๋ จ ์ฑ๋์ ์ต์ ์์์ ๋ชจ์ผ๊ณ ์์ต๋๋ค.
KenuHeo ์ ํ๋ธ์์ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์ก์ 500ํ ์ด์ ์งํํ๊ณ ์์ต๋๋ค.
์ ์ฒด
8๊ฐ โ (1์๊ฐ 48๋ถ)
ํด๋น ๊ฐ์์์ ์ ๊ณต:
์ ์ฒด
43๊ฐ
4.6
43๊ฐ์ ์๊ฐํ
์ง์๊ณต์ ์๋์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!
๊ฐ์ ๋ถ์ผ์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!
์ โฉ15,400
5๊ฐ์ ํ ๋ถ ์
โฉ77,000