๋งค๋ ์คํ ์์ค ํ๋ก์ ํธ์ ํ์ฑํ๋ฅผ ์ํด์ ๊ฐ์ต๋๋ ๊ฐ๋ฐ์ ํ์ฌ์ธ Hacktoberfest-2022๊ฐ ์ฌํด์๋ ๊ฐ์ต๋ฉ๋๋ค! ์์ง ํ๊ตญ์์๋ ์ด ์ข์ ํ์ฌ๊ฐ ์๊ฐ๋ณด๋ค ๋ง์ด ์๋ ค์ง์ง ์์ ๊ฒ ๊ฐ์์, Velog๋ฅผ ํตํ์ฌ ์ด๋ ๊ฒ ํ๋ณด๋ฅผ ํ๊ณ ์ ํฉ๋๋ค.
@TANSTACK/REACT-LOCATION์ ์ฌ์ฉํ์ฌ SPA๊ตฌ์กฐ์์ ์ฌ์ฉ๊ฐ๋ฅํ ํ์ผ ๊ธฐ๋ฐ ๋ผ์ฐํ ์์คํ ์ ๊ฐ๋ฐํฉ๋๋ค.
๊ณ ์ ์์๋ฅผ ๊ตฌํํ๊ธฐ ์ํด์๋ ๋ค์ํ๊ฒ ์กด์ฌํ๊ฒ ์ง๋ง, ์ด ๊ธ์์๋ 2๋ฒ์งธ ๋ฐฉ๋ฒ ์ ๋ํด์ ํ๊ณ์ ๊ณผ ๊ทธ ํ๊ณ์ ์ ๋ํํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ ๋ํด์ ๊ธฐ์ ํด๋ณด๊ฒ ์ต๋๋ค.
์ขํ๋ฅผ ํตํด์ ๊ตญ๋ด์ธ ํ๋ณํ๋ ๊ณผ์ ์ ์ดํด๋ด ๋๋ค.
๋ง์ฝ, ์ปฌ๋ฌ์์คํ ์ด ์๋ค๋ฉด, ์๋ฐฑ ๊ฐ๋ ๋๋ ํ์ผ์ ์ผ์ผ์ด ์ ๊ทผํด์ ์์์ ์์ ํ๊ณ ์์ด์ผํ ๊ฒ์ ๋๋ค. ๊ทธ๋ ๊ธฐ์ ์ปฌ๋ฌ ์์คํ ์ ํ๋ ์ฑ์์๋ ๋งค์ฐ ํ์ํ ์์คํ ์ ๋๋ค.
import๋ฅผ ์์ด๋ ๊ฒ ๋ง์ด ์ ์ด์ผํด! ์ ๊ฐ ํ ์ค ์ค์ฌ๋๋ฆฝ๋๋ค.
๋๊ฐ์ ํ๋ก์ ํธ๋ฅผ ์ฌ๋ฌ๊ฐ์ ์๋์ฐ๋ก ์ด์ด์ ์์ ํ๊ณ ์ถ์ ๊ทธ ๋ง์์ ๋ด์์ ๊ธ์ ์์ฑํฉ๋๋ค.
GeoJSON์ด๋ ๋ง๊ทธ๋๋ก ์ง๋ฆฌ์ ์ธ feature์ ๊ฐ์ง๊ณ ์๋ JSON ํฌ๋งท ํ์ ์ ๋ฐ์ดํฐ์ ๋๋ค.์๋ก์ด ํ์ ์ด ์๋๋ผ, ๊ทธ์ ์ฝ์์ด ์๋ JSON ํฌ๋งท์ ๋ฐ์ดํฐ์ ๋๋ค.GIS ๋ฐ ์ง๋ฆฌ์ ๋ฐ์ดํฐ๋ฅผ ์๊ฐํํ ๋, ๋ง์ด ์ฌ์ฉ๋๋ ํฌ๋งท์ ๋๋ค.
์ฐ๋ฆฌ๋ ์ฝ๋๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํด์ Git์ ์ฌ์ฉํฉ๋๋ค. ํนํ๋ ์์ฆ ๊ฐ๋ฐ์๋ผ๋ฉด ๋ชจ๋ฅด๋ ์ฌ๋์ด ์๋ Github ๋ฟ๋ง ์๋๋ผ BitBucket, Gitlab ๋ฑ์ด ์ฐ๋ฆฌ๊ฐ ๊น์ ์ข ๋ ๋ค๋ฃจ๊ธฐ ์์ํ๊ฒ, ๊ทธ๋ฆฌ๊ณ ๋ฐฐํฌ๋ฅผ ์ข ๋ ์ฝ๊ฒ ๋ง๋ค์ด์ฃผ๊ณ ์์ฃ .
์ฌ์ฉ์์๊ฒ ์ต์ ์ ๊ฒฝํ์ ์ ๋ฌํด์ฃผ๊ณ ์ ํ๋ ๋ง์์ ์ ๋ฌด๋ฅผ ์งํํ๋ฉด์ ํญ์ ์ปค์ง๊ณ ์๋ค. ํ์ง๋ง, ๋ด๊ฐ ์ ์ค์ฒํ๊ณ ์๋ ๊ฒ์ผ๊น? ๋ผ๋ ์๊ฐ์ด ๋ฌธ๋ ๋ค์ด์ ์ฌ์ฉ์์ ๋ํด์ ํ ๋ฒ ๋ ์๊ฐํด๋ณด๋ ๊ธ์ ์์ฑํ๋ ค๊ณ ํ๋ค.
์ฐ๋ฆฌ๋ ํญ์ ์๋น์ค๋ฅผ ๋ง๋ค ๋, ๊ฐ๋ฐ์ ํ๊ณ ๋ฐฐํฌ๋ฅผ ์งํํฉ๋๋ค. ๋ณ๊ฒฝ๋ ์ฝ๋๋ฅผ ์คํ์ํค๊ธฐ ์ํด์ ์๋ฒ๋ฅผ ์ฌ์คํํ๊ฒ ๋๋๋ฐ, ์์ฃผ ์ฐฐ๋์ ์ฌ์ฉ์๋ ์๋น์ค๊ฐ ์ฃฝ์ ํ๋ฉด์ ๋ณผ ๊ฐ๋ฅ์ฑ์ด ๋๋ค. PM2๋ฅผ ์ฌ์ฉํด์ ์ด ๋ฌธ์ ์ ์ ํด๊ฒฐํด๋ด ์๋ค.
"CSR, SSR, SSG ์กฐํ๋ฅผ ์ด๋ฃจ๋ค."์ ์น ๋ ๋๋ฌ ๋ฐฉ์์ ๊ฐ๋จํ ์ฉ์ด ์ค๋ช ๋ฐ ์น์ ์งํ ๊ณผ์ ์ ๋ํ ๋ด์ฉ์ ๋ค๋ฃน๋๋ค. ์์ ์ธ ๋จ์ด๋ ์น ์๋น์ค๋ฅผ ํด๋ณด์ จ๋ค๋ฉด, ์น ๊ฐ๋ฐ์๋ฟ๋ง ์๋๋๋ผ๋ ํ ๋ฒ์ฏค์ ๋ค์ด๋ดค์ ๋ฒํ ์ฉ์ด์ ๋๋ค.
์ต๊ทผ์ ์ต์ ํ ๊ด๋ จ๋ ๊ธ์ ์ฐพ์๋ณด๋ค๊ฐ TCO(Tail Call Optimization) ๋ผ๋ ๊ฐ๋ ์ ์ ํ์์ต๋๋ค. ๊ถ๊ธํด์ ์์๋ณด๋ ์ฌ๊ท์ ๊ด๋ จ๋ ๋ฉ๋ชจ๋ฆฌ ์ต์ ํ ๋ฐฉ๋ฒ์ผ๋ก์ ์ด๋ฒ ๊ธ์์๋ ์ด์ ๋ํ ๋ด์ฉ์ ์ค๋ช ํด๋ณด๊ฒ ์ต๋๋ค.
๋จผ์ ๊ธฐ์ ์ ์ผ๋ก ์ ์ฉ์ํค๊ธฐ ์ ์ Yarn2 (Berry)๊ฐ ๋์จ ๋ฐฐ๊ฒฝ๋ถํฐ ์์๋ด ์๋ค. ๋ฐ๋ก ๊ธฐ์ ์ ์ธ ๋ด์ฉ์ด ํ์ํ์ ๋ถ์ด๋ผ๋ฉด ์คํตํด๋ ์ข์ต๋๋ค.
React๋ฅผ ์ฌ์ฉํ๋ฉด์ Code Splitting์ ์ ์ฉํ๋ ค๋ฉด ๋ค์๊ณผ ๊ฐ์ด Dynamic import๋ฅผ ์ฌ์ฉํด์ ๊ตฌํํ ์ ์๋ค. ์ด ๋, Suspense์ Lazy๋ฅผ ์ฌ์ฉํ์ ๋, ํธ๋์ง์ ์ ์ฉ ๋ฐฉ๋ฒ์ ์ฝ๋๋ฅผ ํตํด์ ๊ตฌํ ๋ฐฉ๋ฒ๊ณผ ๋์ ๊ณผ์ ์ ๋ํด์ ํ์ธํด๋ณด์.
๋ณธ ํ๋ก์ ํธ๋ 2020๋ 12์ ํ๋ฌ๋์ ์ค๊ณ ๋ฐ ๋์์ธ์ ๋ง์น๊ณ ๊ฐ๋ฐ์ ์งํํ ํฌํธํด๋ฆฌ์ค ์ฌ์ดํธ์ ๋๋ค. ์ด๋ฒ ๊ธ์ ํตํด์ ํ์ฌ ํฌํธํด๋ฆฌ์ค๊ฐ ๋์ค๊ธฐ๊น์ง ์ด๋ค ๊ณผ์ ์ ๊ฑฐ์ณ์๊ณ , ์ด๋ค ์ด๋ ค์์ด ์์๋์ง์ ๋ํด์ ์์ฑํด๋ณด๋ ค๊ณ ํฉ๋๋ค. Key Point: UI/UX์ ๋ํด
์ผ๋ฐ CSS๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๊ณผ CSS-in-JS๋ฅผ ์ฌ์ฉํ๋ ๊ฒ ์ค์ ์ด๋ค ๊ฒ์ด ๋ ์ฑ๋ฅ์ ์ข์๊ฐ? ๋ผ๊ณ ๋ฌผ์ด๋ณด๋ฉด ์ฌ๊ธฐ์์๋ ์ด๋ ๊ฒ ๋๋ตํ๊ณ ์๋ค. JS ์์ด ์ ์ == ๋ ๋น ๋ฆ
์ด๋ฒ์ ์งํํ๋ ์ผ์์ React Component๋ก ์ ์ํด์ ๋ฐฐํฌํด์ผ ํ ์ผ์ด ์๊ฒผ๋ค. ๊ทธ๋์ ๊ธฐ์กด์ CRA๋ก ์ ์ํ Component๋ฅผ Babel์ ํตํ์ฌ Package๋ก ๋ฐฐํฌํ๋ ค๊ณ ์๊ฐํ๊ณ ์งํํ์๋ค.
Electron ์ฑ์ ๋น๋ํ๊ณ ๋ฐฐํฌ๊น์ง ๋ง์ณค๋ค๋ฉด ๊ณผ์ฐ ๋์ผ๊น? ๋๋ต์ NO. ์ฐ๋ฆฌ๋ ์ง์์ ์ผ๋ก ์ ์ง๋ณด์ ๋ฐ ๊ธฐ๋ฅ๊ฐ๋ฐ์ ์งํํด์ผ ํ๋ค. ๊ทธ๋ ๊ฒ ํ๊ธฐ์ํด์ ์ ๋ฐ์ดํธ๋ฅผ ์งํํด์ผ ํ๋ค.
์ด๋ฒ ๊ธ์์๋ Electron์ ์ ์ฉ์ํด์ผ๋ก์จ ๊ธฐ์กด React ์ฝ๋์์ ๋ฌ๋ผ์ง๋ ๋ถ๋ถ์ ์์ ํ๊ณ , ํ๋ซํผ๋ณ๋ก ๋น๋ํ์ฌ Electron App์ ์คํ์ํค๋ ๊ณผ์ ๊น์ง ์งํํด๋ณด๊ฒ ๋ค!