React Native로 첫 크로스 플랫폼 앱 개발 시작하기

안녕하세요! 오늘은 제가 React Native를 사용하여 크로스 플랫폼 앱을 개발하기 시작한 과정을 공유하려고 합니다. 'GrindUp'이라는 생산성 애플리케이션을 개발하기 위해 React Native를 선택했고, 그 첫 단계를 밟으면서 겪은 실수와 해결책을 함께 소개합니다.

개발 환경 준비

React Native로 앱을 개발하기 위해서는 Node.js, npm 등 기본적인 개발 환경이 필요합니다. 저는 이미 이런 도구들을 설치해 두었기 때문에 바로 React Native 프로젝트 생성으로 넘어갔습니다.

첫 번째 시도와 실패

처음에는 React Native CLI를 사용해 프로젝트를 초기화하려고 했습니다. 개발용 디렉토리인 C:\dev에 GrindUp이라는 폴더를 만들고 다음 명령어를 실행했습니다:

C:\dev\GrindUp>npx react-native init .

그런데 예상과 달리 다음과 같은 오류 메시지가 표시되었습니다:

🚨️ The `init` command is deprecated. 
- Switch to npx @react-native-community/cli init for the identical behavior. 
- Refer to the documentation for information about alternative tools: https://reactnative.dev/docs/getting-started 
Exiting...

문제 원인 파악

오류 메시지를 자세히 살펴보니 init 명령이 더 이상 사용되지 않는다는(deprecated) 내용이었습니다. React Native의 CLI 도구가 업데이트되면서 명령어가 변경된 것이죠. 이는 개발 도구와 프레임워크가 계속 발전하면서 자주 발생하는 일입니다.

해결책 찾기

공식 문서를 확인하고 최신 방식으로 React Native 프로젝트를 초기화하는 방법을 알아보았습니다. 최신 버전의 React Native CLI를 사용하기 위해 다음 명령어를 사용해야 했습니다:

npx react-native@latest init GrindUp

성공적인 프로젝트 생성

기존 폴더에서 빠져나와 위 명령어를 실행했습니다:

cd ..
npx react-native@latest init GrindUp

이번에는 명령어가 성공적으로 실행되었고, React Native 프로젝트가 생성되었습니다!

생성된 프로젝트 구조를 확인해보니 android/와 ios/ 폴더가 모두 포함되어 있어서, 크로스 플랫폼 앱을 개발할 준비가 완료되었음을 확인할 수 있었습니다.

앱 개발 시작 및 시뮬레이터 실행

프로젝트가 성공적으로 생성되었으니, 이제 본격적인 앱 개발을 시작할 차례입니다. 먼저 필요한 패키지들을 설치하고 Android 시뮬레이터에서 앱을 실행해보기로 했습니다. 다행히 Android 시뮬레이터는 이미 실행해 둔 상태였습니다.

cd GrindUp
npm install @react-navigation/native @react-navigation/bottom-tabs
npm install react-native-screens react-native-safe-area-context
npm run android

npm run android 명령을 실행했을 때, 앱 빌드를 위한 설정 과정이 시작되었습니다. 이 과정은 처음 실행할 때 꽤 오래 걸렸는데, 제 경우에는 약 7분 정도가 소요되었습니다. Gradle 빌드 시스템이 필요한 의존성을 다운로드하고 앱을 컴파일하는 과정이라 첫 실행에는 시간이 많이 걸립니다.

그런데 문제가 발생했습니다. 빌드는 완료되었지만 시뮬레이터와 제대로 연동이 되지 않았습니다. 이럴 때는 별도의 명령어로 다시 시도해 보는 것이 좋습니다. 저는 다음 명령어를 차례로 실행했습니다:

npx react-native run-android npm run android
npx react-native run-android

명령어를 먼저 실행하여 시뮬레이터와의 연결을 재설정한 후, 다시 npm run android를 실행하니 드디어 앱이 시뮬레이터에 성공적으로 설치되고 실행되었습니다!

배운 점

이번 경험을 통해 몇 가지 중요한 교훈을 얻었습니다:

1. 최신 문서 확인의 중요성: 프레임워크와 도구는 계속 발전하므로, 항상 최신 공식 문서를 확인하는 것이 중요합니다.
2. 오류 메시지 꼼꼼히 읽기: 오류 메시지는 단순히 문제를 알려주는 것이 아니라, 해결책도 함께 제시하는 경우가 많습니다.
3. 인내심을 가지기: 특히 첫 빌드는 시간이 오래 걸릴 수 있으니 인내심을 가지고 기다려야 합니다.
4. 다양한 명령어 시도하기: 문제가 발생했을 때 다른 명령어를 시도해 보는 것이 도움이 될 수 있습니다. npm run android와 npx react-native run-android는 비슷하지만 약간 다른 방식으로 동작하므로, 하나가 실패하면 다른 하나를 시도해 보는 것이 좋습니다.

마무리

오늘은 React Native 프로젝트를 시작하는 첫 단계에서 겪은 작은 난관과 그 해결 과정을 공유했습니다. 프로그래밍의 세계에서는 이런 작은 문제들을 해결해나가는 과정이 배움의 일부입니다. 특히 모바일 앱 개발 환경 설정은 종종 예상치 못한 문제가 발생하기도 하지만, 차근차근 해결해 나가면 결국 성공할 수 있습니다.

다음 포스트에서는 기본 UI 구성과 첫 화면 개발에 대해 더 자세히 다루도록 하겠습니다.

개발 여정을 함께하시는 모든 분들, 화이팅입니다! 😊