Frontend
-
Intersection Observer - Lazy-loading, 무한스크롤을 구현하기 좋은 API!Frontend 2020. 11. 23. 11:15
나는 Intersection Observer API를 좋아한다.. 그냥 정이 간다. Intersection Observer는 특정 엘리먼트가 사용자의 화면에 노출되어있는지 감시할 수 있는 API이다. 이 짤 생각나고 귀엽다. web api 중 하나 2016년 4월 구글 개발자 페이지 통해 소개됨 특정 Element가 화면에 노출되어있는지 감시할 수 있는 API Intersection Observer를 사용해서 구현할 수 있는 멋진 것들 1. 이미지 Lazy-loading (지연 로딩) 웹사이트에 이미지가 많을 때 화면 상에 존재하는 이미지를 한꺼번에 불러오면 불필요한 네트워킹 비용이 증가한다. 사용자가 스크롤을 내려 모든 이미지를 보기 전에 사이트를 끌 수도 있는데, 굳이 처음부터 다 불러올 필요가 없다..
-
🔎 Javascript this의 모든것Frontend 2020. 3. 19. 18:18
함수 호출과 this 호출 패턴과 this 바인딩 함수 내부에는 암묵적으로 전달되는 인자가 있다. arguments 객체와 this 이다. this 인자는 자바스크립트의 핵심 개념이다. this를 이해하기 어려운 이유는 자바스크립트의 여러가지 함수가 호출되는 방식 즉, 호출 패턴에 따라 this가 다른 객체를 참조하기 때문이다. (this 바인딩) 호출 패턴에 따라 this가 어떤 객체를 참조하는지 알아보자. 1. 함수를 호출할 때 this 바인딩 함수 내부에서 사용된 this는 전역 객체에 바인딩된다. 여기서, 전역 객체란 브라우저에서 실행하는 경우에는 window객체 Node.js의 경우에는 global 객체 를 뜻한다. global.value = 1; function globalFunction() ..
-
'installVueDevtools' is defined but never used 오류 해결법Frontend 2020. 2. 3. 17:46
'installVueDevtools' is defined but never used 오류 vue cli 3.0 이상으로 electron + vue 환경 구축 시 다음과 같은 과정을 따르게된다. vue create myProject cd myProject vue add electron-builder 이 과정에서 Electron 6.0을 선택하면 오류가 발생한다. error: 'installVueDevtools' is defined but never used 오류 발생 이유 vue-devtools 모듈이 electron 6.0 버전에서 이슈가 있는 모양이다. 이럴 경우 주석처리 된 코드를 해제하고 electron 버전을 변경해주면 해결된다. 이슈 관련 링크 오류 해결법 주석 해제..
-
Docsify와 netlify로 TIL 페이지 만들기Frontend 2020. 1. 31. 00:15
TIL : Today I Learn 오늘 배운 내용을 정리한다. 라는 뜻 개발자라면 한번 쯤 시작해볼까? 마음먹는 TIL Vue, React ... 이것저것 옮겨다니면서 공부하는 요즘, 공부하는 내용 대부분이 휘발성인 것 같은 느낌이 들었다. 2020년을 맞이하여 공부한 내용을 정리하기로 마음먹었다. 현재 나는 Notion을 통해서 TIL를 작성하고 있다. Notion에서 웹 사이트로 옮기려는 이유? Notion도 기록하기 편하고 좋지만, 웹 사이트로 옮기려는 이유는 아래와 같다. 날짜가 아닌 주제를 기준으로 그룹핑하고 싶다. 혼자 쓰고 혼자 보는 공간이다보니, 내용이 부실해진다. Gitgub Public 잔디 심고 싶다. 마크다운 문법 연습하고 싶다. 영감을 받은 TIL 박준우님의 TIL 페이지를 보고..
-
vue에서 got 모듈 에러 핸들링하기Frontend 2019. 11. 18. 17:57
vue에서 HTTP 요청을 위해 다양한 방법을 사용하는데, 대부분 axios를 많이 사용한다. 국내 레퍼런스, 책에서 대부분 axios를 사용하는걸로 알고있다. 프로젝트 특성 상 header에 cookie값을 넣어야 하는데, axios는 해당 내용을 지원하지 않아서 got 모듈을 사용하게 되었다. 주로 사용되는 모듈들의 스펙을 비교하는 표를 참고하면, 프로젝트에 알맞는 모듈을 선택할 수 있다. got request node-fetch axios superagent HTTP/2 support ❔ ✖ ✖ ✖ ✔** Browser support ✖ ✖ ✔* ✔ ✔ Electron support ✔ ✖ ✖ ✖ ✖ Promise API ✔ ✔ ✔ ✔ ✔ Stream API ✔ ✔ Node.js only ✖ ✔ R..
-
webpack 완전 초보들을 위한 기초Frontend 2019. 10. 18. 19:57
개요 현재 사내에서 진행하고 있는 electron-vue 프로젝트는 보일러 플레이트를 가져다가 시작했다. 웹팩에 대한 아무런 정보가 없는 상태로 개발을 시작했고, 종종 마주치는 알 수 없는 오류가 웹팩 설정 때문인거 같은데 고칠 수 없는 경우가 허다했다. 구글 검색등으로 해결해보려고 했지만 초초초초급 개발자인 나의 눈에는 들어오지 않았고.. 어느날 머리를 식힐 겸 열어본 vue.js 입문 책 끄트머리에 vue.js 고급 개발자 되기 라는 챕터로 webpack에 대한 아주 간단한 설명이 있었고, 정말 간단한 기초인만큼 내 눈에 조금씩 들어왔기 때문에 블로그에 정리하며 공유하고자 한다. 책 이름은 Do it! Vue.js 입문 이다. http://www.yes24.com/Product/Goods/582069..