2024๋…„ ํšŒ๊ณ 

RafaelRafael
3 min read
๐Ÿคช
๋ผ๊ณ  ์“ฐ๊ณ  ๊ทธ๋ƒฅ ์˜์‹์˜ ํ๋ฆ„๋Œ€๋กœ ๋งํ•˜๊ธฐ

๊ฐœ์š”

๋ฒŒ์จ 2์›” ์ค‘์ˆœ์ด๊ธด ํ•˜์ง€๋งŒ 2024๋…„ ํšŒ๊ณ ๋ฅผ ๊ฐ„๋‹จํžˆ ์ ์–ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ์žฌ๋ฐŒ๋Š” ๊ฒƒ์€ 2024๋…„ 1์›”๋ถ€ํ„ฐ 2025๋…„ 1์›”๊นŒ์ง€ ์ „ ์ง์žฅ์— ๋‹ค๋…”๊ณ  ์—ฐ๋ง์— ์ฐฝ์—…์„ ๊ฒฐ์ •ํ–ˆ์œผ๋‹ˆ ๊ฑฐ์˜ ๊ทธ ์ด์•ผ๊ธฐ๋งŒ ํ•˜๊ฒŒ ๋  ๊ฒƒ ๊ฐ™๋‹ค. ํ•  ์ด์•ผ๊ธฐ๊ฐ€ ๋งŽ์ง€๋Š” ์•Š์€๋ฐ B2C๋ฅผ ํ•˜๋Š” ํšŒ์‚ฌ๋„ ์ฒ˜์Œ์ด์—ˆ๊ณ , React-native๋„ ์ฒ˜์Œ์ด๋‹ˆ ๊ด€๋ จ๋œ ์ด์•ผ๊ธฐ๋ฅผ ํ•˜๊ฒŒ ๋  ๊ฒƒ ๊ฐ™๋‹ค.

React-native

๋‚˜๋Š” ์ฃผ๋กœ React๋กœ ์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ํ–ˆ๊ณ , React-native๋กœ ์•ฑ ๊ฐœ๋ฐœ์„ ํ•˜๋Š” ๊ฒƒ์€ ์ฒ˜์Œ์ด์—ˆ๋‹ค. ์ฒ˜์Œ์—” ๊ทธ๋ƒฅ React ๊ธฐ๋ฐ˜์ด๋‹ˆ ๋ญ ์–ด๋–ป๊ฒŒ๋“  ๋˜๊ฒ ์ง€.. ๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์ง€๋งŒ ๊ทธ๋ ‡๊ฒŒ ๋ง์ฒ˜๋Ÿผ ์‰ฝ์ง€๋Š” ์•Š์•˜๋‹ค. React-native๊ฐ€ ๊ฐ€์ง€๋Š” ํŠน์ˆ˜์„ฑ์ด ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‚ด๊ฐ€ ์ƒ๊ฐํ•œ๋Œ€๋กœ ๋ ˆ์ด์•„์›ƒ์ด ๋‚˜์˜ค์ง€ ์•Š๊ฑฐ๋‚˜, css๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋Š” ๋ถ€๋ถ„์ด ์žˆ๊ฑฐ๋‚˜ ํ–ˆ๋‹ค. ๋ฌผ๋ก  ๊ทธ๊ฒƒ๋“ค์€ ๋ช‡ ๋ฒˆ ๋ฌธ์ œ๋ฅผ ๋งˆ์ฃผ์น˜๋‹ค ๋ณด๋ฉด ์ต์ˆ™ํ•ด์ง€๋Š” ๋ฌธ์ œ๊ธด ํ–ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค๋ฉด Scroll์ด ๊ฐ€๋Šฅํ•œ View๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์“ฐ๋Š” ScrollView ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋”ฐ๋กœ ์žˆ๋Š”๋ฐ, ์•ฑ์˜ ํ•œ ํŽ˜์ด์ง€ ์ „์ฒด๋ฅผ ์Šคํฌ๋กค ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ค๋ฉด์„œ ๊ทธ ๋‚ด๋ถ€์—์„œ ๋˜ ๋ณ„๋„๋กœ Scroll์ด ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ(์‹ฌ์ง€์–ด ์ด๊ฑด ์ด๋ฆ„๋„ ๋‹ฌ๋ž๋‹ค. FlatList)๋ฅผ ๋„ฃ๊ธฐ ์œ„ํ•œ ๋…ธ๋ ฅ์ด๋ผ๋˜์ง€..(๋ฐฉํ–ฅ์ด ๊ฐ™์€ ์Šคํฌ๋กค ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ค‘์ฒฉํ•˜๋Š” ๊ฒƒ์„ ํ”ผํ•ด์•ผ ํ•œ๋‹ค๋”๋ผ..) React-native๊ฐ€ android์™€ iOS์—์„œ ๋ชจ๋‘ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค๊ณ ๋Š” ํ•˜์ง€๋งŒ ํ”Œ๋žซํผ์˜ ํŠน์ˆ˜์„ฑ์„ ๊ณ ๋ คํ•ด์„œ ํŒŒ์ผ ๋ถ„๊ธฐ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๋Š” ๊ฒฝ์šฐ๋„ ๋งŽ์ด ์žˆ์—ˆ๋‹ค. ๊ทธ๋ž˜๋„ ์ •๋ฆฌํ•˜์ž๋ฉด ๊ทธ๋Ÿฐ ํŠน์ˆ˜์„ฑ์ด ๋‚˜ํƒœํ•œ ๋‚˜์˜ React ์ธ์ƒ์— ์ƒˆ๋กœ์šด ์ž๊ทน์„ ์ฃผ์–ด์„œ ์žฌ๋ฏธ์žˆ์—ˆ๋‹ค. ์ง„์งœ๋กœ. ์ง„์งœ๋ผ๋‹ˆ๊นŒ?

