WIL๐ฑ (16) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ WIL(17) 1.์ด๋ฒ์ฃผ๋ฅผ ๋๋์๋ณด์ ์ ๋ฒ์ฃผ์ ์ธ์๋ ์ด๋ฒ ์ฃผ ๋ชฉํ๐ฅ ์ปค๋ฎค๋ํฐ์ ์ข์์ ๊ธฐ๋ฅ, ๋ด๊ฐ ์ด ๊ธ ๋ค๊ณ ์ค๊ธฐ ์๋ฃ : ๋ถ๋งํฌ ๊ธฐ๋ฅ๊ณผ ๋น์ทํ๊ฒ ๋ก์ง์ ์ง๋ฉด์ ์ข์์ ๊ธฐ๋ฅ์ ์์ฑํ๊ณ ๋ด๊ฐ ์ด ๊ธ์ ๋ง์ดํ์ด์ง์ ๋ค๊ณ ์ค๋ ๊ฒ ๊น์ง ์ฑ๊ณตํ๋ค. ๋ง์ดํ์ด์ง์ ์ํ ์ฐ ๋ชฉ๋ก์ ์๊ธ,์ ๊ธ ํํฐ๋ง ๋ง๋ค๊ธฐ :๊ธฐ์กด์ ์๋น์คํ์ด์ง์ productTypes๋ฅผ prop๋ก ๋ด๋ ค์ฃผ๋ฉด์ ์๊ธ ์ ๊ธ ํํฐ๋ง์ ์์ฑํ๋ค. ์ปดํฌ๋ํธ์ ์ฌํ์ฉ์ฑ์ด ์ข์์ ๋ง๋ค๊ธฐ ํธํ๋ค ใ ใ currentUser๊ฐ ์๋ค๋ฉด ๋ก๊ทธ์ธํ๋๋ก ์ ๋ ํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ข ๋ ๋์๊ฐ์ ๋ก๊ทธ์ธ์ ํ์ง๋ง ์ฐ ๋ชฉ๋ก์ด ์๋ค๋ฉด ๋ณด์ฌ์ค ํ์ด์ง๋ฅผ ์ค์ ํด์ฃผ์๋ค. ์ํด์ฃผ๋ฉด ํฐ ๋ฐฐ๊ฒฝ์ ํญ๋ง ๋ณด์ด๋๋ฐ ์ ์ ์ ์ฅ์์๋ ๋๋๋ง์ด ๋ ๋๊ฑด๊ฐ? ๋ผ๊ณ ๋๋ ์ ์๋ ๋ถ๋ถ์ด๊ธฐ ๋๋ฌธ์ด๋ค. 2. ๋ค์์ฃผ ๋ชฉํ ๋ฐฐํฌ ์ฌ์ฉ.. WIL(16) 1.์ด๋ฒ์ฃผ๋ฅผ ๋๋์ ๋ณด์ ๐ฅ์ ๋ฒ์ฃผ์ ์ธ์๋ ์ด๋ฒ ์ฃผ ๋ชฉํ MVP์ ๋ค์ด๊ฐ๋ ๊ธฐ๋ฅ ์ค ๋งก์ ๋ถ๋ถ ๊ธฐํ ๋ด์ ๊ตฌํํด๋ด๊ธฐ ์๋น์คํ์ด์ง์์ ๋งก์ ๋ถ๋ถ์ ์ด๋์ ๋ ํ ์ํ์๊ณ , ๋ค๋ฆ๊ฒ ๋งก์ ๋ง์ดํ์ด์ง ํํธ์์ UI, ๋๋ค์,๋น๋ฐ๋ฒํธ ์์ ๊ธฐ๋ฅ๊ตฌํ (์์ง๊น์ง๋ update๋ ๋์ง๋ง, ์ ํจ์ฑ๊ฒ์ฌ + ๊ฐ์ธ์ ๋ณด ์์ ์ ํ์ฌ ๋น๋ฐ๋ฒํธ ์ผ์นํ๋์ง ํ์ธ๊ธฐ๋ฅ ๊ตฌํ์ ์๋จ) ํธ๋ฌ๋ธ ์ํ ์๊ฐํ๊ธฐ ํํฐ๋๋ ์๊ธฐํด์ฃผ์ จ์ง๋ง ์ค๊ฐ์ ๊ฒ์์ ์ ์ ํธ๋ฌ๋ธ ์ํ ์ด๋ผํ๋ฉด cors์๋ฌ ์๋๊ฒ ๊ฐ๋ค. ๊ทธ๋ถ๋ถ์ ๋ธ๋ก๊ทธ์์ ๋ฐ๋ก ์ ๋ฆฌ๋ฅผ ํ๋ค...ใ ์์ธ์ฒ๋ฆฌ๋ฅผ ์ด๋ป๊ฒ ํ ๊ฒ์ธ๊ฐ... ์์ง ๋ด ๋ถ๋ถ์์ ์ด๋ค ๋ถ๋ถ์ ์ฌ์ฉ์ ํด์ผํ ๊น ๋ฏธ์ ์ด๋ค. 2.๋ค์์ฃผ ๋ชฉํ ์ปค๋ฎค๋ํฐ์ ์ข์์ ๊ธฐ๋ฅ, ๋ด๊ฐ ์ด ๊ธ ๋ง์ดํ์ด์ง์ ๋ค๊ณ ์ค๊ธฐ ๋ง์ดํ์ด์ง์ ์ํ ์ฐ ๋ชฉ๋ก ์๊ธ, ์ ๊ธ.. WIL(15) 1.์ด๋ฒ์ฃผ๋ฅผ ๋๋์๋ณด์ ๐ฅ์ ๋ฒ์ฃผ์ ์ธ์๋ ์ด๋ฒ ์ฃผ ๋ชฉํ ๊ธฐ๋ฅ๊ตฌํ ๋ง๋ฌด๋ฆฌ ํ๊ธฐ ์ค๊ฐ ์ ๊ฒ ๊น์ง MVP๋ก ์๊ฐํ๋ ๊ธฐ๋ฅ๋ค์ ๋ค ๊ตฌํํ๊ธฐ๋ก ํ๋ค. ์๊ฐ์ด ๋๊ฒ ๋ง๋ค๊ณ ์๊ฐํ์ง๋ง ์งํ๋ ์๋ก ์ถ๊ฐ๋๋ ๊ธฐ๋ฅ๊ณผ ๋ฐ๋๋ UI์ ๋ํด์ ์์ ํ๋ฉด์ ์์ ์ํ๋ ค๋ ์งง์ ๊ธฐ๊ฐ์ด์๋ค. ๊ทธ๋๋ ์๋ ๋งก์๋ ๊ธฐ๋ฅ๊ตฌํ์ ์ด๋์ ๋ ์๋ฃํ ์ํ๋ผ ๋คํ์ด๋ค. UI๋ง๋ฌด๋ฆฌํ๊ธฐ ์ด๋์ ๋ ํ์คํ ํ์ ๋ค ๋ง๋ค๊ณ ํ์ง๋ง ์์ง๊น์ง ํ์ ๋ ์์ด์ดํ๋ ์์ด ์๋๋ฏ๋ก ๊ณ์ํด์ ์์ ํ๊ณ ์๋ค. ๋ง๋ค๋ฉด์ ํผ๊ทธ๋ง๋ฅผ ์ค๊ฐ์ค๊ฐ ์ ๊ฒํด์ผํ๋ค๋๊ฒ์ ๊นจ์ฐ์น๊ณ ์๋ค. ๋ง๋ค๋ฉด์ ๋ถ์กฑํ ๋ถ๋ถ ์ฑ์๋ฃ๊ธฐ ์ด ๋ถ๋ถ์ ์์ฝ๋ค... ์๋๊ฐ์ผ๋ฉด ์ธํผ๋ํธ์คํฌ๋กค ์ ๋ง ๊ตฌํํด๋ณด๊ณ ์ถ์ด์ ํ๋ฃจ...์ดํ ์ ๋ ๋ถ์ก๊ณ ์์๋๋ฐ ์์ฝ๊ฒ ์๋์๋ค. ๊ณ์ํด์ ๋ถ์ก๊ณ ์๊ธฐ์๋ ๋ค๋ฅธ ์ค์ํ ๊ธฐ๋ฅ๋ค์ด ๋ง์.. WIL(14) 1.์ด๋ฒ์ฃผ๋ฅผ ๋๋์๋ณด์ ๐ฅ์ ๋ฒ์ฃผ์ ์ธ์๋ ์ด๋ฒ ์ฃผ ๋ชฉํ - ์ต์ข ํ๋ก์ ํธ ๊ณํ ์ธ์ฐ๊ธฐ๐ ๋์์ด๋๋๊ณผ ์ฒ์ ํด๋ณด๋ ํ์ ์ผ๋ก ์ด๋๊น์ง ํด์๋ ํ๋ก์ ํธ์๋ ๋ค๋ฅด๊ฒ ์์ฒญ ์ธ๋ฐํ๊ณ ์์ธํ๊ฒ ๊ณํ์ ์งํํด๊ฐ๋ค. ๊ทธ๋์ ํด์๋ ๊ฒฝํ์ ์ผ์์ ํด๋ณด๋๊น ์ข์๋ ์ ๋๋นด๋ ์ ์ ๋๋ ์ ์งํํ๋ค. ํ์ด์ด๋ฒ ์ด์ค๋ฅผ ํตํด์ ๊ธฐ๋ฅ ๊ตฌํ ๊ธ์ต openAPI๋ฅผ ์ฌ์ฉํด์ ๊ฐ์ ธ์ค๊ธฐ (์ค์๊ฐ ์ ๋ณด์ด๊ธฐ๋๋ณด๋ค๋ ๋ฐ๋์ง ์๋ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ๋๋ฌธ์ react-query๊ฐ ๊ธํ์ง ์์๋ค.) ํ๋ ์์ ๋ง์ถฐ์ UI ๋ง๋ค๊ธฐ ์งํ ์ค UI์ ๋ง์ถฐ์ ๊ธฐ๋ฅ๊ตฌํ๋ ์งํ ์ค 2.๋ค์์ฃผ ๋ชฉํ ๊ธฐ๋ฅ๊ตฌํ ๋ง๋ฌด๋ฆฌํ๊ธฐ UI ๋ง๋ฌด๋ฆฌํ๊ธฐ ์๋น์คํ์ด์ง ๋ถ์กฑํ ๋ถ๋ถ ์์ฑํ๊ธฐ 3.์ด๋ฒ ์ฃผ ๋ชฉํ ๋ฌ์ฑ ์ฌ๋ถโจ - ํ์๋ฅผ ์ค๋ํ๊ณ ์์ฃผ ํด์ผํ๋ค ๋ณด๋๊น ์๊ฐ๋ ์ ๊ฐ๊ณ ์ต์ข ์ด๋ค๋ณด๋ ํ.. WIL(13) 1.์ด๋ฒ์ฃผ๋ฅผ ๋๋์ ๋ณด์ ๐ฅ์ ๋ฒ์ฃผ์ ์ธ์๋ ์ด๋ฒ ์ฃผ ๋ชฉํ next.js ๊ณต๋ถ : ์ด๋ฒ ์ฃผ์ฐจ์ ์ฃผ์ด์ง ๊ฐ์๋ฅผ ๋ฃ๊ณ ์ฒ์๋ณด๋ ๋ฉ์๋๋ผ๋๊ฐ ์ดํด๊ฐ ์๊ฐ๋ ๋ถ๋ถ์ ๋ฐ๋ก ์ ๋ฆฌ๋ฅผ ํ๋ฉด์ ๊ณต๋ถํ๋ค. (์ด๋ ดํ์ด ์๊ณ ์๋ SSG,SSR์ ๋ํด์ ์ข ๋ ํ์คํ ์๊ฒ ๋์๋ค...) ์๋ฐ์คํฌ๋ฆฝํธ + ๋ฆฌ๋์ค ๊ณต๋ถ : ์ด๋ฒ์ฃผ๋ ์ฌ์ค ์๋ฐ์คํฌ๋ฆฝํธ ๊ณต๋ถ๋ณด๋จ ๋ฆฌ๋์ค๊ณต๋ถ์ ์ข ๋ ์ง์คํ๊ฑฐ๊ฐ๋ค. redux toolkit์ผ๋ก todo๋ฅผ ๋ค์ ๋ง๋ค์ด ๋ณด๊ณ ๋ค์ ๊ทธ todo๋ฅผ react-query๋ฅผ ์ด์ฉํด์ crud์ฐ์ต์ ํ๋ค. (์ง๊ธ ๋ค๋ฅธ๊ฑด ๋ค ๋๋๋ฐ update์์ ๋งํ์ ์ข ๋ ํด๋ด์ผ๋ ๊บผ๊ฐ๋ค ใ ใ ์ญ์ ์ด๋ ต๋ค) ํ์ ์คํฌ๋ฆฝํธ๊ณต๋ถ๋ ์ฌ์ฉ๋ฒ ์์ฃผ๋ก ์ข ๋ ๊ณต๋ถ๋ฅผ ํ๋ค. ์ค์ตํ๋ฉด์ ์จ๋ณด๋ ค๊ณ ํ๋ ์ข ๋ ๊ณต๋ถ๊ฐ ํ์ํ๊ฒ๊ฐ์๋ค. 2.๋ค์์ฃผ ๋ชฉํ๐ .. WIL(12) 1.์ด๋ฒ์ฃผ๋ฅผ ๋๋์ ๋ณด์ ๐ฅ์ ๋ฒ์ฃผ์ ์ธ์๋ ์ด๋ฒ ์ฃผ ๋ชฉํ ์ค๋ฅ ์ ๋ฆฌ: ํ๋ก์ ํธ์ค์ ์ค๋ฅ๋ฅผ ๋ง๋๋ฉด ์บก์ณํ๊ณ ํด๊ฒฐ๋ฐฉ๋ฒ๋ค์ ๊ธฐ๋กํ๊ณ ๋ฉ๋ชจ์ ๊ณผ์ ๋ค์ ์ ์ด๊ฐ๋ฉด์ ์งํํ๋๊ฒ๊ฐ๋ค. ๊ทธ๋์ ํ๋ค๊ฐ ์๋ ์๋๋ค์ด ์ด๋ค ๊ฒ ์๋์ง ๊ธฐ๋ก์ด ์์ด์ ๋ฌธ์ ํด๊ฒฐ์ ์์ด์ ์ข ๋ ๊ธฐ์ต์ด ๋จ๋๋ค. ๋ฆฌ์กํธ์ฟผ๋ฆฌํ์ฉ : ๋๋ฆ ์ฟผ๋ฆฌ์ ์ฟผ ์๋ ์ซ ๋ชฐ๋์๋๋ฐ ์ด๋ฒ์๋ isLoading, isError ๋ฑ ์ข ๋ ์ด์ ๋ฅผ ์๊ณ ํ์ํ๋๊ฒ๊ฐ๋ค. ์ถ๊ฐ์ ์ผ๋ก data๊ฐ ์์ง ๋น๋๊ธฐ์ ์ผ๋ก ๊ฐ์ ธ์ค์ง ๋ชปํ์๋ ํด์ผํ ์ฒ๋ฆฌ ๋ฑ์ ์์๋ค. ์์ธ ์ฒ๋ฆฌ๋ผ๋๊ฐ ์ต์ ๋์ฒด์ด๋์ด๋ค. isLoading์ผ๋ก๋ ํด๊ฒฐ์ด ์๋๋ ๋ถ๋ถ๋ค์ ์์ ๋ฐฉ๋ฒ๋ค์ด ํด๊ฒฐ์ ํด์ฃผ์๋ค. ๋ง๊ฐ์๊ฐ์งํค๊ธฐ: ์ค๋ ์ด ์์ด์ ์ค๋ ์๋ ํ์๋ถ๋ค ๊ฐ์ ๋ค ํธํ๊ฒ ์ฌ์๋ค. ๊ทธ๋๋ ๊ฐ์์ ์ปจ๋์ ์ ๋ฐ๋ผ์ ์งํ.. WIL(11) 1.์ด๋ฒ์ฃผ๋ฅผ ๋๋์๋ณด์โจ ๐ฅ์ ๋ฒ์ฃผ์ ์ธ์๋ ์ด๋ฒ์ฃผ ๋ชฉํ ์๋ฐ์คํฌ๋ฆฝํธ ์ฌํ ๊ณต๋ถ๋ฅผ ์ค์ ์๊ฐ์ ๊ผญ ํ๋ค. ๊ทธ๋ฌ๋ฉด์ ์ ๋ฆฌํ๋ ์๊ฐ์ ๊ฐ์ก๋ค. ๋ฆฌ์กํธ์ฟผ๋ฆฌ๋ฅผ ๊ณต๋ถํ๋ค. -> ํ๋ก์ ํธ ์ค์ ๋ง์ด ์ฌ์ฉํ ๊บผ๊ฐ์์ ์ซ ์ค์ฌ์ ์ผ๋ก ๊ณต๋ถํ๋ ์๊ฐ์ ๊ฐ์ก๋ค. ํ์ ์คํฌ๋ฆฝํธ ๋ง๋ณด๊ธฐ(?) -> ํ์ ์คํฌ๋ฆฝํธ ๊ณต๋ถ๋ฅผ ์ซ ์ด์ฌํํ๊ฑฐ๊ฐ์๋ฐ ํ์์ดํ๊ณผ์ ๋ฅผ ๋ค ์์ฑํ์ง ๋ชปํ๋ค. ๊ทธ๋์ ์ ๋๋ก ํ ๊ฒ ์๋๊ตฌ๋๋ผ๋ ์๊ฐ์ ์์ฌ์ด ์๊ฐ์ด ๋ ๋ค. ๊ทธ๋ฆฌ๊ณ ๋๋ ๊ฑด ์ด๋ ต๋ค. ์ ์ ํ๋ก์ ํธ ๋ฆฌํฉํ ๋งํด๋ณด๊ธฐ : ๊ฒฐ๊ณผ๋ ์คํจ, ์ํ๊ฑด ์๋๊ณ ๊ณ์ํ๋๋ฐ ํ์ด์ด๋ฒ ์ด์ค๋ก ๋ฐ์ดํฐ๋ฒ ์ด์คํ๋ ค๋ค๊ฐ json-server๋ก ๊ฐ์ํ๋ฉด์ ๋ฆฌ์กํธ ์ฟผ๋ฆฌ๋ฅผ ๋จผ์ ๊ณต๋ถํด๋ณด๋๊ฒ ์ข๊ฒ ๋คํด์ ์์๊ฐ ์กฐ๊ธ ๋ฐ๋ ธ๋ค. 2.๋ค์์ฃผ ๋ชฉํ๐ 1) ํ๋ก์ ํธ ์ค๋ฅ ์ ์ ๋ฆฌํ๊ธฐ 2) ๊ณต๋ถํ ๋ฆฌ์กํธ์ฟผ๋ฆฌ ํ์ฉ.. WIL(10) 1.์ด๋ฒ์ฃผ๋ฅผ ๋๋์๋ณด์โจ ๋ค์ดํฐ๋ธ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ๊ทธ์ ํ์ํ ๋ด์ฉ์ ๊ณต๋ถํ๋๋ผ ์๊ฐ์ด ๋ฐ๋นด๋ค. ๐ฅ์ ๋ฒ์ฃผ์ ์ธ์๋ ์ด๋ฒ์ฃผ ๋ชฉํ 1๏ธโฃ ๋ค์ดํฐ๋ธ ํ๋ก์ ํธ ์ค๋ฅ ๊ณผ์ ์ด๋ ์๋ก ์๋ํด๋ณธ ๊ฒฝํ ๊ธฐ๋กํ๊ธฐ : ์ค๋ฅ๊ณผ์ ์ TIL์ ๊ธฐ๋กํ๊ธด ํ์ง๋ง ์ ์ '์ด๊ฒ ๋ฌด์จ ์ค๋ฅ์ผ?' ํ๊ณ ์ ๋จน์๋ ์ค๋ฅ๋ ๋ช๊ฐ ๋์น๊ธด ํ๋ค. ์ค๋ฅ๋ฅผ ๋ง๋๋ฉด ์ ์บก์ณํด๋๊ณ ๊ธฐ๋กํ์๋ผ๋ ์ต๊ด์ ์ซ ๋ ๋ค์ฌ์ผํ ๊ฒ ๊ฐ๋ค. : ์๋ก์ด ์๋๋ผ๋ฉด ๊ฐ์๊ธฐ ๋ค์ดํฐ๋ธ ๋์์ธ์ ๊ฝํ์ ์คํฌ๋กค ์ด๋ฒคํธ๋ฅผ ๋ง๋ค์ด๋ณธ๊ฒ. ๋น๋ก ์ ํ๋ธ๋ ๊ตฌ๊ธ ์ฐพ์๋ณด๋ฉด์ ๋ง๋ค์์ง๋ง ๋๋ฆ ๋ฟ๋ฏ 2๏ธโฃ ํ์ด์ด๋ฒ ์ด์ค ๊ณต๋ถํ๊ธฐ : ํ์ด์ด๋ฒ ์ด์ค์ crud ๊ธฐ๋ฅ๊ตฌํ์ ๋ค์ ๊ณต๋ถํด๋ณธ ๊ฒ ์ฝ๋ ํ์ค์ฉ ๋ค์ ๋ค ํ๋ค. ์ด๋ ต๋ค. 3๏ธโฃ ํ๋ก์ ํธํ๊ฑฐ ์ ์ฒด์ ์ผ๋ก ํ๋ฒ ๋ค์ ๊ณต๋ถํ๊ธฐ : ๋ค์ดํฐ๋ธ ํ๋ก์ ํธ๋ ๊ฑฐ์.. ์ด์ 1 2 ๋ค์