๋ธ๋ก๊ทธ : https://velog.io/@heresyoonjin/posts
![](https://private-user-images.githubusercontent.com/119280160/369670158-d4836e73-70dc-44f1-b8cc-b4af00929038.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1OTQ0NDcsIm5iZiI6MTczOTU5NDE0NywicGF0aCI6Ii8xMTkyODAxNjAvMzY5NjcwMTU4LWQ0ODM2ZTczLTcwZGMtNDRmMS1iOGNjLWI0YWYwMDkyOTAzOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNVQwNDM1NDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zMzk3ODg4Nzg0N2NmMmQwNGJkMGJlNTgzYjE5MWM3YTU4NzlkNDFiMDFkODljNTNiMjU5Zjc0YzU0ZTU1MDhiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.moP9XN5iuJywkr9CEPu2AtZNTeQfNo0mGPatHiZYb8M)
๊ธฐ์ฌ
- ์ ๊ฒ์ ์น๋ทฐ: useSearchParams๋ฅผ ์ฌ์ฉํด ๊ฒ์ api ์ฐ๊ฒฐ
- ์ฑ ๊ฐ์ด๋ ์น๋ทฐ: useRef์ Intersection Observer๋ฅผ ์ฌ์ฉํด ์คํฌ๋กค ์์น ์กฐ์ & ํ์ฌ ์คํฌ๋กค ์์น๋ฅผ ํญ๋ฐ์ ์ํ๋ฐ์
- ๋๋ฉํ์ด์ง: useRef๋ฅผ ์ฌ์ฉํด ์คํฌ๋กค ์์น ์กฐ์, ์ด๋ฏธ์ง ์บ๋ฌ์ ๊ตฌํ, ์ฌ์ ์์ฝ์ ์ํ api ์ฐ๊ฒฐ
๋ฐฐ์ด์
- ๊ฒ์๊ฒฐ๊ณผ๋ฅผ ๋ ๋๋งํ๋ ๋ฌธ์ : ํ์ด์ง ์ด๋ ํ Next.js์ useSearchParamsํ ์ ์ฌ์ฉํด ๊ฒ์ ํ๋ผ๋ฏธํฐ๋ฅผ ์ฝ์ด ๊ฒ์ ํ ์ ํธ์ถํ๋๋ก ํ์ต๋๋ค.
- ์ฌ์ ์์ฝ ๋ฑ๋ก ์๋ฌ ์ฒ๋ฆฌ: react-query์ useMutation์ ์ฌ์ฉํ์ฌ ๋ฑ๋ก์ด ์ ๋๋ก ์ฒ๋ฆฌ๋์ง ์์ ๊ฒฝ์ฐ ์ฌ์ฉ์์๊ฒ ํ ์คํธ๋ฅผ ๋์ฐ๋๋ก ํ์ต๋๋ค.
- ์ต๊ทผ๊ฒ์์ด ์ญ์ ๋ฅผ ์ฆ์ ๋ฐ์ํด์ผํ๋ ๋ฌธ์ : invalidateQueries๋ฅผ ํตํด ์บ์๋ฅผ ๋ฌดํจํํ๋๋ก ํด ์ฌ์ฉ์๊ฐ ์ต๊ทผ ๊ฒ์์ด๋ฅผ ์ญ์ ํ ๋๋ง๋ค ์ฆ์ UI์ ๋ฐ์๋๋๋กํ์์ต๋๋ค.
- ๊ฒ์ ํํฐ ํ์ ์ ๋ด๋ถ ์ํ๊ด๋ฆฌ์์ ๊ฐ๋ณ ํ์ด์ง๋ก ์ด์ ํ๋ ๋ฌธ์ : ๋ด๋ถ ์ํ๊ด๋ฆฌ๋ก ํํฐ ํ์ ์ ๊ตฌํํ์์ผ๋ ์ถํ SEO์ต์ ํ ๋ฌธ์ ๋ฅผ ๊ณ ๋ คํ์ฌ ํ์ด์ง๋ฅผ ๋ณ๋์ ํ์ด์ง๋ก ๋ถ๋ฆฌํ์ต๋๋ค. ๋ณ๋ ฌ ๋ผ์ฐํ ์ ํตํด ์ ๋ ฌ ๋ฒํผ์ ํด๋ฆญํ๋ ๊ฒฝ์ฐ์๋ง ํํฐํ์ด์ง๋ฅผ ๋ ๋๋งํ๋๋กํ์ต๋๋ค.
![](https://private-user-images.githubusercontent.com/119280160/313473925-3a6df636-2691-4e28-ba6f-5beda5627109.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk1OTQ0NDcsIm5iZiI6MTczOTU5NDE0NywicGF0aCI6Ii8xMTkyODAxNjAvMzEzNDczOTI1LTNhNmRmNjM2LTI2OTEtNGUyOC1iYTZmLTViZWRhNTYyNzEwOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjE1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxNVQwNDM1NDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03NjYzYjRiM2FlMmVjY2VjOGIxYjM1MzdjYTI5YjIwM2JkNzQ0OWY2MzRmYWJmNDg2OTZmNTRkNGIyOWU0MjYyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.BuY58hNduJfmTxK7hlgEmJ44dc92rx0hCKzCPkRoq3U)
๊ธฐ์ฌ
- ๋ฉ์ธํ์ด์ง: ๋ฉ์ธํ์ด์ง ui & ์์ฒด ๋์์ ๋ณด api ์ฐ๊ฒฐ
- ๊ฒฐ์ : ํฌํธ์ ํ ์คํธ ๊ฒฐ์ api ์ฐ๊ฒฐ, ์ฃผ๋ฌธ ๋ด์ญ์ ์ ์ฅํ๊ธฐ ์ํ ์์ฒด api ์ฐ๊ฒฐ
- ๊ณตํต์ปดํฌ๋ํธ ์ ์ด: ๋ก๊ทธ์ธ ์ฌ๋ถ / ํ์ด์ง ๋ณ ๋ถ๊ธฐ์ ๋ฐ๋ผ ์ปดํฌ๋ํธ ์ ์ด
- CI/CD: GitHub workflow + vercel ์ฌ์ฉ
๋ฐฐ์ด์
- ๋ถํ์ํ ๋ฐ์ดํฐ๋ก๋ฉ ๋ฐ์: react-query์ staleTime๊ณผ gcTime ์ค์ ์ผ๋ก ๋ฐ์ดํฐ ์ ์ ๋๋ฅผ ๊ด๋ฆฌํ๋ ๋ฒ์ ์ตํ ์บ์ฑ์ ํตํด ์ฑ๋ฅ์ ์ต์ ํํ์์ผ๋ฉฐ enabled ์ต์ ์ ํ์ฉํ ์กฐ๊ฑด๋ถ ์ฟผ๋ฆฌ ์คํ์ผ๋ก ๋ถํ์ํ ๋ฐ์ดํฐ ๋ก๋ฉ์ ๋ฐฉ์งํ์ต๋๋ค.
- ์ฃผ๋ฌธ > ๊ฒฐ์ ํ์ด์ง์์ ์ฃผ๋ฌธ ๋ด์ญ์ ์ผ๊ด์ฑ์ ์ ์งํด์ผํ๋ ๋ฌธ์ : ์ ์ญ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ jotai๋ฅผ ์ฌ์ฉํด ์ํ ๋ชฉ๋ก๊ณผ ์ด ๊ฒฐ์ ๊ธ์ก์ ์ ์ญ ์ํ๋ก ๊ด๋ฆฌํ์ฌ ๋ฐ์ดํฐ ์ผ๊ด์ฑ์ ์ ์งํ์ต๋๋ค.