Mobile App ๊ฐœ๋ฐœ์˜ ํŠน์ˆ˜์„ฑ

์•ฑ์„ ๋นŒ๋“œํ•˜๊ณ  ์Šคํ† ์–ด๋ฅผ ํ†ตํ•ด ๋ฐฐํฌํ•˜๋Š” ํ๋ฆ„์„ ์ฒ˜์Œ ๊ฒช์–ด๋ณด์•˜๋‹ค. ๊ทธ ์ „์—๋Š” ์›น์— ๋‹จ์ˆœํžˆ ๋ฐฐํฌํ•˜๊ณ  ๋ฎ์–ด์“ฐ๋ฉด ๊ทธ๋งŒ์ด์—ˆ๋Š”๋ฐ, ๋ชจ๋ฐ”์ผ์€ ์ข€ ๋‹ฌ๋ž๋‹ค. ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์„ ๊ฐœ๋ฐœํ•ด์„œ ์•ฑ์„ ๋ฐฐํฌ ํ•˜๋ฉด์„œ๋„ ๊ตฌ ๋ฒ„์ „์„ ์ƒ๊ฐํ•ด์•ผ ํ–ˆ๋‹ค. ์ƒˆ๋กญ๊ฒŒ ์ƒ๊ฒผ๊ฑฐ๋‚˜ ์ˆ˜์ •๋œ ๋ถ€๋ถ„ ๋•Œ๋ฌธ์— ๊ตฌ ๋ฒ„์ „์„ ๊ทธ๋ƒฅ ์“ฐ๋Š” ์œ ์ €๋“ค์ด ์˜ํ–ฅ์„ ๋ฐ›์œผ๋ฉด ์•ˆ๋œ๋‹ค๋Š” ๊ฒƒ์ด ์กฐ๊ธˆ ์‹ ์„ ํ–ˆ๋‹ค. backend api๋ฅผ ์ˆ˜์ •ํ•  ๋•Œ๋„ ๊ณผ๊ฑฐ ๋ฒ„์ „์„ ์œ ์ €์˜ ๊ฒฝํ—˜์„ ํ•ด์น˜์ง€ ์•Š๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด ๋Š˜ ์ค‘์š”ํ–ˆ๋‹ค. ๊ทธ ๋ถ€๋ถ„ ๋•Œ๋ฌธ์— ์ž‘์—…์˜ ๋‚œ์ด๋„๊ฐ€ ์˜ฌ๋ผ๊ฐ€๊ธฐ๋„ ํ–ˆ์ง€๋งŒ, ์•„๋ฌดํŠผ ํ•„์š”ํ•˜๋‹ค๋Š” ๊ฒƒ์€ ์ด๊ฒฌ์ด ์—†๋‹ค.

