
์ Next.js์์ Kakao Map Script๊ฐ ๋ก๋๋์ง ์์๊น?
Redux Store์ Script strategy ์์ฑ์ผ๋ก window.kakao.maps ํ์ ์๋ฌ ํด๊ฒฐ ๊ณผ์
JavaScript ๋ชจ๋ ์์คํ ๊ณผ ํจํค์ง ๋งค๋์ , ๊ทธ๋ฆฌ๊ณ Yarn PnP ํ๊ฒฝ ๊ตฌ์ฑ๊ธฐ
๋ชจ๋ ์์คํ ์ดํด๋ถํฐ Yarn PnP ๊ธฐ๋ฐ ๋ชจ๋ ธ๋ ํฌ ํ๊ฒฝ ๊ตฌ์ฑ ๋ฐ ๋ชจ๋ ๊ฒฝ๋ก ๋ฌธ์ ํด๊ฒฐ๊น์ง ์ ๋ฆฌ
JavaScript ๋ชจ๋ ์์คํ ๊ณผ ํจํค์ง ๋งค๋์
์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ ์์คํ ์ญ์ฌ์ ํจํค์ง ๋งค๋์ ์ด๋ก ์ ๋ฆฌ
FormData๋ฅผ ์ด์ฉํ ํ์ผ ์ ๋ก๋ ๊ธฐ๋ฅ ๊ตฌํ๊ธฐ
FormData ๊ธฐ๋ฐ ํ์ผ ์ฒ๋ฆฌ, ๋ค๊ตญ์ด ํ์ผ๋ช ๋์, ๋ค์ค ํ์ผ ์ ๋ก๋ ๋ฐ Strict Mode ๋์ ๋ฑ ์ค์ ์๋น์ค ํ์ง์ ๋์ด๊ธฐ ์ํ ๊ฐ์ ์์

์ ์ญ ์ํ์ render prop์ผ๋ก ํด๊ฒฐํ ๋ชจ๋ฌ ๋ฆฌํฉํ ๋ง ๊ณผ์
๋๋ฉ์ธ๋ง๋ค ์ ๊ฐ๊ฐ์ด๋ ๋ชจ๋ฌ ๊ตฌ์กฐ๋ฅผ ์ ๋ฆฌํ ๋ฆฌํฉํ ๋ง ๊ธฐ๋ก
๋ธ๋ผ์ฐ์ ๋
๋ธ๋ผ์ฐ์ ๋ ๋ฌด์์ด๊ณ , ์ธํฐ๋ท์ ์กด์ฌํ๋ ๋ฐฉ๋ํ ์ ๋ณด ์ ์ฌ์ฉ์๋ ์ด๋ป๊ฒ ์ํ๋ ์ ๋ณด๋ฅผ ์ฐพ์๋ณผ ์ ์๋ ๊ฑธ๊น
์ ์ฐ๋ฆฌ๋ ๋ ์ด์ jQuery๋ฅผ ์ฌ์ฉํ์ง ์๋๊ฐ
์ค์ DOM์ ์ง์ ์ ๊ทผํ์ง ์๊ณ ์ต์ํ์ผ๋ก ์ค์ DOM์ ๋ฐ์ํด ๋ถํ์ํ Reflow/Repaint๋ฅผ ์ค์ด๊ณ ์ฑ๋ฅ์ ์ต์ ํํ๋ ๋ฐฉ๋ฒ

์ค์ ๋ฐ์ดํฐ ๊ธฐ๋ฐ ApexCharts ์ฐจํธ ๊ตฌํ ๊ธฐ๋ก

๋ฐ์ดํฐ ํํฐ๋ง ๋ก์ง, ์ด๋์ ์ฒ๋ฆฌํ๋๊ฒ ์ข์๊น?
๊ณต์ง์ฌํญ ๋ก๋ฉ ์ด์๋ฅผ ๊ณ๊ธฐ๋ก ํด๋ผ์ด์ธํธ vs ์๋ฒ ํํฐ๋ง์ ์ฅ๋จ์ ์ ๋น๊ตํ๊ณ , ์๋ฒ ํํฐ๋ง์ด ์ผ๋ฐ์ ์ผ๋ก ๋ ์ ํฉํ ์ด์ ๋ฅผ ์ ๋ฆฌํจ
.png%3Ftable%3Dblock%26id%3D18052a5a-60c7-808d-bcde-e505d0e91683%26cache%3Dv2&w=3840&q=75)
React ์กฐ๊ฑด๋ถ ๋ ๋๋ง๊ณผ ์ํ ์ด๊ธฐํ: ์ปดํฌ๋ํธ์ ์๋ช ์ฃผ๊ธฐ๋ฅผ ์ดํดํ๋ค
์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ํ์ฉํด ๋ชจ๋ฌ ์ฌ์คํ ์ ์ด๊ธฐํ ๋ฌธ์ ํด๊ฒฐ

