앱을 개발하려면 어떻게 해야하는가, 일단 구조적인 앱 개발 방법부터 알아본다.

OS는

크게 안드로이드와 IOS가 있다.

안드로이드는 보통, 안드로이드 스튜디오로 개발되는데

그 개발언어에는 JAVA와 Kotlin(코틀린)이 있다.

IOS는 XCode로 개발하는데

그 개발언어에는 Objective-C 또는 Swift를 사용한다.

이렇게 직접(따로) 개발되는 앱을 네이티브 앱이라고 부른다.

네이티브앱으로 개발하면

구동도 잘되고 성능이 매우 좋겠지만

개발비용이 매우 높아지게 된다.

흔히 만들어지는 앱이 모바일웹 앱이다.

HTML5, CSS3 웹표준에 따라 웹으로 개발하고 퍼블리싱 하는 것이다.

퍼블리셔가 따로 필요하지만

비용이 저렴하고 제작기간도 단축되지만

매우 느린 브라우저 형태 앱이다.

하이브리드앱은 네이티브앱과 모바일웹앱의 장점을 취합한 앱이라 할 수 있다.

기본적으로 html5, css로 개발하고

패키징은 모바일 운영체제별로 구현하는 방식이다.

Phone Gap, Cordova, ionic, react native 등의 개발플렛폼이 있으며 최근에는 react native 많이 사용한다.

하나의 개발로 두개를 동시에 구현이 가능하고(안드,애플)

네이티브앱보다 디자인이나 성능이 다소 떨어질 수 있으나, 하드웨어적 접근(카메라 등) 등이 가능하고, 네이티브 앱과 같이 앱스토어나 플레이스토어에서 다운로드 받아 사용이 가능하다.

하이브리드 앱 개발방법

개발 플랫폼 이용

최근에는 react native 방법을 많이 사용

서버와는 JSON 통신을 이용하여 JavaScript베이스로 화면 데이터를 제어한다.

웹뷰로 개발하는 방법

모바일 기기의 카메라, GPS, PUSh 등을 연동하기에는 어려움이 있을 수 있다.

이상 출처 : [앱만들기​] 앱개발 방법 (feat.안드로이드, iOS) : 네이버 블로그 (naver.com)

리액트 네이티브 앱만들기 시작 설치 및 셋팅 react native install (tistory.com)

설치할 폴더를 mkdir로 만든다.

설치는 npm install expo-cli

일단 인스톨은 다된 것

파일을 만들고 패키지를 만드려면 다음 명령어

npx create-expo-app 만들파일명

cd 만든파일명

npm start

a를 누르면 안드로이드가 열리고

i를 누르면 아이폰 에뮬레이터

w를 누르면 웹이 열린다.

단 안드로이드, 아이폰은 xcode 설치해야 해당 단축키 입력시에 에뮬이 열린다.)

----

node, npm이 설치가 필요하겠구나

맥에서 개발환경 세팅을 할 때 가장 먼저 설치해야 할 패키지 관리 프로그램이다.

Homebrew 홈페이지에 접속을 하면 바로 밑의 명령어가 뜬다.

혹시 궁금하면 접속해보자 -> macOS 용 패키지 관리자 — Homebrew https://brew.sh/ko/

터미널을 켜고 터미널에 붙여넣기한다 .

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

(조금 바뀌었다)

node, npm 설치
homebrew를 설치 후 아래 명령어를 통해 설치한다.

brew install node
 
설치가 완료되면 제대로 설치가 되었는지 버전은 어떤지 확인해보자

node -v 
npm -v
두 가지의 버전이 잘 뜬다면 성공적으로 설치가 된 것이다.

yarn 설치
yarn 또한 homebrew를 이용하여 아래의 명령어로 설치한다.

brew install yarn --ignore-dependencies
 

이미 위에서 node를 설치하였으므로 node는 빼고 설치를 해주어야 한다. 그래서 --ignore-dependecies라는 옵션을 사용한다.

(brew install yarn --without-node 예전엔 이 명령어를 썼지만 더 이상 지원하지 않는다.)

설치가 완료되면 버전 확인을 해보자.

yarn -v
버전이 제대로 뜬다면 설치가 성공적으로 완료된 것이다.

기타
homebrew 최신 버전 업데이트 명령어

brew update
 

brew를 통해 node와 yarn 업데이트 하기

brew upgrade node brew upgrade yarn

이상 출처 : Mac 에서 Homebrew 를 통해 node, npm, yarn 설치하기 (tistory.com)

-------------------------

npm과 npx의 차이에 대해서 - React (gitbook.io)

npm 5.2버전부터, npx가 기본 패키지로 제공되기 시작했습니다. npx도 모듈의 일종입니다. 이 모듈은 npm을 통해 모듈을 로컬에 설치했어야만 실행시킬 수 있었던 기존 문제점의 해결책이 되었습니다. 모듈을 로컬에 저장하지 않고, 매번 최신 버전의 파일만을 임시로 불러와 실행 시킨 후에, 다시 그 파일은 없어지는 방식으로 모듈이 돌아가고 있습니다.

npx는 어디에 효과적일까? 
create-react-app같은 보일러 플레이트 모듈에 효과적 입니다. npx를 통해 create-react-app을 설치할 경우에는 매번 최신 버전만을 가져와서 설치해 주기 때문에 지금 어떤 버전을 사용하고 있는 지 신경쓸 필요가 없어집니다. 어짜피 최신 버전만을 사용할 테니까요.