[앱만들기] 웹개발자가 가장 쉽게 어플만들기③ (EXPO로 AFK 만들기)

준비

 

 앞전 구름 IDE를 통해 NodeJS React Native Expo 개발환경을 구축했으며, Expo를 통해 내가 제작할 어플리케이션을 미리보기로 확인했습니다. 이번에는 미리 본 어플리케이션을 실제 APK로 변환해보는 작업을 진행해보겠습니다. 

 

앞전 개발환경구축링크

[앱만들기] 웹개발자가 가장 쉽게 어플만들기② (구름IDE, EXPO feat 조코딩)

 

AFK로 만들기

 

 구름IDE에서 기본적으로 제공해주는 NodeJs가 EXPO 버전과 호완성이 맞지 않은지 애러가 나서 APK를 만들기 전에 시행착오를 거쳤습니다.

 

먼저 expo cli를 설치해 줍니다.

 

 

 

npm install -g expo-cli

 

후에 expo-permissions를 설치해야 하는데, node버전과 호완성이 맞지 않아 애러가 나옵니다. 해서 아래 코드로 node버전을 최신 lts버전으로 업데이트해줍니다.

 

 

캐시 삭제 -> node js 버전 관리 플러그인 설치 -> lts버전

 

npm cache clean -f
npm install -g n
n lts

 

expo-permissions를 설치해줍니다.

(사용자의 위치 연락처와 같이 민감한 정보에 액세스 할 때 사용자 권한 요청이 필요하지만 해당 모듈을 설치하면 빠르고 쉽게 권한 요청 및 신뢰가 가능)

 

expo install expo-permissions

 

app.json을 실행합니다.

기존의 icon.png와 splash.png를 삭제 후 우리가 원하는 이미지로 저장하고 내용을 아래 사진과 같이 바꿔줍니다.

 

 

icon.png는 앱 모양이 될 사진이며 권장 사이즈는 1024 * 1024입니다. 사이즈가 너무 작거나 너무 크면 빌드할 때 애러가 발생됩니다.

splash.png는 앱을 터치 하고 나서 잠시 동안 나타나는 화면을 뜻합니다. 권장 사이즈는 1242 * 2436입니다.

(두 이미지 모두 PNG만 가능하며, JPG로 업로드했을 때 빌드시 애러가 발생됩니다.)

 

 

 

ios와 안드로이드 부분을 아래 코드로 교체해줍니다.

 

  "ios": {
      "bundleIdentifier": "원하는 패키지명(ex com.javalec.ex)",
      "buildNumber": "1.0.0",
	  "supportsTablet": true
    },
    "android": {
      "package": "원하는 패키지명(ex com.javalec.ex)",
      "versionCode": 1,
		"permissions": [
		"CAMERA",
		"READ_EXTERNAL_STORAGE"
   ]},

(안드로이드의 경우 카메라와 앨범 접근 권한까지만 설정 진행함)

 

 

이제 모든 코드 작업은 끝났고 afk로 변환하기 위한 빌드만 진행하면 됩니다. 빌드를 하기 위해선 expo 회원가입이 먼저 필요합니다. 

해당 사이트(https://expo.io/ )에서 미리 signup을 통해 간단하게 회원가입 진행하면 됩니다.

 

 

회원가입이 진행되었으면, 다시 터미널로 돌아와서 해당 코드를 작성합니다.

 

expo build:android

작성을 하게 되면 , 아래와 같은 선택지들이 나옵니다.(밑줄 쳐진 것을 순서대로 체크하면 됩니다.)

 

 

후에 아래와 같이 링크가 나오면 여기서 진행과정을 확인할 수 있으며, 완료되면 apk다운로드가 가능합니다.

(저는 20분~30분 정도 소요되었습니다.)

 

 

다운로드하게 되면 어플을 다운로드할 수 있는 안드로이드 APK가 완성됩니다.

 

정리

 위처럼 반응형 웹을 앱으로 정말 쉽고 빠르게, 만드는 방법을 알아봤습니다. 조코딩님의 훌륭한 강의로 앱을 만들기 위한 좋은 접근방식을 공부했으며, 강의가 시간이 조금 지나 있어, 스스로 안 되는 부분들을 해결하는 과정들을 정리했습니다. 부족한 지식으로 글을 작성한 것일 수 있어 오류가 있는 점은 댓글로 남겨주시면 바로 수정하겠습니다!

 

ps. 요즘은 구름 IDE 환경이 아닌, 윈도 환경으로 개발환경을 구축했으며, 최신 버전의 react native와 EXPO를 사용하고 있습니다. 반응형 웹사이트를 앱으로 개발한 선례가 아직 많이 없는지 한국어 자료가 많이 부족해서 여러 가지 시행착오로를 겪으며 개발을 진행하고 있습니다. 추후 웹 개발자들도 정말 쉽게 앱으로 전환하는 글들을 기재 예정입니다.