1๏ธโฃ 1์ฐจ JS ํ๋ก์ ํธ
2๏ธโฃ 2์ฐจ TS ํ๋ก์ ํธ
3๏ธโฃ 3์ฐจ React ํ๋ก์ ํธ ํ์ : ์ํ์ฑ, ์ค๋์, ์ ์์ด
๊ฐ๋ฐ๊ธฐ๊ฐ: 2023.11.10
๐ผ GitHub URL: FESP01-TodoApp-Project10
๐จ ๋์์ธ ์์ : Figma ์์/UI
- 1์ผ ๋์ ๋ฆฌ์กํธ๋ก ํฌ๋๋ฆฌ์คํธ๋ฅผ ๋ฆฌํฉํ ๋งํ์!
- ํ์ดํ๋ก๊ทธ๋๋ฐ์ผ๋ก ์งํ์ ํ๋ฉด์ ํ์ด ํ๋ก๊ทธ๋๋ฐ ๊ฒฝํ์ ๊ธฐ๋ฅด์!
-
๊ธฐ์กด TypeScript ์์ ์์ React๋ฅผ ๋ฐ์ํ React + TypeScript ์์ ์ผ๋ก ๋ฆฌํฉํ ๋งํ๋ ํ๋ก์ ํธ์ ๋๋ค.
-
ํ๋ก์ ํธ ๊ตฌ์ฑ์
CRA
ํ๋ก์ ํธ ์์ฑ์ ํตํด TypeScript๋ฅผ ์ ์ฉํ์์ต๋๋ค. (๊ธฐ๋ณธ ํจํค์ง ์ฌ์ฉ) -
Styled Components
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ด์ฉํ์ฌ ์ฌ์ฉ์ UI ๋์์ธ์ ๋ณ๊ฒฝํ์์ต๋๋ค. -
react-router-dom์ ๋ด์ฅ๋์ด ์๋
BrowserRouter
์ปดํฌ๋ํธ๋ฅผ ํตํด ๋ผ์ฐํฐ ๊ธฐ๋ฅ์ ๊ตฌํํ์์ต๋๋ค. -
Axios
ํตํ ๋ฐ์ดํฐ CRUD ์์ ์ ์งํํ์์ต๋๋ค. -
Prettier
์ค์ ์ ํตํด ํฌ๋งทํ ์ ์ง์ํ์์ต๋๋ค.
์ค๋์, ์ ์์ด
: ๋ฉ์ธํ์ด์ง ๋ฆฌํฉํ ๋ง ์ฃผ์์์ํ์ฑ
: ๋ฑ๋กํ์ด์ง ๋ฆฌํฉํ ๋ง ์ฃผ์์
- 2์ธ 1์กฐ ํ์ดํ๋ก๊ทธ๋๋ฐ ๋ณํ
- A๋๋ผ์ด๋ฒ, B ๋ค๋น๊ฒ์ดํฐ์ C ๋๋ผ์ด๋ฒ๋ก ๊ตฌ์ฑ
- ํ๋ก์ ํธ ๋ฃจํธ์์ ์คํ
$ cd 03.react
$ npm start
- ์ถ๋ ฅ๋ ์ ์ ์ ๋ณด ํ์ธํด์ ๊ฐ๋ฐ ์๋ฒ ์ ์
- ๊ธฐ๋ณธ ํฌํธ๋ 5173์ผ๋ก ๊ตฌ๋๋๊ณ ํด๋น ํฌํธ๊ฐ ์ฌ์ฉ์ค์ผ ๊ฒฝ์ฐ ๋ฒํธ๊ฐ ํ๋์ฉ ์ฆ๊ฐ
- http://localhost:5173/
- HMR (Hot Module Replacement) ์ง์๋จ
- ํ๋ก์ ํธ ๋ฃจํธ์์ ์คํ
$ cd 02.javascript/api
$ npm i
$ npm start
- api ์๋ฒ ์ฌ์ฉ๋ฐฉ๋ฒ: http://localhost:33088/apidocs
๋ฉ์ธ ํ์ด์ง | ๋ฑ๋ก ํ์ด์ง |
---|---|
![]() |
![]() |
- todolist ์กฐํ
- todolist ์๋ฃ/๋ฏธ์๋ฃ ์ฒดํฌ
- todolist ์์
- todolist ์ญ์
- todolist ์ ์ฒด์ญ์
- todolist ์์ฑ
๐ฆsrc
โฃ ๐API
โ โ ๐axios.ts
โฃ ๐component
โ โฃ ๐common
โ โ โฃ ๐Footer.tsx
โ โ โ ๐Header.tsx
โ โ ๐updatePage
โ โ โ ๐TodoUpdate.tsx
โฃ ๐pages
โ โฃ ๐errorPage
โ โ โ ๐Error404.tsx
โ โฃ ๐mainPage
โ โ โ ๐TodoListMain.tsx
โ โฃ ๐registPage
โ โ โฃ ๐TodoRegist.tsx
โ โ โ ๐TodoRegistSettings.ts
โ โฃ ๐RootLayout.tsx
โ โ ๐Router.tsx
โฃ ๐App.tsx
โฃ ๐index.tsx
โฃ ๐react-app-env.d.ts
โฃ ๐reportWebVitals.ts
โฃ ๐setupTests.ts
โ ๐todoapp.d.ts