FEDev Story

https://negabaro.github.io/archive/js-isEmpty javascript의 null,undefined,empty 체크시 좋은 코딩방법 negabaro.github.io

https://bbaktaeho-95.tistory.com/37 [Javascript] 얕은 복사, 깊은 복사 (배열 복사, 객체 복사, shallow copy, deep copy, slice, JSON.parse, JSON.string 📚 복사 먼저 복사란, 원본과 모두 같은 내용으로 사본을 만드는 작업 원본은 따로 존재하고 사본도 따로 존재하게, 즉 원본과 사본은 내용은 같지만 서로 다르게 존재하고 있다는 뜻임 📗 얕 bbaktaeho-95.tistory.com

https://coffeeandcakeandnewjeong.tistory.com/84 getEventListeners로 등록된 이벤트리스너 확인하기 웹 개발에서 이벤트 리스너가 잘 해제되고 있는지 확인해야 하는 경우가 있다. 그럴 때 getEventListener를 사용하여 확인할 수 있다. getEventListeners(window) getEventListeners(document) 결과 { error: Arra.. coffeeandcakeandnewjeong.tistory.com

https://sogoagain.github.io/2020/04/29/%EC%8B%A4%EC%88%98%EB%85%B8%ED%8A%B8-JavaScript%EC%97%90%EC%84%9C-%EB%8F%99%EC%9D%BC%ED%95%9C-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A6%AC%EC%8A%A4%EB%84%88%EB%8A%94-%EB%8B%A8-%ED%95%9C-%EB%B2%88%EB%A7%8C-%EB%93%B1%EB%A1%9D%ED%95%98%EC%9E%90/ [실수노트] JavaScript에서 동일한 이벤트 리스너는 단 한 번만 등록하자 · 기술을 기술하다 익명 함수와 이벤트 리스너 Word count: 614Reading time: 3 min  2020/04/29  Sh..

https://ko.javascript.info/event-delegation 이벤트 위임 ko.javascript.info https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/ 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지 (기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다. joshua1988.github.io https://pathas.tistory.com/213 JavaScript | Event Handling 이벤트 처리 Evnent Handler 이벤트 처리기 등록 방법 이벤트 주도형 프로그램(event driven progr..

Javascript에서 좌표를 나타내는 값인 다음 값들에 대해서 정리해 보겠습니다. 그리고, 마우스를 클릭했을 때 좌표값을 보여주는 코드도 작성해 보겠습니다. 1. screenX, screenY 2. pageX, pageY 3. clientX, clientY 4. offsetX, offsetY 1. screenX, screenY 사용자 모니터 화면을 기준으로 한 좌표를 표시합니다. 사용자 모니터의 왼쪽 상단 모서리가 (0, 0)이 됩니다. 2. pageX, pageY 전체 문서를 기준으로 한 좌표를 표시합니다. 위 그림과 같이, 만약 문서를 표현할 때 스크롤이 생긴다면, 특정 지점의 pageY 좌표값은 페이지가 스크롤 될때마다 변경 될 것입니다. 3. clientX, clientY 브라우저에서 사용자에게..

'use strict'; // Objects // one of the JavaScript's data types. // a collection of related data and/or functionality. // Nearly all objects in JavaScript are instances of Object // object = { key : value }; const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); // 'object constructor' syntax function print(person) { console.log(person.name); console.log(person.age); } const ellie..

https://blogpack.tistory.com/690 탑 스크롤 애니메이션 구현하기 세로로 긴 컨텐츠를 웹에 표시하거나 모바일 기기에서 긴 스크롤 화면을 스와이프로 스크롤 하는 경우 화면 스크롤의 번거로움을 피하기 위해 화면 최상단으로 이동할 수 있는 고정 링크를 제 blogpack.tistory.com

Array.from(element.parentNode.children).indexOf(element) [...element.parentNode.children].indexOf(element);

https://inswave.com/confluence/pages/viewpage.action?pageId=12386335 [기타] navigation.timing 객체를 이용한 페이지 로딩 속도 측정 - 웹스퀘어 기술지식DB - Confluence 개요 웹페이지 속도 이슈 등 이 발생 시, 속도 측정을 위해, 이전에는 var start = Date.now(); 등에 스크립트를 페이지 상단, 하단에 두어 페이지를 측정 했었다면, 웹의 성능을 조금 더 정확하게 측정 inswave.com

특정 엘리먼트로 스크롤을 천천히 이동시키는 방법, scrollIntoView smooth 웹사이트의 특정 영역으로 스크롤을 이동시키는 방법 중 하나인 scrollIntoView()에 대하여 알아봅니다.! [잠깐] 스크롤을 특정 엘리먼트로 이동시키는 방법은 뭐가 있을까?원하는 위치로 스크롤을 webisfree.com

https://webruden.tistory.com/277 overscroll-behavior 속성을 활용해서 스크롤 체이닝 현상 막는 방법 웹에서 스크롤 작업을 하다보면 항상 마주치는 문제가 있습니다. 바로 스크롤 체이닝(scroll chaining) 입니다. 스크롤 체이닝이라고 표현하면 해당 이슈가 뭔지 모르실 수 있으니 아래 간단한 예제 webruden.tistory.com

