๊ตฌ์ธ ๊ณต๊ณ ๋ฅผ ๋ณด๋‹ค ๋ณด๋ฉด ์š”์ฆ˜ ์ž์ฃผ ๋ณด์ด๋Š” ๋ฌธ๊ตฌ๊ฐ€ ์žˆ๋‹ค.

โ€œReact, React Native, WebView ๊ฒฝํ—˜ ์šฐ๋Œ€โ€

โ€œ์›น๊ณผ ์•ฑ ๋‘˜ ๋‹ค ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋Š” ๊ฐœ๋ฐœ์žโ€

์›น๋งŒ ํ•ด์˜ค๋˜ ์ž…์žฅ์—์„œ React Native๋Š” ํ•œ ๋ฒˆ์ฏค ๋ฐฐ์›Œ์•ผ์ง€ ํ•˜๊ณ  ๋ฏธ๋ค„๋‘” ๊ธฐ์ˆ ์ด์—ˆ๋‹ค.

๊ทธ๋Ÿฐ๋ฐ ์ด์ œ๋Š” ์„ ํƒ์ด ์•„๋‹ˆ๋ผ, ๊ธฐ๋ณธ ์˜ต์…˜์ฒ˜๋Ÿผ ๋‹ฌ๋ ค ์žˆ๋‹ค.


ํšŒ์‚ฌ๋“ค๋„ ์•ฑ์œผ๋กœ ๊ฐ€๋Š” ์ถ”์„ธ

์ง€๊ธˆ ์šด์˜ ์ค‘์ธ heyb๋„ ์‚ฌ์‹ค ์ถ”ํ›„์—๋Š” WebView๋ฅผ ์–น์–ด ์•ฑ๊นŒ์ง€ ๋งŒ๋“ค์–ด๋ณผ ์ƒ๊ฐ์ด์—ˆ๋‹ค.

์˜ˆ์ „์— ์ด๋žœ๋“œ์˜ฅ์…˜ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•  ๋•Œ๋„, ์›น์œผ๋กœ ๊ฒฝ๋งค ์„œ๋น„์Šค๋ฅผ ๋จผ์ € ๊ตฌ์ถ•ํ•˜๊ณ 

์ž˜ ๋˜๋ฉด ์•ฑ์œผ๋กœ ํ™•์žฅํ•  ๊ณ„ํš์ด ์žˆ์—ˆ๋Š”๋ฐ ๊ฒฐ๊ตญ ์ผ์ •๊ณผ ๋ฆฌ์†Œ์Šค ๋•Œ๋ฌธ์— ๋ชป ํ–ˆ์—ˆ๋‹ค.

์ด๋Ÿฐ ์‚ฌ๋ก€๋Š” ๊ฑฐ์˜ ๋ชจ๋“  ํŒ€์ด ๋น„์Šทํ•˜๋‹ค.

์ฒ˜์Œ์—” ์›น์œผ๋กœ ๊ฐ€๋ณ๊ฒŒ MVP๋ฅผ ๋งŒ๋“ค๊ณ ,

์„œ๋น„์Šค๊ฐ€ ์ปค์ง€๋ฉด ์œ ์ € ํŽธ์˜์„ฑ์„ ์œ„ํ•ด ์•ฑ์œผ๋กœ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ํ™•์žฅํ•œ๋‹ค.

์š”์ฆ˜์—” ์ด๊ฒŒ ๋„ˆ๋ฌด ๋‹น์—ฐํ•œ ํ๋ฆ„์ด๋ผ

์ดˆ๋ฐ˜๋ถ€ํ„ฐ โ€œ์›น + ์•ฑ ๋™์‹œ ์œ ์ง€๋ณด์ˆ˜ ๊ฐ€๋Šฅํ•œ ๊ตฌ์กฐ๋กœ ๊ฐ€์žโ€ ๋Š” ์ด์•ผ๊ธฐ๊ฐ€ ํ”„๋กœ์ ํŠธ ์ดˆ๊ธฐ์— ๊ผญ ๋‚˜์˜จ๋‹ค.


WebView + React Native

์ฒ˜์Œ๋ถ€ํ„ฐ ์•ฑ ์ „์ฒด๋ฅผ ๋„ค์ดํ‹ฐ๋ธŒ๋กœ ๋งŒ๋“œ๋Š” ๊ฑด ๋ˆ๊ณผ ์‹œ๊ฐ„์ด ๋„ˆ๋ฌด ๋งŽ์ด ๋“ ๋‹ค.

