Expo와 npm 사용법에 대한 가이드

안녕하세요! 오늘은 Expo와 npm을 사용하여 React Native 애플리케이션을 쉽게 개발하는 방법에 대해 이야기하려고 합니다. Expo는 React Native 앱 개발을 간편하게 도와주는 프레임워크로, 복잡한 설정 없이도 앱 개발을 시작할 수 있게 해줍니다. npm은 필요한 패키지를 설치하고 관리하는 도구로, Expo 프로젝트에서도 중요한 역할을 합니다.

1. Expo 설치하기

먼저, Expo CLI를 설치해야 합니다. 이를 위해 npm을 사용하여 간단하게 설치할 수 있습니다.

npm install -g expo-cli

이 명령어를 실행하면 Expo CLI가 글로벌로 설치되며, 어디서든 Expo 명령어를 사용할 수 있습니다.

2. 새 Expo 프로젝트 생성하기

Expo CLI를 설치한 후, 새로운 프로젝트를 생성해 봅시다. 아래 명령어를 사용하여 새로운 앱을 만들 수 있습니다.

expo init my-new-app

명령어를 입력하면 몇 가지 템플릿 옵션이 나옵니다. 템플릿은 Blank, Tabs (탭 구조) 등 다양한 형태가 있는데, 원하는 템플릿을 선택하여 프로젝트를 시작하면 됩니다.

3. Expo 서버 실행하기

프로젝트가 생성되면 해당 디렉터리로 이동한 후, 개발 서버를 실행해 보겠습니다.

cd my-new-app
expo start

이 명령어를 실행하면 Expo 개발 서버가 시작되고, 웹 브라우저에서 관리 화면이 열립니다. 여기에서 QR 코드를 스캔하여 물리적 디바이스에서 앱을 실행하거나, 시뮬레이터에서 테스트할 수 있습니다.

4. npm으로 패키지 설치하기

Expo 프로젝트에서 기능을 추가하기 위해 npm을 사용해 다양한 패키지를 설치할 수 있습니다. 예를 들어, navigation 기능을 추가하고 싶다면 react-navigation 패키지를 설치해야 합니다.

npm install @react-navigation/native

이 외에도 원하는 기능에 따라 여러 패키지를 설치하여 프로젝트를 확장할 수 있습니다. Expo는 많은 네이티브 모듈을 미리 제공하고 있어, 네이티브 코드 수정 없이도 다양한 기능을 쉽게 활용할 수 있습니다.

4-1. 추가 패키지 설치 및 설정

1) React Navigation 설치 후 추가 설정

Navigation 기능을 추가하기 위해서는 추가적인 패키지 설치와 네이티브 의존성 설정이 필요합니다. react-navigation/native를 설치한 후, 아래 명령어를 통해 필요한 의존성 패키지를 설치합니다.

npm install react-native-screens react-native-safe-area-context

그런 다음, 프로젝트의 엔트리 파일(예: App.js)에서 NavigationContainer를 설정해야 합니다.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* Other navigation components go here */}
    </NavigationContainer>
  );
}

2) State Management (상태 관리)

애플리케이션의 상태 관리를 위해 Redux 또는 Context API 같은 도구를 사용할 수 있습니다. Redux를 사용하려면 아래와 같이 패키지를 설치하세요.

npm install @reduxjs/toolkit react-redux

그리고 상태 관리를 설정하는 부분을 프로젝트에 추가합니다.

import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';

const store = configureStore({
  reducer: {
    // Your reducers here
  },
});

export default function App() {
  return (
    <Provider store={store}>
      {/* Your app components here */}
    </Provider>
  );
}

5. Expo로 앱 빌드하기

개발을 완료했다면 이제 앱을 빌드할 차례입니다. Expo에서는 간단한 명령어로 Android와 iOS 앱을 빌드할 수 있습니다.

expo build:android
expo build:ios

Expo SDK 49 이후부터는 expo build 명령어 대신 eas build를 권장합니다. Expo Application Services(EAS)를 사용하면 더 강력하고 유연한 빌드 옵션을 사용할 수 있습니다.

eas build -p android
eas build -p ios

EAS 빌드를 사용하려면 Expo 계정에 로그인하고, 프로젝트를 Expo 서버에 연결해야 합니다.

expo login
eas build:configure

빌드가 완료되면 .apk 파일이나 .ipa 파일을 다운로드하여 실제 기기에 설치하거나, 스토어에 배포할 수 있습니다.

6. 푸시 알림 설정하기

Expo에서는 푸시 알림 기능도 쉽게 설정할 수 있습니다. 먼저, expo-notifications 패키지를 설치합니다.

npm install expo-notifications

그 후, 푸시 알림을 설정하고 사용하는 코드를 추가합니다.

import * as Notifications from 'expo-notifications';

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: false,
    shouldSetBadge: false,
  }),
});

// 예제: 푸시 알림 보내기
async function sendPushNotification(expoPushToken) {
  const message = {
    to: expoPushToken,
    sound: 'default',
    title: 'Hello!',
    body: 'This is a test notification',
    data: { someData: 'goes here' },
  };

  await fetch('https://exp.host/--/api/v2/push/send', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(message),
  });
}

7. 정리

Expo와 npm을 사용하면 모바일 애플리케이션 개발이 훨씬 쉬워집니다. Expo는 복잡한 설정 과정 없이 빠르게 개발 환경을 구축할 수 있도록 도와주며, npm은 필요한 패키지들을 손쉽게 관리할 수 있게 해줍니다. 또한, React Navigation, 상태 관리, 푸시 알림 등 다양한 기능을 추가하여 앱을 더욱 풍부하게 만들 수 있습니다. 이러한 도구들을 잘 활용하여 React Native 애플리케이션을 효과적으로 개발해 보세요!