H-Log

코드 전체 보기 : https://github.com/dudrbrb/Vue.js/blob/main/pullpage-nuxt/pages/index.vue 마우스 휠 이벤트 먼저 마우스 휠 이벤트를 셋팅 한 후에, 마우스 드래그와 터치 이벤트까지 적용시켜 줄 것이다. data 변수 - pageIndex : 현재 보여지는 페이지의 index를 담아 활용할 것이다. - nowMoving : 페이지가 움직이는 동안에 이벤트가 중복되지 않도록 도와줄 변수이다. methods - catchAction : wheel, touchmove, mousemove 등의 이벤트 리스너를 담는 함수이다. - wheelEvent : 마우스 휠 이벤트가 감지됐을 때 실행하는 함수 스크롤을 내일때 e.deltaY 는 100 출력, 올릴..

코드 전체 보기 : https://github.com/dudrbrb/Vue.js/blob/main/pullpage-nuxt/pages/index.vue 들어가며 여러가지 편리한 라이브러리가 많지만, 설치하고 불러오고 응용하는 과정을 못견디고 직접 구현을 해보았다. 야매이긴 하지만 결과는 매우 만족! 단 170줄로 무거운 라이브러리와 같은 기능을 구현해냈다. scrollTo를 사용했을 때, 모바일 브라우져의 상단 주소창, 하단의 툴바 등의 영향으로부터 벗어나기 위해 나는 transfom을 이용했다. 구조 잡기 '.section'을 추가하면 그 숫자만큼 pagination을 만들어 내기 위해 page라는 변수 안에 '.section'을 담아 v-for로 pagination을 생성했다. 0 1 2 3 스타일은..

Nuxt에 Scss를 설치해보자! node-sass, sass-loader 추가 npm을 이용해서 설치 node-sass와 sass-loader를 설치한다. $ npm install --save-dev node-sass sass-loader nuxt.config.js 설정 nuxt.config.js파일에서 css에 추가할 scss를 입력하고 해당 경로에 scss파일을 추가하여 사용하면 된다. // nuxt.config.js export default { css : [ '~assets/scss/app.scss' ] } 설치 오류 위와 같이 설치했는데, 아래와 같은 에러가 발생한다? Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Typ..

Vue.js Application을 쉽게 생성하고 만들 수 있는 프레임 워크인 Nuxt.js Nuxt.js를 시작해보자! Nuxt.js 공식 사이트 Nuxt Lifecycle No matter which tool you use, you will always feel more confident when you understand how the tool works under the hood. The same applies to Nuxt.js. nuxtjs.org Nuxt.js 설치 Terminal에서 진행한다 npx $ npx create-nuxt-app yarn $ yarn create nuxt-app npm $ npm init nuxt-app 명령어 실행 후에는 여러 질문이 나오는데, 원하는 환경에 맞게..