๐ซ์ ๋น์ ์ ๋ฐ์ดํฐ ๊ตฌ์กฐํ์ ์ํด๋ฌ์ ๊ทธ๋ฆฌ๊ณ ์ด๋ป๊ฒ ํ๋ฉด ๊ฒฐ๊ตญ ๋ ๋์์ง ์ ์์๊น ๐ช
Source: Dev.to
1. UIโฏ๊ด์ ์ผ๋ก ์ฌ๊ณ ํ๊ณ ๋๋ฉ์ธโฏ๊ด์ ์ ๋ฌด์ํ๋ค
๋๋ถ๋ถ์ ๊ฐ๋ฐ์๋ ์ค์ ๋น์ฆ๋์ค ๋ก์ง๋ณด๋ค Figma ํ๋ฉด์ด๋ ๊ฐ๋จํ ํ์ดํธ๋ณด๋ ์ค์ผ์น์์ ์์ํ๋ค.
๊ทธ๋ค์ ์ด๋ ๊ฒ ๋ฌป๋๋ค:
โ์ด ์๋ต์ ํ์ํ JSON์ ๋ญ์ง?โ
๋์ ์ ์ด๋ ๊ฒ ๋ฌผ์ด์ผ ํ๋ค:
โ๊ธฐ๋ณธ ๋๋ฉ์ธ์ ์ค์ ๋ก ์ด๋ป๊ฒ ์๊ฒผ์๊น?โ
๊ทธ๋์ API๊ฐ UI์ ๋ฐ์์ด ๋๊ณ , ๋น์ฆ๋์ค์ ๋ฐ์์ด ์๋๋ค.
ํ ์ด๋ธ, ๋ชจ๋ธ, ๋ผ์ฐํธ๊ฐ ๋ค์๊ณผ ๊ฐ์ด ๋์๊ฐ ๋๋ค:
subtitleisCollapseddisplayOrderobject.with.20.levels.of.depth
์ด๊ฑด ๋ฐ์ดํฐ ๋ชจ๋ธ๋ง์ด ์๋๋ค. ์ปดํฌ๋ํธ ํธ๋ฆฌ๋ฅผ ์ง๋ ฌํํ๊ณ ์๋ ๊ฒ์ด๋ค.
2. โ์ฝ๊ฒโ ๋ผ๋ ์ด์ ๋ก ๋ฌด๊ดํ ๊ฐ๋ ์ ํฉ์น๋ค
๋ค์ ์๋ ์ต์ํ ๊ฒ์ด๋ค:
{
"user": { /* ... */ },
"orders": [ /* ... */ ],
"permissions": [ /* ... */ ],
"stats": { /* ... */ }
}
์ถํํ๋ค. Blob APIโJSON ์ค๋ฌด๋๋ฅผ ๋ง๋ค์๋ค. ํ ํ๋ฉด์์๋ ๋์ํ์ง๋ง, ๋ค๋ฅธ ๊ณณ์์๋ ์ฃฝ๋๋ค.
3. ์์ ์ ์ธ ๊ตฌ์กฐ์ ๋ถ์์ ํ ๊ตฌ์กฐ๋ฅผ ๊ตฌ๋ถํ์ง ์๋๋ค
UI๋ ๋งค์ฃผ ๋ฐ๋๋ค. ๋น์ฆ๋์ค ๊ท์น์ ๋งค๋ ๋ฐ๋๋ค.
๋ง์ฝ ๋๊ตฐ๊ฐ๊ฐ Figma์์ ์นด๋๋ฅผ ์ฎ๊ธฐ๊ฑฐ๋ ๊ณ ๊ฐ์ด โ์์ ๋ณ๊ฒฝโ์ ์์ฒญํ ๋๋ง๋ค API๊ฐ ๊นจ์ง๋ค๋ฉด, ๋น์ ์ API๋ฅผ ๋ง๋ ๊ฒ์ด ์๋๋ค. UI ์ ์ก ๋ ์ด์ด๋ฅผ ๋ง๋ ๊ฒ์ด๋ค.
์ข์ ๋ฐ์ดํฐ ๋ชจ๋ธ์ ๋ค์์ ๊ฒฌ๋์ผ ํ๋ค:
- ๋์์ธ ์ฌ๊ตฌ์ฑ
- ๋ชจ๋ฐ์ผ ์ฑ
- ํํธ๋ ์ฐ๋
- ๋ถ์
- AI
- ์๋ก์ด ๊ธฐ๋ฅ
- ์๋ก์ด ์์ฅ
์ด๊ฒ๋ค์ ๊ฒฌ๋์ง ๋ชปํ๋ค๋ฉด, ์ง์ง ๋ฐ์ดํฐ ๋ชจ๋ธ์ด ์๋์๋ค.
4. ์ฌ๋ฌ ์์ฒญ์ ๋ง๋๋ ๊ฒ์ด ๋๋ ค์ ๊ณผ๋ํ๊ฒ ์ง๊ณํ๋ค
์ผ๋ถ ๊ฐ๋ฐ์๋ ์ด๋ ๊ฒ ๋ฏฟ๋๋ค:
โ์ ์ฒด ํ์ด์ง๋ฅผ ์ํด ํ๋์ ์๋ํฌ์ธํธ๊ฐ ํ์ํด.โ
์๋์ผ, ํ์ ์์ด.
์ฌ๋ฌ ๋น๋๊ธฐ ํธ์ถ์ ํ๋ ๊ฒ์ด:
- ๋ ๊น๋ํ๊ณ
- ์์ธก ๊ฐ๋ฅํ๋ฉฐ
- ์บ์ํ๊ธฐ ์ฝ๊ณ
- ๋ฌดํจํํ๊ธฐ ์ฌ์ฐ๋ฉฐ
- ํจ์ฌ ์ ์ฐํ๋ค
์ง๊ณ๋ ๋๊ตฌ์ผ ๋ฟ, ๊ธฐ๋ณธ๊ฐ์ด ์๋๋ค.
5. ์ํฐํฐ์ ํ๋ก์ ์ ์ ๊ตฌ๋ถํ์ง ๋ชปํ๋ค
์ํฐํฐ = ๋น์ฆ๋์ค์ ์ง์ค
ํ๋ก์ ์
= ํน์ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ์ํ ์ฌ๊ตฌ์ฑ๋ ํธ๋ฆฌํ ๋ฐ์ดํฐ
์ด ๋์ ์์ผ๋ฉด ๋ค์๊ณผ ๊ฐ์ ๋ฌธ์ ๊ฐ ์๊ธด๋ค:
- UI ํ๋๊ฐ ์์์ฑ์ ์์ด ๋๊ฐ
- ๋๋ฉ์ธ ๊ท์น์ด ์ปดํฌ๋ํธ ์์ ์ฝ๋ฉ๋จ
- ๋์์ธ์ด ๋ฐ๋ ๋๋ง๋ค API๊ฐ ๊นจ์ง
- ๋ชจ๋ธ์ ์๋ฌด๋ ์ดํดํ์ง ๋ชปํจ
์ข์ ๊ฐ๋ฐ์๋ ์ด ๋ ์ธ๊ณ๋ฅผ ๋ถ๋ฆฌํ๋ค. ๋ฐ์ด๋ ๊ฐ๋ฐ์๋ ํ๋ก์ ์ ๊ฒฝ๊ณ๋ฅผ ๋ฌธ์ํํ๋ค.
6. ์ด๋ ค์ด ์ง๋ฌธ์ ํ์ง ์๋๋ค
์ต๊ณ ์ ๋ฐ์ดํฐ ์ํคํ ํธ๋ ๋ค์์ ๋ฌป๋๋ค:
- ์ง์ค์ ์ถ์ฒ๋ ์ด๋์ธ๊ฐ?
- ์ค์ ๋ก ์กด์ฌํ๋ ์ํฐํฐ๋ ๋ฌด์์ธ๊ฐ?
- ์ ๋ ๊นจ์ ธ์๋ ์ ๋๋ ๋ถ๋ณ์์?
- ๋ชจ๋ฐ์ผ ์ฑ์ด ์ด๊ฒ์ ์ฌ์ฉํ ๊น?
- UI๊ฐ ์์ ํ ๋ฐ๋๋ค๋ฉด ์ด๋ป๊ฒ ๋ ๊น?
์ด ์ง๋ฌธ๋ค์ ํ์ง ์์ผ๋ฉด ๋ชจ๋ธ๋ง์ด ์๋๋ผ ์ค์ผ์น์ ๋ถ๊ณผํ๋ค.
๐ฅ ๊ทธ๋ผโฆ ์ด๋ป๊ฒ ํ๋ฉด ๋์์ง๊น?
โ๏ธ 1. API๋ณด๋ค ๋๋ฉ์ธ์ ๋จผ์ ๋ชจ๋ธ๋งํ๋ค
ํ์ดํธ๋ณด๋์ ๋น์ฆ๋์ค๋ฅผ ๋ฐ์ค๋ก ์ค๋ช ํ์ง ๋ชปํ๋ค๋ฉด โ ์๋ํฌ์ธํธ๋ฅผ ๋ง๋ค์ง ๋ง๋ผ.
โ๏ธ 2. ์ํฐํฐ๋ฅผ ์์ํ๊ฒ ์ ์งํ๋ค
UI ํ๋, ๋ ์ด์์ ์ ๋ณด, Figmaโ๊ธฐ๋ฐ ๋ช
๋ช
์ ๊ธ์ง.
๋ฐ์ดํฐ๋ฒ ์ด์ค ํ
์ด๋ธ์ด React ์ปดํฌ๋ํธ์ฒ๋ผ ๋ณด์ธ๋ค๋ฉด, ๋ชจ๋ ์์
์ ๋ฉ์ถ๊ณ ๋ฆฌํฉํฐ๋งํ๋ผ.
UI๋ฅผ ๊ทธ๋๋ก ๋ฐ์ํ๋ค๋ ์ด์ ๋ก ๋ฌธ์ํ DB๋ฅผ ์ ํํ๋ค๋ฉด ์ค์ค๋ก์๊ฒ ๋ฌผ์ด๋ผ:
โUI๊ฐ ์ ํ ์์๋ค๋ฉด ์ด๋ป๊ฒ ๋ ๊น?โ
โ๏ธ 3. ๋ ๋ง์ ์ธ๋ถํ๋ ์๋ํฌ์ธํธ๋ฅผ ์ ํธํ๋ค
ํ๋ก ํธ์๋ ํ๋ ์์ํฌ๋ ์กฐํฉ์ ์ํด ๋ง๋ค์ด์ก๋ค. ์ด๋ฅผ ํ์ฉํ๋ผ. UI๊ฐ ๋ฐ์ดํฐ๋ฅผ ์กฐํฉํ๊ฒ ํ๊ณ , ๋ฐ์ดํฐ๊ฐ UI๋ฅผ ์ง๋ฐฐํ์ง ์๊ฒ ํ๋ผ.
โ๏ธ 4. ํ๋ก์ ์ ์ ์ ์ ํด์ ์ฌ์ฉํ๊ณ , ์ด๋ฆ์ ๋ช ํํ ํ๋ผ
/ordersโ ์ํฐํฐ/orders/overviewโ ํ๋ก์ ์ /dashboardโ ํ๋ก์ ์ /users/:id/profile-viewโ ํ๋ก์ ์
์ข์ ๋ค์ด๋ฐ๋ง์ผ๋ก๋ ํผ๋์ 80โฏ%๋ฅผ ์์จ ์ ์๋ค.
โ๏ธ 5. ์ฌ๋ฌ ํ๋ก ํธ์๋๋ฅผ ๊ณ ๋ คํด ์ค๊ณํ๋ค
์ค์ค๋ก์๊ฒ ๋ฌผ์ด๋ผ:
- ๋ชจ๋ฐ์ผ ์ฑ์ ๋ง๋ ๋ค๋ฉด ์ด ๊ตฌ์กฐ๊ฐ ์ฌ์ ํ ํ๋นํ ๊น?
- ํํธ๋๊ฐ API๋ฅผ ์๋นํ๋ค๋ฉด?
- ๋ถ์ ํ์ดํ๋ผ์ธ์ ๋ฃ๋๋ค๋ฉด?
- ๋ด์ผ React๋ฅผ ๊ต์ฒดํ๋ค๋ฉด?
๋ต์ด ์๋์ค๋ผ๋ฉด, ์ฒ์๋ถํฐ ๋ค์ ์์ํ๋ผ.
โ๏ธ 6. ๊ด๊ณ์ ์ ์ฝ์กฐ๊ฑด์ ์๊ฐํ๋ค
์ง์ง ๋ฐ์ดํฐ ๋ชจ๋ธ์ โ์์ ๋ญ๊ฐ๊ฐ ๋ค์ด์๋ ๊ฐ์ฒดโ๊ฐ ์๋๋ค. ๊ทธ๊ฒ์:
- ์ํฐํฐ
- ๋ ํผ๋ฐ์ค
- ๋ถ๋ณ์
- ์ ์ฝ์กฐ๊ฑด
- ํ์๋ผ์ธ
- ์ํ ๋จธ์
์ฌ๊ธฐ์ ๊ฐ๋ฐ์๋ ๊ฑด์ถ๊ฐ๊ฐ ๋๋ค.
โ๏ธ 7. ๋จ์ํจ์ด ์ต๊ณ
์ฌ๋ฌ ๊ฐ์ ์๊ณ ์๋ฏธ ์๋ ์ํฐํฐ๊ฐ ๊ฑฐ๋ํ โ์ ๊ฐ์ฒดโ ํ๋๋ณด๋ค ์ ์ง๋ณด์๊ฐ ์ฝ๋ค.
โ๏ธ 8. ๊น์ ์ค์ฒฉ์ ํผํ๊ณ ํํํ ๊ตฌ์กฐ๋ฅผ ์ ํธํ๋ค
API๋ ํํํ๊ณ ์ ๊ทํ๋ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํด์ผ ํ๋ค. ๊ทธ๋ฃนํยทํํฐ๋งยท์ค์ฒฉยท์ง๊ณ๋ UI๊ฐ ๋ด๋นํ๋ค. ํํํ ๋ฐ์ดํฐ = ์์ธก ๊ฐ๋ฅํ ๋ฐ์ดํฐ.
โ๏ธ 9. ์ฌ๋ฐ๋ฅธ ์ด๋ฆ์ ์ฌ์ฉํ๊ณ ์ผ๊ด์ฑ์ ์ ์งํ๋ค
๋ช
ํํ ๋ค์ด๋ฐ์ ์๋ช
์ ๊ตฌํ๋ค. UserGroupsResponse๋ ์ฆ์ ์ดํด๋๋ค. ์ด๋ฆ ๋๋ฌธ์ ์ฌ๋๋ค์ด ์ถ์ธกํด์ผ ํ๋ค๋ฉด โ ์๋ชป๋ ๊ฒ์ด๋ค.
โ๏ธ 10. ๋ณํ๋ฅผ ์์ํ๋ค
๋ชจ๋ธ์ ์ฑ์ฅํ๊ณ , ์งํํ๊ณ , ๋ณต์กํด์ง๋ค. ์ ์ฐ์ฑ์ ์ผ๋์ ๋๊ณ ์ค๊ณํ๋ผ. ๋ฏธ๋์ ๋น์ ์ด ๊ณ ๋ง์ํ ๊ฒ์ด๋ค.
๐ฏ ์ต์ข ๋ฉ์์ง
๋น์ ์ด ๋ฐ์ดํฐ๋ฅผ ๊ตฌ์กฐํํ๋ ๋ฐ ์ํฌ๋ฅธ ์ด์ ๋ ์ค๋ ฅ์ด ๋ถ์กฑํด์๊ฐ ์๋๋ค. ์๋ฌด๋ ์คํฌ๋ฆฐ์ ๋์ด ์๊ฐํ๋๋ก ๊ฐ๋ฅด์ณ ์ฃผ์ง ์์๊ธฐ ๋๋ฌธ์ด๋ค.
๋ค์๋ง ๊ตฌ๋ถํ๋ฉด ๋ชจ๋ ๊ฒ์ด ์ฌ์์ง๋ค:
- ๋๋ฉ์ธ vs. ํ๋ก์ ์
- ์ํฐํฐ vs. ๋ ์ด์์
- ์ง์ค vs. ํธ์
โฆ์คํฌ๋ฆฐ์ ๋งค์ฃผ ๋ฐ๋๋ค. ์ข์ ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ ์์ญ ๋ ๋์ ์ง์๋๋ค.