본문 바로가기

JavaScript

Parcel Proxy 설정 // dev-server.js const { createServer } = require('http'); const { createProxyServer } = require('http-proxy'); const Path = require('path'); const Bundler = require('parcel-bundler'); const backEnd = { protocol: 'http', host: 'localhost', port: 3000 }; const parcelEnd = { protocol: 'http', host: 'localhost', port: 8080 }; // parcel options, such as publicUrl, watch, sourceMaps... none of which ..
babel babel은 자바스크립트 컴파일러다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드다. 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다. babel-polyfill babel을 사용한다고 자바스크립트 최신 함수를 사용할 수 있는 건 아니다. 초기에 babel만 믿고 최신 함수를 사용했다가 브라우저에서 동작하지 않는 것을 보고 당황했었다. babel은 문법을 변환해주는 역할만 할 뿐이다. polyfill은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 한..
<video> 이슈 STEP 인트로 페이지에는 video가 들어가야 됐다. 태그 삽입 중에 두가지 역경을 맞이했는데.. 1) 비디오는 로드되지만, 플레이가 안된다? (검은 박스 상태) 이건 코덱 문제였다. HTML5의 표준 코덱은 H.264 코덱인데, 공유받은 코덱이 MPEG Video여서 동작이 안되는 것이였다. 2) 비디오는 잘 들어오지만, autoplay가 되지 않는 상황 이건 video 태그에 인라인으로 width, height 값을 지정해주지 않아서 였다. 3) PC에선 잘 재생되지만, 모바일에서 재생이 안된다? video 태그에 playsinline 속성을 넣어준다. 이번주 삽질 끝~! (제발~~)
Parallax.js in Vue https://www.npmjs.com/package/vue-parallax-js vue-parallax-js Tiny vue component that adds a directive for parallax effect on elements. www.npmjs.com https://vuejsexamples.com/tag/parallax/ Parallax - Vue.js Examples An easy to use Mouse Parallax Component - Made with Vue.js vuejsexamples.com
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:4433'). vue-youtube-embed 플러그인을 사용하여, youtube를 page에 삽입할 때, 다음과 같은 오류가 발생하였다. Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:4433'). youtube를 로그인하면 이러한 오류는 발생하지 않는다. 구글링 해보니, 다들 같은 고민을 하고 있는 듯 하였다. I took a deeper look into this, it seems like it might be a timing issue with the YouTub..
SPA와 SSR의 장단점 그리고 Nuxt.js 지난 편에서 프론트엔드 프레임워크를Vue.js 로 결정하고 본격적으로 개발에만 집중하면 될 줄 알았지만, 한 가지 더 고민할 부분이 있었습니다. Vue-CLI로 만든 앱은 검색엔진최적화(SEO)가 어렵다는 점이죠. 웹서비스를 하는 저희 회사 입장에서는 검색엔진에 적절하게 노출되는 것이 아주 중요합니다. 일반적인 SPA 앱을 검색 로봇 입장에서 보면 모든 페이지의 소스가 아래와 같습니다. 로딩시점에서는 검색 엔진이 색인을 할 만한 콘텐츠가 존재하지 않는 것이죠. SPA 는 어떻게 렌더링되는 걸까요? 그리고 SSR은 왜 하는거죠? SPA와 SSR의 장단점을 살펴본 후, Vue.js 에서 SSR을 하는 여러 옵션의 특징을 분석해보겠습니다. SPA는 어떻게 렌더링하길래? 다들 아시겠지만 SPA(Single Pa..
[Library] vue-scroll-reveal ScrollReveal은 요소를 뷰포트에 enter / leave 할 때 요소를 쉽게 애니메이트하기위한 JavaScript 라이브러리이다. 직접 DOM을 Select 해서 스크롤 높이와 content의 높이를 계산해서 구현하려다 좋은 라이브러리가 있어서 사용하게 되었다. 사용 예시: https://wizball.io/info Wizball(ウィズボール)の紹介ページ WizballはLINK chain(ブロックチェーン)を基盤としたdAappとして運営する知識共有のためのQ&Aサービスです。 wizball.io # 사용방법 1. vue-scroll-reveal 설치 yarn add vue-scroll-reveal 2. main.js에 vue-scroll-reveal 셋팅 import VueScrollReveal fro..
Vue.js의 $refs를 통하여 DOM에 접근하기 출처 : https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs Accessing the DOM in Vue.js with $refs Learn how to access the DOM in Vue by using the $refs property that is available on Vue instances and components. Manipulating the DOM is easy with $refs. codingexplained.com 뷰에서는 $refs 속성을 이용해 DOM에 접근할 수 있습니다. 템플릿 안의 엘리먼트에 ref 속성을 추가함으로서, 뷰 인스턴스에 이 엘리먼트에 대한 정보를 줄 수 있습니다. 또한, 우리는 이 ..

티스토리툴바