[React Native] CodePush ๋์ ์ผ๋ก ๋น ๋ฅธ ์ ๋ฐ์ดํธ ๋ฐฐํฌํ๊ธฐ
June 15, 2023โฃ 3 minCodePush๋ฅผ ๋์ ํ์ฌ ๋น ๋ฅด๊ฒ ์ฌ์ฉ์์๊ฒ ์ ๋ฐ์ดํธ ๋ฒ์ ์ ๋ฐฐํฌํด๋ณด์.
CodePush๋ฅผ ๋์ ํ์ฌ ๋น ๋ฅด๊ฒ ์ฌ์ฉ์์๊ฒ ์ ๋ฐ์ดํธ ๋ฒ์ ์ ๋ฐฐํฌํด๋ณด์.
์ต์ ์ ํ์ ์ํ Modal์ ๊ตฌํํ๋ฉด์ ํฉ์ฑ ์ปดํฌ๋ํธ ํจํด์ ์ฌ์ฉํด๋ณด์๋ค. ๋น์ทํ ์๋ก์ด ์ปดํฌ๋ํธ๊ฐ ํ์ํด์ง๋๋ผ๋ ์ปดํฌ๋ํธ๋ค์ ์กฐํฉํ์ฌ ๋น ๋ฅด๊ฒ ๊ตฌํํ ์ ์์๊ณ ์ปดํฌ๋ํธ์ ์ฌ์ฌ์ฉ์ฑ์ ๋์ผ ์ ์์๋ค.
React Native ์์ ์ข์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ Form์ ๋ง๋ค์ด๋ณด์.
์ต๊ทผ zustand๋ฅผ ์ด์ฉํ์ฌ ์ํ ๊ด๋ฆฌ๋ฅผ ํด๋ณด์๋๋ฐ ์ฌ์ฉ๋ฒ์ด ์ ๋ง ๊ฐ๋จํ๋ค๊ณ ๋๊ผ๋ค. ํน์ดํ ์ ์ redux, recoil ๊ณผ ๋ฌ๋ฆฌ ์ฑ์ ๊ฐ์ธ๋ ๋ณ๋์ providerโฆ
flexbox๋ฅผ ์ ํํ ์ดํดํ๊ณ ๋ค์ํ ์์ฑ์ ํ์ฉํด ๋ณด์.
Next์ ์ด๋ฏธ์ง์ปดํฌ๋ํธ ๋ ์๋์ ๊ฐ์ ๋ค์ํ ์ฑ๋ฅ ์ต์ ํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค. ํฅ์๋ ์ฑ๋ฅ: ์ต์ ์ด๋ฏธ์ง ํ์์ ์ฌ์ฉํ์ฌ ๊ฐ ๋๋ฐ์ด์ค์ ๋ํ ์ฌ๋ฐ๋ฅธ ํฌ๊ธฐ์ ์ด๋ฏธ์ง ์ ๊ณต ์๊ฐ์ ์์ ์ฑ: ์๋์ผ๋ก layout shiftโฆ
js ํธ์ด์คํ (Hoisting)์ด๋ ๋ณ์๋ ํจ์๋ฅผ ์ ์ธํ์ ๋ ์ฝ๋ ๋ฒ์(scope) ๋ด์ ์ต์๋จ์ผ๋ก ๋์ด์ฌ๋ ค์ง๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๋ ํ์์ด๋ค. ํํ var ๋ ํธ์ด์คํ ์ด ๋ฐ์ํ๋ฉฐ, const ์ letโฆ
React Hook์ ์ด๋ค ๋ฐฉ์์ผ๋ก ๋์ํ ๊น? Hook์ ๊ฐ๋จํ ๊ตฌํํด๋ณด๋ฉฐ ๋์ ๋ฐฉ์์ ์ดํดํด๋ณด์.
๊ต์ฐจ ์ถ์ฒ ๋ฆฌ์์ค ๊ณต์ (Cross-Origin Resource Sharing)์ ๋ํด ์์๋ณด์.
์ด๋ฒคํธ ๋ฒ๋ธ๋ง๊ณผ ์บก์ณ๋ง, ๊ทธ๋ฆฌ๊ณ ์ด๋ฒคํธ ์์์ ๋ฌด์์ธ์ง ๊ตฌํํด๋ณด๋ฉฐ ์ดํดํด๋ณด์.
React Native CLI(0.60+)๋ก ๊ฐ๋ฐํ ์ฑ์ ๋น๋ํ๊ณ ๋ฐฐํฌํด๋ณด์.
React Native CLI(0.60+)์์ Splash Screen์ ์ ์ฉํด๋ณด์.
์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฑ๊ธ์ค๋ ๋์ด๋ค. ์ด๋ป๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฑ๊ธ์ค๋ ๋์ด๋ฉด์ ๋น๋๊ธฐ์ธ ๊ฒ์ผ๊น? ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ด๋ป๊ฒ ๋์ํ๋์ง ๋ด๋ถ ์๋ฆฌ์ ๋ํด ์์๋ณด์.
Lint๋ ๋ณดํธ๋ผ๊ธฐ๋ผ๋ ๋ป์ธ๋ฐ ํ๋ก๊ทธ๋๋ฐ ์ชฝ์์๋ ์๋ฌ๊ฐ ์๋ ์ฝ๋์ ํ์๋ฅผ ๋ฌ์๋๋ ๊ฒ์ ์๋ฏธํ๋ค. ์ฆ ESLintโฆ
Babel์ ์ต์ ์ js์ฝ๋๋ฅผ normalํ ์์ ์ js์ฝ๋๋ก ๋ณํํด์ค๋ค. ๋ง์ ๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ๋ค์ด ES6 ๋ฌธ๋ฒ์ ์ด๋์ ๋ ์ง์ ํ์ง๋ง ๋ถ์กฑํ ์ํฉ์ด๋ค. ๋ฐ๋ผ์ ๋ฐ๋ฒจ์ ํตํด ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง(Cross Browsingโฆ
Webpack์ ์ฌ๋ฌ๊ฐ ํ์ผ์ ํ๋์ ํ์ผ๋ก ํฉ์ณ์ฃผ๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ(Module bundler) ์ด๋ค. Webpack์ ์ฐ๋ ์ด์ ๋ ๋ฌด์์ผ๊น? ํ์คํ๋ ๋ชจ๋ํ ๊ธฐ๋ฒ์ด ๋ฑ์ฅํ ๊ฒ์ ES2015๋ถํฐ์ธ๋ฐ, Webpackโฆ