모바일 앱 개발을 시작하려는 분들에게 JavaScript는 강력한 선택지다. 복잡한 네이티브 코드 없이도 크로스 플랫폼 앱을 만들 수 있는 React Native나 Ionic 같은 프레임워크가 있기 때문이다. 이 글에서는 JavaScript로 모바일 앱을 개발하는 첫걸음을 내딛는 방법을 단계별로 안내한다.
왜 JavaScript로 모바일 앱을 개발할까?
JavaScript는 웹 개발의 핵심 언어로, 이제는 모바일 앱 개발까지 영역을 확장했다. 한 번의 코드 작성으로 iOS와 Android 모두에서 동작하는 앱을 만들 수 있어 효율적이다.
주요 장점
✔ 크로스 플랫폼 호환성 – React Native, Ionic 등으로 하나의 코드베이스로 두 OS 지원
✔ 풍부한 생태계 – npm을 통한 라이브러리 활용이 용이
✔ 웹 개발자에게 친숙 – HTML, CSS 지식이 있다면 진입 장벽이 낮음
| 프레임워크 | 특징 | 학습 곡선 |
|---|---|---|
| React Native | Facebook 지원, 네이티브 성능 | 중간 |
| Ionic | 웹뷰 기반, 빠른 개발 | 낮음 |
| Flutter (Dart) | 고성능, 커스터마이징 가능 | 높음 |
1. 개발 환경 설정하기
(1) Node.js 설치
JavaScript로 모바일 앱을 개발하려면 Node.js가 필요하다. 공식 사이트에서 LTS 버전을 설치하면 npm(노드 패키지 매니저)도 함께 설치된다.
node -v # 설치 확인
npm -v
(2) Expo 또는 React Native CLI 선택
- Expo: 초보자에게 적합, 빠른 프로토타이핑 가능
- React Native CLI: 더 많은 커스터마이징 가능
npx create-expo-app MyFirstApp # Expo로 시작
npx react-native init MyApp # React Native CLI
(3) 에뮬레이터 또는 실제 기기 연결
- Android Studio (안드로이드 에뮬레이터)
- Xcode (iOS 시뮬레이터)
- Expo Go 앱 (실제 기기 테스트)
2. 첫 번째 앱 만들기
(1) 기본 구조 이해
React Native에서는 JSX를 사용해 UI를 구성한다.
import { View, Text } from 'react-native';
export default function App() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>안녕, React Native!</Text>
</View>
);
}
(2) 간단한 컴포넌트 추가
버튼과 상태 관리를 연습해보자.
import { useState } from 'react';
import { Button, Text, View } from 'react-native';
export default function CounterApp() {
const [count, setCount] = useState(0);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>카운트: {count}</Text>
<Button title="증가" onPress={() => setCount(count + 1)} />
</View>
);
}
(3) 네비게이션 추가
react-navigation을 설치해 화면 전환을 구현할 수 있다.
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen({ navigation }) {
return (
<View>
<Button
title="다음 화면으로"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
function DetailsScreen() {
return <Text>상세 페이지입니다!</Text>;
}
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
3. 앱 출시 준비하기
(1) APK 또는 IPA 빌드
- Android:
./gradlew assembleRelease - iOS: Xcode에서 Archive 생성
(2) 앱 스토어 등록
(3) 지속적인 업데이트
사용자 피드백을 반영해 앱을 개선하는 것이 중요하다. Firebase Analytics를 연결해 사용자 행동을 분석할 수도 있다.
마치며
JavaScript로 모바일 앱을 개발하는 것은 생각보다 어렵지 않다. React Native를 활용하면 웹 개발 지식을 그대로 활용할 수 있어 시작하기 좋다. 이제 직접 프로젝트를 시작해보자!
🚀 도전해보기
오늘 간단한 할 일 앱을 만들어보는 건 어때요? 카운터, 네비게이션, 상태 관리를 연습할 수 있는 좋은 예제입니다.
더 궁금한 점이 있다면 댓글로 남겨주세요!