๋˜ ํ•˜๋‚˜๋Š” ์ƒ๊ฐ๋ณด๋‹ค ์‚ฌ๋žŒ๋“ค์ด ์“ฐ๋Š” ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ์˜ ์„ฑ๋Šฅ ํ˜น์€ ๋ธŒ๋žœ๋“œ์˜ ๋ฒ”์œ„๊ฐ€ ๋‹ค์–‘ํ•˜๋‹ค๋Š” ๊ฒƒ์ด์—ˆ๋‹ค. sentry์— ์ฐํžˆ๋Š” ๋กœ๊ทธ๋ฅผ ๋ณด๋ฉด ์ •๋ง ํƒœ์–ด๋‚˜์„œ ์ฒ˜์Œ ๋“ค์–ด๋ณด๋Š” ํšŒ์‚ฌ์˜ ๊ธฐ๊ธฐ๊ฐ€ ๋งŽ์•˜๊ณ , ์•„์ฃผ ๊ตฌํ˜•์˜ ๊ธฐ๊ธฐ๋ฅผ ๊ณ„์† ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์˜ ์ˆ˜๋„ ๋งŽ์•˜๋‹ค. ๊ฐ€๋” React-native ๋“ฑ ์˜์กด์„ฑ์„ ์—…๋ฐ์ดํŠธ ํ•˜๋‹ค ๋ณด๋ฉด ์ง€์›ํ•ด์•ผ ํ•˜๋Š” ios๋‚˜ android์˜ ๋ฒ„์ „์„ ์˜ฌ๋ ค์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋Š”๋ฐ, ๊ทธ๋Ÿด ๋•Œ ๋” ์ด์ƒ ์•ฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ฒŒ ๋˜๋ฉด์„œ ์Šคํ† ์–ด์— ๋ถ„๋…ธ์˜ ๋ฆฌ๋ทฐ๋ฅผ ์Ÿ์•„๋‚ด๋Š” ๊ฒƒ์„ ๋ณด๋ฉด์„œ ์‹ ์„ ํ•œ ์ถฉ๊ฒฉ์„ ๋ฐ›์•˜๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์Šคํ”„๋ฆฐํŠธ๊ฐ€ ๋ณดํ†ต 2์ฃผ ๋‹จ์œ„๋กœ ์ง„ํ–‰๋˜์—ˆ๋Š”๋ฐ, ์Šคํ”„๋ฆฐํŠธ์˜ ๋งˆ์ง€๋ง‰์—๋Š” ๋ฐฐํฌํ•˜๋Š” ๊ฒƒ์„ ๋Š˜ ๋ชฉํ‘œ๋กœ ์žก์•˜๊ธฐ ๋•Œ๋ฌธ์—, ๊ธฐ๊ฐ„ ๋‚ด์— ์—…๋ฌด๊ฐ€ ๋งˆ๋ฌด๋ฆฌ๋˜๋Š” ๊ฒƒ์ด ๋” ๋ˆˆ์— ์ž˜ ๋ณด์˜€๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

๋„์ „

