[앱만들어 돈벌기 시리즈] 그러면, 앱을 만들어 봅시다

VsCode 설치하기

VS Code(Visual Studio Code)는 Microsoft에서 개발한 무료 코드 편집기입니다. 아래는 Windows, macOS, Linux 운영체제에서 VS Code를 설치하는 방법입니다.

Windows

**VS Code 다운로드 페이지**에 접속합니다.
"Windows" 탭에서 "User Installer"를 클릭하여 다운로드합니다.
다운로드한 파일을 실행합니다.
설치를 위해 약관에 동의합니다.
선택적으로 설치 옵션을 설정합니다.
설치를 완료합니다.

macOS

**VS Code 다운로드 페이지**에 접속합니다.
"macOS" 탭에서 "User Installer"를 클릭하여 다운로드합니다.
다운로드한 파일을 실행합니다.
드래그 앤 드랍으로 "Visual Studio Code" 아이콘을 "Applications" 폴더로 옮깁니다.
VS Code를 실행합니다.

Linux

**VS Code 다운로드 페이지**에 접속합니다.
"Linux" 탭에서 "User Installer"를 클릭하여 다운로드합니다.
다운로드한 파일을 적절한 디렉토리로 이동합니다.
터미널을 열고 다음 명령어를 입력합니다.

sudo dpkg -i [다운로드한 파일 이름].deb

의존성 패키지가 설치되지 않은 경우, 아래 명령어를 실행합니다.

sudo apt-get install -f

설치를 완료합니다.

VS Code는 설치 후 실행할 수 있습니다. VS Code를 처음 실행하면, 사용자 설정을 변경하거나 확장 프로그램을 설치할 수 있습니다.

아이오닉 앱을 만들기 위한 환경 설정

노드 버전 관리를 위한 nvm 설치

노드(Node.js) 버전 관리를 위해서는 다양한 방법이 있습니다. 이 중에서도 가장 많이 사용되는 방법은 Node Version Manager(nvm)을 사용하는 것입니다.

nvm을 사용하면 다음과 같은 작업을 수행할 수 있습니다.

여러 버전의 Node.js를 설치하고 관리합니다.
각 프로젝트에서 필요한 Node.js 버전을 지정합니다.
기존에 설치한 Node.js를 업그레이드하거나 삭제합니다.

다음은 nvm을 사용하여 Node.js를 설치하고 버전을 관리하는 방법입니다.

nvm 설치

macOS와 Linux에서는 다음 명령어를 사용하여 nvm을 설치할 수 있습니다.

curl -o- <https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh> | bash

Windows에서는 nvm-windows를 사용할 수 있습니다.

Node.js 설치

nvm을 사용하여 Node.js를 설치하려면 다음 명령어를 사용합니다.

nvm install [버전]

예를 들어, Node.js 14.16.0 버전을 설치하려면 다음과 같이 명령어를 입력합니다.

nvm install 14.16.0

Node.js 버전 확인

다음 명령어를 사용하여 현재 설치된 Node.js 버전을 확인할 수 있습니다.

nvm ls

Node.js 버전 변경

다음 명령어를 사용하여 사용할 Node.js 버전을 변경할 수 있습니다.

nvm use [버전]

예를 들어, Node.js 14.16.0 버전을 사용하려면 다음과 같이 명령어를 입력합니다.

nvm use 14.16.0

nvm을 사용하면 각 프로젝트에서 필요한 Node.js 버전을 지정할 수 있기 때문에, 프로젝트마다 다른 Node.js 버전을 사용해야 할 때 매우 유용합니다.

https://nodejs.org/en/download/package-manager#nvm

Installing Node.js via package manager | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

아이오닉 앱 시작하기

아이오닉으로 앱 개발하는 가이드

아이오닉(Ionic)은 HTML, CSS, JavaScript를 이용하여 하이브리드 모바일 애플리케이션을 만들 수 있는 오픈소스 프레임워크입니다. 아래는 아이오닉 앱을 만드는 기본적인 방법입니다.

먼저, Node.js를 설치합니다. Node.js는 아이오닉 앱 개발에 필요한 환경을 제공하는 런타임입니다.
새로운 아이오닉 프로젝트를 생성합니다. 터미널에서 다음 명령어를 입력합니다.

ionic start myApp tabs

위 명령어는 "myApp"이라는 이름의 새로운 아이오닉 프로젝트를 생성하고, 탭 기반의 레이아웃을 사용하도록 설정합니다.

생성된 프로젝트 디렉토리로 이동합니다.

cd myApp

아이오닉 개발 서버를 시작합니다.

ionic serve

위 명령어를 실행하면 브라우저에서 앱을 볼 수 있습니다.

생성된 아이오닉 앱 프로젝트를 원하는 에디터(Atom, VS Code 등)로 열고, HTML, CSS, JavaScript 코드를 수정하여 앱을 개발합니다.
필요한 플러그인이나 네이티브 기능을 사용하기 위해서는 Cordova 플러그인을 추가해야 합니다.

ionic cordova plugin add [PLUGIN_NAME]

위 명령어를 이용하여 필요한 Cordova 플러그인을 추가하고, 해당 플러그인을 사용하는 JavaScript 코드를 개발합니다.

앱을 빌드하고 배포하기 위해서는 Cordova를 사용하여 네이티브 앱으로 패키징해야 합니다.

ionic cordova build ios

위 명령어를 이용하여 iOS용 네이티브 앱을 빌드하고, 생성된 Xcode 프로젝트를 이용하여 앱을 배포할 수 있습니다.

위 방법은 아이오닉 앱을 개발하기 위한 기본적인 방법입니다. 추가적으로 필요한 내용이나 특정 기능을 구현하기 위해서는 아이오닉 공식 문서(https://ionicframework.com/docs/)나%EB%82%98) 관련 자료를 참고하여 개발해야 합니다.

* 출처: 아이오닉 가이드: https://ionicframework.com/docs/intro/environment

아이오닉으로 완성된 앱

아래에 첨부된 그림처럼 간단한 앱이 완성되었고, 브라우저에서 실행할 수 있는 상황입니다. 이 앱을 iOS와 Android용으로 빌드하고 각 기기에서 실제로 실행이되는지 시험해 보겠습니다.

클라우드 컴퓨팅 서비스