'전체'에 해당하는 글 5건

macOS에서 npm으로 글로벌 영역에 패키지를 설치하다가 EACCESS 같은 에러를 만나면 대부분 권한 문제이다. npm이 패키지를 설치 할 폴더에 쓰기 권한이 없기 때문에 발생하게 된다. 이 문제는 다음과 같이 해결 할 수 있다.

  • npm 기본 디렉토리의 권한을 변경한다.
  • npm 기본 디렉토리의 위치를 변경한다.
  • 기존 node.js를 지우고Homebrew와 같은 패키지 매니저를 통해 node.js를 재설치한다.

npm 기본 디렉토리를 굳이 옮길 필요도 없고, 난 brew 같은 패키지 매니저를 별로 좋아하지 않기 때문에 첫번째 옵션으로 해결했다. (node.js 같은 경우, 공식 사이트에서 설치 파일을 제공하기 때문에 굳이 brew를 이용 할 필요는 없다. brew로 설치하면 별 다른 점은 없지만, 나중에 내가 설치한 node.jsbrew로 통해 설치했는지, 수동으로 설치했는지 기억이 안 나는 경우가 많아서…)

npm 기본 디렉토리 권한 변경

  1. 먼저 npm이 설치 된 디렉토리의 경로를 알아야 한다.

    npm config get prefix
    

    node.js를 처음 설치 할 때, 경로를 바꾸지 않았더라면 대부분 /usr/local일 것이다.

  2. 1번에서 반환되는 경로에 해당되는 디렉토리의 권한을 변경한다.

    sudo chown -R <username> <npm_default_path>/{lib/node_modules,bin,share}
    // 예제
    sudo chown -R jhlee /usr/local/{lib/node_modules,bin,share}
    

다른 방법으로 해결하고 싶다면

Fixing npm permissions 링크를 참고하도록 한다.

저작자 표시
신고

WRITTEN BY
Profile
음주코딩
:D

받은 트랙백이 없고 , 댓글이 없습니다.
secret

최근 Node.js 관련 스터디를 하고 있는데, 스터디에서 개발 한 어플리케이션을 배포 할 호스팅 서비스가 필요했다. 개인적으로 운영 중인 서버가 있으나, 다른 사람들에게 열어 줄 만큼 정리가 되어 있지 않은 상태였고 또 요즘 유행하는 클라우드 서비스를 공부하는 것도 좋을 것 같아서 여러 서비스를 찾아보았다.


개발자들이 주로 사용하는 PaaS(Platform as a Service)는 구글 앱 엔진(Google App Engine)아마존 웹 서비스(AWS), 그리고 헤로쿠(Heroku)가 있었다. 앞의 두 서비스는 무료로 이용하기 애매하고 (GAE는 계정 당 무료 호스팅 서비스가 제공되지만 트래픽 초과 시 과금이 되고, AWS는 스터디로 쓰기엔 비용이 좀 …) GAE는 아직 node.js를 정식으로 지원하는 것 같지는 않다. 반면에 헤로쿠(Heroku)는 node.js를 정식으로 지원하면서, 계정당 5개의 무료 호스팅 서비스를 제한적인 기능 선에서 제공하고 있다. 스터디 용도로는 딱이라고 생각했기 때문에 이번 포스트에서 헤로쿠(Heroku)에 node.js 어플리케이션을 생성하고 소스를 배포하는 방법을 설명해 보겠다.


Heroku 가입

https://www.heroku.com/ 에서 가입한다. 가입을 하고 나면 가입 된 메일로 인증 메일이 발송 된다. 인증 메일을 통해 비밀번호를 설정하자.


Heroku 설치

https://devcenter.heroku.com/start 로 이동하여 Node.js 항목으로 이동한다. 좌측의 Set up 탭으로 이동하여 Heroku CLI(Command Line-Interface)를 다운 받아서 설치하자. (git가 설치되어 있다면 Custom Installation을 선택하여 제외시켜도 된다.)


Heroku 로그인

Heroku CLI이 설치되었다면 터미널에서 Heroku에 로그인 해 보자.

$ heroku login

Enter your Heroku credentials.
Email: id@gmail.com
Password (typing will be hidden):
Logged in as id@gmail.com


어플리케이션 생성 및 소스 배포

Heroku에서 튜토리얼로 제공하는 샘플 웹 어플리케이션을 배포해보자. 아래와 같이 샘플 소스를 내려받는다.

$ git clone https://github.com/heroku/node-js-getting-started.git
$ cd node-js-getting-started

