아토믹데브_2_취업 준비생을 위한 모바일 게임 개발 여정

제2강: 개발 환경 설정

---

학습 목표:

이 강의에서는 모바일 앱 개발을 위한 환경을 설정하고, 첫 번째 프로젝트를 생성하는 방법을 배우게 됩니다. 여러분은 React Native 또는 Flutter 중 하나를 선택하여 설치하고, Android Studio 및 iOS 시뮬레이터를 설정한 후, 첫 번째 크로스 플랫폼 앱을 실행하고 빌드할 것입니다.

---

1. 개발 환경 구축

React Native 또는 Flutter 설치

개발 환경을 설정하려면 먼저 React Native 또는 Flutter를 설치해야 합니다. 두 프레임워크 중 하나를 선택하여 설치 방법을 따라 진행하세요.

1.1 Node.js 및 npm 설치 (React Native 사용자용)

React Native를 사용하려면 먼저 Node.js와 npm(Node Package Manager)을 설치해야 합니다. Node.js는 자바스크립트 런타임 환경이며, npm은 자바스크립트 패키지 관리 도구입니다.

• Node.js 설치:
  1. Node.js 공식 웹사이트로 이동하여 Windows용 LTS(Long Term Support) 버전을 다운로드합니다.
  2. 다운로드한 설치 파일을 실행하고, 설치 과정을 완료합니다.
• npm 설치 확인:
  • 설치가 완료되면, 명령 프롬프트 또는 PowerShell을 열고 다음 명령어를 입력하여 Node.js와 npm이 제대로 설치되었는지 확인합니다:이 명령어는 Node.js와 npm의 버전을 출력합니다. 버전 번호가 표시되면 설치가 성공적으로 완료된 것입니다.

node -v npm -v

1.2 React Native CLI 설치 (React Native 사용자용)

• Node.js와 npm이 설치된 후, React Native CLI를 글로벌로 설치합니다:이 명령어는 React Native CLI(Command Line Interface)를 설치하여, 새로운 프로젝트를 생성하고 관리할 수 있게 해줍니다

npm install -g react-native-cli

1.3 Flutter 설치 (Flutter 사용자용)

Flutter를 사용하기로 결정했다면, 아래의 단계를 따라 Flutter를 설치합니다:

• Flutter 설치:
  1. Flutter 공식 웹사이트로 이동하여 Windows용 Flutter SDK를 다운로드합니다.
  2. 압축 파일을 적절한 디렉토리에 풀고, flutter/bin 경로를 시스템 환경 변수에 추가합니다.
• Flutter 설치 확인:
  • 명령 프롬프트를 열고, 다음 명령어를 입력하여 Flutter가 제대로 설치되었는지 확인합니다:이 명령어는 Flutter의 설치 상태를 점검하고, 추가적으로 필요한 도구가 있는지 알려줍니다.

flutter doctor

---

2. Android Studio 및 iOS 시뮬레이터 설정

모바일 앱을 개발하고 테스트하려면 Android와 iOS에서 실행할 수 있는 시뮬레이터가 필요합니다.

2.1 Android Studio 설치

• Android Studio 설치:
  1. Android Studio 공식 웹사이트에서 설치 파일을 다운로드합니다.
  2. 설치 과정에서 Android SDK, Android SDK Platform-Tools, Android Virtual Device를 선택하여 설치합니다.
• Android Virtual Device(AVD) 설정:
  • Android Studio를 실행하고, AVD Manager에서 새로운 가상 디바이스를 생성합니다. 디바이스를 설정한 후, 가상 디바이스를 실행하여 테스트할 수 있습니다.

2.2 iOS 시뮬레이터 설정 (macOS 사용자용)

• Xcode 설치:
  • iOS 앱을 개발하려면 Xcode가 필요합니다. Mac App Store에서 Xcode를 설치합니다.
• iOS 시뮬레이터 실행:
  • Xcode를 열고, 시뮬레이터에서 원하는 iPhone 모델을 선택한 후, 시뮬레이터를 실행하여 테스트할 수 있습니다.

---

3. 첫 번째 크로스 플랫폼 앱 실행 및 빌드

이제 모든 개발 환경이 준비되었으니, 첫 번째 프로젝트를 생성하고 앱을 실행해 봅시다.

3.1 React Native 프로젝트 생성 (React Native 사용자용)

• 프로젝트를 생성하려면, 다음 명령어를 사용합니다:이 명령어는 MyFirstApp이라는 새로운 React Native 프로젝트를 생성합니다.
• bash

  코드 복사
  npx react-native init MyFirstApp
• 프로젝트 폴더로 이동한 후, Android와 iOS에서 앱을 실행합니다:

npx react-native init MyFirstApp

3.2 Flutter 프로젝트 생성 (Flutter 사용자용)

• Flutter 프로젝트를 생성하려면, 다음 명령어를 사용합니다:이 명령어는 my_first_app이라는 새로운 Flutter 프로젝트를 생성합니다.

   

  flutter create my_first_app

• 프로젝트 폴더로 이동한 후, Android와 iOS에서 앱을 실행합니다:

 

cd my_first_app flutter run

이제 첫 번째 앱이 실행되며, 이를 통해 React Native 또는 Flutter의 기본 환경을 체험해볼 수 있습니다.