https://mommoo.tistory.com/85 [JavaScript] 요소의 절대좌표 상대좌표 구하기. 안녕하세요. 오늘은 자바스크립트로 요소의 위치를 구하는 방법에 대해 포스팅 합니다. 요소의 위치를 구할 때, 생각해야할 개념이 있습니다. 이 개념은 자바스크립트 뿐만 아니라, 모든 화면 mommoo.tistory.com https://lpla.tistory.com/157 [JavaScript] 절대 좌표, 상대 좌표 구하기 HTML CSS html, body { margin: 0; padding: 0; } .box { width: 500px; height: 500px; position: absolute; } .box1 { background-color: bisque; top: 1000px; le..

https://blog.asamaru.net/2016/12/06/how-to-do-insertafter-in-javascript/ 자바스크립트 insertAfter() 구현하기 javascript는 insertBefore()만 제공하고 insertAfter() 함수는 제공하지 않는다. 웹 UI 개발시 대부분 jQuery 같은 라이브러리를 사용하니 insertAfter() 함수를 쉽게 사용할 수 있다. 그런데 추가 라이브러리를 blog.asamaru.net

https://ko.javascript.info/dispatch-events const allView = document.querySelector('.selectbox'); const category = document.querySelector('.category'); const dimDiv = document.querySelector('.dimmed'); const customEvent = document.createEvent('Event'); customEvent.initEvent('click', false, true); allView && allView.addEventListener('click', (e) => { category.classList.toggle('active'); dimDiv.cla..

const toFitScroll = (cb) => { let tick = false return function trigger () { if (tick) { return } tick = true return requestAnimationFrame(function task() { tick = false return cb() }) } } const onScroll = () => { } window.addEventListener('scroll', toFitScroll(onScroll), { passive : true }) https://jbee.io/web/optimize-scroll-event/ 스크롤 이벤트 최적화 ⚠ 이 포스팅은 자바스크립트의 비동기 처리에 대한 이해를 기반으로 작성되었습니다. 이 포스팅..

브라우저 주소창에 hash값을 id로 페이지내에서 이동해야 할 경우가 있다. http://www.test.co.kr/list/list.html#d_20200330 window.location.hash로 hash값을 얻을 수 있다. var hash = window.location.hash;//#d_20200330 아래는 window.location.hash로 얻은 hash값을 moveToHash()함수에 전달하여 호출함으로써 페이지내에서 해당 hash값을 id로 하는 div로 이동하는 코드이다. var hash = window.location.hash; function moveToHash(hash){ if(hash.length > 0){ var selector = document.querySelector(..

Android 기기에서 설정-개발자도구에서 USB 디버깅을 활성화 시킨다. 크롬에서 chrome://inspect/#devices로 접속한다. 위의 캡쳐처럼 기기정보가 뜨지 않을 경우엔 adb가 설치된 폴더에서 서버를 실행시켜준다. inspect 버튼을 누르면 Android 디바이스에 켜둔 브라우저나 앱을 inspect할 수 있다. IOS 설정-Safari-고급에서 웹속성 활성화 시키기 Mac의 Safari에서 환경설정-고급-메뉴 막대에서 개발자용 메뉴 보기 활성화 시키기 개발자용-기기이름-inspect하고 싶은 페이지나 앱을 클릭 IOS 디바이스에 켜둔 브라우저나 앱을 inspect할 수 있다. 출처: https://gguldh.tistory.com/40 [gguldiary]

input[type=text]가 아래와 같이 읽기전용(readonly)으로 설정이 되어 있더라도 focus가 들어가 커서가 깜박거리는 현상이 있다. focus를 제거하고 싶다면 아래와 같이 focus이벤트가 발생하면 blur()함수를 호출한다.

출처: https://reiphiel.tistory.com/entry/href-javascript-void-or-hash 웹 페이지를 작성하면 A(anchor)태그에 javascript 의 function을 통한 동작을 수행할 경우에 href 속성에 javascript:void(0)와 #가 작성된 코드를 만나게 됩니다. 이 경우에 과연 어떤것을 쓰는것이 맞는 것인가에 대한 궁금증이 생겨 비교해보았습니다. javascript:void(0) javascript:를 사용할 경우 해당 구문이 스크립트로 평가되어 실행되어 도큐멘트의 내용으로 표시됩니다. 클릭 위와 같이 작성된 A태그가 있다면 클릭할 경우 화면의 내용이 테스트입니다. 으로 전환됩니다. 클릭 void(0)를 사용할 경우에는 스크립트의 평가 결과로 u..

