2022.08.08(Mon)
[TIL] Day72
[SEB FE] Day73
: 1๋ฒ ํด๋ฆญ / ๋ช ๋ น์ด ์ ๋ ฅ์ ํตํด ์ ์ฒด ๋ฐฐํฌ ๊ณผ์ ์ ์๋์ผ๋ก ์งํํ๋ ๊ฒ
Human Error
๋ฐฉ์งHuman Error
? ์ฌ๋์ด ์๋์ ์ผ๋ก ๋ฐฐํฌ ๊ณผ์ ์ ์งํํ๋ ์ค์ ์๊ธฐ๋ ์ค์Pipeline
? ์์ค ์ฝ๋ ๊ด๋ฆฌ๋ถํฐ ์ค์ ์๋น์ค๋ก์ ๋ฐฐํฌ ๊ณผ์ ์ ์ฐ๊ฒฐํ๋ ๊ตฌ์กฐActions
)๋ค ์ํ)Source
๋จ๊ณ: ์๊ฒฉ ์ ์ฅ์ ์์ค ์ฝ๋์ ๋ณ๊ฒฝ ์ฌํญ ๋ฐ์ โ ์ด๋ฅผ ๊ฐ์งํ๊ณ ๋ค์ ๋จ๊ณ๋ก ์ ๋ฌํ๋ ์์
์ํBuild
๋จ๊ณ: ์ ๋ฌ๋ฐ์ ์ฝ๋๋ฅผ ์ปดํ์ผ, ๋น๋, ํ
์คํธํ์ฌ ๊ฐ๊ณต & ์์ฑ๋ ๊ฒฐ๊ณผ๋ฌผ์ ๋ค์ ๋จ๊ณ๋ก ์ ๋ฌํ๋ ์์
์ํDeploy
๋จ๊ณ: ์ ๋ฌ๋ฐ์ ๊ฒฐ๊ณผ๋ฌผ์ ์ค์ ์๋น์ค์ ๋ฐ์ํ๋ ์์
์ํ๐ย CI/CD Pipeline
CI
(์ง์์ ํตํฉ): Plan
โ Code
โ Build
โ Test
โCD
(์ง์์ ๋ฐฐํฌ): Release
โ Deploy
โ Operate
โ Plan
: ํ ๊ตฌ์ฑ์์ด ๊ฐ์์ ์์ ์ ์์ฃผ ํตํฉํ๋ SW ๋ฐฉ์
โ๏ธย ๋ชจ๋ ์ฝ๋ ๋ณํ๋ฅผ ํ๋์ Repository์์ ๊ด๋ฆฌํ๋ ๊ฒ๋ถํฐ ์์~!
โ๏ธย ์ฆ์ Pull Repust
& Merge
๋ก ์ฝ๋๋ฅผ ์์ฃผ ํตํฉ (๊ธฐ๋ณธ์ ์ธ ํ
์คํธ๋ ์๋ ๊ฐ๋ฅ)
๐ย ๊ฐ ๊ฐ๋ฐํ ์ฝ๋๋ฅผ ์ด๋ฅธ ์์ ์ ์์ฃผ ํฉ์น๊ณ , ์์ฃผ ํ
์คํธ ํด๋ณผ ์ ์์!! โ ํจ์จ์ ์ธ ๊ฐ๋ฐ ๐
Code
: ๊ฐ๋ฐ์๊ฐ ์ฝ๋๋ฅผ ์ฝ๋ ์ ์ฅ์์ PushBuild
: ์ฝ๋ ์ ์ฅ์๋ก๋ถํฐ ์ฝ๋๋ฅผ ๊ฐ์ ธ์์ (Unit Test ํ) BuildTest
): ์ฝ๋ Build ๊ฒฐ๊ณผ๋ฌผ์ด ๋ค๋ฅธ ์ปดํฌ๋ํธ์ ์ ํตํฉ๋๋์ง ํ์ธโย Build
? ๊ฐ๋ฐ์๋ง ์ฝ์ ์ ์๋ ์์ค ์ฝ๋๋ฅผ ์คํ ๊ฐ๋ฅํ ์ฝ๋/ํ๋ก๊ทธ๋จ์ผ๋ก ๋ณํํ๋ ๊ณผ์
โย ๋ฒ๋ค๋ง
? ๋ธ๋ผ์ฐ์ ๊ฐ ์์ค ์ฝ๋๋ฅผ ๋ ์ ์ฝ์ ์ ์๊ฒ ๋์์ค์ผ๋ก, ๋น๋ ๊ณผ์ ์ค ํ๋!
Repository
์์ฑgit remote add [myRepo] [์๋ก์ด Repository URL]
git push myRepo [branch name]
: CI ๊ณผ์ ์ด ์ํํ ๋๋๋ฉด ๋ฐ๋ก ๊ณ ๊ฐ์๊ฒ ๋ฐฐํฌํ๋ ๊ฒ (ex- Github Page
)
Release
: Build๊น์ง ๋ชจ๋ ์ค๋น ์๋ฃ! โ ์ด๋ค ๊ธฐ๋ฅ์ด ๊ฐ๋ฐ๋์๋์ง ๋น์ฆ๋์ค ๊ด๊ณ์๋ค๊ณผ ์ด์ผ๊ธฐ ๋๋๋ ๋จ๊ณDeploy
: ์ค์ ๋ฐฐํฌ ๋จ๊ณOperation
: ๋ฐฐํฌ๋ SW๋ฅผ ์ค์ ์ด์ฉํ๋ ๊ณผ์ (๊ณ ๊ฐ ํผ๋๋ฐฑ์ ๋ฐ์ ๊ธฐํ์ ๋ฐ์): Front-end ๋ฐฐํฌ๋ฅผ ์๋ํํ๊ณ , ๊ทธ ์ธ ์ฌ๋ฌ ์ถ๊ฐ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ๋ฐฐํฌ ํ๋ ์์ํฌ
Vercel
ํ์๊ฐ์
(Github๊ณผ ์ฐ๋)
New Project ๋ฒํผ ๋๋ฅด๊ณ Add Github Account
ํด๋ฆญ (์ต์ด ์์ฑ์ ๋ง๊ณ ๋ค์ ๋ ์์ฑ์)
Configure
๋ฒํผ ํด๋ฆญํด์ Repository access
๋ถ๋ถ ์ฐพ์ ํ, ๋ฐฐํฌํ๊ณ ์ ํ๋ ๋ ํฌ์งํ ๋ฆฌ ์ ํ
Import
ํด๋ฆญ
Deploy
ํด๋ฆญ์ข ๊ธฐ๋ค๋ฆฌ๋ฉด ๋ฐฐํฌ ๋งํฌ ์ง์โจ
โ index.test.js
์ง๋ณด๊ธฐ
// index.test.js
// test ํต๊ณผ์์ ๋ฐฐํฌ๋๋๋ก testcase ์์ฑ
import { render } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import App from "./App";
describe("Bare minimum requirement", () => {
describe("App.js ์ปดํฌ๋ํธ ์ ๋ ํ
์คํธ", () => {
test('H1 ์๋ฆฌ๋จผํธ์ "My Agora States" ํ
์คํธ ๋
ธ๋๊ฐ ์์ด์ผ ํฉ๋๋ค.', () => {
const { container } = render(<App />);
const h1 = container.querySelector("h1");
expect(h1.textContent).toBe("My Agora States"); // h1 ํ๊ทธ ์์ ๋ด์ฉ์ด ์ด๊ฑฐ๋ฉด test๊ฐ ํต๊ณผ๋๋๋ก~!
});
});
});
โจ Vercel์์ Deploy ํ์ Build log๋ฅผ ํ์ธํด๋ณด๋ฉด ์์ test code๊ฐ ํต๊ณผํ๋๊ฑธ ํ์ธ ๊ฐ๋ฅ!