샘플 소스를 받았다면, Heroku에 어플리케이션을 생성해야한다. 아래 명령어를 입력하면 자신의 계정 밑에 헤로쿠 어플리케이션이 생성되며, git 저장소도 제공된다.

$ heroku create <어플리케이션 이름>

https://dashboard.heroku.com/apps 에 접속하면 생성 된 어플리케이션이 보일 것이다. 이제 소스를 서버로 업로드 해보자.

$ git push heroku master

소스를 푸시하면 서버에서 package.json를 읽어서 자동으로 node.js module들을 설치하고 빌드를 수행한다.


배포 확인

이제 배포 된 웹 어플리케이션을 확인해보자. 웹 서버의 URL(http://warmz-hello.herokuapp.com/)로 접속해보면 배포 된 샘플 어플리케이션을 확인 할 수 있다.




Heroku 어플리케이션 로그 확인

커맨드 라인에서 서버의 로그를 확인 할 수 있다. --tail 옵션을 추가하면 명령어가 종료되지 않고 로그를 계속 볼 수 있다.

$ heroku logs --tail

저작자 표시
신고

WRITTEN BY
Profile
음주코딩
:D

받은 트랙백이 없고 , 댓글이 없습니다.
secret

안드로이드 개발 환경 구성 방법은 구글링을 해도 많이 나오지만, 막상 개발을 하다 보면 여러가지 추가 설정을 해줘야 하는 경우가 자주 있어서 이참에 포스트로 정리하고자 한다.

Java 설치 및 환경 변수 등록

  • 현재 안드로이드 마시멜로우가 지원하는 공식 자바 버전은 7이다.
  • Oracle JDK 1.7(Java 7)은 작년 상반기에 릴리즈 된 7u79 버전을 기준으로 더 이상 업데이트 되지 않는다.
  • 안드로이드에서 JDK 1.8(Java 8)을 사용하는 것은 불가능 하지 않지만, 여러가지로 추가 설정을 해줘야 한다.
  • Java 7과 8의 차이는 그리 크지도, 작지도 않다. 추가 된 기능 중 Lambda Syntax 같은 경우, Retrolambda와 같은 라이브러리를 사용한다면 Java 7에서도 사용 가능하다.
  • 그러므로 Java 7과 8 중 고민한다면, 그저 내키는 것을 설치해도 크게 문제는 없다.
  • JDK를 설치했다면 시스템 환경 변수에 Java Home 폴더를 등록해야 한다.
    • Windows
      • 변수명: JAVA_HOME
      • 값: JDK 설치 경로 (예: C:\Program Files\Java\jdk1.8.0_77) -> bin은 포함하지 않는다.
    • OSX
      $ vi ~/.bash_profile
      $ export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_91.jdk/Contents/Home
      

Android Studio 설치

Android SDK만 별도로 설치하는 방법도 있지만, Android Studio를 설치하면 SDK도 같이 설치 가능하니, Studio를 설치하는 것을 추천한다. (대부분의 개발을 Studio에서 하니까…)

Android SDK 설치 및 환경 변수 등록

Android Studio를 설치하고, SDK도 설치했다면 이제 SDK 경로도 환경 변수에 등록해야 한다.

  • Windows
    • 변수명: ANDROID_HOME
    • 값: Android SDK 설치 경로 (예: E:\lib\android\sdk)
  • OSX
    $ vi ~/.bash_profile
    $ export ANDROID_HOME=/Library/Android/sdk
    

환경 변수 PATH 업데이트

이제 상단에서 등록한 환경 변수들을 환경 변수 PATH에 포함시켜야 한다. 포함시키지 않으면 명령 프롬프트에서 접근이 불가능하다.
등록 시켜야 할 경로는 다음과 같다.

  • JAVA_HOME/bin
  • ANDROID_HOME/tools
  • ANDROID_HOME/platform-tools

플랫폼 별 등록 방법은 다음과 같다.

  • Windows
    <기존 PATH>;%JAVA_HOME%\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
    
  • OSX
    $ vi ~/.bash_profile
    $ export PATH=${PATH}:${JAVA_HOME}/bin:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools
    $ source ~/.bash_profile
    

환경 구성 확인

이제 위에서 설정한 사항들을 확인 할 차례다. 아래 사항 중 하나라도 원하는 결과가 나오지 않는다면 뭔가 잘못 된 것이므로 다시 한 번 확인 바란다.

  • 자바 버전 확인

    $ java -version
    
    // 결과
    java version "1.8.0_91"
    Java(TM) SE Runtime Environment (build 1.8.0_91-b14)
    Java HotSpot(TM) 64-Bit Server VM (build 25.91-b14, mixed mode)
    
  • ADB 확인

    $ adb
    
    // 결과
    Android Debug Bridge version 1.0.32
    Revision 09a0d98bebce-android
    ...
    
  • AVD 확인

    $ android avd
    
    // Android Virtual Device Manager가 실행 된다.
    
저작자 표시
신고

WRITTEN BY
Profile
음주코딩
:D

받은 트랙백이 없고 , 댓글이 없습니다.
secret

이 포스트는 Ionic 1.3 버전에 대한 내용입니다.


지난 번 Ionic 소개 포스트에 이어서 Ionic 개발 환경을 세팅하는 방법에 대해 정리해보겠다.
Ionic의 개발 환경은 node.js를 기반으로 한다. 앱 자체가 node.js 위에 실행 되는 건 아니고, 소스 파일들이 프론트 엔드 개발과 동일한 HTML/CSS/Javascript로 이루어져 있기 때문에 PC에선 이를 실행하기 위한 (경량) 웹서버가 필요하게 된다. 때문에 Ionic은 이런 추가적 요구사항들을 해결하기 위해 제공되는 여러 CLI들이 있고, 해당 CLI들은 node.js 기반에서 돌아가는 구조로 되어 있다.


Ionic 개발 환경을 구성하기 전, 개발하려는 모바일 OS 플랫폼의 개발 환경을 미리 세팅해야한다.
Android 개발 환경 구성하기 <<


Apache Cordova 설치

Apache Cordova는 HTML/CSS/JS를 여러 모바일 플랫폼으로 빌드 할 수 있게끔 도와주는 CLI이다. (앱 빌드/설치, 플랫폼 별 설정, Native API 사용을 위한 플러그인 등 여러가지 기술을 제공한다.) 사실 Cordova만으로도 모바일 앱을 만들 순 있으나, Cordova에는 앱 UI에 구현을 위한 라이브러리는 거의 배제되어 있기 때문에 Ionic이 필요하다.

$ npm install codova -g

Ionic Framework 설치

Cordova가 크로스 플랫폼에 대한 기술적인 부분을 지원한다면, Ionic은 좀 더 편리한 앱 개발 환경 및 UI 구현에 대한 부분을 책임진다고 볼 수 있다. (여러 Provider/Service/Directive 및 CSS 등을 제공한다.)

$ npm install ionic -g

gulp 설치

ionic은 기본적으로 빌드 시스템을 gulp.js를 사용한다. 때문에 기본 빌드 task 이외에 개발자가 직접 커스텀 task를 작성 할 수 있다.

$ npm install gulp -g

ios 개발을 위한 추가 패키지 설치

  • ios-deploy 설치
    ios-deploy는 Xcode 실행 없이 앱을 빌드하여 시뮬레이터 또는 디바이스에 설치 할 수 있게끔 도와주는 패키지이다.
    (그렇다고 해서 Xcode가 필요 없는 것은 아니고, CLI로 프로젝트를 빌드하기 때문에 기본적으로 Xcode 설치를 요구한다.)

    $ npm install ios-deploy -g
    
    // OSX El Capitan(10.11)에서 nvm이나 n과 같은 node version manager를 사용하지 않는 경우
    $ npm install ios-deploy -g --unsafe-perm=true --allow-root
    

샘플 프로젝트

개발 환경이 구성되었으니 이제 샘플 프로젝트를 받아보자. ionic start CLI는 샘플 프로젝트를 받을 수 있는 명령어이다. 아래 명령어를 실행하면 sidemenu 샘플 프로젝트를 다운로드를 받게 된다.

$ ionic start myApp sidemenu

다른 샘플 프로젝트는 링크에서 볼 수 있다.

샘플 프로젝트를 PC에서 실행

샘플 프로젝트를 받았다면 이제 프로젝트 폴더로 이동 한 뒤, serve 기능을 이용하여 앱을 PC에서 실행해보자.

(serve 명령어를 사용하면 Ionic이 node.js로 웹서버를 띄운 뒤, 앱의 www/index.html을 자동으로 로드해준다.)

$ cd myApp
$ ionic serve

샘플 프로젝트를 디바이스 또는 에뮬레이터(시뮬레이터)에서 실행

디바이스 또는 에뮬레이터에 배포하기 전에 우선적으로 해야 할 일이 있는데, 프로젝트에 빌드 할 플랫폼을 추가하는 일이다.
아래 명령어를 통해 개발하고자 하는 플랫폼을 추가 할 수 있다.

$ ionic platform add [ios|android]

플랫폼을 추가했다면 아래 명령어를 입력하여 디바이스(or 에뮬레이터)에서 앱을 확인 할 수 있다.

// 빌드만 할 경우
$ ionic build [ios|android]

// 빌드 된 상태에서 디바이스 또는 에뮬레이터에 배포 할 경우
$ ionic emulate [ios|android]

// 빌드와 실행을 한 번에 할 경우
$ ionic run [ios|android]

ios

Android



다음 포스트에선 Ionic 어플리케이션 개발 방법론에 대해 알아보겠다.

저작자 표시
신고

WRITTEN BY
Profile
음주코딩
:D

받은 트랙백이 없고 , 댓글 하나 달렸습니다.
  1. 비밀댓글입니다
secret

회사에서 준비 중인 솔루션의 모바일 버전을 준비하기 위해 여러가지 이야기가 오고 가고 있었다. 그 이야기 중에서 가장 큰 관심은 어떤 방식으로 앱을 개발할 것 인가였는데, 기존의 네이티브 개발 방식에는 OS 및 디바이스 별 파편화로 인해 다들 회의감을 가진 상태였다. 그리고 우리 같이 솔루션이 전업이 아닌 SI회사에서 솔루션에 인원을 투자한다는 것은 그만큼 부담이 있었기 때문에, 개발 뿐만 아니라 추후 관리에 있어서 cost가 조금 덜 드는 개발 방향을 찾고자 했다.


Native App

전통적인 개발 방식. 네이티브니 당연히 해당 플랫폼에서 제공하는 모든 기능을 사용 할 수 있다.

  • 장점
    • (못 만들지 않는 이상 …) 성능은 확실하게 보장.
    • 개발 경험이 있기 때문에 러닝 커브가 낮음.
  • 단점
    • 크로스 플랫폼을 지원하기 위해선, 플랫폼 별 개발자가 각각 필요.
    • 작은 부분에 있어 변경이 발생하면 앱 업데이트가 불가피.
    • 지속적인 유지보수가 어려움. (우리 회사의 입장에선 …)
    • OS 및 기기 별 파편화.


Hybrid App

HTML/JS/CSS로 웹 페이지를 만들고, 이를 웹뷰로 감싼 형태.

  • 장점
    • 하나의 코드로 크로스 플랫폼 지원.
    • 개발 프레임워크에 따라서 네이티브 앱처럼 카메라, GPS 등의 플랫폼 기능을 사용 할 수도 있다.
    • 기존의 Front End 개발자라면 쉽게 접근 가능.
    • 게임을 제외한 일반 네이티브 앱에 준하는 성능.
    • 어느 정도 수준의 파편화 현상을 방지.
  • 단점
    • 장점에서 얘기한 네이티브 앱에 준하는 성능을 지원한다고 했지만, 절대적으로 동급은 아님.
    • 일반적인 플랫폼 기능 외의 특수한 기능들은(예를 들면 지문 인식 등) 사용하기 어려움.
      (직접 플러그인을 만들어야 할 지도…)
    • Native App 개발자 입장에서의 새로운 러닝 커브가 필요.
    • 플랫폼 별 파편화는 어느정도 방지 할 수 있으나, 웹뷰 버전이 다른 경우 새로운 파편화에 직면 할 수 있음.


선택

결론부터 얘기하자면, 우리 회사는 Hybrid App 개발 방식을 택했다. 개발 할 때는 2명 내지, 많으면 3명이 투입 되더라도 개발이 완료 된 시점에선 1명만으로도 유지 보수가 충분하기 때문이다. 물론 하이브리드 앱이 네이티브 앱에 비해 절대적으로 우위를 가진 것은 아니나, 상대적으로 볼 때 우리가 게임을 만드는 것도 아니고, 고성능을 필요로 하는 것도 아니었기 때문에 여러 면에서 하이브리드 앱이 나아 보였다.


프레임워크

하이브리드 앱을 개발하기로 했지만, 예전처럼 모바일 웹 사이트를 웹뷰로 감싸서 배포하는 방식은 지양하고자 했다. 사실 이 방식은 하이브리드 앱이라고 부르기 민망한 수준이고(개인적인 생각으로는…), 만들어진 모바일 웹 사이트도 없는 상태 :(
때문에 하이브리드 앱 프레임워크를 사용해 맨 바닥부터 앱을 개발하고자 했다.


Ionic Framework

하이브리드 앱 개발에 있어 쓸 수 있는 프레임워크는 여러 종류가 있으나(링크), 우리는 Ionic Framework를 사용하기로 했다. Ionic으로 직접 개발해 본 적은 없지만, 이미 사내에 Ionic으로 개발하던 다른 서비스도 있었고, 자문을 구해 본 결과 아직은 부족하지만 나름 쓸만하다는 의견이었다.


Ionic ?

역사로 따지자면 이제 2살밖에 되지 않은 갓 신생 프레임워크다. 정식 버전은 현재 1.3이고, 2.0 베타 버전을 준비 중인 상태이다. UI는 AngularJS 및 Ionic Directive로 이루어져 있고 Native Access API는 Cordova를 베이스로 하고 있어서 추가적으로 필요한 네이티브 기능은 개발자가 직접 플러그인 형태로 개발 가능하다.


Ionic의 특징을 정리하자면 다음과 같다.

  • Cordova 플러그인은 Ionic에서 모두 사용 가능하다.
    (때문에 카메라, GPS, 파일 입출력 기능들은 네이티브 앱과 동일하게 쓸 수 있다.)
  • UI 관련해서 많은 코딩을 하지 않더라도 네이티브 앱과 유사하게 디자인 할 수 있다.
    (헤더, 탭, 사이드 메뉴, 페이지 전환 애니메이션 등등)
  • 프레임워크의 개발 방향이 퍼포먼스 향상에 맞춰져 있다.
    (실제로 Ionic 앱을 설치해보면 네이티브 앱이 부럽진 않을 정도로 뛰어나다.)
  • CLI(Command Line-Interface)가 잘 지원되므로 개발하기 편하다.
  • Like native app을 위한 여러 가지 라이브러리를 지원한다.
    (Pull to refresh, Infinite Scroll 등등)
  • 개발 환경은 node.js를 기반으로 하기 때문에 gulp등 여러 node module 들을 사용 할 수 있다.
  • 기본 빌드 시스템은 gulp를 사용한다.
  • Front End 라이브러리 관리는 bower를 사용한다. (사용하지 않아도 상관 없다.)
  • 레퍼런스가 풍부하고 포럼이 활성화되어 있다.

Ionic은 Android의 경우 자체 웹뷰(Cross Walk)를 사용 할 수도 있지만, 기본적으론 OS의 기본 웹뷰를 사용하되, 플랫폼 별로 상이한 여러가지 이벤트들(키보드 Show/Hide 등)을 Ionic Framework에서 핸들링해준다. 덕분에 개발자는 각 플랫폼을 위한 하드코딩(?)을 덜 할 수 있게 되고, 비즈니스 로직 개발에만 집중 할 수 있게 된다.


Ionic 프로젝트 구조

프로젝트의 구조는 Cordova & Phongap과 유사하다.


개발 환경은 node.js를 기반으로 하기 때문에 package.json 파일이 있으며, Front End 라이브러리 관리를 위한 bower.json, 빌드를 위한 gulpfile.js, 각 플랫폼 설정을 위한 config.xml, 그리고 프로젝트 설정을 위한 ionic.project 파일 등이 있다. 배포를 하기위해 publish 빌드를 하게 되면, 각 플랫폼은 config.xml을 기반으로 메타 데이터를 설정하게 되고, iOS는 Xcode 프로젝트 파일을, Android는 서명이 안 된 APK 파일을 생성해준다.


Ionic 샘플



결론

아직 Ionic을 접한 지 한 달 채 되지 않았지만, 내가 느낀 바로는 익숙해지면 꽤 쓸만하다였다. 물론 Ionic이라고 단점이 없는 건 아니지만, Ionic의 단점이라기 보다는 Ionic을 구성하는 라이브러리들의 단점인 것 같다.

  • UI는 AngularJS를 기반으로 하기 때문에 (Ionic 1.x는 Angular 1을, 2.x는 Angular 2를 지원)
    AngularJS를 접해 본 적이 없다면 초반 러닝 커브는 상당히 높다.
  • 모바일 앱 개발을 위한 편의 기능은 많지만, 막상 들여다 보면 조금씩 부족하다. (나사가 모자르는 느낌)

이래저래 장점 및 단점들이 있지만, 앱을 개발한다면 한 번쯤 고려해 볼 만한 선택인 것 같다.

저작자 표시
신고

WRITTEN BY
Profile
음주코딩
:D

받은 트랙백이 없고 , 댓글이 없습니다.
secret