전체 글 썸네일형 리스트형 [JS] Image Lazy Load - lazysizes 이미지 레이지 로드 하는 프러그인도 여러 가지고 자바스크립트 자체 적으로 Intersection Observer를 사용하면 구현도 가능하다. 그런데 Intersection Observer의 단점은 화면이 랜더링 되는 시점의 Image LazyLoading 만 가능하다는 것이다. 그렇다 보니 게시판과 같은 화면에서 더보기로 추가 되는 경우 구현이 어렵다는 단점이 있다. 그래서 주로 사람들이 많이 사용하는 플러그인이 LazySizes 이다. 복잡한 사용 방법은 https://github.com/aFarkas/lazysizes 를 참고하길 바란다. 간단한 사용방법은 1. 스크립트를 호출해 준다! 2. 클래스에 lazyload를 추가해 주고 이미지 경로는 data-src에 추가 해 준다. 끝! 더보기 [JS] Android Chrome 더보기 관련 스크롤이 하단으로 이동하는 경우 게시판을 하나 구성한다고 예시를 들어 봅시다. 게시글은 한번에 10개씩 불러 오고 추가적인 게시글은 하단에 더보기 버튼을 클릭하면 비동기식으로 가져와서 HTML 에 APPEND 되는 형식으로 구현을 했습니다. 이때 Android Chrome 의 경우, 비동기방식으로 APPEND가 되고 스크롤이 하단으로 이동하는 현상이 발생합니다. Chrome 56 부터 scroll anchoring 기능이 추가되었고 이 기능은 화면(ViewPort)은 이벤트가 일어나는 위치에 고정 시키고 화면에서 보이지 않는 부분에서 계속 무엇인가 로드 되더라도 스크롤의 이동이 일어나지 않도록 도와줍니다. 경우에 따라 해당 기능이 정상적으로 동작하지 않는 경우가 있습니다. 이와 같은 경우 overflow-anchor를 이용해 scrol.. 더보기 [CSS] 아이폰 X 모델 이상 M자 부분 퍼블리싱 최근에 발매되고 있는 스마트 폰들의 상단영역(노치) 부분을 퍼블리싱 하기 위해서는 일단. 템플릿에 ViewPort의 설정을 추가해 주어야 한다. Before (보통 이렇게 생겼을듯...) After 이런식으로 해당 부분을 추가하고 나면 기존에 디자인 한 부분이 위로 올라가면서 노치 부분과 겹처보이는 것을 볼수 있다. 그렇다면 해당 부분에 padding-top 영역을 주어 적당하게 내려오게 하면 된다. padding-top을 줄때는 하드코딩이 하는 디바이스내의 값을 환경변수를 이용하는 것이 좋다. IOS 같은 경우는 버전에 따라 아래와 같이 사용한다. // iOS 11.0 버전 body{ constant(safe-area-inset-top) constant(safe-area-inset-right) cons.. 더보기 [자바스크립트]iScroll.js 사용시 주의 할 점 iScroll.js를 사용하면 web화면을 구현할때 스크롤 처리를 하는데 도움이 됩니다. 하지만 종종 사용하다 보면 안드로이드 디바이스에서 스크롤이 정상적으로 작동하지 않는 경우가 있습니다. 이런 경우에는 iScroll.js 파일 내의 설정값을 한번 수정해보세여 :) Before : disablePointer : !utils.hasPointer, disableTouch : utils.hasPointer || !utils.hasTouch, disableMouse : utils.hasPointer || utils.hasTouch, After : disablePointer : true, disableTouch : false, disableMouse : true, 더보기 [리액트] classnames 라이브러리 classnames 라이브러리는 서로 다른 효과를 갖고 있는 css를 하나의 컴포넌트에 적용하는데 사용합니다. 일단 해당 프로젝트에서 npm add classnames OR yarn add classnames 라고 커맨드 창이나 터미널에서 입력을 하면 해당 라이브러리를 설치 합니다. 그리고 설치를 하고 나면 사용방법은 간단합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import React, { Component } from 'react' import classNames from 'classnames/bind' import styles from './App.css' const cx = classNames.bind(styles); class App extends Com.. 더보기 [리액트] 자바스크립트 배열의 map함수 오랜만에 글을 남겨 보내요. 한동안 일이 많아서 신경을 쓰지 못했습니다. 가끔은 이 블로그를 누가 보려나 싶긴한데 그래도 오늘 부터 다시 틈나는대로 공부해보려고 합니다. 오늘의 주제인 배열의 map 함수는 ES5 버전에서 부터 지원을 합니다. 이전에는 아마 for문을 이용해서 배열을 다뤘을 겁니다. var arr = [1,2,3,4,5] for(var i = 0; i .. 더보기 [타입스크립트] 모듈로더와 모듈 번들러 모듈로더는 모듈 포맷에서 맞게 작성된 모듈을 브라우저에서 해석하고 읽어 들이는 역할을 합니다. 이는 런타임 시에 발생합니다. 여기서 문제점은 모듈을 하나의 스크립트에서 생성하지 않고 10개, 100개에서 생성할 수도 있다는 것이죠. 이렇게 되면 모듈로더가 해당 파일 갯수 만큼 실행되어 http에 큰 부하를 주게 됩니다. 그래서 모듈 번들러로 모듈이 작성되어 있는 모든 파일을 하나의 번들파일로 만들어 주는 역할을 합니다. 모듈 번들러는 빌드 타임에 번들파일을 만들게 됩니다. 그런데 기본적으로는 자바스크립에는 빌드라는 과정이 존재하지 않기 때문에 따로 빌드과정을 거쳐서 번들 파닐을 생성해 주고 모듈로더는 이 번들파일만 로드 해주는 과정을 갖게 되는 것입니다. 끝! 더보기 [자바스크립트] 즉시 실행 함수 표현식 (function() { console.log('hi'); })(); 이런식으로 표현하면 함수를 호출하지 안고 선언만으로 실행할 수 있다 더보기 이전 1 2 3 4 5 6 다음
