앙큼한 개발기록

얼마전 새롭게 프로젝트를 하면서 scss 설치 방법을 까먹었다가 다시 잊지 않기 위해 기록 한다. npm i node-sass sass-loader 끝.

앱 구현 혹은 웹 구현에서 툴바는 진짜 많이 사용된다. 안드로이드, 아이폰은 기본적으로 가지고 간다. 하이브리드에서 만들기 귀찮고 구현하기 까다로운 툴바를 온센 UI를 써서 만들어 보자. 기본적인 구조는 다음과 같다. {{ title }} 왼쪽 영역, 가운데 영역, 오른쪽 영역으로 나뉘어져 있으며 왼쪽에 일반적으로 뒤로가기 버튼을 놓는다. ons-back-button을 놓으면 이벤트가 자동으로 navigation에 있는 컴포넌트를 하나 빼주고 오른쪽으로 해당 페이지가 사라지는 애니메이션이 발생한다. 위치는 페이지 하단에 있어야 하며 각각 페이지 별로 넣어줘야 하는 불편함이 있지만 그래도 좋다. 페이지 별로 넣기 힘들때는 layout -> default 에 설정해주면 된다. 대신 모든 페이지에 적용하면 각..

출처 : https://ko.nuxtjs.org/guides/get-started/installation Installation Here, you will find information on setting up and running a Nuxt.js project in 4 steps. ko.nuxtjs.org 매번 프로젝트를 만들 때 마다 햇갈려서 정리 합니다. 기본적으로 노드는 설치 되어 있어야 합니다. 설치는 아래로 이동하시면 됩니다. node - at least v8.9.0 Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 터미널 혹은 cmd를 사용하실 수 있어야 합..

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

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