Closed rkdcodus closed 3 months ago
EditDiary ์ปดํฌ๋ํธ๋ฅผ ์์ฑํด ๋ณธ๋ CreateDiary์์ ์์ ๊ธฐ๋ฅ์ ๋ถ๋ฆฌํ์ต๋๋ค. ํ ์ปดํฌ๋ํธ ๋ด ์ฌ๋ฌ ๊ธฐ๋ฅ์ ๊ฐ์ง๊ณ ์์ผ๋ฉด ๋ณต์ก์ฑ์ด ์ฆ๊ฐํด ์ฝ๋ ์ดํด๊ฐ ์ด๋ ค์์ง๊ณ ๊ธฐ๋ฅ ๋ณ๊ฒฝ์ด ์ด๋ ค์์ง๋๋ค. ๋ฐ๋ผ์ ๊ฐ๋ ์ฑ, ์ ์ง๋ณด์๋ฅผ ์ํด ๋ถ๋ฆฌํ์๊ณ ๋ฒ๊ทธ๋ ํด๊ฒฐ๋์์ต๋๋ค.
์์ฑํ์ด์ง ์ ๊ทผ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ ์ด์ ๋ useParamsId์ diaryId ์์ธ์ฒ๋ฆฌ ๋ถ๋ถ ๋๋ฌธ์ด์์ต๋๋ค. useParamsId๋ url์ ํ๋ผ๋ฏธํฐ์ธ diaryId๊ฐ ์ ํจํ ๊ฐ์ธ์ง ํ๋จํ๊ณ ์ซ์ ํ์ ์ผ๋ก ๋ฆฌํดํฉ๋๋ค.
export const useParamsId = () => { const { diaryId } = useParams(); const diaryId_num = Number(diaryId); const navigate = useNavigate(); useEffect(() => { if (Number.isNaN(diaryId_num) || diaryId_num === 0) { navigate('/non-existent-page'); } }, [diaryId_num]); return diaryId_num; };
CreateDiary ์ปดํฌ๋ํธ์๋ ์์ฑ๊ณผ ์์ ๊ธฐ๋ฅ์ด ํจ๊ป ๋ค์ด์์์ต๋๋ค.
/creatediary
/editdiary/:diaryId
๊ทธ๋ฆฌ๊ณ ์ด์ฒ๋ผ ์์ฑ ๊ธฐ๋ฅ์ผ ๋์ ์์ ๊ธฐ๋ฅ์ผ ๋์ ์ฃผ์์ฐฝ์ ํํ๊ฐ ๋ค๋ฆ ๋๋ค. ์ด ์ฃผ์์ฐฝ์ ๊ธฐ์ค์ผ๋ก ์์ฑ์ธ์ง ์์ ์ธ์ง ํ๋จํ์ต๋๋ค. ์ฃผ์์ฐฝ url์ ํ๋ผ๋ฏธํฐ์์ diaryId๊ฐ ๋ค์ด์๋ค๋ฉด ์์ ํ์ด์ง๋ก ํ๋จํ์ฌ ์์ ์์ ์ฝ๋๊ฐ ์คํ๋ฉ๋๋ค.
์ด diaryId๋ฅผ ๊ฐ์ ธ์ค๊ธด ์ํด์ ์ ํจํ ์ซ์์ธ์ง ํ๋จํ๊ณ ํ์ ์ ๋ณ๊ฒฝํ๋ ๊ณผ์ ์ ๊ฑฐ์ณ์ผํ๊ธฐ ๋๋ฌธ์ CreateDiary ์ปดํฌ๋ํธ ๋ด useParamsId ํ ์ ์ฌ์ฉํ์ต๋๋ค. ํ์ง๋ง ์์ฑํ์ด์ง์ ์ฃผ์์ฐฝ์๋ ๋น์ฐํ diaryId๊ฐ ๋ค์ด์์ง ์์ undefined๋ก ์๋ ์์ธ์ฒ๋ฆฌ๋์ด non-existent-diary ํ์ด์ง๋ก ์ด๋๋๋ ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ์ต๋๋ค.
CreateDiary์ EditDiary์ ์ค๋ณต๋๋ ์ฝ๋๊ฐ ๋ง์ต๋๋ค. ๋ฆฌํฉํ ๋ง์ ํตํด ์ค๋ณต๋๋ ๊ฒ์ ์ปดํฌ๋ํธ๋ก ๋ถ๋ฆฌํด ์ฌ์ฌ์ฉํ๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค!
์ถ๊ฐ์ ์ธ ์ฐธ๊ณ ์ฌํญ์ด๋ ๊ด๋ จ๋ ๋ฌธ์, ๋งํฌ ๋ฑ์ ์ ๊ณตํด์ฃผ์ธ์.
๋ณ๊ฒฝ ์ฌํญ์ ๋ํ ์คํฌ๋ฆฐ์ท์ด ์๋ค๋ฉด ์ฒจ๋ถํด์ฃผ์ธ์.
์ด์ ๋ฒํธ: Close #154
โ ์ฒดํฌ๋ฆฌ์คํธ
๐ ์์ ์์ธ ๋ด์ฉ
1๏ธโฃ CreateDiary ์์ ์์ ๊ธฐ๋ฅ ๋ถ๋ฆฌ
EditDiary ์ปดํฌ๋ํธ๋ฅผ ์์ฑํด ๋ณธ๋ CreateDiary์์ ์์ ๊ธฐ๋ฅ์ ๋ถ๋ฆฌํ์ต๋๋ค.
ํ ์ปดํฌ๋ํธ ๋ด ์ฌ๋ฌ ๊ธฐ๋ฅ์ ๊ฐ์ง๊ณ ์์ผ๋ฉด ๋ณต์ก์ฑ์ด ์ฆ๊ฐํด ์ฝ๋ ์ดํด๊ฐ ์ด๋ ค์์ง๊ณ ๊ธฐ๋ฅ ๋ณ๊ฒฝ์ด ์ด๋ ค์์ง๋๋ค. ๋ฐ๋ผ์ ๊ฐ๋ ์ฑ, ์ ์ง๋ณด์๋ฅผ ์ํด ๋ถ๋ฆฌํ์๊ณ ๋ฒ๊ทธ๋ ํด๊ฒฐ๋์์ต๋๋ค.
๐จ ๋ฒ๊ทธ ๋ฐ์ ์ด์ (์ ํ ์ฌํญ)
1๏ธโฃ ๋ฒ๊ทธ ์์ธ
์์ฑํ์ด์ง ์ ๊ทผ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ ์ด์ ๋ useParamsId์ diaryId ์์ธ์ฒ๋ฆฌ ๋ถ๋ถ ๋๋ฌธ์ด์์ต๋๋ค. useParamsId๋ url์ ํ๋ผ๋ฏธํฐ์ธ diaryId๊ฐ ์ ํจํ ๊ฐ์ธ์ง ํ๋จํ๊ณ ์ซ์ ํ์ ์ผ๋ก ๋ฆฌํดํฉ๋๋ค.
CreateDiary ์ปดํฌ๋ํธ์๋ ์์ฑ๊ณผ ์์ ๊ธฐ๋ฅ์ด ํจ๊ป ๋ค์ด์์์ต๋๋ค.
/creatediary
/editdiary/:diaryId
๊ทธ๋ฆฌ๊ณ ์ด์ฒ๋ผ ์์ฑ ๊ธฐ๋ฅ์ผ ๋์ ์์ ๊ธฐ๋ฅ์ผ ๋์ ์ฃผ์์ฐฝ์ ํํ๊ฐ ๋ค๋ฆ ๋๋ค. ์ด ์ฃผ์์ฐฝ์ ๊ธฐ์ค์ผ๋ก ์์ฑ์ธ์ง ์์ ์ธ์ง ํ๋จํ์ต๋๋ค. ์ฃผ์์ฐฝ url์ ํ๋ผ๋ฏธํฐ์์ diaryId๊ฐ ๋ค์ด์๋ค๋ฉด ์์ ํ์ด์ง๋ก ํ๋จํ์ฌ ์์ ์์ ์ฝ๋๊ฐ ์คํ๋ฉ๋๋ค.
์ด diaryId๋ฅผ ๊ฐ์ ธ์ค๊ธด ์ํด์ ์ ํจํ ์ซ์์ธ์ง ํ๋จํ๊ณ ํ์ ์ ๋ณ๊ฒฝํ๋ ๊ณผ์ ์ ๊ฑฐ์ณ์ผํ๊ธฐ ๋๋ฌธ์ CreateDiary ์ปดํฌ๋ํธ ๋ด useParamsId ํ ์ ์ฌ์ฉํ์ต๋๋ค. ํ์ง๋ง ์์ฑํ์ด์ง์ ์ฃผ์์ฐฝ์๋ ๋น์ฐํ diaryId๊ฐ ๋ค์ด์์ง ์์ undefined๋ก ์๋ ์์ธ์ฒ๋ฆฌ๋์ด non-existent-diary ํ์ด์ง๋ก ์ด๋๋๋ ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ์ต๋๋ค.
๐ ํ์ ์์ (์ ํ ์ฌํญ)
CreateDiary์ EditDiary์ ์ค๋ณต๋๋ ์ฝ๋๊ฐ ๋ง์ต๋๋ค. ๋ฆฌํฉํ ๋ง์ ํตํด ์ค๋ณต๋๋ ๊ฒ์ ์ปดํฌ๋ํธ๋ก ๋ถ๋ฆฌํด ์ฌ์ฌ์ฉํ๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค!
๐ค ์ง๋ฌธ ์ฌํญ (์ ํ ์ฌํญ)
๐ ์ฐธ๊ณ ์๋ฃ (์ ํ ์ฌํญ)
์ถ๊ฐ์ ์ธ ์ฐธ๊ณ ์ฌํญ์ด๋ ๊ด๋ จ๋ ๋ฌธ์, ๋งํฌ ๋ฑ์ ์ ๊ณตํด์ฃผ์ธ์.
๐ธ ์คํฌ๋ฆฐ์ท (์ ํ ์ฌํญ)
๋ณ๊ฒฝ ์ฌํญ์ ๋ํ ์คํฌ๋ฆฐ์ท์ด ์๋ค๋ฉด ์ฒจ๋ถํด์ฃผ์ธ์.
โ ์ ํ ์ฒดํฌ๋ฆฌ์คํธ
์ด์ ๋ฒํธ: Close #154