Wed Aug 12 2020
...
FastComments๊ฐ React๋ก ์ ํ๋์์ต๋๋ค
! ์ด ๊ธ์๋ ๊ธฐ์ ์ฉ์ด๊ฐ ํฌํจ๋์ด ์์ต๋๋ค
์๋ก์ด ๊ธฐ๋ฅ
FastComments๋ ์ด์ VanillaJS ์์ ฏ๊ณผ ๊ธฐ๋ฅ์ ์ผ๋ก ๋๋ฑํ React ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ถ์์ต๋๋ค.
์ฐ๋ฆฌ๋ ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ fastcomments-react๋ผ๊ณ ๋ถ๋ฅด๊ธฐ๋ก ํ์ต๋๋ค. ์์ค ์ฝ๋๋ฅผ ํฌํจํ GitHub ์ ์ฅ์๋ ์ฌ๊ธฐ์์ ํ์ธํ ์ ์์ต๋๋ค.
์ ์ฅ์์๋ ์์ ฏ ์ฌ์ฉ ์์ ๋ ํฌํจ๋์ด ์์ต๋๋ค.
NPM์ ์์ผ๋ฉฐ, ์ฌ๊ธฐ์์ ์ฐพ์ ์ ์์ต๋๋ค.
์๋ ๋ฐฉ์
์ด ์๋ก์ด ์ปดํฌ๋ํธ์ ์๋ ๋ฐฉ์์ React ์ปดํฌ๋ํธ๊ฐ ๊ธฐ์กด FastComments ์์ ฏ์ ๋ํผ ์ญํ ์ ํ๋ค๋ ๊ฒ์ ๋๋ค.
๋ฐ๋ผ์ ๊ธฐ์กด ์ปดํฌ๋ํธ์ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ฑฐ๋ ๋ฒ๊ทธ๋ฅผ ์์ ํ๋ฉด ์ฆ์ ์ด์ ์ ๋๋ฆด ์ ์์ต๋๋ค!
์๋ก์ด ์ปดํฌ๋ํธ๊ฐ ํ์ํ ์ด์ ๋?
์ฐ๋ฆฌ๋ FastComments VanillaJS ์์ ฏ์ ๋น์ฆ๋์ค์ ํต์ฌ์ผ๋ก ๋ง๋ค๊ธฐ ์ํด (ํต์ฌ ๋ฐฑ์๋์ ํจ๊ป) ์ค๊ณํ์ต๋๋ค. ์ฆ, ์ง๊ธ์ฒ๋ผ ํ์ฅํ ์ ์๋๋ก ์ค๊ณํ ๊ฒ์ ๋๋ค.
์ด ์๋ก์ด React ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด๋ FastComments๋ฅผ ์ ํ๋ฆฌ์ผ์ด์ ์ ํตํฉํ ์ ์์์ง๋ง, ์ด๋ ์ฑํํ๋ ๋ฐ ํฐ ์ฅ์ ๋ฌผ์ด ๋ ์ ์์ต๋๋ค. React๋ฅผ ์ง์ ์ง์ํจ์ผ๋ก์จ ์ด๋ฌํ ์ ํ์ ๊ณ ๊ฐ์๊ฒ FastComments ์ฑํ์ ๋์ฑ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA)?
FastComments๋ ๋ณธ์ง์ ์ผ๋ก SPA๋ฅผ ์ง์ํฉ๋๋ค. ์ปดํฌ๋ํธ๋ config ๊ฐ์ฒด์ ๋ณํ๋ฅผ ๋ชจ๋ํฐ๋งํ๋ฏ๋ก ํ์ฌ ํ์ด์ง(urlId๋ผ ๋ถ๋ฆฌ๋)๋ฅผ ์ ๋ฐ์ดํธํ๋ฉด ์์ ฏ์ด ๋ค์ ๋ ๋๋ง๋ฉ๋๋ค.
๊ธฐ์กด ๊ณ ๊ฐ์๊ฒ ๋ณ๊ฒฝ๋๋ ์ฌํญ
๊ธฐ์กด ๊ณ ๊ฐ์๊ฒ๋ ์๋ฌด ๋ณ๊ฒฝ ์ฌํญ์ด ์์ต๋๋ค - ๊ทธ๋ฆฌ๊ณ ์๋ก์ด ํ๋ก์ ํธ์ ๋ํด FastComments์ VanillaJS ๋ฒ์ ์ ์ฌ์ฉํ๋ ๋ฐ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. fastcomments-react๋ ํญ์ FastComments์ VanillaJS ๋ฒ์ ์ ์์กดํ๊ฒ ๋ฉ๋๋ค. Angular ๋๋ Vue ์ปดํฌ๋ํธ๋ฅผ ์ถ์ํ๋ฉด ๋์ผํ ๋ชจ๋ธ์ ๋ฐ๋ฅผ ๊ฒ์ ๋๋ค.
์ฐ๋ฆฌ์ VanillaJS ์์ ฏ์ FastComments์ ์ผ๊ธ ์๋ฏผ์ ๋๋ค. ์ด๋ฒ ๋ฆด๋ฆฌ์ค๋ ์ฐ๋ฆฌ์ ์ธํ๋ผ์ ์ถ๊ฐ์ ์ธ ๊ฒ์ ๋๋ค.
๋ํ, VanillaJS ์์ ฏ์ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ์ง ์๋ ์ ์ ํ์ด์ง์ ๊ฐ์ ๋ชจ๋ ์น ํ์ด์ง์ ์๋ฒ ๋ ๋๊ธ์ ์ฝ์ ํ๋ ํ๋ฅญํ ์๋ฃจ์ ์ผ๋ก ๋จ์ ์์ต๋๋ค.
๊ฒฐ๋ก
fastcomments-react ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ฏธ๋์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ถ์ํจ์ผ๋ก์จ, ์ฐ๋ฆฌ๋ ๊ฐ๋ฐ์๋ค์ด ํ๋ ๊ฐ๋ฐ ๋ฐฉ๋ฒ๋ก ์ ์ฌ์ฉํ๋ฉด์ FastComments๋ฅผ ๋ ์ฝ๊ฒ ์ฑํํ ์ ์๋๋ก ํ๊ธฐ๋ฅผ ํฌ๋งํฉ๋๋ค.
๊ฐ์ฌํฉ๋๋ค!
