올-하! 안녕하세요. 여러분! 올리브영에서 모바일 앱 개발을 담당하고있는 개발요정입니다. 오늘은 올리브영의 신규 서비스인 '인마이백' 앱 개발기를 이야기해보려고 합니다. What's 인마이백? 인마이백은 작년에 올리브영에서 출시한 모바일앱으로, SNS와 커머스가 결합된 신개념 복합 플랫폼입니다. 단독특가로만 진행되는 핫한 큐레이션딜을 통해 생생한 아이템 소개와 사용팁을 둘러볼 수 있고, 내 가방 속 아이템을 소개하거나 크리에이터들의 가방 속 아이템을 구경하며 생생하고 다양한 리뷰를 확인할 수 있는 모바일 앱 서비스에요. Why ReactNative? 크로스플랫폼 ReactNative의 존재 이유이자 최강 장점인 크로스플랫폼 동시 개발을 위해서가 가장 큰 이유였습니다. 서비스를 위해선 당연하게 Android와 iOS를 모두 지원해야 했는데요, 당시 올디브에는 iOS 앱 개발자가 없었기 때문에 multiple OS 개발이 가능한 플랫폼을 검토 대상에 두었습니다. 또한 한벌의 코드를 작성하고 실행하면, Android와 iOS에서 모두 작동한다는 점은 시간과 비용적인 면에서도 굉장히 큰 절감효과를 가져옵니다. 실제로 인마이백 서비스는 멀티 플랫폼을 지원함에도 불구하고 적은 인원의 개발자로 비교적 단기간에 출시할 수 있던 앱입니다. React로 인해 확 줄어드는 러닝커브 ⚛️ 그렇다면 다른 크로스플랫폼인 Flutter, Xamarin, Cordova 등이 아니라 왜 하필 ReactNative로 선정하게 되었는지 궁금할 수도 있는데요, 이미 올디브에서는 React를 사용한 서비스 경험들이 있습니다. React를 다를 줄 아는 팀원들이 많았기 때문에 러닝커브를 반 이상 줄여서 큰 진입장벽 없이 ReactNative를 도입할 수 있었습니다. HIP ✨ 아직도 몇년째 버전 1로 올라오지 못했지만, 그럼에도 불구하고 꾸준히 핫한 플랫폼입니다. '우리도 ReactNative 한번 써보자!' 하는 마음이 맞는 개발자들끼리 모여 개발을 시작하게 되었습니다. How to develop? Typescript ReactNative는 공식 가이드에서도 TypeScript 사용을 장려하고 있습니다. 인마이백도 마찬가지로 TypeScript를 적용하여 코드를 작성하고 있습니다. TypeScript를 사용할 경우 Code look은 다음과 같습니다. import React from 'react' import ( Button, StyleSheet, Text, View ) from 'react-native' export interface Props ( name: string enthusiasmLevel?: number ) const Hello: React.FC = (props) => ( const [enthusiasmLevel, setEnthusiasmLevel] = React.useState( props.enthusiasmLevel ) const onIncrement = () => setEnthusiasmLevel((enthusiasmLevel || 0) + 1) const onDecrement = () => setEnthusiasmLevel((enthusiasmLevel || 0) - 1) const getExclamationMarks = (numChars: number) => Array(numChars + 1).join('!') return ( Hello(' ') (props.name + getExclamationMarks(enthusiasmLevel || 0))

ReactNative와 함께하는 서비스 개발부터 배포까지

댓글 0개