앙큼한 개발기록

모바일 하이브리드 앱을 만들때 네이티브의 느낌을 물씬 풍기게 하기 위해서는 하단, 상단의 메뉴 탭바의 구현이 불가피 하다. 일일히 디바이스 height 맞춰주고 이미지 넣어주고 이벤트 구현 하는 귀찮음을 온센을 통해 해결 해 보자. 대략 이런 디자인 tabbar 의 구성은 tabbar 와 tab으로 구성된다. 기본적으로 홈페이지에 나와있는 사용 방법은 배열을 만들어 해당 배열을 탭바 태그 안에 넣어서 애니메이션이랑 이벤트 넣고 스타일 정하는 방법이다. label에 택스트 이름이 나오고 page에 해당 페이지 이동, props는 해당 페이지 안의 data 전달 혹은 상속 되겠다. 사실 네비게이션과 동일하게 해당 탭 바 안에 각각 페이지를 집어 넣어서 화면만 전환하는 느낌이 되겠다. 배열 안에 넣으면 왠지 ..

하이브리드 앱을 만드는 경우 가장 귀찮은 일은 페이지 전환 애니메이션이 아닐까 생각한다. 그 가장 귀찮은 일을 엄청 편하게 구현해 준다. props로 돔 지저분해 질 없고 데이터 상속도 간단하고 심지어 모듈화 시키기도 편하다. 기본적인 사용방법은 다음과 같다. 그치만 태그에 직접 쓰는 것 보다 데이터에 정의 하는게 더 좋다. ... export default { ... data() { return { pages: [...], options: { ... }, ... } } methods: { pagePrePush() { ... } } } 왜냐 하면 나중에 페이지에 따라서 애니메이션 다르게 주거나 이벤트 주거나 혹은 데이터 전달 할 때 데이터에 있어야 접근이 가능하고 변수를 재 사용 할 수 있기 때문이다. ..

화면의 페이지 단위에서 가장 최 상단에 필수로 위치하는 태그로 모든 화면에 기본적으로 들어간다. 페이지를 전환하는 방법은 navigation, carousel, segment, toolbar가 있으며 onsen ui 홈페이지의 api 종류 항목중 오늘은 page에 정의된 내용을 다룰 예정이다. 기본적인 사용 방법 Content goes here vue page 단위 혹은 nuxt page 폴더 안에 정의된 vue 파일, component에서의 페이지 단위는 모두 최상단에 [v-ons-page] 안에 들어 있어야 한다. 화면의 크기에 맞춰서 보여지는 부분을 맞춰 준다. 또한 onsen-ui에서 제공하는 강력한 네비게이션 기능을 사용하기 위해서 이다. 네비게이션은 나중에.... page 기능의 가장큰 특징은..

스타트업에서 근무 할 때 하이브리드 앱을 만들기 위해 조사하면서 처음 알게 되었고 초기에는 기초적인 기능만 가져다 사용하고 현재 죄다 뜯어보면서 공부하며 개발하고 있다. 내용이 전부 영문이고 초기에 사용 방법도 어색하고 어려워 이제부터 하나 하나씩 정리해 나아가려고 한다. onsen ui는 하이브리드 앱을 만들기 위한 프레임워크(?)로 볼 수 있다. 솔직히 라이브러리라고 볼지, 프레임워크으로 볼지 햇갈린다. 하이브리드 앱을 만들 때 귀찮고 번거로운 레이아웃 작업 및 이벤트, 애니메이션, 기본적인 디자인 처리를 제공해 준다. 그럼 기본적인 사용 가능 언어와 사용 방법에 대해 알아보자. 사용가능한 언어는 javascript 기반의 언어로 아래와 같은 언어를 제공한다. - javascript - vuejs -..