Language | Library |
---|
๋ก๊ทธ์ธ, ํ์๊ฐ์ ์ ๋ณ๋์ ๊ฒฝ๋ก๋ก ๋ถ๋ฆฌํด๋ ๋ฌด๋ฐฉํฉ๋๋ค
- loginmodal ์ปดํฌ๋ํธ๋ฅผ ์ฌํ์ฉํ์ฌ signup๋ฒํผ ํด๋ฆญ์์ signup ๊ธฐ๋ฅ์, login ๋ฒํผ์ ํด๋ฆญ์ login ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๊ฒ ๊ตฌํ.
์ต์ํ ์ด๋ฉ์ผ, ๋น๋ฐ๋ฒํธ input, ์ ์ถ button์ ๊ฐ๋๋ก ๊ตฌ์ฑํด์ฃผ์ธ์
- ์ด๋ฉ์ผ, ๋น๋ฐ๋ฒํธ input ๋ฐ ์ ์ถ button ๊ตฌํ.
- ์ด๋ฉ์ผ๊ณผ ๋น๋ฐ๋ฒํธ์ ์ ํจ์ฑ์ ํ์ธํฉ๋๋ค
์ด๋ฉ์ผ ์กฐ๊ฑด : ์ต์ @, . ํฌํจ ๋น๋ฐ๋ฒํธ ์กฐ๊ฑด : 8์ ์ด์ ์ ๋ ฅ ์ด๋ฉ์ผ๊ณผ ๋น๋ฐ๋ฒํธ๊ฐ ๋ชจ๋ ์ ๋ ฅ๋์ด ์๊ณ , ์กฐ๊ฑด์ ๋ง์กฑํด์ผ ์ ์ถ ๋ฒํผ์ด ํ์ฑํ ๋๋๋ก ํด์ฃผ์ธ์
- includes method๋ฅผ ํ์ฉํ์ฌ ์ด๋ฉ์ผ '@', '.' ๋ฐ ๋น๋ฐ๋ฒํธ 8์์ด์์ ๋ฒํผ ํ์ฑํ ๋๋๋ก ์ ํจ์ฑ ๊ฒ์ฌ ๊ตฌํ.
๋ก๊ทธ์ธ API๋ฅผ ํธ์ถํ๊ณ , ์ฌ๋ฐ๋ฅธ ์๋ต์ ๋ฐ์์ ๋ ๋ฃจํธ ๊ฒฝ๋ก๋ก ์ด๋์์ผ์ฃผ์ธ์
- email, password post ํ ์๋ต ์ฑ๊ณต์ navigate๋ฅผ ํ์ฉํ์ฌ ๋ฃจํธ ๊ฒฝ๋ก๋ก ์ด๋ ๊ตฌํ.
์๋ต์ผ๋ก ๋ฐ์ ํ ํฐ์ ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ์ ์ฅํด์ฃผ์ธ์
- ์๋ต ์ฑ๊ณต์ ๋ฐ์ ํ ํฐ ๋ก์ปฌ ์คํ ๋ฆฌ์ง์ ์ ์ฅ ๊ตฌํ.
๋ค์ ๋ฒ์ ๋ก๊ทธ์ธ ์ ํ ํฐ์ด ์กด์ฌํ๋ค๋ฉด ๋ฃจํธ ๊ฒฝ๋ก๋ก ๋ฆฌ๋ค์ด๋ ํธ ์์ผ์ฃผ์ธ์
- ํ ํฐ์ด ๋ก์ปฌ์คํ ๋ฆฌ์ง์ ์๋ ์ํ์์ ๋ก๊ทธ์ธ๋ฒํผ ํด๋ฆญ์ ์กฐ๊ฑด๋ฌธ ํ์ฉํ์ฌ ํ ํฐ์ด ์์ ๊ฒฝ์ฐ์ ๋ก๊ทธ์ธํ๋ฉด์ด ์๋ ๋ฃจํธ๊ฒฝ๋ก๋ก ์ด๋ํ๊ฒ๋ ๊ตฌํ.
์ด๋ค ๊ฒฝ์ฐ๋ ํ ํฐ์ด ์ ํจํ์ง ์๋ค๋ฉด ์ฌ์ฉ์์๊ฒ ์๋ฆฌ๊ณ ๋ก๊ทธ์ธ ํ์ด์ง๋ก ๋ฆฌ๋ค์ด๋ ํธ ์์ผ์ฃผ์ธ์
- settimeout ํจ์๋ฅผ ํ์ฉํ์ฌ mainํ์ด์ง์์ ํ ํฐ์ด ์๋๊ฒฝ์ฐ์ alert ๋ฉ์ธ์ง์ ํจ๊ป ๋ก๊ทธ์ธํ์ด์ง๋ก ์ด๋ํ๊ฒ๋ ๊ตฌํ.
๋ชฉ๋ก / ์์ธ ์์ญ์ผ๋ก ๋๋์ด ๊ตฌํํด์ฃผ์ธ์
- ๋ชฉ๋ก๊ณผ ์์ธํ์ด์ง๋ฅผ main๊ณผ detail๋ก ๋๋์ด ๊ตฌํ ์๋ฃ.
Todo ๋ชฉ๋ก์ ๋ณผ ์ ์์ต๋๋ค.
- list ์ปดํฌ๋ํธ์ axios get ํต์ ์ผ๋ก ๋ฐ์์จ data์ title์ map method๋ฅผ ํ์ฉํ์ฌ ๊ตฌํ์๋ฃ.
Todo ์ถ๊ฐ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ํ ์ผ์ด ์ถ๊ฐ ๋ฉ๋๋ค.
- add ๋ฒํผ ํด๋ฆญ์ add input value ๊ฐ์ axios. create๋ก ํต์ ํ์ฌ ์ถ๊ฐ.
Todo ์์ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ์์ ๋ชจ๋๋ฅผ ํ์ฑํํ๊ณ , ์์ ๋ด์ฉ์ ์ ์ถํ๊ฑฐ๋ ์ทจ์ํ ์ ์์ต๋๋ค.
- ์์ ๋ฒํผ ํด๋ฆญ์ detail ํ์ด์ง label์ด input์ผ๋ก ๋ณํ๋๋ฉฐ ์์ ๋ชจ๋๋ก ์ ํ. ์ทจ์์ ๋ค์ label๋ก ๋ณํ๋๊ฒ ๊ตฌํ์๋ฃ.
Todo ์ญ์ ๋ฒํผ์ ํด๋ฆญํ๋ฉด ํด๋น Todo๋ฅผ ์ญ์ ํ ์ ์์ต๋๋ค.
- ๋ฆฌ์คํธ์ x๋ฒํผ ํด๋ฆญ์ axios.delete๋ก ํด๋น ์์ด๋์ ํด๋น ํ๋ ๊ฐ ์ญ์ ํ ์ ์๊ฒ๋ ๊ตฌํ.
- ์ฒ์์๋ detail ํ์ด์ง๋ฅผ ์์ ๋ค๋ฅธ ํ์ด์ง๋ก ๊ตฌํํ์์์ผ๋ List์ detail์ด ๊ฐ์ด ๋ณด์ผ์ ์๊ฒ detail์ ์กฐ๊ฑด๋ถ ๋ ๋๋งํ์ฌ List์ detail์ ํ๋ฒ์ ๋ณด์ผ ์ ์๊ฒํจ.
์๋ก๊ณ ์นจ์ ํ์ ๋ ํ์ฌ ์ํ๊ฐ ์ ์ง๋์ด์ผ ํฉ๋๋ค.
- ํด๋ผ์ด์ธํธ ๋ฐ์ดํฐ๊ฐ ์๋ ์๋ฒ์์ axios ํต์ ์ผ๋ก ๋ฐ์์จ ๋ฐ์ดํฐ๋ฅผ state์ ๋ด์์ผ๋ฏ๋ก ์๋ก๊ณ ์นจ ์์๋ ํ์ฌ ์ํ ์ ์ง.
๊ฐ๋ณ Todo๋ฅผ ์กฐํ ์์์ ๋ฐ๋ผ ํ์ด์ง ๋ค๋ก๊ฐ๊ธฐ๋ฅผ ํตํ์ฌ ์กฐํํ ์ ์๋๋ก ํด์ฃผ์ธ์.
- detail์ id ๊ฐ์ผ๋ก url์ ๋ถ์ฌํ์ฌ navigate(-1) ์คํ์์ ์กฐํ ์์์ ๋ฐ๋ผ ์กฐํ๊ฐ๋ฅํ๊ฒ ๊ตฌํ ์๋ฃ.
ํ ํ์ด์ง ๋ด์์ ์๋ก๊ณ ์นจ ์์ด ๋ฐ์ดํฐ๊ฐ ์ ํฉ์ฑ์ ๊ฐ์ถ๋๋ก ๊ตฌํํด์ฃผ์ธ์
์์ ๋๋ Todo์ ๋ด์ฉ์ด ๋ชฉ๋ก์์๋ ์ค์๊ฐ์ผ๋ก ๋ฐ์๋์ด์ผ ํฉ๋๋ค
- todoList์ todoDetail์ ํ๊ฐ์ state๋ก ์ฌ์ฉํ๋ ค ํ์ผ๋ typescript๋ฅผ ์ฌ์ฉํ์ฌ List๋ data type์ด object Detail์ object ํํ์ฌ์ state ํ๊ฐ๋ง์ผ๋ก๋ ๋ถ๊ฐ.
List์์ ํด๋ฆญํ id๊ฐ๊ณผ detail ํ์ด์ง์ id๊ฐ์ด ๊ฐ์ ๊ฒฝ์ฐ detail์์ ์์ฑ๋ ๊ฐ์ด List์ ์ ์ฉ๋๊ฒ ์ผํญ์ฐ์ฐ์ ํ์ฉํ์ฌ ๊ตฌํ.
-
์ ์ฒด์ ์ธ ํจ์, ๋ณ์ ๋ค์ด๋ฐ ๋ถ๋ถ ๋ถํฐ ์ ๊ทผํ์ฌ ๊ฐ๋ ์ฑ์ ๋์์ต๋๋ค.
-
custom hooks์ ์ฌ์ฉํ์ฌ useInputs ์ปดํฌ๋ํธ๋ก login๊ณผ todo ํ์ด์ง์์ ๋ฐ๋ณต๋๋ ๋ถ๋ถ ํ ์ผ๋ก ๋ถ๋ฆฌํ์ฌ ์ฌ์ฌ์ฉํ์์ต๋๋ค.
-
axios๋ ๋ฐ๋ณต๋๋ ๋ถ๋ถ base_url์ ๊ฐ์ด ์ค์ ์ฃผ์ด ๋ถ๋ฆฌํ์๊ณ ์ถํ custom hook์ผ๋ก ๋ถ๋ฆฌํด๋ณผ ์์ ์ ๋๋ค.