Home - FRONTENDBOOTCAMP-14th/Sashimi GitHub Wiki
"์ฐ๋ฆฐ ํฐ๋น UI๋ฅผ ์ ๊ตํ๊ฒ '๋ฌ๋ค'! ๊ทธ๋์ ์ด๋ฆ์... ์ฌ! ์! ๋ฏธ!"
์ด๋ฆ | ์ญํ | GitHub ID | ์ฃผ์ ๋ด๋น |
---|---|---|---|
๋ฐ๋ฏผ์ฑ | ๐งญ PM, FE | @PMS990126 | ์ผ์ ๊ด๋ฆฌ, ๋ก๊ทธ์ธยท๋ชจ๋ฌ ์ปดํฌ๋ํธ, ๋ก๊ทธ์ธยท๋น๋ฐ๋ฒํธ ์ฐพ๊ธฐยทํ์๊ฐ์ ํ์ด์ง |
์กฐ์ฅ์ | ๐ ๏ธ PL, FE | @Jandi95 | ์ฝ๋ ๊ตฌ์กฐ, ๋ฉ์ธยท๊ฒ์ ์ปดํฌ๋ํธ, ๋ฉ์ธ ํ์ด์ง ๋ฐ ์ด๊ด |
์ฅํจ์ | ๐จ FE | @wjjhhj0914 | ํค๋ยทํธํฐ ์ปดํฌ๋ํธ, ๊ฒ์ยทํ๋กํ ํ์ด์ง |
์ ์ง์ฐ | ๐ป FE | @jeonjyeon | ๋๋ฉยทํ๋กํ ์ปดํฌ๋ํธ, ๋๋ฉยทํ๋กํ ํ์ด์ง |
๐ฆ project-root
โโโ ๐ public
โ โโโ ๐ icon
โ โโโ ๐ images
โ โโโ ๐ js
โ โโโ โญ favicon.ico
โโโ ๐ src
โ โโโ ๐ common # ๋ฆฌ์
, ํ
๋ง, ์ ๊ทผ์ฑ ๋ฑ ํ์ผ
โ โโโ ๐ components # ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ UI ์ปดํฌ๋ํธ
โ โโโ ๐ page # ๊ฐ ํ์ด์ง๋ณ HTML ํ์ผ
โโโ โโโ ๐ layout.css
โโโ โโโ ๐ layout.html
โโโ โโโ ๐ main.js
โโโ โโโ ๐ style.css
โโโ ๐ .gitignore
โโโ ๐ .prettierrc.cjs
โโโ ๐ index.html
โโโ ๐ package-lock.json
โโโ ๐ package.json
โโโ ๐ README.md
โโโ ๐ vite.config.js
๋ฐฑ๋ก๊ทธ ๋งํฌ : https://github.com/orgs/FRONTENDBOOTCAMP-14th/projects/8
๐๏ธ 2025.05.27 (Day 1) - ํ๋ก์ ํธ ์ด๊ธฐ ์ธํ ๋ฐ ์ญํ ๋ถ๋ฐฐ
ํ๋ก์ ํธ์ ๊ธฐ๋ฐ์ ๋ค์ง๊ณ , ๋ณธ๊ฒฉ์ ์ธ ์์ ์ ๊ตฌ์กฐ์ ์ด์ ์ฒด๊ณ๋ฅผ ์ ๋นํ ๋
- โ PR ์ปค๋ฐ ๊ท์น ์ ์ ๋ฐ GitHub ํ์ ํ๊ฒฝ ์ ๋ฆฌ
- โ WIKI ํ ๊ตฌ์กฐ ์ค๊ณ ๋ฐ ์์ฑ ์์
- โ ๋ฐฑ๋ก๊ทธ ํญ๋ชฉ ๊ตฌ์ฒดํ, ์ด์ ํ ํ๋ฆฟ ์์ฑ ๋ฐ ๋ผ๋ฒจ ๋ถ๋ฅ
- โ ์์ ํํธ๋ฅผ ๋ช ํํ๊ฒ ๋ถ๋ฐฐํ์ฌ ๊ฐ์ ๋งก์ ํ์ด์ง ์ ์
- โ ๋์ค์ฝ๋ & ๊นํ๋ธ Webhook ์ฐ๋์ผ๋ก ์ค์๊ฐ ํ์ ์๋ฆผ ๊ตฌ์ถ
- โ ๊ณตํต ํด๋ ๊ตฌ์กฐ ๋ฐ ์ด๊ธฐ ํ์ผ ์ธํ ์๋ฃ
๐๏ธ 2025.05.28 (Day 2) - ๊ฐ๋ณ ์ปดํฌ๋ํธ ๋งํฌ์ & ์คํ์ผ๋ง ์์
-
๐จโ๐ป ๋ฐ๋ฏผ์ฑ
- ๋ก๊ทธ์ธ ํผ UI ์์ ๋งํฌ์ ๋ฐ ์คํ์ผ๋ง
- ๋ฐ์ํ ๊ณ ๋ คํ ๊ตฌ์กฐ ์ค๊ณ
-
๐จโ๐จ ์กฐ์ฅ์
- ๋ฉ์ธ ํ์ด์ง ๋ ์ด์์ ์ค๊ณ
- ๋งํฌ์ ๋ฐ ์คํ์ผ๋ง ์งํ
-
๐ฉโ๐ป ์ ์ง์ฐ
- ๋๋ฉ ํ์ด์ง ์์ด์ฝ ๋ฐ ์ด๋ฏธ์ง ์ถ๊ฐ
- ์ ์ฒด ๋งํฌ์ ๊ณผ ์คํ์ผ๋ง ๊ตฌ์ฑ
-
๐ฉโ๐ง ์ฅํจ์
- ํค๋ ์ปดํฌ๋ํธ ์๋งจํฑ ๋งํฌ์ ๋ฐ ์คํ์ผ๋ง
- ๋ฐ์ํ ์ ์ฉ ์๋ฃ
๐๏ธ 2025.05.29 (Day 3) - ๋ฆฌํฉํ ๋ง & ํ์ด์ง ๊ตฌ์กฐ ์ฌํ ์์
-
๐จโ๐ป ๋ฐ๋ฏผ์ฑ
- ๋ก๊ทธ์ธ ์ปดํฌ๋ํธ ๋ฆฌํฉํ ๋ง ๋ฐ ์ ๊ทผ์ฑ ๊ฐ์
- ๋ชจ๋ฌ ์ปดํฌ๋ํธ ๋งํฌ์ ๋ฐ ์คํ์ผ๋ง
-
๐จโ๐จ ์กฐ์ฅ์
- ๋ฉ์ธ ํ์ด์ง ๊ตฌ์กฐ ๋ฐ ์คํ์ผ ์์
- Search ์ปดํฌ๋ํธ ์ถ๊ฐ ๋ฐ ๊ตฌ์ฑ
-
๐ฉโ๐ป ์ ์ง์ฐ
- ๋๋ฉ ํ์ด์ง ๋ง๋ฌด๋ฆฌ ์คํ์ผ๋ง
- ํ๋กํ ์ปดํฌ๋ํธ ๋งํฌ์ ๋ฐ ํธ์ง ๊ธฐ๋ฅ UI ๊ตฌ์ฑ
-
๐ฉโ๐ง ์ฅํจ์
- ํค๋ ์คํ์ผ ๊ฐ์
- ํธํฐ ์ปดํฌ๋ํธ ๊ธฐ๋ณธ ๊ตฌ์กฐ ๋ฐ ์คํ์ผ๋ง
๐๏ธ 2025.05.30 (Day 4) - ์ ์ฒด ๊ตฌ์กฐ ์ ๋ฆฌ ๋ฐ ๋ณธ๊ฒฉ ํ์ด์ง ์ ์ ๋์
-
๐ค ๊ณตํต ์์
- ์ ์ฒด ์ฝ๋ PR ๋ฐ ๋ณํฉ (develop โ main)
- ์ ์ฒด ๋ ์ด์์ ๊ตฌ์กฐ ์ค๊ณ ํ์
- ์ปดํฌ๋ํธ ํต์ผ ๋ฐ ๋ฆฌํฉํ ๋ง
-
๐จโ๐ป ๋ฐ๋ฏผ์ฑ
- ๋ก๊ทธ์ธ ํ์ด์ง ๋ณธ๊ฒฉ ์ ์ ์์
-
๐จโ๐จ ์กฐ์ฅ์
- ๋ฉ์ธ ํ์ด์ง ์ฝํ ์ธ ๊ตฌ์ฑ ๋ฐ ์ ์ ์์
-
๐ฉโ๐ป ์ ์ง์ฐ
- ๋๋ฉ ํ์ด์ง ๊ตฌ์กฐ ๊ฐ์ ๋ฐ ์ ์ ์์
-
๐ฉโ๐ง ์ฅํจ์
- ํ๋กํ ํ์ด์ง ๋ ์ด์์ ์ค๊ณ ๋ฐ ๋งํฌ์ ์์
๐๏ธ 2025.06.02 (Day 5) โ ์ธ๋ฑ์ค ๋ ์ด์์ ๊ตฌ์ฑ ๋ฐ ์ ์ฒด ์ฝ๋ ๋ฆฌํฉํ ๋ง
์ค๊ฐ ์ ๊ฒ ํผ๋๋ฐฑ์ ๋ฐ์ํ์ฌ ์ ์ฒด ๊ตฌ์กฐ๋ฅผ ๋ฆฌํฉํ ๋งํ๊ณ
ํ์ด์ง๋ณ ๊ตฌ์กฐ ๋ฐ ์ปดํฌ๋ํธ ์์ฑ๋๋ฅผ ๋์ด๋ ๋ฐ ์ง์คํ ๋
-
๐ค ๊ณตํต ์์
- ์ธ๋ฑ์ค ํ์ด์ง ๋ ์ด์์ ์๊ฐ์ ํต์ผ
- ์ฝ๋ develop ๋ธ๋์น ๋ณํฉ
- WIKI ๋ฌธ์ ์ ๋ฆฌ ๋ฐ ์์
- ํ์ด์ง๋ณ ์ฝ๋ ๋ฆฌ๋ทฐ ๋ฐ ํผ๋๋ฐฑ ๋ฐ์
- ์ ์ฒด ๋ ์ด์์/์ปดํฌ๋ํธ ๊ตฌ์กฐ ๋ฆฌํฉํ ๋ง
-
๐จโ๐ป ๋ฐ๋ฏผ์ฑ
- ๋ก๊ทธ์ธ & ๋ชจ๋ฌ ์ปดํฌ๋ํธ ๋ฆฌํฉํ ๋ง
-
๐จโ๐จ ์กฐ์ฅ์
- ๋ฉ์ธ & ๊ฒ์ ํ์ด์ง ์ ๋ฆฌ ๋ฐ UI ๊ฐ์
-
๐ฉโ๐ป ์ ์ง์ฐ
- ํ๋กํ/๋๋ฉ ํ์ด์ง ๊ตฌ์กฐ ์ ๋ฆฌ ๋ฐ ์คํ์ผ๋ง
-
๐ฉโ๐ง ์ฅํจ์
- ํค๋/ํธํฐ ์๋งจํฑ ๋งํฌ์ ์ ๋น ๋ฐ ๋ฐ์ํ ๋์
๐๏ธ 2025.06.03 (Day 6) โ ์ธ๋ฑ์ค workflow ์์ญ ์ ์
-
๐ค ๊ณตํต ์์
- ์ธ๋ฑ์ค workflow ๊ตฌ์ฑ ํ์
-
๐จโ๐ป ๋ฐ๋ฏผ์ฑ
- workflow - convention ์์ญ ์ ์
-
๐จโ๐จ ์กฐ์ฅ์
- workflow - ๋ ์ด์์ ์ธํ
-
๐ฉโ๐ป ์ ์ง์ฐ
- workflow - scrum ์์ญ ์ ์
-
๐ฉโ๐ง ์ฅํจ์
- workflow - timeline ์์ญ ์ ์
๐๏ธ 2025.06.04 (Day 7) โ ํ๋ก์ ํธ ์ต์ข ์์ฑ ๋ฐ ๋ง๋ฌด๋ฆฌ
-
๐ค ๊ณตํต ์์
- ๊ฐ ํ์ด์ง์ ๋ค์ด๊ฐ ์ํ์ฐฉ์ค ๋ด์ฉ ์ด ์ ๋ฆฌ
- ๋ฐํ ๋ด์ฉ ๊ฒ์ ๋ฐ ์์ ์์
- ์ ์ฒด ํ์ด์ง ํฌ๋ก์ค๋ธ๋ผ์ฐ์ง ์ฒดํฌ
-
๐จโ๐ป ๋ฐ๋ฏผ์ฑ
- ์ด๋ฏธ์ง ํ์ผ ์ต์ ํ๋ฅผ ์ํด npm์ ํ์ฉํ ๋ณํ ์์
-
๐จโ๐จ ์กฐ์ฅ์
- ์ธ๋ฑ์ค ๋ฐ์ํ ์ฒ๋ฆฌ ๋ฐ ํธํฐ ์ถ๊ฐ
-
๐ฉโ๐ป ์ ์ง์ฐ
- ๋๋ฉ์ ๋น์์ ์ ์ ๋ช ์ํ๋ ๋ชจ๋ฌ ์ถ๊ฐ
-
๐ฉโ๐ง ์ฅํจ์
- ๊ฐ ํ์ด์ง ํ๋กํ ํ์ ์ฒ๋ฆฌ
- โ ์ด๋ฏธ์ง
alt
์ ๋ถํ์ํ ์ ๋ณด ํฌํจ (์: ์์ด์ฝ) โ ์ ๊ฑฐ ํ์ - โ ๋ฒํผ์
type
์์ฑ ํ์ธ (type="button"
๋ฏธ์ง์ ์ฃผ์) - โ ์์ด์ฝ์
<img>
๋ก ๋งํฌ์ ํ ์ฌ์ฌ์ฉ ์์ด ๋ฐ๋ณต ์ฌ์ฉ โ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ ์ปดํฌ๋ํธํ ๊ถ์ฅ
โ ๏ธ ํ์ฌ ์์น ํ์ ์aria-current
์ฌ์ฉ ๊ถ์ฅ
๐ MDN ๋ฌธ์ ์ฐธ๊ณ
- โ
label
์์ ๋๋ฝ โplaceholder
๋ label ๋์ฒด ๋ถ๊ฐ - โ ๋น๋ฐ๋ฒํธ ๋ณด๊ธฐ ํ ๊ธ์
button
์์ ์ฌ์ฉ ํ์
- ๐งญ
alt="๋ก๊ณ "
โ"๋ก๊ณ "
๋ฌธ๊ตฌ ์ญ์ ๊ถ์ฅ - ๐ก
<a>
๋ด๋ถ<p>
๋ณด๋ค<span>
์ฌ์ฉ ์ถ์ฒ - ๐ง ๋ชจ๋ฐ์ผ/๋ฐ์คํฌํ ์ด๋ฏธ์ง ๋ถ๋ฆฌ ์ด์ ๊ฒํ ํ์
- ๐ผ๏ธ SNS ์์ด์ฝ โ
aria-label
๋์<img alt="">
์ฌ์ฉ ๊ถ์ฅ - ยฉ๏ธ ํน์๋ฌธ์ ์ง์ ์
๋ ฅ ๋์
©
์ฌ์ฉ
- โ
"์๋ก์์ง ํฐ๋น์ ๋ง๋๋ณด์ธ์"
โ ๊ธฐ์กด ์ปดํฌ๋ํธ ์ฌํ์ฉ ๊ฐ๋ฅ ์ฌ๋ถ ๊ฒํ - โ ๋ฐฐ๊ฒฝ ์์ญ๊น์ง ์ปดํฌ๋ํธํ ํ์์ฑ ์ฌ๊ฒํ
โ ๏ธ <img aria-hidden="true">
๋ถํ์- โ
"์ต๊ทผ ๊ฒ์์ด ๋ชจ๋ ์ง์ฐ๋"
โ ๋์ฒด ํ ์คํธ๋ก ์ ์ ํ์ง ๊ฒํ - โ
<label>
์ ์๋ฏธ ์ ๋ฌ์ด ๋ถ์กฑํ ํ ์คํธ ์ฌ์ฉ ์ค โ ์ญํ ๋ถ๋ฆฌ ํ์
- โ
<dialog>
๋ฏธ์ฌ์ฉ ์<div>
์ ARIA ์์ฑ ํ์ - ๐ WAI-ARIA ๋ชจ๋ฌ ์ ๊ทผ์ฑ ๊ฐ์ด๋
๐ PR ์ปค๋ฐ ๋ฐ์ ๋ฐฉ์
โ
๊ธฐ์กด PR์ ์ปค๋ฐ์ ์ถ๊ฐํด์ผ ํ ๋, PR์ ๋ซ๊ณ ์๋ก ๋ง๋ค์ด์ผ ํ๋ ์ค ์์์
๐ง ํ์ง๋ง git add .
โ git push
๋ง์ผ๋ก ๊ธฐ์กด PR์ ์ปค๋ฐ์ด ๋ฐ์๋จ
โ๏ธ ์ปค๋ฐ ์์ ์ git commit --amend -m "message"
๋ก ๊ฐ๋ฅํ์ง๋ง, ๊ธฐ๋ก์ด ๋ฎ์ด๋ ์ ์คํ
โฟ ์ ๊ทผ์ฑ aria ์์ฑ ๋จ๋ฐ
โ
๋ชจ๋ ์์์ aria
์์ฑ์ ๊ณผ๋ํ๊ฒ ์ฌ์ฉ
๐ง alt๋ก ์ถฉ๋ถํ ๊ฒฝ์ฐ aria-label
์๋ต, ํ์ํ ๊ฒฝ์ฐ๋ง ๋ช
ํํ๊ฒ ์ฌ์ฉ
โ๏ธ ์ ๊ทผ์ฑ์ '์ ์ ํ๊ฒ', ๊ณผ์ ๋ถ๊ธ!
๐ท๏ธ ๋ ์ด๋ธ ์๋ input ์ฒ๋ฆฌ
โ
์์์ ๋ ์ด๋ธ ์๋ค๊ณ <div>
๋ก ์ฒ๋ฆฌ
๐ง <label class="sr-only">
๋ก ๋ณด์ด์ง ์๊ฒ ๋ฃ์
โ๏ธ ๋ณด์กฐ๊ธฐ๊ธฐ ์ฌ์ฉ์๋ ๊ณ ๋ คํ ์๋งจํฑ ๋งํฌ์
์ค์
๐๏ธ ๋น๋ฐ๋ฒํธ ํ ๊ธ ๋ฒํผ ์ ๊ทผ์ฑ
โ
<img>
ํ๊ทธ๋ก๋ง ๊ตฌ์ฑํด ์คํฌ๋ฆฐ๋ฆฌ๋ ๋์ ์๋จ
๐ง <button>
๊ฐ์ธ๊ณ aria-label
์ถ๊ฐ
โ๏ธ ๊ธฐ๋ฅ์ ์๋ฉํฑํ๊ฒ ํํ๋ผ์ผ ํจ!
๐ช Modal์ div๋ก ๋งํฌ์
โ
๋จ์ <div>
๋ก ๊ตฌํ
๐ง <dialog>
ํ๊ทธ๋ก ๋ณ๊ฒฝ
โ๏ธ ๋ชจ๋ฌ๋ ์๋ฉํฑํ๊ฒ!
๐ ์ฌ๋ผ์ด๋ ๋ํธ ํ์ฑ ์ํ ์๋ณ ๋ถ๊ฐ
โ
aria-label
๋ง ์๊ณ ํ์ฌ ์์น ํ์๋ ์์
๐ง aria-current="true"
์ถ๊ฐ
โ๏ธ ์ ๊ทผ์ฑ์ 'ํ์ฌ ์ํ'๊น์ง ๊ณ ๋ คํด์ผ ์ง์ง!
๐ด ํ์ดํ ์ ํฌ์ธํธ ์์น ์ด๊ธ๋จ
โ
ํ
์คํธ๊ฐ ๊ธธ์ด์ง๋ฉด ํฌ์ธํธ ์ ์ด ๊ฐ๋ ค์ง
๐ง padding๊ณผ width ์กฐ์ ์ผ๋ก ์ ์ฐํ๊ฒ ํด๊ฒฐ
โ๏ธ ๋ฐ์ํ์ ๊ณต๊ฐ ์ค๊ณ๊ฐ ํต์ฌ!
๐ต ::backdrop์ด ์ ์๊น
โ
<dialog open>
๋ง ์ฌ์ฉ โ .showModal()
์ ์
๐ง .showModal()
๋ก ์ด์ด์ผ ::backdrop
ํ์ฑํ๋จ
โ๏ธ HTML ์์์ JS์ ์ฐ๊ฒฐ ์๋ฆฌ๋ฅผ ์ดํดํด์ผ ํจ
๐งฝ ๋ฒํผ์ aria-label ์ค๋ณต ์ฌ์ฉ
โ
ํ
์คํธ๋ ์๋๋ฐ aria-label
๊น์ง ์์
๐ง aria-label
์ ๊ฑฐ
โ๏ธ ์ ๊ทผ์ฑ ์์ฑ์ '๋์ฒด ์๋จ', ์ค๋ณตํ๋ฉด ์๋จ
๐ submit ๋ฒํผ์ผ๋ก ํ์ด์ง ์ด๋?
โ
<button type="submit">
์ฌ์ฉํ์ผ๋ ๋จ์ ์ด๋๋ง ํ์
๐ง type="button"
์ผ๋ก ๋ณ๊ฒฝํ๊ณ JS ์ฒ๋ฆฌ
โ๏ธ ์๋งจํฑ์ฑ๊ณผ ์ฌ์ฌ์ฉ์ฑ์ ๊ท ํ ์ค์
๐งฑ ์ฌ์ฌ์ฉ๋์ง ์๋ ์ปดํฌ๋ํธ
โ
์์ด์ฝ, ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ๋ถ๋ฆฌํ์ง๋ง ์ฌ์ฌ์ฉ ์ ๋จ
๐ง background-image๋ก ํต์ผ, ๋ถํ์ ์ปดํฌ๋ํธ ์ ๊ฑฐ
โ๏ธ ์ปดํฌ๋ํธ๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅ์ฑ์ด ํต์ฌ!
๐ฏ ์ค์ ์ ๋ ฌ ๊นจ์ง
โ
margin/padding์ผ๋ก๋ ๋ฐ์ํ์์ ํ์ด์ง
๐ง ๊ฐ์ ์์๋ก ๋ฐ์ด๋ด๊ธฐ ๋ฐฉ์ ์ฑํ
โ๏ธ ์ค์ ์ ๋ ฌ์ ๊ณ์ฐ๋ ๊ณต๊ฐ ๋ฐฐ๋ถ์ด ํ์
๐ ํ์ ์ค์ ๋ชจ์
โ
์ปค๋ฐ ์ปจ๋ฒค์
๋ฏธ์ค์, ๋ธ๋์น ์ค์, CSS ๊ตฌ์กฐ ์ดํด ๋ถ์กฑ ๋ฑ
๐ง git reset
๋ฐฐ์ฐ๊ณ , var ๋ณ์/์คํ์ผ ๊ตฌ์กฐ ํ์ต
โ๏ธ ํ์
์ ํ๋์ ์ฝ์์ ์ดํฉ์ด๋ผ๋ ๊ฑธ ๋๋
๐งญ Header ๋ธ๋ผ์ฐ์ ๋ฌธ์
โ
Edge์์ ๊ฐ๋ก ์คํฌ๋กค ๋ฐ์
๐ง wrap ์ฒ๋ฆฌ, gap ์กฐ์
โ๏ธ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง์ ๋ํ
์ผ ์ธ์
๐ Footer ์ง๋๊ธฐ ํฌ๊ธฐ ๋ฌธ์
โ
|
๋ฌธ์๊ฐ ์์๋ณด๋ค ์ปค๋ณด์
๐ง ::after
๊ฐ์ ์์๋ก ๋์ฒด
โ๏ธ ๋์์ธ์ "๋๋๊น์ง" ๊ณ ๋ คํด์ผ ํจ
๐ Search ๋ ์ด์์ ๊นจ์ง
โ
width๋ง ์ค์ ํด์ ๊ฐ๊ฒฉ ์์
๐ง padding ์ถ๊ฐ โ ํ์ ์ ์์ผ๋ก wrapper ์ฌ๊ตฌ์ฑ
โ๏ธ ๊ฐ๋
์ฑ ์๋ ์ฝ๋์ ๊ตฌ์กฐํ๋ ๋งํฌ์
์ด ์ค์ํจ์ ๋๋
๋ฐ๋ฏผ์ฑ
๊ธธ์๋ค๋ฉด ๊ธธ์๊ณ ์งง๋ค๋ฉด ์๊ฐ๋ณด๋ค ํจ์ฌ ์งง์์๋ ์ฒซ UIํ๋ก์ ํธ..
์ต์ข ํ์คํ์ ๋จผ์ ๋งํด๋ณด์๋ฉด "์๊ฐ๋ณด๋จ ์ค๋ฌด์ค?ํ๋ ํ๋ก์ ํธ" ๋ผ๊ณ ์ ๋ฆฌํ ์ ์์๊ฒ ๊ฐ๋ค.
๋ฉ์ฌ ๋ถํธ์บ ํ๋ฅผ ํ๋ฉฐ ์ฒ์์ผ๋ก ํ๋ ํํ๋ก์ ํธ์๋ ๋งํผ ํ๊ณ ์กฐ๊ฐ ์๋ ๋ ์๋ก์ด ์ฌ๋๋ค๊ณผ ํ์ ๋งบ์ด ํ์
์ ํ ์๊ฐ์ ์ด์ง ์ค๋ ๋ฉด์๋ ๋จธ๋ฆฌ๊ฐ ์ง๋์ง๋ ๊ฑฐ๋ฆฌ๋ ๋ชจ์?์ ์ธ ๊ธฐ๋ถ์ด ๋ค์๋ค!
์ฌ์ค ๋ ์ ๊ณต์์ถ์ ์๋ค ํ์
๊ฒฝํ์ด ์์์๋ ๋ถ๊ตฌํ๊ณ html,css ๊ธฐ์ด๊ฐ ์ฝํด์ js๋ ๋ค๋ฅธ ํ๋ ์์ํฌ ์์ด ์์ html, css ๋ก๋ง ๊ตฌํํด์ผํ๋ UIํ๋ก์ ํธ์์ ํ์๋ค์๊ฒ ๋ฏผํ๋ฅผ ๋ผ์น์ง ์์๊น ๊ฑฑ์ ์ด ์ ๋ฒ ๋์์๋ค.
ํ์ง๋ง ์ ๋ง ๋คํํ ์ด์ด์ข๊ฒ๋ ๊ธฐ์ด๊ฐ ํผํผํ๊ณ ํ๋ คํ ์คํ์ ํ์ฅ๋๊ณผ ํ์๋ถ๋ค์ ๋ง๋๋์ ์๋ก๊ฐ ์๋ก์๊ฒ ๋ถ์กฑํ ๋ถ๋ถ์ ์ฑ์์ฃผ๋ฉฐ ์ด๋์ด ๋๊ฐ ์ ์์ด์ ์ด ๋ถ๋ถ์ด ์ ๋ง ์ข์์๋ค.
์ผ์ฃผ์ผ์ด ์ด์ง ๋๋ ์๊ฐ๋์ 4๋ช
์ด์ ํจ๊ป ํ์
ํ์ฌ UIํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ ๊ทธ ์ผ๋ จ์ ๋ชจ๋ ์๊ฐ๊ณผ ๊ณผ์ ์์์ ๋งค์ฐ ๋ง์ ์ํ์ฐฉ์ค์ ์๊ฒฌ์ถฉ๋ ๋ฑ์ด ์์์ง๋ง Ai๋ ๊ตฌ๊ธ๋ง์ ๋์๋ฟ๋ง ์๋๋ผ ์์ ์ ๊ฒฝํ์ ํ ๋๋ก ์๋ก๊ฐ ์๋ก๋ฅผ ๋ณด์ํ๋ฉฐ ์ด๋์ด ๋์๊ฐ๊ธฐ์ ์๊ฐ๋ณด๋ค ํ๋ก์ ํธ ์ผ์ ์ด ๋นก๋นกํ์ง๋ ์์๊ณ ์ค๋ฌด์คํ๊ฒ ์์ฑ๊น์ง ๋์๊ฐ ์ ์์๋ค๊ณ ์๊ฐ์ด ๋ ๋ค.
๊ทธ๋ฆฌ๊ณ ๋ ๋ํ ์ด๋ฒ UIํ๋ก์ ํธ๋ฅผ ํ๋ฉฐ ์ ๋ง ๋๋๊ฒ์ด ๋ง์๋๋ฐ react๋ next๊ฐ์ ํ๋ ์์ํฌ์ ๋๋ฌด ์ต์ํด์ง ๋๋จธ์ง html๊ณผ css ๋ฑ ํ๋ก ํธ์๋์ ๊ธฐ์ด๋ผ ํ ์ ์๋ ๋ถ๋ถ์ ๊ฒ์๋ฆฌํ์ฌ ๋ถ์กฑํ๋ ๋์ ๊ธฐ์ด๊ฐ ๋๋ฌด ์ฒด๊ฐ์ด ํ ๋์์๋ค...
ํ์ง๋ง ์ด๋ฒ ํ๋ก์ ํธ๋ฅผํ๋ฉฐ ๋ถ์กฑํ ๋ถ๋ถ์์ ๊ฐ์ฌ๋๊ณผ ํ์๋ถ๋ค์๊ฒ ํผ๋๋ฐฑ๋ ๋ฐ์ผ๋ฉด์ ์ ๋ง๋ก ๊ฐ๋ง์ ์ด์ฌ์ผ๋ก ๋์๊ฐ ๋ค์ํ๋ฒ html์ ๋งํฌ์
๋จ๊ณ๋ถํฐ ์๋ฉํฑํ ๊ตฌ์กฐ๋ ์ ๊ทผ์ฑ ๊ด๋ จ ๋ถ๋ถ๋ถํฐ ์์ฃผ์์ฃผ ๊ณ ๋ฏผํ๋ฉด์ ๋ ๋ค์ ์๊ฐํด๋ณด๊ณ ๊ตฌํํด๋ณด๋ ์๊ฐ์ด ๋์ด์ ์ ๋ง ์ข์๋ค!
๋ด์ผ ์์ ์ต์ข ๋ฐํ๋ ์ ๋ง๋ฌด๋ฆฌ ๋์์ผ๋ฉด ์ข๊ฒ ๊ณ ์งง์ง๋ง์๋ ์ผ์ฃผ์ผ๊ฐ ํจ๊ป ์ข์ถฉ์ฐ๋? ํ์๋ ํ์๋ถ๋ค๊ณผ ํค์ด์ง๋ค๋ ์ ์ ์ข ์์ฝ์ง๋ง ๊ทธ๋๋ ํ๋ก์ ํธ๋ฅผ ๊น๋ํ๊ฒ ์์ฑํ์๊ธฐ์ ํด์ฐํ๋ ๊ฒ์ด๋๊น.. ์๋ฌดํผ ๋ค์ํ๋ฒ ํจ๊ปํด์ค ๋ชจ๋ ํ์๋ถ๋ค๊ป ๋๋ฌด ๊ณ ๋ง์ด๊ฒ ๊ฐ๋ค.
์กฐ์ฅ์
- ์ด๋ฒ ํ๋ก์ ํธ์์ ๋ฆฌ๋ ์ญํ ์ ๋งก๊ฒ ๋ ๊ฒ์, ํ์ ์์ฅ์์ ๋ฌด์ธ๊ฐ๋ฅผ ์ฑ ์์ง๋ ๋ฐ์ ์ต์ํ์ง ์์๋ ์ ์๊ฒ ํฐ ๋ถ๋ด์ผ๋ก ๋ค๊ฐ์์ต๋๋ค. ํ์ง๋ง ์ธ์ ๊ฐ๋ ๊ผญ ๋งก๊ฒ ๋ ์ญํ ์ด๋ผ๊ณ ์๊ฐํ๊ณ , ์ด์ ํ๊ฒ ๋ ์ด์ ์ ๋๋ก ํด๋ณด์๋ ๋ง์๊ฐ์ง์ผ๋ก ํ๋ก์ ํธ๊ฐ ์ํํ ์งํ๋ ์ ์๋๋ก ๋ง์ ๋ถ๋ถ์ ์ ๊ฒฝ ์ฐ๋ฉฐ ์ํ์ต๋๋ค. ๋ฌด์๋ณด๋ค๋ ์ ์ ๋ถ์กฑํ ์ ์ ์ดํดํด์ฃผ๊ณ ์ ๊ทน์ ์ผ๋ก ๋์์ค ํ๋ฅญํ ํ์๋ค ๋๋ถ์ ํ๋ก์ ํธ๋ฅผ ๋งค๋๋ฝ๊ฒ ๋ง๋ฌด๋ฆฌํ ์ ์์๋ค๊ณ ์๊ฐํฉ๋๋ค.์ด๋ฒ ํ๋ก์ ํธ ๊ฒฝํ์ ํตํด Git๊ณผ GitHub๋ฅผ ํ์ฉํ ํ์ ๋ฐฉ์์ ๋ํด ์ตํ ์ ์์๋ ๊ฒ๋ ํฐ ์ํ์ด์์ง๋ง, ๊ทธ๋ณด๋ค ๋ ํฌ๊ฒ ๋๊ปด์ก๋ ์ ์ โ์๋ฒฝํ ํโ์ ๋ง๋๋ ๋ฐ ์์ด ๊ฐ์ฅ ์ค์ํ ๊ฒ์ ๊ฐ์ ๋งก์ ์ญํ ์ ์ต์ ์ ๋คํ๋ ๊ฒ์ด๋ผ๋ ์ฌ์ค์ด์์ต๋๋ค.
๋ถ์กฑํ ๋ฆฌ๋๋ฅผ ๋ฏฟ๊ณ ์ ๋ฐ๋ผ์ ์ค ํ์๋ค์๊ฒ ๋ค์ ํ ๋ฒ ์ง์ฌ์ผ๋ก ๊ฐ์ฌ์ ๋ง์์ ์ ํฉ๋๋ค.
์ฅํจ์
- HTML๊ณผ CSS๋ฅผ ์ฒ์ ๋ฐฐ์ด ๊ฒ ์๊ทธ์ ๊ฐ์๋ฐ, ๋ฒ์จ UI ํ๋ก์ ํธ์ ๋ง์ง๋ง์ ์ค๋นํ๊ณ ์๋ค๋ ๊ฒ ๋ฏฟ๊ธฐ์ง ์์ ๋งํผ ์๊ฐ์ ๋น ๋ฅด๊ฒ ์ง๋๊ฐ์ต๋๋ค.์์ ์๊ฐ ์ค์ต๋ ๊ฒจ์ฐ ๋ฐ๋ผ๊ฐ๋ ์ ์๊ฒ ์ด๋ฒ ํ๋ก์ ํธ๋ ์ฌ์ค ๋ถ๋ด์ผ๋ก ๋ค๊ฐ์์ต๋๋ค.
ํ์ง๋ง ์ข์ ํ์๋ค์ ๋ง๋, ๊ธฐ๋ฅ์ ํ๋ํ๋ ๊ตฌํํด๊ฐ๋ฉฐ ์ฐจ๊ทผ์ฐจ๊ทผ ๋จ๊ณ๋ฅผ ๋ฐ๋ค ๋ณด๋
์ด๋์ ํ์ ์ผ์์ผ๋ก์ ๋งก์ ๋ฐ๋ฅผ ๋คํ๊ณ , ๋ฐํ๊น์ง ์ฑ ์์ง๋ ์ ๋ชจ์ต์ ๋ฐ๊ฒฌํ ์ ์์์ต๋๋ค.
์ฌ์ค ์ ๋ ๋ฐํ๋ผ๋ ๊ฑธ ์ธ์์์ ์ ์ผ ์ด๋ ค์ํ๋ ์ฌ๋์ด์๊ณ ,
ํนํ ์ ์์ง ๋ชปํ๋ ๋ถ์ผ๋ฅผ ๋ค๋ฅธ ์ฌ๋๋ค ์์์ ์ค๋ช ํด์ผ ํ๋ค๋ ๊ฑด ํฐ ๋์ ์ด์์ต๋๋ค.
ํ์ง๋ง ์ธ์ ๊ฐ๋ ๊ผญ ๋์ด์ผ ํ ์ฐ์ด๋ผ๊ณ ์๊ฐํ๊ณ ,
๋ฌด์๋ณด๋ค ํ์๋ค์ ์์๊ณผ ๋ฏฟ์์ด ์์๊ธฐ์ ์ด ๊ณผ์ ์ ๋ฌด์ฌํ ํค์ณ์ฌ ์ ์์์ต๋๋ค. ๋ฌผ๋ก ์์ง ๋ง์ด ๋ถ์กฑํ์ง๋ง, ์ด๋ฒ ํ๋ก์ ํธ๋ฅผ ํตํด ํ์ ์ ๊ณผ์ ์ ์ง์ ๊ฒฝํํ๊ณ ์์ ์ํ์ฐฉ์ค ์์์ ์ฑ์ฅํ๋ ์ฆ๊ฑฐ์์ ๋ฐฐ์ธ ์ ์์๋ ์์คํ ์๊ฐ์ด์๋ค๊ณ ์๊ฐํฉ๋๋ค.
์์ผ๋ก๋ ์ด๋ฐ ๊ฒฝํ๋ค์ ๋ฐํ ์ผ์, ํ๊ณผ ํจ๊ป ์ฑ์ฅํ ์ ์๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก ๋์๊ฐ๊ณ ์ถ์ต๋๋ค.