2024๋ ํ๊ณ


๊ฐ์
๋ฒ์จ 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 ์ ๋ฌด๋ฅผ ๊ณ์ ์ด์ด์ ํ๋ ๊ฒ๋ ์๋๊ณ , ์ฒ์ ๊ฒฝํํ๊ฒ ๋ ์ผ๋ค์ด ์กฐ๊ธ ๋ถ์ํ๊ธด ํ์ง๋ง ์ผ๋จ ์์ํ๋ค. ์ง๊ธ ํ์ฌ์์ ๋ญ ํ๊ณ ์๋์ง๋ ๋์ค์ ์ข ๋ ์์ธํ ๋ฐ๋ก ์ด์ผ๊ธฐํด๋ณด๊ณ ์ถ๋ค. ์๋ฌดํผ ๊ทธ๋ ๊ฒ ์๋ฝํ ์ธํ๋ฆฌ๋ฅผ ๋ฒ์ด๋์ ์ผ์์ ๊ฒฝํํ๋ฌ ๋์๋ค.
๋ฌผ๋ก ์ ํ์ฌ์์ ๊ฐ์ด ์ผํ๋ ๋ถ๋ค์ด ๋ค ์ข์ ๋ถ๋ค์ด๋ผ ํค์ด์ง๋ ๊ฒ์ด ์กฐ๊ธ ์์ฝ๊ธด ํ๋ค. ๋๋ ๊ทธ๋๋ ์ผํ๋ฉด์ ์ฌ๋ ๋ณต์ ๋ง์ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ๋๋๊ฒ, ์์ง ํ ๋ด์ ํฐ ๋น๋ฐ์ ๋ง๋ ๋ณธ ์ ์ด ์๋ค. ์ฐธ ๋คํ์ด์ง ์ถ๋ค.
๋
์ฐธ ๊ฑด์ง ๊ฒ ์๋ ์ด์ํ ๊ธ์ด ๋์์ง๋ง, ์๋ฌดํผ ํ๊ณ ๋ ์ฌ๊ธฐ๊น์ง. ์ง๋๊ฐ ๊ฒ์ ์ข์ ๊ธฐ์ต๊ณผ ๊ฒฝํ์ผ๋ก ๋ด์๋๊ณ ์์ผ๋ก ๋จ์ ์ผ๋ค์ ์กฐ๊ธ ๊ธฐ๋ํด๋ณด๊ณ ์ถ๋ค.
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.