한준호

vue에서 audio 파일을 재생하는 것은 아주 간단하다. 1. vuetify에서 제공하는 v-btn 컴포넌트를 사용하였지만 div에 click event를 넣어줘서 해도 상관 없다. 오디오 소스를 입력하고 자바스크립트로 동작시켜주면 버튼을 눌렀을 때 음성이 나온다. pause()를 통해 정지시킬 수도 있다. play(sound) { var audio = new Audio(sound); audio.play(); }, 2. 라이브러리를 활용하면 조금 더 사용성 있는 화면을 만들 수 있다. github.com/wilsonwu/vuetify-audio?ref=madewithvuejs.com wilsonwu/vuetify-audio A Vue audio player base on Vuetify UI framew..

갤러리에 있는 사진을 선택하여 이미지 뷰에 올리는 작업 중 저화질 사진은 잘 되는데 고화질 사진에 대해선 다음과 같이 에러가 발생했다. Failed to allocate a 63701004 byte allocation with 16772768 free bytes and 55MB until OOM 대충 용량이 커서 메모리가 부족하다는 의미인데 Manifest 파일에서 android:largeHeap="true"를 추가해준다.

다음과 같은 태그를 갖는 컴포넌트에 대해 jest를 통해 유닛 테스트를 진행하려 한다. {{ msg }} 테스트 코드 v-if로 $vuetify.breakpoint.mobile이 사용되고 있는 컴포넌트에 대해 jest로 테스트를 진행하면 다음과 같이 에러가 발생한다. 대충 $vuetify의 mobile 인스턴스를 인식할 수 없다는 소리. 이유는 $vuetify인스턴스 변수는 mockable하지 않기 때문이다. 그래서오직 컴포넌트만이 shallowMount에 stubbed되는데, $vuetify.breakpoint는 Vue Test Utils에 stubbed되지 않기 때문에 다음과 같이 변경해준다. 쉽게 말하면 Vue.use(Vuetify)는 과 같은 v태그들을 인식할 수 있도록 전역으로 import한다는..

■vue로 개발을 하면서 vuetify를 사용하는 사람들을 위해 jest에서도 vuetify를 사용할 수 있는 방법이 있는데 다음과 같다. jest.config.js와 jest.setup.js파일을 생성한다. //jest.setup.js import Vue from 'vue' import Vuetify from 'vuetify' Vue.use(Vuetify) //jest.config.js module.exports = { moduleFileExtensions: ['js', 'jsx', 'json', 'vue'], transform: { '^.+\\.vue$': 'vue-jest', '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-t..

TDD(Test Driven Development)를 위해 Vue의 단위 테스트 모듈인 jest를 활용해볼 것이다. 구글링을 통해 각종 블로그들을 참고하여 이것저것 삽질을 많이 해봤는데, 환경설정에서 안되는 부분들이 너무 많아서 가장 쉽고 빠르게 할 수 있는 방법 두 가지를 소개한다. 1. 새로운 프로젝트 생성 vue create unit-testing-vue 이와 같이 생성하면 프로젝트에 unit-testing-vue 라는 폴더가 생성된다. package.json에서 "test" : "jest" 를 추가해주면 npm run test를 통해 폴더 안에 example.spec.js라는 테스트를 실행할 수 있다. 기본적으로 jest는 spec.js, test.js파일을 읽도록 설정되어있다. 2. 기존 프로젝..

■사용법 vue 에서 transition기능을 컴포넌트로 제공한다. 다음은 Vue 공식 문서에 나와있는 8가지 transition 클래스에 대한 내용이다. 트랜지션은 name속성을 갖고 있는데, css의 선택자와 같은 역할을 한다. 각 클래스들의 관계를 정리하면 아래와 같다. 일반적으로 v-enter, v-leave-to 를 함께 사용하고, v-enter-to, v-leave를 함께 사용한다. {{ "Pit-A-Pat-Korean" }} — {{ $t("yalliyalli.pap.common.no13") }} — {{ "Pit-A-Pat-Korean" }} transition을 적용하고 싶은 태그를 transition 태그로 감싸고 name을 설정해 주면 아래와 같이 css처럼 트랜지션 클래스를 사용할 ..

부모 div 태그에 display: table 자식 div 태그에 display:table cell, vertical-align: middle을 하면 사진과 같이 텍스트들이 수직 가운데 정렬 된다.

앱에서 서버와 통신을 하기 위해 okhttp3 라이브러리를 사용하였다. okhttp3는 HTTP 기반의 request / response 방식이며, Retrofit 라이브러리의 베이스가 된다. 추후에 해당 라이브러리에 대해 설명할 것이다. 이 라이브러리를 사용하기 위해선 1. okhttp3 라이브러리 설치 2. AndroidManifest에 INTERNET Permission 추가 가 선행되어야 한다. Get request에 간단히 설명하면, 치킨집에 전화해서 양념반 후라이드반을 달라고 주문하는 것과 같다. 코드상에서 치킨집은 서버, 양반후반은 request, 나는 클라이언트가 될 것이다. 통신 이벤트를 위해 간단한 버튼을 생성한다. APPLY =버튼을 누르면 서버에 Get 방식으로 호출할 것이다. pr..

안드로이드 앱 개발 중 okhttp3를 사용하여 서버와 통신이 필요한 작업이 있었다. 장고에서 로컬 서버를 열어서 rest api로 get 요청을 보내야 하는데, 안드로이드 스튜디오에서 로컬 호스트로 접속하려 했더니 이런 로그가 뜬다. 이유를 찾아보니 에뮬레이터도 하나의 OS이기 때문에 localhost는 자기 자신이다. 즉 내가 만든 서버가 아닌 에뮬레이터 자신의 서버를 향해 통신을 하기 때문에 통신이 안되는 것. 10.0.0.2로 변경하면 된다. 예를들어 .url("http://127.0.0.1:8000/app/hello/") 였다면 .url("http://10.0.2.2:8000/app/hello/") 로 변경 -참고자료 실행되는 각 에뮬레이터 인스턴스는 개발 머신의 네트워크 인터페이스나 설정과 분..

반응형 웹을 만들다 보면 브라우저 창의 높이, 넓이에 따라 사이즈를 조절해줘야 하는 경우가 생긴다. html태그에 ref를 통해 이름을 부여하고 window.addEventListener를 통해 mount될때마다 이벤트 리스너를 동작시켜 컴포넌트의 높이를 구하는 메소드를 호출한다. this.$refs를 통해 DOM에 직접 접근하여 기본적으로 제공되는 clientWidth, clientHeight를 통해 너비, 높이를 가져올 수 있다,