- TypeScript
- node (v16.14.0)
- React (v18.2.0)
- NEXT.js (v13.1.6)
- Emotion
- ESLint
- Prettier
- yarn
- Vercel
- GitHub Action
- API
- Desktop
- Mobile
- Figma ๋ฐ๋ก๊ฐ๊ธฐ
Figma
- ๋์์ด๋๊ฐ ์์ด ์์ํ๋ค๋ฉด ์ง์ง ์ฌ์ฉํ ์์์ ์ฃผ์์์ ๋ช ๊ฐ์ง๋ง ์ ํด๋๊ณ ์์ํด์ผ ๋์์ธ์ ํฐ ํ์ ์ก๋๋ฐ ์๊ฐ์ด ์งง๊ฒ ๊ฑธ๋ฆฌ๊ณ ๊ทธ ๋ค์์ ์์ ํ๊ธฐ ์์ํ๊ฒ๊ฐ๋ค.
Figma
- ๋ ํผ๋ฐ์ค๋ ํฐ ์ญํ ์ ํ๋๊ฒ๊ฐ๋ค. ๋ง์ด ์ฐพ์๋ณด๊ณ ๋ฏ์ด๋ณด์.
NEXT.js
- app ๋๋ ํ ๋ฆฌ๋ฅผ ์ ์ธํ ๋ค๋ฅธ ์ปดํฌ๋ํธ ๋ฐ ํ์ด์ง๋ค์ ์ฝ๋ ์๋จ์ 'use client'๋ฅผ ์ถ๊ฐํด์ฃผ์ด์ผํ๋ค.
- app ๋๋ ํ ๋ฆฌ์ ์ดํ์ loading๊ณผ error์ฝ๋๋ ์ถ๊ฐํด ๋ณด์์ผ๊ฒ ๋ค. ๋ก๋ฉ์์ ์๋์ผ๋ก ์ฌ์ฉ๋๋ค๋ ๊ต์ฅํ ๊ธฐ๋๋๋ค. ์ค์ผ๋ ํค? ๊ทธ๊ฒ๋ ๊ตฌํํ ์ ์์๊น? ์ฝ๊ฒ ๊ตฌํํ ์ ์๋ค๋ฉด ๊ต์ฅํ ๋ฉ์์๊ฒ๊ฐ๋ค.
ํน๊ฐRemix ์ต๊ณ
- ๋ฐ๋ณต๋๋ ์ฝ๋๋ ํ๋๋ก ๋ฌถ์ด๋ผ... ๊ฐ๊ฐ ๋ฆฌํฉํฐ๋ง ๋งํด ํ์ธ๋ฌ ๊ทผ๋ฐ TS ์๋ฌ์ธ๊ฒ๊ฐ์๋ฐ ์๊พธ HeaderNav.tsx์์ ๋นจ๊ฐ์ค์ด ๋์จ๋ค ์๊ทธ๋ด๊น. ์ด์ ๋ฅผ ๋ชป์ฐพ์๋ค.