[onsen-ui] 1. 시작하기

스타트업에서 근무 할 때 하이브리드 앱을 만들기 위해 조사하면서 처음 알게 되었고

초기에는 기초적인 기능만 가져다 사용하고 현재 죄다 뜯어보면서 공부하며 개발하고 있다. 

 

내용이 전부 영문이고 

초기에 사용 방법도 어색하고 어려워 

이제부터 하나 하나씩 정리해 나아가려고 한다. 

 

onsen ui는 하이브리드 앱을 만들기 위한 

프레임워크(?)로 볼 수 있다. 

 

솔직히 라이브러리라고 볼지, 프레임워크으로 볼지 햇갈린다. 

 

하이브리드 앱을 만들 때 귀찮고 번거로운 레이아웃 작업 및 이벤트, 애니메이션, 기본적인 디자인 처리를 제공해 준다. 

 

그럼 기본적인 사용 가능 언어와 사용 방법에 대해 알아보자. 

 

 

사용가능한 언어는 javascript 기반의 언어로 아래와 같은 언어를 제공한다. 

- javascript

- vuejs

- angularjs

- react

 

나는 vuejs 에 nuxt 프레임워크를 사용하여 onsen-ui를 개발한다. 

그러니 일단 기준은 vuejs로 설명하겠다. 

 

다른 항목은 홈페이지에서 참조...[https://onsen.io/]

 

vuejs 사용법, nuxt 사용법은 천천히 하나씩 추가 하겠습니다.

 

기본적으로 홈페이지에 나와있는 방법은 다음과 같다.

 

npm 혹은 yarn으로 설치

npm install onsenui vue-onsenui

 

nuxt 같은 경우 plugin 폴더에 js 파일 하나 만들어서 거기에 아래 코드 추가

혹은 그냥 vuejs같은 경우 main.js 파일에 하단의 내용 추가 

(주석은 생략해도 됩니다.)

// Webpack CSS import
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

// JS import
import Vue from 'vue';
import VueOnsen from 'vue-onsenui'; // This imports 'onsenui', so no need to import it separately

Vue.use(VueOnsen); // VueOnsen set here as plugin to VUE. Done automatically if a call to window.Vue exists in the startup code.

 

onsen-ui css 파일을 수정하거나, 디자인을 바꾸거나, css를 덮어 씌우고 싶을 땐 css를 밖으로 빼서 직접 import 해주면 된다.

 

[node_modules/onsenui/css/onsen-css-components.css] 경로에 가서 css를 복사한 후 assets에 넣어 스타일 import 부분을 아래와 같이 수정한다. 

import 'onsenui/css/onsenui.css'
// import 'onsenui/css/onsen-css-components.css'
// change core onsen ui style sheet
import '~/assets/onsen-css-components.css'

import Vue from 'vue'
import VueOnsen from 'vue-onsenui'

Vue.use(VueOnsen)

그리고 막 수정하고 고치고 만지면(?) 된다. 

 

 

Nuxt의 경우 해당 파일을 nuxt.config.js 파일에 넣어서 연결해야 사용 가능하다. 

 

예를 들어 onsen-ui.js 파일을 만들었다고 가정 하였을 때

아래와 같이 넣어서 연결해 줘야 한다.

/*
** Plugins to load before mounting the App
*/
plugins: [
	{ src: '~/plugins/onsen-ui.js' }
],

 

이러면 기본적인 세팅이 끝난다. 

 

이제 컴포넌트 단위로 하나 하나씩 

이것 저것 써보자.