๊ทธ๋ž˜์„œ ๋Œ€๋ถ€๋ถ„์€ ๊ธฐ์กด ์›น์„ ์ตœ๋Œ€ํ•œ ์‚ด๋ฆฌ๊ณ ,

ํ•„์ˆ˜์ ์ธ ํ™”๋ฉด์ด๋‚˜ ํ‘ธ์‹œ ์•Œ๋ฆผ ๊ฐ™์€ ๊ธฐ๋Šฅ๋งŒ React Native๋กœ ๊ฐ์‹ผ๋‹ค.

์ด๊ฒŒ ๋ฐ”๋กœ WebView + React Native ๊ตฌ์กฐ๋‹ค.

ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ์•ฑ์ด๋ผ๊ณ  ๋ถ€๋ฅด๊ธฐ๋„ ํ•œ๋‹ค.

๊ฒฐ๊ตญ ์‹ค๋ฌด์—์„œ ์ด ๊ตฌ์กฐ๋ฅผ ๋‹ค๋ค„๋ณด์ง€ ์•Š์œผ๋ฉด,

๋นŒ๋“œ๋‚˜ ๋ฐฐํฌ ๋‹จ๊ณ„์—์„œ ๊ผญ ๋ง‰ํžˆ๊ฒŒ ๋œ๋‹ค.


ย ํ”ํžˆ ๋“ฃ๊ฒŒ ๋˜๋Š” ์š”๊ตฌ์‚ฌํ•ญ

  • ๊ธฐ์กด ์›น์„ ์Šคํ† ์–ด์— ์•ฑ์œผ๋กœ ์˜ฌ๋ ค๋‹ฌ๋ผ๋Š” ์š”์ฒญ

  • WebView๋กœ ๊ฐ์‹ธ๋”๋ผ๋„ ํ‘ธ์‹œ ์•Œ๋ฆผ์€ ์•ฑ์œผ๋กœ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•˜๋Š” ์ƒํ™ฉ

  • ์‚ฌ์ง„ ์ดฌ์˜, ์œ„์น˜ ์ •๋ณด ๋“ฑ ๋ธŒ๋ผ์šฐ์ €์—์„  ๋ถˆํŽธํ•œ ๊ธฐ๋Šฅ์„ ์•ฑ์—์„œ ์ฒ˜๋ฆฌํ•˜๊ณ  ์‹ถ์–ดํ•จ

  • ํ•œ ํŒ€์ด ์›น๊ณผ ์•ฑ์„ ๋™์‹œ์— ์œ ์ง€๋ณด์ˆ˜ํ•  ์ˆ˜ ์žˆ๋Š” ๊ตฌ์กฐ ์š”์ฒญ

์ด ๋ชจ๋“  ๊ฑธ ์•ˆ์ „ํ•˜๊ฒŒ ํ•˜๋ ค๋ฉด React Native๋ฅผ ์กฐ๊ธˆ์ด๋ผ๋„ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•œ๋‹ค.


์กฐ๊ธˆ ๋Šฆ์—ˆ์ง€๋งŒ, ์ง€๊ธˆ์ด ๋”ฑ ์ข‹๋‹ค

์ฒ˜์Œ์—” Expo ๊ฐ•์˜๋ฅผ ๋”ฐ๋ผํ•˜๋ฉด์„œ ์ปค๋ฎค๋‹ˆํ‹ฐ ์•ฑ ์ •๋„๋Š” ๋งŒ๋“ค์–ด๋ณผ ์ˆ˜ ์žˆ๊ฒŒ ๋๋‹ค.

๋•๋ถ„์— React Native ๊ตฌ์กฐ์™€ Expo์˜ ๋น ๋ฅธ ๊ฐœ๋ฐœ ํ๋ฆ„์„ ๋Œ€์ถฉ ๊ฐ ์žก์•˜๋‹ค.

์ด์ œ๋Š” CLI๋กœ ๋„˜์–ด๊ฐ€์„œ ์ง์ ‘ ๋นŒ๋“œ ๊ตฌ์กฐ๋ฅผ ๋งŒ์ง€๊ณ  ์‹ถ์–ด์กŒ๋‹ค.