๊ทธ๋Ÿฌ๋˜ ์ค‘ ๋Šฆ๊ฐ€์„ ์ฏค์— ์ƒˆ๋กœ ์ฐฝ์—…ํ•˜๋Š” ํšŒ์‚ฌ์— ์„ค๋ฆฝ ๋ฉค๋ฒ„๋กœ ์กฐ์ธํ•  ๊ธฐํšŒ๊ฐ€ ์ƒ๊ฒผ๋‹ค. ํ•œ ๋ฒˆ์ฏค ๊ฒฝํ—˜ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋˜ ์ผ์ด์—ˆ๊ณ , ๋” ๋‚˜์ด๊ฐ€ ๋“ค๊ธฐ ์ „์— ๋„์ „ํ•˜์ง€ ์•Š์œผ๋ฉด ๊ธฐํšŒ๊ฐ€ ์—†์„ ๊ฒƒ ๊ฐ™์•„์„œ ํ•ฉ๋ฅ˜๋ฅผ ๊ฒฐ์‹ฌํ–ˆ๋‹ค. ์ง€๊ธˆ๊นŒ์ง€ ํ•ด์™”๋˜ Frontend ์—…๋ฌด๋ฅผ ๊ณ„์† ์ด์–ด์„œ ํ•˜๋Š” ๊ฒƒ๋„ ์•„๋‹ˆ๊ณ , ์ฒ˜์Œ ๊ฒฝํ—˜ํ•˜๊ฒŒ ๋  ์ผ๋“ค์ด ์กฐ๊ธˆ ๋ถˆ์•ˆํ•˜๊ธด ํ–ˆ์ง€๋งŒ ์ผ๋‹จ ์‹œ์ž‘ํ–ˆ๋‹ค. ์ง€๊ธˆ ํšŒ์‚ฌ์—์„œ ๋ญ˜ ํ•˜๊ณ  ์žˆ๋Š”์ง€๋Š” ๋‚˜์ค‘์— ์ข€ ๋” ์ž์„ธํžˆ ๋”ฐ๋กœ ์ด์•ผ๊ธฐํ•ด๋ณด๊ณ  ์‹ถ๋‹ค. ์•„๋ฌดํŠผ ๊ทธ๋ ‡๊ฒŒ ์•ˆ๋ฝํ•œ ์šธํƒ€๋ฆฌ๋ฅผ ๋ฒ—์–ด๋‚˜์„œ ์•ผ์ƒ์„ ๊ฒฝํ—˜ํ•˜๋Ÿฌ ๋‚˜์™”๋‹ค.

๋ฌผ๋ก  ์ „ ํšŒ์‚ฌ์—์„œ ๊ฐ™์ด ์ผํ–ˆ๋˜ ๋ถ„๋“ค์ด ๋‹ค ์ข‹์€ ๋ถ„๋“ค์ด๋ผ ํ—ค์–ด์ง€๋Š” ๊ฒƒ์ด ์กฐ๊ธˆ ์•„์‰ฝ๊ธด ํ–ˆ๋‹ค. ๋‚˜๋Š” ๊ทธ๋ž˜๋„ ์ผํ•˜๋ฉด์„œ ์‚ฌ๋žŒ ๋ณต์€ ๋งŽ์€ ๊ฒƒ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“œ๋Š”๊ฒŒ, ์•„์ง ํŒ€ ๋‚ด์— ํฐ ๋นŒ๋Ÿฐ์„ ๋งŒ๋‚˜ ๋ณธ ์ ์ด ์—†๋‹ค. ์ฐธ ๋‹คํ–‰์ด์ง€ ์‹ถ๋‹ค.

๋

์ฐธ ๊ฑด์งˆ ๊ฒƒ ์—†๋Š” ์ด์ƒํ•œ ๊ธ€์ด ๋˜์—ˆ์ง€๋งŒ, ์•„๋ฌดํŠผ ํšŒ๊ณ ๋Š” ์—ฌ๊ธฐ๊นŒ์ง€. ์ง€๋‚˜๊ฐ„ ๊ฒƒ์€ ์ข‹์€ ๊ธฐ์–ต๊ณผ ๊ฒฝํ—˜์œผ๋กœ ๋‹ด์•„๋‘๊ณ  ์•ž์œผ๋กœ ๋‚จ์€ ์ผ๋“ค์„ ์กฐ๊ธˆ ๊ธฐ๋Œ€ํ•ด๋ณด๊ณ  ์‹ถ๋‹ค.

1
Subscribe to my newsletter

Read articles from Rafael directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Rafael
Rafael

Software Engineer 7 years of experience in building services with React and React Native. Currently developing services using Kotlin and Spring Boot.