하이브리드 앱 소개 및 아이오닉 소개, 설치 방법

하이브리드/아이오닉|2018. 5. 27. 22:02

하이브리드 앱

-> 웹 기술을 통해 앱을 개발하여 다양한 OS에 지원되는 앱을 칭한다



하이브리드 앱과 네이티브, 웹앱 비교

네이티브 앱

장점 : 빠르다, 네이티브 API 사용의 편의성

단점 : 언어의 제약, 플랫폼 한정적


웹앱

장점: 유지보수의 편리성, 크로스 플랫폼

단점 : 네이티브 액세스 못함


하이브리드 앱

장점 : 웹개발과 동일하여 개발의 연속성, 크로스 플랫폼

단점 : 성능이 느리다. (저사양 기기에서 호환안됨, 최저 OS 버전 필요)




아이오닉 소개

아니오닉

-> 웹 사이트와 웹 애플리케이션 개발에 사용했던 html, css, javaScript 등을 그대로 사용할 수 있게 해주는 도구와 유틸리티의 모음

-> AngularJS를 사용하여 웹 애플리케이션을 지원

-> 사용자 인터페이스와 UX를 지원

-> CLI 환경에서 명령어 사용을 통해 조작


코르도바

->플랫폼과 애플리케이션 사이의 브릿지를 생성하기 위한 도구이며, 설치 가능한 네이티브 앱을 만들어 준다.

 

 
개발환경 구축

-> node.js 설치하여 onic CLI 설치, 코르도바 설치

-> npm install -g cordova ionic



댓글()

webpack 소개 및 환경 구축

web/webpack|2018. 5. 27. 00:50

Webpack



- webpack은 모듈 번들러이다.

- 여러 js 파일을 하나의 번들로 만들 수 있다.

- SCSS를 CSS로 돌릴 수 있다.

- EM6를 사용할 수 있다.

- 스타일로더와 CSS 로더등 다양한 로더를 사용할 수 있다.

- 코드 압축을 해주는 UglifyJsPlugin 등 다양한 플러그인등을 사용할 수 있다.

 


설치방법

- node.js를 설치한다. https://nodejs.org/ko/

- npm install -g webpack (npm을 이용하여 webpack을 설치한다)

- npm install --save-dev style-loader css-loader  (css loader)

- npm install --save-dev sass-loader node-sass webpack (scss loader)



사용방법

1. config 설정

webpack에서 사용할 설정을 기술한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// webpack.config.js
module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.sass$/, loader: 'style!css!sass' }
    ]
  }
  
  plugins: [
   new webpack.optimize.UglifyJsPlugin({
     compressor: {
       warnings: false,
      },
    })
  ]
};
cs



※ entry : 프로퍼티로 빌드되기전의 파일 경로 기입

※ output : bundle로 만들어질 파일의 정보를 명시

※ 로더 : test 영역은 파일들의 정규식 형태 기입, loader는 사용할 로더들의 이름을 명시


2. webpack 실행

- webpack

- webpack --watch       => 파일의 상태가 변경되면 자동 빌드

- webpack --config myconfig.js     => webpack.config.js를 사용하면 별도 기술을 하지 않지만 새로운 이름의 config를 사용하려면 다음과 같이 사용

댓글()