앙큼한 개발기록

nuxt 를 통해서 엑셀 파일을 읽는 방법에 대해서 알아보자. 우선 html file의 onChange 이벤트로 파일 데이터를 가져온다. ... data() { return { fileReader: null, sheetNameList: [], excelDataList: [] } }, ... readExcelFile(event) { let input = event.target let file = input.files[0] let fileName = file.name let extension = fileName.split('.')[1] let includeExtension = ['xlsx', 'csv', 'xls'] if (!includeExtension.includes(extension)) { alert(..

사용한 템플릿 : nuxt library - xlsx - file-saver 예제 소스 코드: 출력 {{ value }} {{ product.index }} {{ product.name }} {{ product.price }}

mixin에 선언되어 있는 공통 컴포넌트를 page에서 보여주려고 하니 위에 에러가 발생했다. 선언되어 있는 공통 화면을 별로도 호출 하면서 생기는 문제 였는데 mixin에 호출 되어 있으면 자기 자신이 자기 자신을 호출하게 되는 문제가 발생하였다. vue를 사용함에 있어 혹은 다른 프레임워크를 사용함에 있어서 컴포넌트의 재사용성은 굉장히 중요하다. 공통 컴포넌트를 만들어 놓고 해당 컴포넌트를 호출만 한다면 개발의 시간을 단축 함과 동시에 기능, 유닛 테스트도 편리 하여 공통 컴포넌트화 시켜서 여러 곳에서 사용하도록 개발하는 경우가 많이 생긴다. 이런 경우에 modal 창이나 confirm 창, alert 창을 공통 컴포넌트고 만들고 . 공통 컴포넌트가 동일한 부모, 혹은 자기 자신에서 호출 되는 경우에..

컴퓨터에서 nuxt 프로젝트를 새로 시작하기 위해 nuxt 커맨드를 쳐봤다. npx - npx create-nuxt-app yarn - yarn create nuxt-app npm - npm init nuxt-app 다 해봤는데 위에 에러가 나오면서 안된다면 vue cli가 설치되지 않아서 발생하는 에러이다. 아래의 커맨드를 실행하고 하면 해결 된다. npm i -g @vue/cli npm i -g @vue/cli-init

프로젝트를 진행하면서 vue-select를 많이 사용하였는데 매번 쓸 때마다 공식문서 찾아가며 이리저리 검색하며 사용한 내용들을 정리하고자 글을 작성한다. 우선 , 나는 nuxt framework를 사용하였고 vue select는 plugin directory안에 library.js를 만들어 공통 컴포넌트로 만들고 그냥 호출해서 쓴다. (대부분의 외부 라이브러리는 해당 파일 안에 때려 박는다.) library.js import Vue from 'vue' import vSelect from 'vue-select' Vue.component('v-select', vSelect) nuxt.config.js ... plugins: [ {ssr: false, src: '@/plugins/mixins.js'}, {s..

온센 ui에서 다른것도 다 좋지만 회전 ui를 직접 커스텀 할 수 있다는게 최대의 장점이 아닐까 생각한다. vue에서 제공하는 다른 좋은 탬플릿도 많지만 내 입맛에 맞춰서 커스텀 하기에는 조금 힘든 면이 있다. 온센은 뭔가 다른 탬플릿 보다 커스텀하기가 쉽다. 그럼 우선 기본적인 사용방법과 응용 방법을 알아보자 기본 구조 carousel content carousel 안에 carousel-item을 넣어서 각각의 아이탬이 화면으로 작동 되어 스와이프 혹은 버튼 이벤트를 통해서 슬라이드 이동이 가능하다. 스타일을 직접 넣어서 사용되어 있지만 클래스를 줘서 덮어 씌울 수 도 있다. 홈페이지의 예제는 페이지 전체를 하지만 부분적으로 카드 모양 혹은 하나의 영역을 슬라이드로 바꿀 수 있다. 난 전체를 잡아먹는 ..

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