[JS] IOS의 CLICK 버블링이 발생하지 않아요 iOS Safari는 클릭할 수 없는 HTML 요소에 이벤트 버블링이 발생하지 않아요. CSS를 이용해서 { cursor: pointer } 속성을 추가하면 이벤트를 버블링합니다. CSS cursor 속성을 모바일 해상도에만 적용하는 방법으로 우회할 수 있겠네요. Raw workarounds(원시 해결방법) 1. ONCLICK : 클릭 할 수없는 요소에 onclick 이벤트를 추가하면 버블링이 발생합니다. 하지만 DOM에 삽입되는 새로운 요소는 이를 지원하기 위해 추가 코드가 필요하기 때문에 이 방법은 좋은 방법이 아닙니다. 2. cursor: pointer 클릭 할 수없는 요소의 CSS를 클릭하면 버블링을 발생시킬 수 있습니다. iOS가 동작을 수정..

보호되어 있는 글입니다.

이미지가 없을 시 X박을 대처하기 위한 방법… 대체할 이미지를 지정하는 속성 onError 조금 많이 찾아보았더니. 의외로 간단하다 ;

*기본적으로 라디오는 좌우 화살표방향키로, 체크박스는 탭키와 스페이스바로 이동한다. input[type=radio] + label , input[type=checkbox] + label {display:inline-block;line-height:0;vertical-align:middle} input[type=radio], input[type=checkbox] {border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px} input[type=radio] + label {position:relative;display:inline-block;padding:0 35px 0 30px;..

페이지 라이프사이클은 크게 3가지로 분류된다. 로드 시점과 관련된 이벤트로써, 발생하는 시점은 다음과 같다. DOMContentLoaded - HTML 이 모두 로드되고, DOM 트리가 완성되었지만, 외부 리소스(img etc) 가 아직 로드되어지지 않았을 때 load - 브라우저에 모든 리소스(img, style, script, etc) 가 로드되었을 때 beforeunload / unload - 페이지를 떠날 때 위 내용만으로도 DOMContentLoaded 가 load 보다 빨리 발생한다는 것을 알 수 있다. (unload 에 대한 것들은 사용빈도가 낮기 때문에 생략하겠다.) 각 이벤트에 대한 유용한 경우는 다음과 같다. DOMContentLoaded - DOM 이 준비 상태이기 때문에, DOM 노..

HTML 구조를 다루는 DOM 파서 CSS 구조를 다루는 CSSOM 파서 이 둘의 작업이 완료되면 렌더링 트리를 만들어 렌더링이 시작되고 페인팅되어 브라우저에서 우리가 볼 수 있게 된다. 문제는 이 파서들의 작업을 멈추게 하는 경우가 있다는 것. 크롬 개발자도구의 네트워크 탭 하단을 보면 DOMContentLoaded 항목의 속도가 표시되어 있는데 의미하는 바는 다음과 같다. HTML 다운로드 시간 + HTML DOM 빌드 시간 렌더링을 빠르게 구축한다는 것은 DOMContentLoaded 에 해당하는 시간을 줄이고 파서 차단을 최소화 시킨다는 말이다. HTML, CSS, JS 상호작용 메커니즘 서버에 http 요청시 서버는 HTML 을 응답하는데 이 과정에는 우리가 인지하지 못하는 컴퓨터간의 효율적인 ..

문제점 Swiper.js를 사용하여 슬라이드 적용시 좌우로 무한루프를 적용하기 위해 아래와 같이 옵션을 설정할 수 있다. {loop:true] 문제는 무한 루프를 적용하기 위해 Swiper.js는 DOM을 좌우로 복사하게 된다. 즉 카테고리가 4개라면 다음과 같이 DOM을 복사한다. 카테고리 4개 * 3 = 12개의 DOM 생성 복사된 DOM 자체는 무겁지 않으나 로딩시 데이트를 한번에 불러와 복사된 DOM에 적용하는 과정에서 성능 저하를 가져오게 된다. 카테고리가 많아질 수록 성능이 더 저하될 수 밖에 없는 구조이다. 스킨케어 메이크업 바디/헤어/향수 가방/지갑 해결책 모든 데이터를 한번에 불러오지 않도록 Ajax를 적용하여 현재 활성화된 탭에 대해서만 데이터를 불러온 후 슬라이드 될 때마다 동적으로 ..

앞서 유사한 기능의 플러그인인 Headroom.js 에 대하여 살펴보았는데, 구형 IE에 대한 크로스브라우징에 어려움을 겪을 수 있습니다. 이에 원리는 유사하나 대상 요소가 명확하게 한정된 요소일때 간단히 구현할 수 있는 스니펫을 소개합니다.DOC Hide header on scroll down, show on scroll upDEMO Hide Header on on scroll down고정된 헤더(네비게이션) 사용 불편함 인지많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 두곤 한다. 헤더 부분은 대부분 상호(브랜드)를 포함하고 네비게이션을 포함하기에 고정된 헤더에 높이가 긴 콘텐츠를 포함하고..

It's a perfect day for an outing. 놀러 가기 딱 좋은 날씨에요.

I don't really like rainy days. 난 비오는 날이 싫어 Rainy days and mondays always get me down 비오는 월요일은 항상 우울해요. Nothing is really wrong. 크게 잘못된 일은 없어요. No need to talk it out. 말을 꺼낼 필요조차 없다.