앙큼한 개발기록

모바일 하이브리드 앱을 만들때 네이티브의 느낌을 물씬 풍기게 하기 위해서는 하단, 상단의 메뉴 탭바의 구현이 불가피 하다. 일일히 디바이스 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 기능의 가장큰 특징은..

문제 난이도 보다 문제를 이해하는데 시간이 많이 들었다 ㅠ 코딩보다 독서를 해야 하나... 한참을 읽어 보니 생각보다 간단한 문제여서 술술 풀다가 자꾸 7번 23번에서 에러가 터지길래 여기서 애를 많이 먹었다. 결국 간단한 실수 하나로 오래동안 애 먹어 정리하고자 글을 작성하게 되었당. 그리고 다른 사람들 문제 푼거 보는데 블로그에 아무리 검색해도 script는 안나와서 내가 적을거다. 내가. 우선 결과 코드부터. function solution(n, t, m, timetable) { let result; let time = getTime("09:00"); // 첫 셔틀버스 시간은 9시이므로 let cleanTimetable = []; function getTime(time){ // 분으로 변환 retu..

코딩하면서 정렬하기 위해 자바스크립트의 .sort 함수를 자주 사용합니다. 처음에는 무작정 sort 하면 그냥 정렬 되는줄 알았는데 사용하다가 몰랐던 내용을 정리하기 위해서 글을 작성하게 되었습니다. 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort Mozilla 사이트 Array.prototype.sort() 기본적은 사용방법은 아래와 같다. var array1 = [5, 4, 3, 2, 1]; var array2 = ["drive", "car", "banana", "apple"]; var array3 = ["디귿", "니은", "기역"]; array1.sort(); array2.sor..