์ด๋ฒคํธ ๊ธฐ๋ฐ ์น๋ทฐ ํ๋ ์์ํฌ ์ค๊ณ์ ํ๋ฌ๊ทธ์ธ ์ํ๊ณ ๋ง๋ค๊ธฐ
์ด๋ฒคํธ ๊ธฐ๋ฐ ์น๋ทฐ ํ๋ ์์ํฌ ์ค๊ณ์ ํ๋ฌ๊ทธ์ธ ์ํ๊ณ ๋ง๋ค๊ธฐ ๊ด๋ จ
FEConf2023์์ ๋ฐํํ <์ด๋ฒคํธ ๊ธฐ๋ฐ ์น๋ทฐ ํ๋ ์์ํฌ ์ค๊ณ์ ํ๋ฌ๊ทธ์ธ ์ํ๊ณ ๋ง๋ค๊ธฐ>๋ฅผ ์ ๋ฆฌํ ๊ธ์ ๋๋ค. ๋ณธ๋ฌธ์ ์ฝ์ ๋ ์ด๋ฏธ์ง์ ์ถ์ฒ๋ ๋ชจ๋ ๋๋ช ์ ๋ฐํ์๋ฃ๋ก, ๋ฐ๋ก ์ถ์ฒ๋ฅผ ํ๊ธฐํ์ง ์์์ต๋๋ค. ๋ฐํ์๋ฃ๋ FEConf2023 ํํ์ด์ง์์ ๋ค์ด๋ฐ์ ์ ์์ต๋๋ค.
์๋ ํ์ธ์. ์ ๋ ๋น๊ทผ์์ ๊ฐ๋ฐ์์ ๋์์ด๋๋ถ๋ค์ด ์ข ๋ ํ๋ณตํ๊ฒ ์ผํ ์ ์๋๋ก ๋๋ ์ญํ ์ ํ๊ณ ์๋ ์์งํ์ ๋๋ค. ํ์ฌ๋ ์กฐ๊ธ ์์ง๋ง ๋๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ์ ํ์คํ ๊ฐ๋ฐ์ ํ๊ณ ์์ต๋๋ค.
์๊ณ ๊ณ์ ๋ถ๋ค๋ ๋ง๊ฒ ์ง๋ง ์ ํฌ ๋น๊ทผ์์๋ ์ด Stackflow๋ผ๋ ํ๋ ์์ํฌ๋ฅผ ์ฃผ๋ก ์ฌ์ฉํ๊ณ ์์ด์. ์ค๋ ์ ๋ ์ฝ 2๋ ๋์ Stackflow๋ผ๋ ํ๋ ์์ํฌ๋ฅผ ์ด๋ค ์์ด๋์ด๋ก ๋ง๋ค์๋์ง, ์ด์ํ๋ฉด์ ๋ฐฐ์ ๋ ๊ตํ์ ๋ฌด์์ธ์ง ์ด ์๋ฆฌ์์ ๊ณต์ ํด๋ณด๋ ค๊ณ ํฉ๋๋ค.
์ค๋ ์ด์ผ๊ธฐ์์๋ ๋ฌธ์ ์ธ์, ๋ชจ๋ธ๋ง, ํ ์คํธ์๋ํ, ์ธํฐํ์ด์ค, ์ํ๊ณ, ์ด 5๊ฐ์ง ํ ํฝ์ ์ด์ผ๊ธฐํ๊ฒ ๋ ํ ๋ฐ์. ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ฐ๋ฐ์ ๋๋ถํฐ ๋๊น์ง ์ด์ง ๋ง๋ณด์ค ์ ์๋ ์ข์ ์๊ฐ์ด ๋ ๊ฒ ๊ฐ์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ๊ผญ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ฐ๋ฐ์ด ์๋๋๋ผ๋ ๋ ์์๊ฒ ํ์ค ์ธ๊ณ์ ์์ด๋์ด๋ฅผ ๋ชจ๋ธ๋ง ํ๊ณ ์ถ๊ฑฐ๋, ์๋๋ฉด ์ธํฐํ์ด์ค๋ฅผ ํตํด์ ๋ ๋์ ํ์ ์ ๋ชฉํ๋ก ํ๊ฑฐ๋, ์ํ๊ณ๋ฅผ ํตํด์ ์ ์ฌ ๋จ์์ ๊ธฐ์ ์ํฉํธ ๊ฟ๊พธ๊ณ ๊ณ์ ๋ถ๋คํํ ํฐ ์๊ฐ์ด ๋ ์ ์์ผ๋ฉด ์ข๊ฒ ์ต๋๋ค.
์์๋ค์ํผ Stackflow๋ ์ด ๋ฌธ์์ ๊นํ๋ธ ๋งํฌ (daangn/stackflow
)๋ก ๋ฏธ๋ฆฌ ๋๋ฌ๋ณด์ค ์ ์์ต๋๋ค. ์ฝ๋๋ฅผ ๋๋ฌ๋ณด์๊ฑฐ๋ ์ค์ ๋ก yarn add ํด์ ์ฌ์ฉํด๋ณด๋ฉฐ ์ ์ด์ผ๊ธฐ๋ฅผ ๋ณด์๋ฉด, ์ข ๋ ์
์ฒด์ ์ผ๋ก ์ดํดํ์ค ์ ์์ ๊ฒ ๊ฐ์ต๋๋ค.
Chapter1. ํ๋ฉด ์ ํ์ ํ์ฉํด ์ ์ ๊ฒฝํ ๊ฐ์ ํ๊ธฐ
์ฒซ ๋ฒ์งธ๋ก, ํ๋ฉด ์ ํ์ ํ์ฉํด์ ์ ์ ๊ฒฝํ ๊ฐ์ ํ ์ด์ผ๊ธฐ๋ฅผ ํ๋ ค๊ณ ํฉ๋๋ค. ์ ๋ ๋น๊ทผ์์ ๋ชจ๋ฐ์ผ ์น ๋ทฐ๋ฅผ ์ข ์ ๊ทน์ ์ผ๋ก ์ฌ์ฉํ๊ฒ ๋๋๋ฐ์. ์์๋ค์ํผ ์น์์๋ ํน๋ณํ ์ ํ ํจ๊ณผ๊ฐ ์๊ณ , ๋ฑ๋ฑ ๋์ด์ง๋ ๊ฒฝํ์ ์ค ์๋ฐ์ ์์์ด์.
์ด๋ฐ ๊ฒฝํ์ ์ ์ ์๊ฒ ์ ์ ํ ๋งฅ๋ฝ์ ์ฃผ๊ธฐ๊ฐ ์ด๋ ต๊ณ , ๋ชจ๋ฐ์ผ ์ฑ ๋ด์์ ๋ค๋ฅธ ํ๋ฉด๋ค๊ณผ ๋ค๋ฅด๊ฒ ์ํ๊ฐ์ ์ค ์ ์๋ค๊ณ ์๊ฐํ์ด์. ์ ๊ฐ ๋ฐ๋ผ๋ ์ ํ ํจ๊ณผ๋ ์๋ ๊ฐ์ ๋ชจ์ต์ด์๋๋ฐ, ์ด๊ฒ ์กฐ๊ธ ๋ ์์ฐ์ค๋ฝ์ฃ .
ํด๋ฆญํ ์ดํ์ ๋ค์ ํ๋ฉด์ผ๋ก ์ด๋ํ๊ฑฐ๋ ๋ค๋ก ๊ฐ๊ธฐ๋ฅผ ํ์ ๋, ์ด์ ํ๋ฉด์ด ์ฌ์ฉ ๋ณด์ด๋ ์ ๋๋ฉ์ด์ ์ ๋ง๋ค๋ฉด ์ ์ ์๊ฒ ์ข ๋ ์ ์ ํ ๋งฅ๋ฝ์ ์ ๋ฌํ๊ณ , ์ข ๋ ์์ฐ์ค๋ฌ์ด ์น๋ทฐ ํ๋ฉด์ด ๋ ์ ์์ ๊ฑฐ๋ผ๊ณ ์๊ฐํ์ต๋๋ค.
์ด๊ฒ์ ๊ตฌํํ๊ณ ์ ๋ง์ ๋จน์์ ๋, ์ฒ์์๋ ์น์ ๋ด์ฅ๋์ด ์๋ ํ์คํ ๋ฆฌ API๋ฅผ ํ์ฅํด์ผ ๋๋ค๊ณ ์๊ฐํ๋๋ฐ์. ๋ค๋ค ์์๊ฒ ์ง๋ง ํ์คํ ๋ฆฌ API๋ ํธ์ ์คํ ์ดํธ๊ฐ ํธ์ถ๋ ๋๋ง๋ค ํ์ด์ง๊ฐ ์์ฌ๊ฐ๊ฒ ๋๊ณ ์.
๊ทธ๋ฐ๋ฐ ์ ํฌ๊ฐ ์ํ๋ ๋์, ํนํ โ๋ค๋ก ๊ฐ๊ธฐโ๋ฅผ ํ ๋ ์ด์ ํ์ด์ง๊ฐ ๋ณด์ด๋ ํจ๊ณผ๋ฅผ ๋ง๋ค๊ธฐ ์ํด์๋, ํ์ฌ ์์ ์ ๋ํ ์ํ๊ฐ๋ฟ ์๋๋ผ ์ด์ ํ๋ฉด์ ๋ํ ์ํ ๊ฐ์ด ๊ผญ ํ์ํ์ต๋๋ค.
ํ์ง๋ง ํ์คํ ๋ฆฌ API์์๋ ์ด์ ํ๋ฉด์ ๋ํ ์คํ ์ดํธ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์๋ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์ ์ฒ์์ ๊ต์ฅํ ๋ฌด์ํ๊ฒ ์ ๊ทผํ๋๋ฐ์. ๋ฐ๋ก ํ์คํ ๋ฆฌ API๋ฅผ ํ ๋ฒ ๊ฐ์ธ๋ ๋ฐฉ์์ผ๋ก, PC ์คํ ์ดํธ๊ฐ ํธ์ถ๋ ๋ ๋ฆฌ์กํธ ๋ด๋ถ ์ํ๋ฅผ ํจ๊ป ์ ์งํ๋ ๊ฒ๋๋ค.
๊ทธ๋ฆฌ๊ณ ๋ค์๊ณผ ๊ฐ์ด, ํ๋ฉด์ ๋ํ ์ ๋ณด๊ฐ ํ์คํ ๋ฆฌ API์ ํธ์๋ ๋๋ง๋ค ๋ด๋ถ ์ํ ๊ฐ์ ์ด๋ ์ด๋ฅผ ํ๋ ๋ง๋ค์ด ํจ๊ป ํธ์ํ๊ฒ ํ๋๋ฐ์.
์ด๋ฐ ๋ฐฉ์์ผ๋ก ์ด์ ํ๋ฉด์ ๋ํ ์ํ ๊ฐ์ ์ ๊ทผํ ์ ์๊ฒ ๋ง๋ค์ด์, ํ๋ฉด ์ ํ ์ ๋๋ฉ์ด์ ์ ์ด๋ป๊ฒ๋ ๊ตฌํํ ์ ์์์ต๋๋ค.
์ด๋ ๊ฒ karrotframe์ด๋ผ๋ ์ฒซ ๋ฒ์งธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ถ์ํ๊ฒ ๋์ต๋๋ค. ์์ ์ค๋ช ๋๋ ธ๋ค์ํผ ํ์คํ ๋ฆฌ API, ํนํ ์ด์ ๋ฆฌ์กํธ ๋ผ์ฐํฐ ๋(React Router Dom)์ด๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์์กดํ๋๋ก ๊ฐ๋ฐ์ด ๋์์ต๋๋ค.
์ด๋ ๊ฒ ๋น ๋ฅด๊ฒ ๊ตฌํ๋ karrotframe์ ๊ต์ฅํ ๋ง์ ๋ฌธ์ ๊ฐ ์์์ด์.
๋ฌธ์ ์ 1. ํ ์คํธํ๊ธฐ ์ด๋ ค์
ํ ์คํธํ๊ธฐ๊ฐ ์ด๋ ค์ ์ต๋๋ค. ์ ๊ฐ ๋ถ์กฑํด์๋ ๊ทธ๋ ๊ธฐ๋ ํ์ง๋ง ์์กด์ฑ์ด ๊น๊ฒ ์นจํฌ๋์ด ์์ด์ ํ ์คํธ๋ฅผ ์ง๊ธฐ๋ ์ด๋ ค์ ์ฃ . ๊ทธ๋์ ํ ์คํธ๊ฐ ์์์ด์. ๋ผ์ด๋ธ๋ฌ๋ฆฌ ํน์ฑ์ ์น๋ทฐ ๋ฟ๋ฆฌ๋ฅผ ๋ด๋นํ๊ณ ์๋๋ฐ, ๋ฒ๊ทธ๋ ๊ธฐ๋ฅ ์ ์์ด ๋ค์ด์์ ๋ ํ ์คํธ๊ฐ ์์ด ๋นจ๋ฆฌ ๋์ํ๊ธฐ๊ฐ ๋งค์ฐ ํ๋ค์์ต๋๋ค.
๋ฌธ์ ์ 2. ์ํ ๋๊ธฐํ์ ๋ฒ๊ทธ๊ฐ ๋ฐ์ํจ
ํ์คํ ๋ฆฌ API์ ๋ฆฌ์กํธ ๋ด๋ถ ์ํ๋ฅผ ๋๊ธฐํํ๋ ๊ฒ ๋งค์ฐ ์ด๋ ต๊ณ , ๋ฒ๊ทธ๊ฐ ๋๊ธฐ ์ฌ์ด ์ฝ๋๊ฐ ๋์ด๋ฒ๋ ธ์ต๋๋ค. ๊ฐ๋ฐ ํ๊ฒฝ์์, ๋ณดํต ์ฐ๋ฆฌ๊ฐ โ์๋ก ๊ณ ์นจโ์ ๊ต์ฅํ ์์ฃผ ํ์์์. ๊ฐ๋ฐ์๋ถ๋ค๊ป ์ ํฌ๊ฐ ์ ๋ขฐ ๊ฐ๋ฅํ ํ๊ฒฝ์ ์ ๊ณตํ๊ธฐ ์ํด์ โ์๋ก๊ณ ์นจโ, โ์์ผ๋ก ๊ฐ๊ธฐโ โ๋ค๋ก ๊ฐ๊ธฐโ ์ด๋ฐ ๊ฑธ ํ์ ๋์ ๋ํ ๋์์ด ํ์ํ๋๋ฐ, ์ด ๋ถ๋ถ์์ ๋ฒ๊ทธ๊ฐ ๊ณ์ ๋ฐ์ํด์ ํ๋ก๋์ ํ๊ฒฝ์ ๋ํ ์ ๋ขฐ๋์ ์ด์๊ฐ ์์ ์๋ฐ์ ์์์ต๋๋ค.
๋ฌธ์ ์ 3. ํน์ ๊ธฐ์ ์คํ์ ์ข ์๋จ
๋ฆฌ์กํธ ํ๊ฒฝ ์์ฒด์ ์ข ์๋๋ค ๋ณด๋๊น ์๋ก์ด ํ๋ ์์ํฌ์ ๋์ํ๊ธฐ๊ฐ ํ๋ค์์ต๋๋ค. ์๋ฅผ ๋ค๋ฉด, ํ์ฌ ๋ด์์ โ์ค๋ฒจํธ๋ฅผ ํ๋ฒ ์จ๋ณผ๊น ์๋ฆฌ๋๋ฅผ ํ๋ฒ ์จ๋ณผ๊นโ ์ด๋ฐ ์๊ธฐ๊ฐ ๋์ค๋ฉด โkarrotframe์ ๊ทธ๊ฑธ ์ง์ํ์ง ๋ชปํ๋๋ฐโฆโ ์ด๋ฌ๋ฉด์ ๋ถ์ํด ํ์ฃ .
๋ฌธ์ ์ 4. ํ์ฅํ๊ธฐ ์ด๋ ค์
์๋ก์ด ์๊ตฌ ์ฌํญ์ ๋ํด์ ํ์ฅํ๊ธฐ๊ฐ ์ด๋ ค์ ์ต๋๋ค. ๋์ ์์ฒด๊ฐ ๋ฆฌ์กํธ ๋ผ์ฐํฐ ๋์ ์์กดํ๋ค ๋ณด๋ ๋์์ ๋ํ ์ ์๊ฐ ๊ต์ฅํ ๋ชจํธํ ์๋ฐ์ ์์๋๋ฐ์. ์๋ฅผ ๋ค๋ฉด ํ์ด์ง๊ฐ ์ถ๊ฐ๋์ด ๋ฌด์ธ๊ฐ๋ฅผ ์คํํ๊ณ ์ถ์ ๋, ๋ฆฌ์กํธ ๋ผ์ฐํฐ ๋์ ํธ์ถํ๊ณ ๋์ ์ฝ๋ฐฑ ํจ์๋ฅผ ํธ์ถํด์ผ ํ๋์ง, ์๋๋ฉด ์ค์ ๋ ๋๋ง๋ ๋ ์ ์ง ์ดํํธ์์ ํธ์ถํด์ผ ํ๋์ง, ์ด๋ฐ ๊ฒ์ ๋ํด ๋ช ํํ ๋ฃฐ์ด ์์์ต๋๋ค. ๊ทธ๋์ ์ ๋ฟ ์๋๋ผ ์ ํฌ ํ์๋ค๋์ด ๋ฌธ์ ๋ฅผ ์ง๊ธ ๋นจ๋ฆฌ ํด๊ฒฐํด์ผ๊ฒ ๋ค๋ ์๊ฐ์ ํ๊ฒ ๋์์ต๋๋ค.
Chapter2. ๋ฆฌํฉํ ๋ง
์ฒ์๋ถํฐ ๋ค์ ๋ง๋ค๊ธฐ
๊ทธ๋์ ๋ฆฌํฉํ ๋ง์ ํ๊ฒ ๋ค๊ณ ๋ง์์ ๋จน์์ด์. ์ ๊ฐ ์์ฑํ๋ ์ฝ๋๋ค์ ๋ค ์๊ณ ์์ฃผ ๊น๋ํ ์ํ๋ก ์ฒ์๋ถํฐ ๋ค์ ์์ํ๋ ค๊ณ ํ์ฃ . ๊ทธ๋ฐ๋ฐ karrotframe์ ๋ฌธ์ ๋ ์ด์ ๋ค ์๊ฒ ๋๋ฐ, ๋ง์ ๋ฐฑ์ง์์ ์์ํ๋ ค๋๊น ๋ฌด์์ ์ด๋ป๊ฒ ๊ทธ๋ ค๋๊ฐ์ผ ํ ์ง ๋ง๋งํ๋๋ผ๊ณ ์. ์ฒ์์ ์ด ๋ฌธ์ ์ธ์์ด ๋๋ฌ๋ฌ์ ๋๋ถํฐ ์ค์ ๊ตฌํ๊น์ง ๋ช ๋ฌ๊ฐ ์ข ํ์ก์ธ์ํ๊ธฐ๋ ํ์ต๋๋ค.
๊ทธ๋ฌ๋ค๊ฐ 2022๋ 4์ 18์ผ, ํฅ์คํ ์ฐจ์์์ ํ์๋ค์ด๋ 2.0์ ๊ตฌ์กฐ๋ฅผ ๋ ผ์ํ๊ฒ ๋์ต๋๋ค.
์ด๋ ์ ํฌ ๋๋ฃ๊ฐ โ๋ณธ์งโ์ ๋ํ ์ด์ผ๊ธฐ๋ฅผ ๊บผ๋๊ณ , ํ์๋ค๊ณผ ์ด์ผ๊ธฐ๋ฅผ ๋๋๋ฉด์ ์ ํฌ๊ฐ ํํํ๊ณ ์ ํ๋ ๊ฒ๋ค์ด ๊ต์ฅํ ๊ตฌ์ฒดํ๋์์ต๋๋ค. ๊ฐ๋จํ๊ฒ ์์ฝํ์๋ฉด, ์ ํ ํจ๊ณผ๋ ๋ด๋น๊ฒ์ด์ URL, ์ด๋ฐ ๊ฒ์ ์ ํฌ๊ฐ ์ฒ์์๋ ํต์ฌ์ด๋ผ๊ณ ์๊ฐํ์์ง๋ง ์ค์ ๋ก๋ ์ ํฌ๊ฐ ํํํ๊ณ ์ ํ๋ ๋ณธ์ง์ด ์๋์๊ณ ์. ์ค์ ๋ก ์ ํฌ๊ฐ ํํํ๊ณ ์ ํ๋ ๊ฒ์ ์ ๋๋ฉ์ด์ ์ด ์กด์ฌํ๋ ์คํ์ด๋ผ๋ ๊ฑธ ๊นจ๋ซ๊ฒ ๋์์ต๋๋ค. ๋ณธ์ง์ ์ฐพ๊ณ ๋๋, ๊ธฐ์กด๊ณผ ๋ค๋ฅด๊ฒ ์๋ฌด๊ฒ๋ ์์กดํ์ง ์์ ์ ์๊ฒ ๋์๊ณ , ์ด์ ์ด๋ค ๊ฒ์ ๋ง๋ค์ด์ผ ํ๋์ง ๋ช ํํ๊ฒ ์ ์ ์์์ต๋๋ค.
์ด๋ฒคํธ ๊ธฐ๋ฐ์ผ๋ก ์๊ฐํด๋ณด๊ธฐ
์ด์ ์คํ์ ๋ง๋ค์ด์ผ ํ๋๋ฐ์. ์ฌ๋ฌ ๊ฐ์ง ๋ฐฉ๋ฒ์ด ์๊ฒ ์ง๋ง ์ ๋ ์ด๋ฒคํธ ๊ธฐ๋ฐ์ผ๋ก ์ค๊ณํ๊ธฐ๋ก ํ์ต๋๋ค. Action, Message, Transition ๋ฑ ์ฌ๋ฌ ์ด๋ฆ์ผ๋ก ๋ถ๋ฆฌ๊ธฐ๋ ํ๊ณ , ์๋ง ์ฌ๋ฌ๋ถ๊ป๋ useReducer๋ Redux ๊ฐ์ ๊ฒ์ผ๋ก ์ต์ํ์ค ๊ฑฐ๋ผ๊ณ ์๊ฐํฉ๋๋ค.
์ด๋ ์ ๊ฐ ๋ฐฑ์๋ ๊ฐ๋ฐ์ ์ด๋ฒคํธ ์์ฑ ํจํด์ ์ฐ์ตํ๋ ๋์ฌ์, ์ด์ ์๊ฐ์ ๋ฐ์ ์ ํฌ ์ฝ์ด ๋ชจ๋ธ์ ์ด๋ฒคํธ ๊ธฐ๋ฐ์ผ๋ก ์ค๊ณํ๊ฒ ๋์์ต๋๋ค.
์กฐ๊ธ ๊ตฌ์ฒด์ ์ผ๋ก ์์ด๋์ด๋ฅผ ์๊ฐํด๋๋ฆฌ๊ฒ ์ต๋๋ค. ์ด๋ฒคํธ ๊ธฐ๋ฐ ์ค๊ณ๋ ๊ฐ๋จํ ๋งํด์ ์ ์ ๊ฐ ํ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฐํํ๋ฉด, ํด๋น ๋ฐ์ดํฐ๊ฐ ๋ก์ง์ ๋ค์ด๊ฐ์ ํ์ฌ ์ํ๋ฅผ ๊ณ์ฐํ๋ ๋ฐฉ์์ด๋ผ๊ณ ์ดํดํ์๋ฉด ์ข์ต๋๋ค. ๋ง์ฝ์ ์ ์ ๊ฐ ํ๋์ ๋ ์ํํ๋ฉด ํ๋ ์ฌ๋ฌ ๊ฐ๊ฐ ๋ก์ง์ ํตํ๊ฒ ๋๊ณ , ๊ณ์ฐ๋ ์ํ๊ฐ ๋ฐ๋๊ฒ ๋ฉ๋๋ค.
์ด ๋ชจ์ต์ ์ด์ง ํ์ด๋ณด๋ฉด, ๊ฒฐ๊ตญ์ ์ํ๋ ๋ก์ง์ ํ๋ ์ฌ๋ฌ ๊ฐ๋ฅผ ๋ฃ์ ๊ฒฐ๊ด๊ฐ์ด๋ผ๋ ๊ฒ์ ์ ์ ์๊ณ ์. ์ํ๋ state, ๋ก์ง์ ํ๋ ์ฌ๋ฌ ๊ฐ๋ฅผ ๋ชจ์๋ค๋ ์๋ฏธ์์ aggregate๋ผ๋ ์ด๋ฆ์ผ๋ก ๋ฐ๊ฟจ๊ณ , ํ๋์ event๋ผ๋ ์ด๋ฆ์ผ๋ก ๋ฐ๊ฟ ์ ์์ต๋๋ค.
์ด์ ์ด๊ฒ์ ์ฝ๋๋ก ๋ฐ๊ฟ์ ์จ๋ณด๋ฉด ์ด๋ฐ ์ฝ๋๊ฐ ๋์ค๊ฒ ๋ฉ๋๋ค. ์ฐธ๊ณ ๋ก, ๋งจ ๋ค์ ์๊ฐ ๊ฐ์ ๋๊ธฐ๋ ๋ถ๋ถ์ ์ ๋๋ฉ์ด์ ์ํ๊ฐ ํ์ฌ ์๊ฐ์ ์ํฅ์ ๋ฐ๋ค ๋ณด๋ ์ถ๊ฐ ์ธ์๋ก ๋๊ฒจ์ฃผ๊ฒ ๋๋ ๊ฒ์ ๋๋ค.
๊ฒฐ๊ตญ ์ฐ๋ฆฌ๋ ์ด์ ์ด ํจ์ ๋ฑ ํ๋๋ง ๊ตฌํํ๋ฉด ๋ฉ๋๋ค. ๋ณด์๋ค์ํผ ์ด๋ฒคํธ ๋ชฉ๋ก์ ์ธ์๋ก ๋ฐ๊ณ for๋ฌธ์ ๋์์ ์ํ๋ฅผ ์ ์ ํ๊ฒ ๋ง๋ค๊ณ ๊ฒฐ๊ณผ ์ํ๋ฅผ ๋ฐํํ๋ ํจ์์ ๋๋ค. ๊ต์ฅํ ๊ฐ๋จํ์ฃ .
๊ทธ๋ผ ๋ฌธ์ ๋ก ๋ค์ ๋์์์, ์ฐ๋ฆฌ๊ฐ ํํํ๊ณ ์ ํ๋ ์คํ์ ๊ตฌํํ๊ธฐ ์ํด์ ์ด๋ค ์ด๋ฒคํธ๊ฐ ํ์ํ ๊น์? ์ฒ์์ ์คํ์ด ์ด๊ธฐํ๋ ๋ ํ์ํ Init ์ด๋ฒคํธ๊ฐ ํ๋ ์์ผ๋ฉด ์ข์ ๊ฒ ๊ฐ๊ณ , ํ๋ฉด์ด ๋ฎ์ด๋ ๊ฑด Pushed ์ด๋ฒคํธ๋ก ํํํ๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋น ์ง ๋๋ Popped ์ด๋ฒคํธ๋ก ํํํ๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค. (์ฐธ๊ณ ๋ก ์ค์ ์ฝ๋์๋ ๋ ๋ง์ ์ด๋ฒคํธ๊ฐ ์์ต๋๋ค.)
๋์ ๋ชจ๋ธ๋งํ๊ธฐ
๊ทธ๋ฆผ์ผ๋ก ํํํด๋ณผ๊ฒ์. ์ ์ ๊ฐ ์ด๋ฒคํธ๋ฅผ ๋ฐํํ๋ฉด ํด๋น ์ด๋ฒคํธ๊ฐ aggregate๋ผ๋ ํจ์๋ก ๋ค์ด๊ฐ๊ฒ ๋๊ณ , ๊ทธ ๊ฒฐ๊ณผ๋ก ์ฐ๋ฆฌ๊ฐ ํํํ๊ณ ์ ํ๋ ์คํ์ ๋ฐํํ๊ฒ ๋ฉ๋๋ค. Pushed ์ด๋ฒคํธ๊ฐ ํ๋ ์ถ๊ฐ๋๋ฉด aggregate ํจ์์ ๊ฒฐ๊ด๊ฐ์ผ๋ก ํ๋ฉด์ด 2๊ฐ ๋ค์ด์๋ ์ํ๊ฐ ๋ฐํ๋ ๊ฑฐ๊ณ ์.
ํ๋ ๋ ์ถ๊ฐ๋๋ฉด ํ๋ฉด์ด 3๊ฐ๊ฐ ๋ฐํ๋ฉ๋๋ค. ์ฌ๊ธฐ์ Popped ์ด๋ฒคํธ๊ฐ ์ถ๊ฐ๋๋ฉด ๋งจ ์ ํ๋ฉด์ด ์์ด์ง๋๋ก aggregate ํจ์๋ฅผ ๊ตฌํํ๋ฉด ๋ฉ๋๋ค.
๋์ ๋ชจ๋ธ๋ง: ํ ์คํธ
๊ทธ๋ฌ๋ฉด ์ ํฌ๊ฐ ์ง ์ฝ์ด ๋ชจ๋ธ์ ์ด๋ป๊ฒ ํ ์คํธํ๋ฉด ์ข์๊น์? ๊ต์ฅํ ์ฌํํ๋ฐ์. ๋ค์๊ณผ ๊ฐ์ ์ฝ๋๋ฅผ ์ง๋ฉด ๋ฉ๋๋ค.
๋ฆฌ์กํธ์ ์ด๋ป๊ฒ ํตํฉํ๋์?
์ด๋ ๊ฒ ์์ฑํ ์ฝ์ด ๋ก์ง์ ์ด์ ๋ฆฌ์กํธ์ ํตํฉํด์ผ ํฉ๋๋ค. CoreStore๋ผ๋ ๊ฐ์ฒด๋ก ์ ํฌ ๋ก์ง์ ํ ๋ฒ ๊ฐ์ธ๊ณ ์. dispatch๋ผ๋ ์ด๋ฆ์ผ๋ก ์ด๋ฒคํธ๋ฅผ ์ถ๊ฐํ๋ ํจ์๋ฅผ ํ๋ ๋ง๋ค๊ณ , ๋ด๋ถ์์ aggregate ํจ์๊ฐ ์๋ํด ์ํ๋ฅผ ๊ณ์ฐํ๋๋ก ํ๊ณ ์. ํ์ฌ ์ํ๋ฅผ ๋ฐํํ๋ getState๋ผ๋ ํจ์์ ์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ์ฝ๋ฐฑ์ ํธ์ถํด์ฃผ๋ subscribe๋ผ๋ ์ธํฐํ์ด์ค๋ฅผ ๋ ธ์ถํ๊ณ , ๋ฆฌ์กํธ18์ ์๋ useSyncExternalStore๋ผ๋ API๋ฅผ ํตํด์ ๋ฆฌ์กํธ ๋ด๋ถ ์ํ์ ๋๊ธฐํํ ์ ์์์ต๋๋ค.
์ด๋ฒคํธ ์ค๋ ์ท์ ์ด์ฉํ ์ด์ ์ ๋ณด
์ค๊ณ๋ฅผ ์ํด๋ ํ์ค ์ธ๊ณ์์ ๋ฒ๊ทธ๋ ๋ฐ์ํ ์๋ฐ์ ์์ต๋๋ค. ๊ทธ๋ฐ๋ฐ ์ด๋ฒคํธ ๊ธฐ๋ฐ ์ค๊ณ๋ก ์ ํํ ์ดํ์๋ ๋ฒ๊ทธ๋ฅผ ์์ ํ๋ ์ํฌํ๋ก์ฐ ์์ฒด๊ฐ ๊ต์ฅํ ์ฌํํด์ก์ต๋๋ค.
์ด์ ์๋ ๋ฒ๊ทธ๊ฐ ๋ค์ด์์ ๋ ํด๋น ๋ฒ๊ทธ ์๋๋ฆฌ์ค๋ฅผ ๋ํ๋ฅผ ํตํด์ ์ ๋ฌ๋ฐ๊ณ , ์ด๋ฅผ ์ ๋ก์ปฌ์์ ์ฌํํ๋ ๋ฐ ์๊ฐ์ ์ข ์๊ณ ๋ ํ์ด์.
๋จ์๊ฐ ์ ์ ๊ฐ ์ดํดํ๊ณ ์๋ ๊ตฌ์กฐ์ ์์กดํ ์๋ฐ์ ์๋๋ฐ์. ๊ทธ๋ฌ๋ค ๋ณด๋ ์ ๋ณด๊ฐ ์ถฉ๋ถํ์ง ์์ ์ฌํํ๊ธฐ๊ฐ ์ฝ์ง ์์๊ณ , ๊ฒฐ๋ก ์ ์ผ๋ก๋ ์์ฌ์ํต ๋น์ฉ์ด ์ฆ๊ฐํ๊ณ ์ค์ ๋ฒ๊ทธ ์์ ๊น์ง ์๊ฐ์ด ๋ ์์๋๊ณ ๋ ํ์ต๋๋ค.
ํ์ง๋ง ์ด๋ฒคํธ ๊ธฐ๋ฐ์ผ๋ก ๋ฆฌํฉํ ๋งํ ์ดํ์๋ ์ํฉ์ด ๊ทธ๋๋ง ์ข ์ข์์ก์ต๋๋ค. ์ด์ ์ ์ ๋ ์ ์ฒด ์ด๋ฒคํธ ๋ชฉ๋ก๊ณผ ํ์ฌ ์ํ๋ฅผ ์ ํฌ์๊ฒ JSON์ผ๋ก ์ ๋ฌํ ์ ์๊ฒ ๋๊ณ , ์ ํฌ๋ ํด๋น ์ด๋ฒคํธ๋ฅผ ๋จธ๋ฆฟ์์ผ๋ก ๋ง ๊ตด๋ ค๋ณด๊ณ ๊ทธ๋ค์์ ์ฃผ์ JSON๊ฐ์ ๊ธฐ๋ํ๋ ๊ฒฐ๊ณผ๊ฐ ๋ง๋์ง ์ฒดํฌ๋ฅผ ํ๊ณ ์. ํด๋น ๊ธฐ๋๊ฐ์ ์ ํฌ ํ ์คํธ ์ฝ๋์ ์ถ๊ฐํด ์คํจํ๋ ํ ์คํธ๋ฅผ ๋ง๋ ๋ค์ ๊ฐ๋ณ๊ฒ ์์ ํ ์ ์๊ฒ ๋์์ต๋๋ค.
์ง๊ธ ์ฝ๋ ๋ณด๊ณ ๊ณ์ ๋ถ ์์ผ๋ฉด ์ฝ์ด ์ฝ๋ ์์ aggregate.spec.ts
(daangn/stackflow
)๋ผ๋ ํ์ผ์ด ์๋๋ฐ์.
๊ฑฐ๊ธฐ ๋ค๋ฅธ ํ ์คํธ๋ ๋ค๋ฅด๊ฒ ๋ง ์ค์ ๊ฐ๋ค์ด ํ๋ ์ฝ๋ฉ๋ ๊ฒ๋ค์ด ์๋๋ฐ ๊ทธ๊ฒ ์ ํฌ๊ฐ ์ ์ ๋ก๋ถํฐ ๋ฒ๊ทธ ์ ๋ณด๋ฅผ ๋ฐ์์ ํ ์คํธ ์ผ์ด์ค์ ์ถ๊ฐํ ๋ด์ฉ์ ๋๋ค.
Chapter 3. ํ๋ฌ๊ทธ์ธ ์ธํฐํ์ด์ค๋ก ์ฌ์ด ํ์ฅ์ฑ ์ ๊ณตํ๊ธฐ
์ด์ ์ฝ์ด ๊ธฐ๋ฅ ๊ตฌํ์ด ์ด๋ ์ ๋ ๋๋์, ์ ์ ๊ฐ ์ค์ค๋ก ํ์ฅํ ์ ์๋ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค์ด๋ณด๋ ค๊ณ ํฉ๋๋ค. ์ ๋ ํ์ฅ์ฑ์ ์ ์๋ฅผ โ์ด๋ค ์ผ์ด ์ผ์ด๋ฌ์ ๋ ์ ์ ๊ฐ ์ค์ค๋ก ์ํ๋ ์์ ์ ์ํํ ์ ์๊ฒ ๋ง๋๋ ๊ฒโ์ด๋ผ๊ณ ์๊ฐํ๊ณ ์์ต๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ์๋ถ๋ค์ด๋ผ๋ฉด ์ตํ ์๊ณ ๊ณ์๋ Callback ํจ์๋ฅผ ๋๊ธฐ๋ ์ธํฐํ์ด์ค๋ฅผ ๋ ์ฌ๋ฆฌ์๋ฉด ๊ฐ์ฅ ์ฌ์ธ ๊ฒ ๊ฐ์์.
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์์ ์ด ์ ์ํ ์์ ์ ์ฝ๋ฐฑ ํจ์๋ฅผ ๋ฑ๋กํ ์ ์๋ ์ธํฐํ์ด์ค๋ฅผ ๋ ธ์ถํด์, ํ์ฅ์ฑ์ ๊ฐ๋จํ๊ฒ ์ ์ ํํ ์ค ์ ์๋๋ฐ์. ์กฐ๊ธ ์ด๋ ต์ง๋ง, ์ด ๋ถ๋ถ์์ ๊ฐ์ฅ ํต์ฌ์ ์ธ ์์๊ฐ ๋ฐ๋ก ๋ฏธ๋ฆฌ ์ฌ๋ฃ๋ฅผ ์ค๋นํ๋ ๊ฒ๋๋ค. ์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ฐ๋ฐ์๊ฐ ์์๋ ๋ชปํ ๋ฐฉ์์ผ๋ก ์ ์ ๊ฐ ๋ง์๊ป ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฐ์กฐํด์ ์ธ ์ ์๊ฒ ๋ง๋๋ ๊ฒ ํต์ฌ์ธ๋ฐ, ์์๋ ฅ์ ์ ํ์ ๊ฐํ์ง ์๋๋ก ๋ฏธ๋ฆฌ ๋ ์ผ์ ๊น์๋๋ ๊ฒ ์ค์ํฉ๋๋ค.
ํ์ง๋ง ์ง๊ธ ๋น์ฅ ํ์ํ์ง๋ ์์ ์ฝ๋ฐฑ์ ๋ฏธ๋ฆฌ ๋ ธ์ถํ๊ฒ ๋๋ฉด, ์ฆ ์ฑ๊ธํ ์ถ์ํ๋ฅผ ํ๋ฉด, ์ผ๊ด๋์ง ๋ชปํ ์ธํฐํ์ด์ค๊ฐ ๋์์ ๊ต์ฅํ ์ฝ๊ฒ ๋ ๊ฑฐ์๊ฐ ๋ ์ ์๋๋ฐ์. ์ด ๋ถ๋ถ์ ์ด๋ป๊ฒ ์ค๊ณ์ ๋ น์ฌ๋ด์ ์ผ๊ด๋ ์ธํฐํ์ด์ค๋ก ๋ง๋ค ์ ์์๊น์?
์ด๋ฒคํธ ๊ธฐ๋ฐ ์ค๊ณ์์๋ ๊ต์ฅํ ์๋ฆ๋ต๊ณ ์ผ๊ด์ ์ผ๋ก ํด๊ฒฐ์ด ๊ฐ๋ฅํฉ๋๋ค. ์์ ์ค๊ณ์์ ํ ๊ฐ์ง ๊ฐ๋ ์ด ์ถ๊ฐ๋๋๋ฐ, ๋ฐ๋ก Effect๋ผ๋ ๊ฐ๋ ์ ๋๋ค.
์์ A-14 ๋ค์ด์ด๊ทธ๋จ์์ ์ดํํธ๋ฅผ ๊ณ์ฐํ๋ ๋จ๊ณ๋ฅผ ํ๋ ์ถ๊ฐํ๊ณ ์. ์ด๋ฒคํธ๊ฐ ์ถ๊ฐ๋๊ธฐ ์ ์ ์ฝ๋ฐฑ์ ํ๋ ํธ์ถํ๊ณ , ์ํ๊ฐ ๋ณํ ์ดํ์ ์ดํํธ๊ฐ ๋ฐ์ํ ๋ ์ฝ๋ฐฑ์ ํ๋ ํธ์ถํ๋ฉด ๋ฉ๋๋ค. ์ด๋ฐ ๊ตฌ์กฐ๋ ์ฐ๋ฆฌ๊ฐ ์ ์ธํด ๋์ ์ด๋ฒคํธ์ 1๋ 1 ๊ตฌ์กฐ๋ฅผ ๊ฐ์ง๊ฒ ๋ผ์, ์์ฐ์ค๋ฝ๊ฒ ์ค๊ณ์ ๋ง๋ฌผ๋ ค ์ผ๊ด๋ ๋ชจ์ต์ ๋ณด์ด๊ฒ ๋๊ณ ์. ๋ํ ์ฝ๋ฐฑ ํจ์๋ฅผ ๋ฑ๋กํ๋ ์ธํฐํ์ด์ค๋ฅผ ํตํด์ ์ ์ ๊ฐ ํด๋น ๋ชจ๋์ด ์ด๋ค ๋ผ์ดํ ์ฌ์ดํด์ ๊ฐ์ง๊ณ ๋์ํ๋์ง ์์ฐ์ค๋ฝ๊ฒ ํ์ต์ ์ ๋ํ ์ ์์ต๋๋ค.
์ฝ๋๋ก ํํํ๋ฉด, ์ ์ ์ ์ฅ์์๋ ์ด๋ฐ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋๊ฒ ๋ฉ๋๋ค.
๊ธฐ์กด์ ์ ์ธํ๋ Init, Push, Popped ์ด๋ฒคํธ๊ฐ ๊ทธ๋๋ก ์ฝ๋ฐฑ์ผ๋ก ๋ ธ์ถ๋๋ฉด์ ์ค๊ณ์ ์ธ๋ถ ์ธํฐํ์ด์ค๊ฐ ์ผ๊ด๋ ๋ชจ์ต์ ๊ฐ๊ฒ ๋ฉ๋๋ค.
ํ์ง๋ง ์ด๋ฐ ์ธํฐํ์ด์ค๋ ๋จ์ ์ด ์์ต๋๋ค. ์์ ์์ฐ์ค๋ฝ๊ฒ ํ์ตํ ์ ์๋ค๊ณ ์ ๊ฐ ์ด์ผ๊ธฐ ๋๋ ธ์๋๋ฐ, ๋ฐ๋ ๊ธ๋ถ๋ก ์ต์ ์ด ๋๋ฌด ๋ง์์ ์ ์ ๋ก ํ์ฌ๊ธ ํ์ต ๋น์ฉ์ ๊ต์ฅํ ๋์ด๊ฒ ๋ ์ ์์ต๋๋ค. ์์ ์ฝ๋๋ ์ด๋ฒคํธ๊ฐ ๋ณ๋ก ์์ด์ ํฌ๊ฒ ์ด์์ฒ๋ผ ๋ณด์ด์ง ์์ง๋ง, ๋ง์ฝ์ ์ด๋ฒคํธ๊ฐ 10๊ฐ ๋๊ฒ, 20๊ฐ 30๊ฐ ์๋ค๊ณ ํ๋ฉด ์ด๋จ๊น์? ์ฐ๋ฆฌ๊ฐ ๋ผ์ดํ ์ฌ์ดํด ํ ์ ๋ฏธ๋ฆฌ ์ค๋นํ๋ฉด ์ค๋นํ ์๋ก ์ ์ ๋ ํด๋น ๋ชจ๋์ ์ฌํํ๊ฒ ๋๋ผ๊ธฐ๋ณด๋ค๋ ๋ณต์กํ๊ณ ์ดํดํ๊ธฐ ํ๋ค๋ค๊ณ ๋๋ ์ ์์ต๋๋ค.
์ด๋ ํ์ฅ์ฑ์ ์ ์งํ๋ฉด์๋ ์ ์ ๊ฐ ๋ ์ฝ๊ฒ ๋๋ผ๋๋ก ๋ง๋ค ์ ์์๊น์?
GraphQL Envelop
์ด๋ ์ ์๊ฒ ์์ด๋์ด๋ฅผ ์ค ์ฝ๋๊ฐ ํ๋ ์๋๋ฐ, ๋ฐ๋ก ๊ทธ๋ํ GraphQL Envelop์ด๋ผ๋ ํ๋ก์ ํธ์ ๋๋ค. GraphQL ์คํค๋ง๋ ๋ค์ํ ๋ผ์ดํ ์ฌ์ดํด ํ ์ด ์กด์ฌํ๋๋ฐ์. ๊ต์ฅํ ์ ์ค๊ณ๋์ด ์์ง๋ง ์ด๋ณด์๋ถ๋ค์ด ๋ฏ์ด ์ฐ๊ธฐ์๋ ๊ต์ฅํ ์ด๋ ค์ด ๋ฌธ์ ๊ฐ ์์์ต๋๋ค.
์ด ๋ฌธ์ ๋ฅผ GraphQL Envelop์ ์ด๋ฐ ๋ฐฉ์์ผ๋ก ํด๊ฒฐํ๋๋ฐ์. ์ ์ ๊ฐ ๊ตฌ์ฒด์ ์ธ ์ต์ ์ ๋ชจ๋ฅด๋๋ผ๋ ํ๋ฌ๊ทธ์ธ์ ํตํด ์ฝ๊ฒ ํ์ฅ ๊ธฐ๋ฅ๋ค์ ๋ฌถ์ด์ ์ธ ์ ์๋๋ก ์ ๊ณตํฉ๋๋ค.
ํ๋ฌ๊ทธ์ธ ์ธํฐํ์ด์ค์ ํ์
์ฐ๋ฆฌ ๋ฌธ์ ๋ก ๋ค์ ๋์์์, ๊ทธ๋ฌ๋ฉด ๊ธฐ์กด์ ์ต์ ์ ๋๊ธฐ๋ ๊ฒ์ ์์ ๋ฒ๋ฆฌ๊ณ Array ์ต์ ์ ๋๊ฒจ๋ณด๋๋ก ํ๋ฒ ์์ ํด ๋ณผ๊น์?
์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ์ผ๋ก ๋ฐ๋๊ฒ ๋ ๊ฒ์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฐ์ฅ ํต์ฌ์ ์ผ๋ก, ์ต์ ์ ์ฌ๋ฌ ๊ฐ ๋๊ธธ ์ ์๋๋ฐ์. ์๋ ์ด๋ฏธ์ง์์ ์ผ์ชฝ, ์ต์ ์ฌ๋ฌ ๊ฐ๊ฐ ๋ฌถ์ธ ๊ฐ์ฒด๋ค์ด ์ค๋ฅธ์ชฝ์ ํ๋ฌ๊ทธ์ธ ์ธํฐํ์ด์ค๊ฐ ๋ฉ๋๋ค.
์ด๋ฐ ํ๋ฌ๊ทธ์ธ ์ธํฐํ์ด์ค๋ฅผ ํตํด์ ์ฌ๋ฌ ๊ฐ์ง ๊ธฐ๋ฅ์ ๋ฉ์ธ ๋ชจ๋ ์ ๋ฐ์ดํธ ์์ด ํ๋ฌ๊ทธ์ธ์ผ๋ก ์ ๊ณตํ ์ ์์ต๋๋ค.
๊ธฐ๋ฅ 1. historySyncPlugin()
์ฒซ ๋ฒ์งธ๋ก๋ ํ์คํ ๋ฆฌ API๋ ๋๊ธฐํํ๋ ๊ธฐ๋ฅ์ ๋๋ค. ๊ธฐ์กด์ karrotframe์์๋ ๋ฉ์ธ ๋ชจ๋์ ๋ก์ง๋ค์ด ๋์ง๋์ง ๋ถ์ด ์์๋๋ฐ, ํด๋น ๋ก์ง์ ๋ผ์ดํ ์ฌ์ดํด ํ ๊ณผ ํ์คํ ๋ฆฌ API์ onpopstate hook์ ์๋ก ์ฎ์ด์ ํ๋ฌ๊ทธ์ธ ์ธํฐํ์ด์ค๋ง์ผ๋ก ๊ตฌํํ ์ ์์์ต๋๋ค.
๊ธฐ๋ฅ 2. devtoolsPlugin()
๋ ๋ฒ์งธ๋ก๋ ์ด๋ฒคํธ์ ์ํ ๋ณํ๋ฅผ ํฌ๋กฌ ์ต์คํ ์ ์ ํตํด ์ค์๊ฐ์ผ๋ก ๋ณผ ์ ์๋ ๊ธฐ๋ฅ๋ ๋ฉ์ธ ๋ชจ๋ ์ ๋ฐ์ดํธ ์์ด ์ฝ๊ฒ ๋ง๋ค ์ ์์์ต๋๋ค.
๋ฆฌํฉํ ๋ง ๊ฒฐ๊ณผ
์ด๋ ๊ฒ ๋ฆฌํฉํ ๋ง๊ณผ ํจ๊ป ํ๋ฌ๊ทธ์ธ ์ธํฐํ์ด์ค๋ฅผ ์ ๊ณตํ๊ฒ ๋์๋๋ฐ์. ์ด๋ฅผ ํตํด ์์ ๋ฌธ์ ๋ค์ ํด๊ฒฐํ ์ ์์์ต๋๋ค.
- ์์กด์ฑ์ด ์๋ ์ฝ์ด ๋ก์ง์ผ๋ก ๋ถ๋ฆฌํด ์ฝ๊ฒ ํ ์คํธ
- ์ด๋ฒคํธ ์ค๋ ์ท์ ํตํด์ ์ด์ ์ ๋ณด์ ๋๋ฒ๊น ์ ์ฝ๊ฒ
- ์ฝ์ด ๋ก์ง์ ๋ถ๋ฆฌํด์ ๋ฆฌ์กํธ ์ธ์ ๋ค๋ฅธ ์ํ๊ณ์ ์ฝ๊ฒ ํตํฉ
- ๋ผ์ดํ ์ฌ์ดํด ํ ๊ณผ ํ๋ฌ๊ทธ์ธ ์ธํฐํ์ด์ค๋ก ์ฝ๊ฒ ํ์ฅ
์ฌ๊ธฐ์ ์กฐ๊ธ ๋ ๋์๊ฐ, ์ ํฌ๊ฐ ๊ฐ์ง ๋ฌธ์ ํด๊ฒฐ์ ๋์ด์์ ์ํ๊ณ๋ฅผ ๋ง๋๋ ๊ณผ์ ์ ๋จ์ด๋ฅผ ๋ฐ๊ฒฌํ์ต๋๋ค. ๋ง์ง๋ง์ผ๋ก ์ด ๋ถ๋ถ๋ ์๊ฐ๋ฅผ ๋๋ฆฌ๋ ค๊ณ ํฉ๋๋ค.
Chapter4. ์ํ๊ณ ๋ง๋ค๊ธฐ
ํ๋ฌ๊ทธ์ธ ์ธํฐํ์ด์ค๋ฅผ ๋ง๋ค๊ณ ์ ํํ๋ฉด์ ๊ต์ฅํ ์ฌ๋ฐ๋ ์ผ์ ๊ด์ฐฐํ ์ ์์๋๋ฐ์. ๋ฐ๋ก ๊ธฐ์กด์๋ ์๋ก์ด ๊ธฐ๋ฅ์ด ํ์ํ ๋ ์ ํฌํํ ์์ฒญ์ ํด์ฃผ์๋ ์์ผ๋ก ๊ตฌํ์ด ๋๋๋ฐ, ์ด์ ๋ ๋ช๋ช ๊ธฐ๋ฅ์ ํํด์ ํ๋ฌ๊ทธ์ธ ์ธํฐํ์ด์ค๋ฅผ ํตํด ์ ์ ๋ค์ด ์ง์ ๊ฐ๋ฐํ๋ ๋ชจ์ต์ ๋ณผ ์ ์์์ต๋๋ค.
์ ์ ๊ฐ ์ ํฌ ์ฝ๋์ ๋ํ ์ดํด ์์ด ์ข ๋ ๊ฐ๋ฒผ์ด ํํ๋ก ๊ธฐ์ฌํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์ด๋ฆฌ๊ฒ ๋ ๊ฑด๋ฐ์. ์ด๋ ๊ฒ ๊ธฐ์ฌ์ ๋ํ ์ง์ ์ฅ๋ฒฝ์ด ๋ฎ์์ง๋ฉด์ ํต์ฌ ์ ์ ๊ฐ ์๊ธฐ๊ฒ ๋๊ณ , ํต์ฌ ์ ์ ๋ค์ ์ ํฌ ์ํ๊ณ์ ํ๋ฌ๊ทธ์ธ ๋๋ ์ง์์ ์ธ ๋ ธํ์ฐ๋ฅผ ๊ณต์ ํด ์ฃผ์์ต๋๋ค. ๊ทธ๋ฌ๋ฉด์ ํต์ฌ ์ ์ ์ ํ๋์ ์ง์ผ๋ณด๊ณ ์๋ํด๋ณด๋ ์ ์ ๊ตฐ๋ ์์ํ ์๊ธฐ๊ธฐ ์์ํ์ต๋๋ค. ๊ทธ๋ ๊ฒ ์ปค๋ฎค๋ํฐ๊ฐ ์ฒ์ฒํ ํ์ฅ๋์ด๊ฐ๋ ๋ชจ์ต์ ๋ณผ ์ ์์์ต๋๋ค.
์ด๋ฐ ๋ชจ๋ธ์ ๋ณดํต โ์ค๋ฅด๋น ๋ชจ๋ธโ์ด๋ผ๊ณ ๋ถ๋ฅด๋๋ฐ์. ๋ง์ฝ์ ์ปค๋ฎค๋ํฐ ๋น๋ฉ์ ํ๊ณ ์ถ์ผ์ ๋ถ์ด ๊ณ์๋ค๋ฉด ํ๋ฒ ์ดํด๋ณด์ ๋ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค. FeConf์๋ ๋น๋๋ณด๋ฉด, ์ ๊ฐ์ ๋ฐํ์์ ์ค๊ฑฐ๋์ด์ ๋ค์ด ํต์ฌ ์ ์ ์ผ ๊ฒ์ด๊ณ , ์ ํฌ ์ด์ผ๊ธฐ๋ฅผ ๋ฃ๊ณ ๊ณ์ ์ฌ๋ฌ๋ถ์ด ์ปค๋ฎค๋ํฐ ํ์ฅ์ ์ฃผ์ธ๊ณต์ด๋ผ๊ณ ๋ณผ ์๋ ์๊ฒ ์ต๋๋ค.
์ด๋ ๊ฒ ์ ํฌ ๋น๊ทผ ๋ด๋ถ์์ ํ๋ฌ๊ทธ์ธ์ ์๋กญ๊ฒ ์ฐฝ์กฐํ๋ ๊ฒ๊ณผ ๋๋ถ์ด, ๋ค๋ฅธ ์ฌ๋์ด ๋ง๋ ๊ฒ์ ์ฐธ๊ณ ํด์ ์์ ๋ง์ ํ๋ฌ๊ทธ์ธ์ ๋ง๋๋ ์ผ์ด ์ผ์ด๋ฌ์ต๋๋ค. ์ต์ข ์ ์ผ๋ก๋ ๊ฐ ํ๋ง๋ค ํ๋ฌ๊ทธ์ธ๋ค์ด ๊ฝค ์์ด๊ฒ ๋์ต๋๋ค.
ํฅ์์ฑ
๊ทธ๋ฐ๋ฐ ์ํ๊ณ๋ ์ ์ค์ํ ๊น์? ๋ฐ๋ก ํ๋ซํผ์ ์ฑ๊ณต์ ์ํด์ ๊ผญ ํ์ํ ์์๊ฐ ํฅ์์ฑ์ด๊ธฐ ๋๋ฌธ์ ๋๋ค. ํฅ์์ฑ์ ์ฝ๊ฒ ์ด์ผ๊ธฐํ๋ฉด, ๋ด ์ฝ๋์ ์์ ์์ด๋ ์ฑ์ด ์๋์ผ๋ก ํฅ์๋๋ ๊ฒฝํ์ ๋ง๋๋ ๊ฑฐ๋ผ๊ณ ์๊ฐํ์๋ฉด ๋ฉ๋๋ค. OS๊ฐ ์ ๋ฐ์ดํธ๋๋ฉด์ OS๋ฟ ์๋๋ผ ๋ด๊ฐ ๋ง๋ ์ฑ์ ์ฑ๋ฅ์ด ์๋์ผ๋ก ๊ฐ์ ๋๋ ๊ฒ์ ์๋ก ๋ค ์ ์์ต๋๋ค. ์ด๋ฌํ ํฅ์์ฑ์ ์ ํฌ ํ๋ซํผ์ ๊ธฐ์ฌํ๋ ๊ฐ๋ฐ์๋ก ํ์ฌ๊ธ ์ด ํ๋ซํผ์ ๋ฏธ๋์ ๋ํ ์ ๋ขฐ๋๋ฅผ ๊ต์ฅํ ๋์ด๊ฒ ๋ฉ๋๋ค. ๊ทธ๋์ ๋ด ์ฝ๋๊ฐ ๋ฒ๋ ค์ง์ง ์์ ๊ฑฐ๋ผ๋ ์์ฌ ์์ด ๋ ๋ง์ ๊ธฐ์ฌ๋ฅผ ํ ์ ์๋๋ก ํฉ๋๋ค.
์ํ๊ณ๋ฅผ ๊ตฌ์ถํ๊ฒ ๋๋ฉด ๋ค๋ฅธ ์ฐจ์์์ ํฅ์์ฑ์ด ๊ณ์ ์ฆํญํ ์ ์๋ ๊ธฐ๋ฐ์ ๋ง๋ จํ ์ ์๋๋ฐ์. ๋๊ตฐ๊ฐ๊ฐ ์ ๊ท ํ๋ฌ๊ทธ์ธ์ ๋ง๋ค๊ฒ ๋๋ฉด ์ํ๊ณ๊ฐ ์ฑ์ฅํ๊ณ ์. ์ด๋ฅผ ํตํด์ ํฅ์์ฑ์ด ํ๋ณด๋ผ์ ๊ฒฐ๊ณผ์ ์ผ๋ก๋ ํ๋ซํผ ์ ๋ฐ์ ์ผ๋ก ์ฑ์ด ํฅ์๋ ์ ์๊ฒ ๋ฉ๋๋ค. ๋ฐ๋ผ์ ์ ํฌ ํ๊ฐ์ด ๋ฆฌ์์ค๊ฐ ๋ถ์กฑํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ํ์์๋ ํ๋ฌ๊ทธ์ธ ์ํ๊ณ๋ฅผ ํฅ์์ฑ ํ๋ณด์ ์ ํจํ ์ ๋ต์ผ๋ก ํ์ฉํ ์ ์์ต๋๋ค.
๋ง์น๋ฉฐ
์ง๊ธ๊น์ง, Stackflow๋ฅผ ๋ง๋ค๊ฒ ๋ ํต์ฌ ๋ฌธ์ ๋ถํฐ ํ์ค ์ธ๊ณ์ ๋ํ ๋ชจ๋ธ๋ง ๋ฐฉ๋ฒ, ํต์ฌ์ ์ถ์ถํด์ ๋ก์ง์ ํ ์คํธํ๋ ๊ฒ, ์ธํฐํ์ด์ค ์ค๊ณ์ ํ์ฅ์ฑ ์ํ๊ณ๊น์ง ์กฐ๊ธ ์์ง๋ง ์ด์ฒด์ ์ผ๋ก ์ค๋ช ์ ๋๋ ค๋ดค์ต๋๋ค.
์ป์๋ ๊ตํ์ ์ด๋ ์ต๋๋ค.
- ์ด๋ฒคํธ ๊ธฐ๋ฐ์ผ๋ก ์ค๊ณํ๊ธฐ
- ์์กด์ฑ ์๋ ์ฝ์ด ์ง์ ๋ง๋ค๊ธฐ.
- ๋ผ์ดํ ์ฌ์ดํด ๋ ธ์ถํ๊ธฐ
- ํ๋ฌ๊ทธ์ธ ์ธํฐํ์ด์ค ๋ง๋ค๊ธฐ
- ํต์ฌ ์ ์ ๊ฐ ๊ธฐ์ฌํ ์ ์๋ ํ๊ฒฝ ๋ง๋ค๊ธฐ
- ํฅ์์ฑ ์ฆ๋ช ํ๊ธฐ
์๋ง ์ฌ๊ธฐ ๊ณ์ ๋๋ถ๋ถ์ ๊ฐ๋ฐ์๋ถ๋ค์ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ์ ์ฃผ๋ก ํ์ค ๊ฑฐ๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๋งค์ผ ์น์ดํ๊ฒ ํ์ํ๊ณ , ๊ณ ๊ฐ์ด ์ด๋ค ๋ฌธ์ ๋ฅผ ๊ฒช๋์ง ๊ณต๊ฐํ๋ ค ๋ ธ๋ ฅํ๊ณ , UI๋ฅผ ๋๊น์ง ๋ค๋ฌ์ผ์ค ๊ฑฐ๋ผ๊ณ ์๊ฐํฉ๋๋ค.
์ด์ฉ๋ฉด ์ฌ๋ฌ๋ถ๋ค์ ์ ์ด์ผ๊ธฐ๋ฅผ ๋ค์ผ๋ฉด์ โ์ด๋ฐ ๊ธฐ์ ์ ๊นจ๋ํ ์คํ์ค์์๋ ๋ง๋ค ์ ์์ง ์๋โ, ๋๋ โ์ ๋ฐ ๊ธฐ์ ์ ๋๋ ๋ชป ๋ง๋ค ๊ฑฐ์ผโ ํ๋ ์๊ฐ์ ํ์ค์ง๋ ๋ชจ๋ฅด๊ฒ ์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ธฐ์ ๊ฐ๋ฐ์ ๋์๋ ์ข ๊ฑฐ๋ฆฌ๊ฐ ๋จผ ์ด์ผ๊ธฐ๋ผ๊ณ ์๊ฐํ์ค ์๋ ์์ ๊ฒ ๊ฐ์์.
ํ์ง๋ง ์ ๋ ๋น๊ทผ์์ 4๋ ๋์ ์๋น์ค์ ๊ธฐ์ ํ ๋ชจ๋ ์ผํด๋ณธ ๋ค, ์ด ๋์ด ์ ํ, ๊ทธ๋ฆฌ๊ณ ํ๋๋ ๋ค๋ฅด์ง ์๋ค๋ ๊ฒ์ ๊นจ๋ฌ์์ต๋๋ค. ์ ํฌ๋ ๋งค์ผ ์น์ดํ๊ฒ ํ์ํ์ต๋๋ค. ๊ฐ๋ฐ์๋ถ๋ค์ ์ด๋ค ๋ฌธ์ ๋ฅผ ๊ฒช๊ณ ์์๊น, ์ด๋ค API๊ฐ ์ด ์ง๋ ํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์๊น, ์ผ์ ์ ์๋ฐ๊ณผ ๋ฒ๊ทธ์ ๊ณ ํต ์์์๋ ๊ณ ๊ฐ์๊ฒ ๊ณต๊ฐํ๋ ค๊ณ ๋ ธ๋ ฅํ๊ณ , ๊ทธ ์ฌ์ด์์ API๋ฅผ ์ด๋ป๊ฒ ๋ค๋ฌ์์ง ๊ณ ๋ฏผํ์ต๋๋ค.
์ ๋ฅผ ํฌํจํด์ ์ด ์๋ฆฌ์ ๊ณ์ ์ฐ๋ฆฌ ๋ชจ๋๋ ๊ทธ๋ ๊ฒ ๋ฌด์์ด ๋ฌธ์ ์ธ์ง ๊น์ด ๊ณ ๋ฏผํ๊ณ ์์ผ์ค ๊ฑฐ๋ผ ๋ฏฟ์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ฐ๋ฆฌ๋ ๋ ๋์ ์ธํฐํ์ด์ค๊ฐ ๋ฌด์์ธ์ง์ ๋งค์ผ ๋์ ํ๊ณ ์์ต๋๋ค. ๊ทธ๋ฐ ๋ ธ๋ ฅ์ด ์ฐ๋ฆฌ๊ฐ ์ฌ๋ ์ธ์๊ณผ ๊ฐ๋ฐ์๋ค์ ์ถ์ ์กฐ๊ธ์ฉ ๋์์ง๊ฒ ๋ง๋ค๊ณ ์์ง ์์๊น์?
๋ง์ง๋ง์ผ๋ก ์ข์ ์ฌ๋ก๋ก ๋ฐํํ ์ ์๋๋ก ํต์ฌ ๊ณ ๊ฐ์ด ๋์ด์ฃผ์ ๋น๊ทผ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ถ๋คํํ ๊ฐ์ฌํ๋ค๋ ๋ง์ ์ ํ๊ณ ์ถ๋ค์. ๊ฐ์ฌํฉ๋๋ค.