๋ชจ๋ฌ ๋ด๋ถ ๊ฐ ์ด๊ธฐํ๊ฐ ๋์ง ์๋ ์ด์ , ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ผ๋ก ํด๊ฒฐํ๋ค
Rendered more hooks than during the previous render ์๋ฌ ํด๊ฒฐ ๊ณผ์

์๋ฒ ํต์ ๊ด๋ฆฌ ๋๊ตฌ React Query์ ๋ํด ๊ฐ๊ณ ์๋ ์คํด
์บ์ฑ ๊ธฐ๋ฅ์ ํตํด ๋ถํ์ํ API ์์ฒญ์ ์ค์ด๊ณ ๋ฐ์ดํฐ ๋๊ธฐํ๋ฅผ ์๋ํํ์ฌ ๊ฐ๋ฐ ํจ์จ์ฑ์ ๋์ฌ์ฃผ๋ React Query

Git Cherry Pick์ผ๋ก ์ปค๋ฐ ๋ด์ญ ๋ณต์ฌํ๊ธฐ
์๋ชป๋ ๋ธ๋์น์์ ์์ ํ๊ณ ์๋ ๊ฑธ ์์๋ค๋ฉดโฆ

์ฌ์ํ ๋ณ์๋ช ๋ณ๊ฒฝ์ด ๋ถ๋ฌ์จ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ ์ค๊ณ์ ์์น

ํ๋กญ ๋๋ฆด๋ง(Props Drilling)์ ์ง์ํด์ผ ํ๋๊ฐ?

๋ฝ์ปค ๊ทธ๋ฆฌ๋ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฐ ์คํ์ผ๋ง ๊ฐ์ โ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ (Part 3)
๋ฝ์ปค Part3. ์ง๋ ๋ฝ์ปค ๊ธฐ๋ฅ๋ ๋ณต์ตํด๋ณด์
.png%3Ftable%3Dblock%26id%3D4b5a8132-0291-4bb9-b920-01f43213f79d%26cache%3Dv2&w=3840&q=75)
๋ฝ์ปค ๊ทธ๋ฃน ๋ฐ ๋ฝ์ปค๋ฃธ ํํฐ๋ง โ ์ง์ ๋ณ ์กฐ๊ฑด ๋ ๋๋ง ๋ก์ง (Part 2)
๋ฝ์ปค Part2. ์ง์ ๋ณ ๋ฝ์ปค ๊ทธ๋ฃน ๋ชฉ๋ก๊ณผ ์ ํํ ๊ทธ๋ฃน์ ๋ฝ์ปค๋ฃธ ๋ณด์ฌ์ฃผ๊ธฐ

๋ฝ์ปค ๊ทธ๋ฃน ์์ฑํ๊ธฐ โ ์ ๋์ ์ธ ๋ฐฐ์น๋ ๊ตฌ์กฐ ์ค๊ณ (Part 1)
์ฌ์ฉ์ ์ ์ ๋ฐฐ์น ๊ธฐ๋ฐ ๋ฝ์ปค ๊ทธ๋ฃน ์์ฑ ๊ธฐ๋ฅ ๊ตฌํ
.png%3Ftable%3Dblock%26id%3Db624490c-249c-440c-9270-95cad0f6cd3a%26cache%3Dv2&w=3840&q=75)
์นดํ ๊ณ ๋ฆฌ์ ์ํ์ ๋ฐ๋ฅธ ์์ ๊ด๋ฆฌ ๋ก์ง ์ ๋ฆฌ
์นดํ ๊ณ ๋ฆฌ์ ์ํ์ ๋ฐ๋ฅธ ์์ ์ฝ๋๋ฅผ theme ๊ธฐ๋ฐ์ผ๋ก ๊ด๋ฆฌ

์๋ฒ์์ ํต์ ํ๋ฆ ์ ๋ฆฌ: HTTP ์์ฒญ๋ถํฐ React Query ์ ์ฉ๊น์ง
React Query๋ฅผ ๋์ ํ์ฌ HTTP ์์ฒญ๊ณผ ์ํ ๊ด๋ฆฌ๋ฅผ ํตํฉํ ๊ตฌ์กฐ๋ก ๊ฐ์ ํ ๊ณผ์
.png%3Ftable%3Dblock%26id%3D2fa1694f-70d7-4ec0-951b-317f52beb127%26cache%3Dv2&w=3840&q=75)
ApexCharts ๊ธฐ๋ฐ ๋์๋ณด๋ ์ฐจํธ ๊ตฌ์ฑ ๊ธฐ๋ก
์ค์ ๋ฐ์ดํฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ApexCharts ์ฐจํธ ๊ตฌํ

Create React App ๋์ Vite๋ฅผ ์ ํํ ์ด์ ์ ํ๊ฒฝ ๊ตฌ์ฑ ๊ธฐ๋ก
CRA ๋์ Vite๋ก ํ๋ก์ ํธ ์ด๊ธฐํ ๋ฐ ๊ฐ๋ฐ ํ๊ฒฝ ๊ตฌ์ฑ