JS 썸네일형 리스트형 [자바스크립트] 옵셔널 체이닝 간혹 개발을 하던 도중 객체 안에 있는 객체의 내용을 추출하고 싶은 경우가 있다. json1 : { json2 : { name:'1111' } } 이런 형태의 json에서 json2 안에 있는 name 을 추출하고 싶은 경우, 만약 최상위 json이 undefined라면 json1.json2.name이라고 호출을 하면 위와같은 에러가 발생한다. 이를 방지 하기 위해서 많은 방어코드가 필요하다 if....와 같은. Uncaught TypeError: Cannot read properties of undefined (reading 'json2') at :1:11 그래서 존재 할지 안할지 모르는 객체에서 값을 추출할때 아래와 같이 작성하면 많은 방어코드가 필요하지 않다. json1?.json2.name 끝! 더보기 [자바스크립트] this 변경해주는 방법 기본적으로 this 라고 개발자 모드 console에 입력해 주면 라고 나온다. 여기서 가르키는 this가 window 객체를 나타내는 것이기 때문입니다. 특정 객체 안에서 this를 사용 하면 이 this는 특정 객체를 나타내는것입니다. 이러한 this가 가르키는 곳을 변경해 주고 싶으면 obj1.bind(obj2) 또는 obj1.call(obj2) 라고 쓰면 되는데 (obj1은 일단 주로 함수 이고 obj2는 객체 이다.) 둘의 차이는 bind는 this 객체만 변경을 하고 변경된 함수를 리턴해 준다. call은 변경해서 실행까지 해준다. 사용법) 함수이름 test, this로 변경하고 싶은 객체 obj call - test.call(obj); bind - test.bind(obj) 결과물의 차이는 .. 더보기 [자바스크립트] 재귀함수로 계층구조(hierarchy structure) json 만들기 HTML 삽입 미리보기할 수 없는 소스 예시 데이터 HTML 삽입 미리보기할 수 없는 소스 호출 방식 HTML 삽입 미리보기할 수 없는 소스 결과 HTML 삽입 미리보기할 수 없는 소스 더보기 [JS] exceljs 사용시 편하게 함수 만들기 exceljs 속성 입력한는 부분 공통으로 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 export const setProps = (worksheet.. 더보기 [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.. 더보기 [자바스크립트]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, 더보기 [자바스크립트] 즉시 실행 함수 표현식 (function() { console.log('hi'); })(); 이런식으로 표현하면 함수를 호출하지 안고 선언만으로 실행할 수 있다 더보기 이전 1 2 다음
