Question영 이야기

Node.js 를 공부했었지만 오래되다보니 Vue 를 공부하고 있다가 익숙한 구조가 눈에 띄었습니다. 'export default' Vue 공부하면서 단순히 Vue.js 라이브러리에서 정의하고 있는 고정된 양식이겠지 라고 생각하고 그냥 넘어가려다 찜찜해서 찾아본 결과 ES6 의 모듈 구조였었습니다. ES6 의 기초를 싸그리 까먹었나봅니다... 이번 포스팅은 Vue 에서 자주 다루고 있었던 컴포넌트 구조와 ES6 의 모듈 구조 관계를 살펴보도록 하겠습니다. // HelloWorld.vue ... vue-cli 을 이용하여 프로젝트 초기 구성하게 되면 폴더에 다음과 같이 기본 Vue 파일이 생성되어 있습니다. templete, script, style 태그들은 Vue.js 의 컴포넌트를 정의하기 위한 기본 ..

안녕하세요. 이번 포스팅은 Vue 의 설치 및 프로젝트 설정에 대해 간략하게 정리하도록 하겠습니다. 시스템 환경 운영 체제 : macOS Mojave Tool : VSCode Vue.js, ES6, Node.js 시작 Vue 를 사용하기 위해서는 다음과 같은 방법이 있습니다. 공식 사이트에서 개발자 버전 혹은 배포 버전 을 다운받아 Script 로 연결하여 사용한다. CDN 에 올라간 Vue 버전을 Script 로 연결하여 사용한다. npm에 올라간 최신 버전의 URL ( https://unpkg.com/vue/ ) 로 연결 NPM 을 이용하여 설치한다. npm install vue vue-cli -g 위 방법중 마지막 3번째 방법을 이용하여 vue 를 설치하고 프로젝트를 생성해보겠습니다. NPM 을 이..

이번에 포스팅할 내용은 캐러셀(Carousel) 입니다. Slider 라고도 부르기도 합니다. 기존에 이 기능을 구현을 하기 위해 저는 JQuery 로 되어 있는 오픈 라이브러리나 소스를 사용했었습니다. 그중에 owl carousel 을 사용을 했는데 Vue 에서도 JQuery 로 사용해야 하는 줄 알고 삽질을 엄청했습니다. 쉽게 사용할줄 알았는데 쉽지가 않더라구요. 특히 JQuery 를 그냥 사용할땐 쉽게 사용이 가능하지만 Vue 에서 Dom 그리는 생명주기에 맞춰서 사용하려고 하니 난의도가 급격 상승하고 혈압도 같이 상승했습니다... 여러분은 하지마세요... 어떤거를요? 걍 생명주기 없이 JQuery 사용하려면 하시되 생명주기까지 건들지 맙시다. 이건 이거대로 할 이야기가 많지만 잡설을 이만하고 결론..

Vue 프로젝트에서 SCSS 를 설정을 진행하고 있었습니다. # scss 해석 및 적용을 위한 로더 설치 1 2 3 4 # scss 종속성 설치 npm install --save-dev node-sass sass-loader Colored by Color Scripter cs # Vue 본문에 sytle 태그 속성을 scss 로 설정 1 2 3 4 5 6 /* ... */ cs 이렇게 진행했을때 잘되던 프로젝트가 갑자기 다음과 같은 에러를 뱉어내었습니다. 구글링을 하여 npm cache clean --force 를 이용하여 캐시 삭제 및 모듈삭제 후 재 설치를 해보기도 하고 package.json 파일을 삭제 후 다시 설정 해보기도 하였으나 수정이 안되고 있다가 결국 해결 방법을 찾았습니다. 문제는 sa..

개인적인 정리를 위해 요즘 한창 유행하고 있는 통신 라이브러리인 Square 사의 Retrofit 에 대한 내용을 정리합니다. 내용이 부족할수도 있으니 수정할 내용이 있다면 가차 없이 코맨트 부탁드립니다. 시스템 환경 운영 체제 : macOS Mojave Tool : AndroidStudio Android, Java 설정 build.gradle(app) 을 엽니다. dependencies 에 다음과 같이 코드를 추가합니다. 1 2 3 4 5 6 7 8 9 dependencies { ... //Retrofit implementation 'com.squareup.retrofit2:retrofit:2.6.2' implementation 'com.squareup.retrofit2:converter-gson:2...