오늘은 React Natvie 앱 개발의 첫 번째로 Expo를 사용하기 위한 초기 설정은 무엇이 있고 어떻게 진행하는지 알아본 후 첫 번째 앱 프로젝트를 생성하고 실제 디바이스에서 앱을 실행해 보는 과정에 대해 자세히 포스팅해 보겠습니다.앱 개발을 시작하는 과정 중 사소하지만 막혔던 부분에 대해 해결 방법도 같이 포스팅하겠습니다.
Expo 기본 세팅
1.Visual Studio Code 설치
우선 Expo를 세팅하기에 앞서 대부분 앱 개발 외에도 코딩을 해본 사람이라면 기본적으로 설치되어 있겠지만 저는 새로 시작했기 때문에 소스 코드 편집기인 VS code 먼저 설치해줬습니다. VS code는 Microsoft에서 개발한 무료 소스 코드 편집기로 다양한 플랫폼(Windows, macOS, Lunux)에서 사용할 수 있으며 개발자들이 소프트웨어를 개발하고 관리하는데 도움을 주는 많은 기능을 제공하는 툴입니다. 무료이기 때문에 아래 주소를 통해 간단히 설치할 수 있습니다.
https://code.visualstudio.com/download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
2.Expo 세팅
Expo사이트를 들어가보면 Expo를 이용해 개발하기 위해 설치가 필요한 사항들에 대해 자세히 나와 있습니다. 아래 주소를 통해 접속하면 어떤 것들을 설치해야 하는지 자세히 설명하고 있으며 설치가 필요한 항목은 링크가 걸려 있어 클릭하면 설치 사이트로 이동합니다.
Expo 사이트 주소 :
https://docs.expo.dev/get-started/create-a-project/
Create a project
Learn how to create a new Expo project.
docs.expo.dev
1) 가장 먼저 반드시 설치해야 할 것은 Node.js 입니다. 앞서 계속 설명했듯 Expo는 JavaScript로 개발되기 때문 Node.js 설치가 반드시 필요하며, 사이트를 보면 LTS 버전을 설치하는 것을 권장하고 있습니다.
*LTS 버전은 안정적이고 신뢰도가 높은 버전이고, Current 버전은 가장 최신 버전으로 신뢰도가 높은 LTS 버전을 추천하고 있습니다.
2) 다음으로 Git을 설치해야 합니다. Git의 경우 Expo 프로젝트의 버전 관리, 협업, 배포 관리 등을 용이하게 할 수 있기 때문에 설치 필요합니다.(Git의 경우, SDK51 업데이트 이전에는 권장 설치로 되어 있었는데 현재는 없는 것 같습니다)
3. npx create-expo-app (앱이름) --template blank 명령어를 통해 앱 프로젝트를 생성합니다.
지난 포스팅에서 간단히 알아봤지만 기존 앱 프로젝트를 생성했던 명령어인 "npx create-expo-app (앱이름)" 는 이제 초기 세팅의 경우 빈 프로젝트가 아닌 expo-router가 설치된 프로젝트로 저는 처음 공부하는 입장에서 우선 빈프로젝트부터 설치했습니다. 해당 명령어를 입력하면 자동으로 앱 프로젝트가 생성됩니다.
TIP) 여기서 npx는 Node Package eXecute로 로컬에 설치된 패키지를 실행할 때 사용하는 도구입니다. npx를 사용하여 로컬에 설치되지 않은 패키지를 사용할 수 있습니다.
그렇다면, npm은 무엇일까요? npm은 Node Package Manager로 Node.js 패키지를 설치하고 관리하는 도구입니다. npm을 사용하여 프로젝트에 필요한 패키지를 설치하고 의존성을 관리할 수 있습니다. 간단히 말해, npm은 패키지를 설치하고 관리하는 도구이며, npx는 로컬에 설치된 패키지를 실행하는 도구입니다.
3-1. cd (앱이름) 명령어를 통해 생성한 앱 프로젝트 폴더로 들어갑니다.
3-2. npx expo start 명령어를 통해 앱을 실행합니다. 앱을 실행하면 아래 캡처화면과 같이 QR코드와 URL 주소가 생성됩니다.
앱 실행하기
1. Expo Go 앱을 설치합니다.
expo go 앱을 안드로이드 스마트폰에 설치한 후 “Enter URL manually”에 위의 캡쳐화면 중 exp://로 시작하는 URL을 넣어주거나 Scan QR cod 버튼을 통해 QR 코드를 찍어 앱을 실행할 수 있습니다.
[여기서 주의해야 할 점은 노트북과 Expo Go 앱을 실행한 스마트폰이 같은 인터넷으로 연결되어 있어야 앱이 실행 가능하다는 것입니다. 사이트에 보면 QR코드 혹은 URL을 이용한 방식이 자세히 나와있고 그 아래 “Is the app not loading on your device?” 라는 자주 묻는 질문처럼 나와 있는 곳을 열어보면 같은 와이파이에 있어야 한다고 친절히 나와 있지만 대충 읽고 넘겨 오랫동안 헤맸습니다.]
두가지 방법 중 하나를 통해 Expo Go에서 앱을 실행하면 앱이 빌드되는 화면이 터미널에 노출되고 빌드가 완료되면 앱이 실행되는 것을 볼 수 있습니다.
2. 실제 코드에서 간단히 수정 후 수정한 내용을 확인해 봅니다.
다음으로 생성한 프로젝트에서 App.js 파일에 들어가 <Text> 컴포넌트의 글을 Hello World로 수정해 준 후 디바이스를 흔들어 개발자 메뉴가 노출되도록 해준 후 “Reload”버튼을 눌러줍니다. 그럼 다시 빌드된 후 입력한 Hello World가 보이는 것을 볼 수 있습니다.
프로젝트 구성 파일 및 폴더의 역할
그렇다면, 생성된 프로젝트를 구성하는 파일과 폴더들의 역할은 무엇인지 간단히 알아보겠습니다.
1) App.js
Expo 앱의 진입점으로, React Native 앱의 루트 컴포넌트 파일입니다. 앱의 UI를 구성하고 렌더링 하는 역할을 합니다.
2) app.json
Expo 앱의 설정 파일로, 앱의 이름, 버전, 아이콘, 스플래시 이미지 및 기타 설정을 정의합니다.
3) assets/
앱에 사용되는 이미지, 아이콘 및 기타 자산 파일을 저장하는 디렉터리입니다.
정적 자산을 Expo에서 자동으로 저장합니다.
4) node_modules/
프로젝트의 의존성 패키지들이 설치되는 디렉터리입니다.외부 라이브러리 및 모듈이 여기에 저장됩니다.
5) package.json
npm프로젝트의 설정 파일로, 프로젝트의 메타 데이터와 의존성 패키지 정보를 포함합니다.
6) package-lock.json
npm 패키지의 정확한 버전 및 의존성 트리를 잠금 하는 파일로 패키지 설치를 더 안정적으로 유지하는 역할을 합니다.
마무리
이렇게 오늘은 Expo의 초기 세팅과 프로젝트를 만들어 실제 디바이스에서 앱이 실행되는 모습까지 확인했으며 생성된 프로젝트를 구성하는 파일과 폴더들은 어떤 것들이 있고 각각의 역할은 무엇인지에 대해 간략히 알아보았습니다. 다음번에는 본격적으로 앱을 만드는 과정을 계속해서 포스팅해 보겠습니다.