์ง€๊ธˆ์€ ๋ง›์ง‘ ์ง€๋„ ์•ฑ ๊ฐ•์˜๋ฅผ ๋ณด๋ฉด์„œ React Native CLI์™€ NestJS๋ฅผ ๊ฐ™์ด ์จ์„œ ํ”„๋ก ํŠธ์™€ ๋ฐฑ์—”๋“œ๋ฅผ ์ง์ ‘ ๋งŒ๋“ค์–ด๋ณด๋ ค ํ•œ๋‹ค.

์•ˆ ํ•ด๋ณธ ๊ฑธ ๋‹ค ๊ฒฝํ—˜ํ•ด๋ด์•ผ ๋‚˜์ค‘์— ์‹ค๋ฌด์—์„œ ์‹ค์ˆ˜๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•˜๋‹ค.

์‚ฌ์‹ค ๋ฐฑ์—”๋“œ๋„ ์ œ๋Œ€๋กœ ๋ฐฐ์›Œ๋ณด๊ณ  ์‹ถ์—ˆ๋Š”๋ฐ ์ด๋ฒˆ์— ๊ฐ™์ด ํ•ด๋ณด์ž๋Š” ๋งˆ์Œ์ด๋‹ค.

๊ธฐ๊ธฐ ๋ฐฐํฌ๋Š” ์•„์ง ๊ฐœ๋ฐœ์ž ๊ณ„์ •์ด ์—†์–ด์„œ ์ง์ ‘ ๋ชป ํ•˜๊ณ  ์žˆ์ง€๋งŒ,

๊ธฐ๋ณธ ํ๋ฆ„์€ ์ •๋ฆฌํ•ด๋‘๊ณ  ๋‚˜์ค‘์— heyb์—์„œ ์•ฑ ๋งŒ๋“ค ๋• ๋ฐ”๋กœ ์จ๋จน์„ ๊ณ„ํš์ด๋‹ค.

๋งˆ์ง€๋ง‰์œผ๋กœ, ์ด๋ ‡๊ฒŒ ๋ฐฐ์šฐ๊ณ  ์ •๋ฆฌํ•œ ๋‚ด์šฉ์„

ํ˜„์žฌ RN๊ณผ WebView๋กœ ์•ฑ์„ ์œ ์ง€๋ณด์ˆ˜ํ•˜๋Š” ์‹ค๋ฌด์ž๋“ค์—๊ฒŒ ์ง์ ‘ ๋ฌผ์–ด๋ณด๊ณ 

์š”์ฆ˜ ํŠธ๋ Œ๋“œ์— ๋งž๊ฒŒ ๋‹ค๋“ฌ์–ด๋‘๋ ค๊ณ  ํ•œ๋‹ค.

์กฐ๊ธˆ ๋Šฆ์€ ๋งŒํผ, ์ œ๋Œ€๋กœ ํ•ด๋‘๋ฉด ๋œ ํ—ค๋งฌ ๊ฑฐ๋ผ๊ณ  ๋ฏฟ๋Š”๋‹ค.


๋งˆ์น˜๋ฉฐ

React Native๋Š” ์ด์ œ ์„ ํƒ์ง€๊ฐ€ ์•„๋‹ˆ๋ผ

์›น ๊ฐœ๋ฐœ์ž์˜ ์ž์—ฐ์Šค๋Ÿฌ์šด ๋‹ค์Œ ๋‹จ๊ณ„๊ฐ€ ๋˜์–ด๋ฒ„๋ ธ๋‹ค.

heyB๋„, ์ด๋žœ๋“œ์˜ฅ์…˜๋„, ๋‚ด๊ฐ€ ๋ณธ ๋Œ€๋ถ€๋ถ„์˜ ํŒ€๋„ ๊ฒฐ๊ตญ์€ ์•ฑ์œผ๋กœ ๊ฐ€๋ ค ํ–ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์•ž์œผ๋กœ๋„ ๊ทธ๋Ÿด ๊ฒƒ์ด๋‹ค.

์›น๋งŒ์œผ๋กœ๋„ ์ถฉ๋ถ„ํ•œ ์„œ๋น„์Šค๋Š” ์ ์  ์ค„์–ด๋“ ๋‹ค.

๋Šฆ๊ธฐ ์ „์— ์ค€๋น„ํ•ด๋‘์ž.

ํ•ด๋‘๋ฉด ํ™•์‹คํžˆ ๋œ ๊ณ ์ƒํ•œ๋‹ค.