FEDev Story

forEach 메서드는 배열의 처음부터 끝까지 순서대로만 동작하도록 설계되어 있어서, 뒤에서부터 순회하는 기능은 지원하지 않아요.하지만 대신, for 루프를 사용해서 **역순(forEach처럼 동작)**할 수 있어요.✅ 역순으로 배열 순회하는 방법const arr = [1, 23, 4];for (let i = arr.length - 1; i >= 0; i--) { const num = arr[i]; console.log(num); // 4, 23, 1 순서로 출력}❗️forEach처럼 콜백을 쓰고 싶다면?const arr = [1, 23, 4];arr.slice().reverse().forEach((num) => { console.log(num); // 4, 23, 1});설명:slice()는 원본..

자바스크립트에서 문자열에서 숫자만 추출하려면 정규식을 사용하는 방법이 가장 일반적입니다. 예를 들어 'popup1'에서 숫자 1만 추출하려면 아래와 같이 할 수 있어요:✅ 숫자만 추출하는 방법const str = 'popup1';const num = str.match(/\d+/); // 숫자에 해당하는 부분 추출console.log(num ? num[0] : null); // "1"설명:\d+는 하나 이상의 숫자를 의미합니다.match()는 정규식과 일치하는 문자열을 배열로 반환합니다.숫자가 없을 경우 null을 반환할 수 있으니 ?로 체크해줍니다.👉 숫자를 숫자형(Number)으로 바꾸고 싶다면?const str = 'popup1';const num = str.match(/\d+/);const num..

참조에 의한 전달이 일어나는 3가지의 데이터 타입으로는 Array, Function, Object가 있다. 사실 이 3가지는 크게 보자면 전부 객체(Objects)로 볼 수 있다. 원시타입이 아닌 값이 할당된 변수들은 그 값으로 향하는 참조를 갖게 된다. 참조는 메모리에서의 객체의 위치를 가리키고 있다. 변수는 실제로 값을 가지고 있지 않다. 참조로 할당하기 객체와 같은 참조 타입의 값이 =과 같은 키워드를 이용하여 다른 변수로 복사될 때, 그 값의 주소는 실제로 복사된다. 객체는 값 대신 참조로 복사된다. var reference = [1]; var refCopy = reference; 각각의 변수는 이제 같은 배열로 향하는 레퍼런스를 갖는다. 이 말은 우리가 reference나 refCopy를 수정하..

https://goodmemory.tistory.com/117 [Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() [자바스크립트 / Javascript] CSS Selector를 통해 엘리먼트 구분하기 Element.matches() 기본 형태 //CSS Selector를 통해 엘리먼트 구분하기 //해당 엘리먼트와 셀렉터가 같다면 true | 다르다면 false 반환 el.. goodmemory.tistory.com https://developer.mozilla.org/en-US/docs/Web/API/Element/matches Element.matches() - Web APIs | MDN The matches() method checks to see..

https://jae04099.tistory.com/41 [JavaScript] Class 자바스크립트의 class개념은 ECMA6에서 새로 도입된 개념이다. 그러나 마냥 새로운 개념은 아니다. Class로 커피를 만들어보자. Class란? class CoffeeMachine { constructor(coffee){ this.coffee = coffee; } }.. jae04099.tistory.com https://junwoo45.github.io/2019-08-14-class/ 자바스크립트 class 자바스크립트 클래스를 학습해봅니다. junwoo45.github.io

https://velog.io/@suld2495/%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%9E%91%EC%97%85%EC%9D%84-%EC%88%9C%EC%B0%A8%EB%8C%80%EB%A1%9C-%EC%8B%A4%ED%96%89%EC%8B%9C%ED%82%A4%EA%B8%B0 비동기 작업을 순차대로 실행시키기 비동기 작업을 동기적으로 순차대로 실행을 시켜야 할 때가 존재합니다.Promise.all 을 이용하면 배열에 담긴 비동기 작업을 배열의 순서대로 실행은 시켜주지만, 실행의 완료를 기다려 주지는 않 velog.io

https://blog.naver.com/lsj5170/222608951573 [Javascript][드림코딩 by 엘리] Array 배열 개념 (선언, 검색, 추가, 삭제) / APIs Array 배열 자료구조란? 비슷한 타입의 object를 모아놓은 것. Array란? 비슷한 종류의 데이터를 정해진 ... blog.naver.com

https://velog.io/@cothis/hashchange%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-router-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0 hashchange를 이용한 router 만들어보기 브라우저에서 hashchange 이벤트를 이용해 아주 간단한 수준의 라우터를 만들어봤습니다. velog.io

https://velog.io/@codeamor/TIL-no.13-jQuery-%EB%A7%88%EC%9A%B0%EC%8A%A4-%ED%9C%A0-%EC%9D%B4%EB%B2%A4%ED%8A%B8 TIL no.13 - jQuery - 마우스 휠 이벤트 마우스 휠 이벤트 velog.io

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..

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

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/ 스크롤 이벤트 최적화 ⚠ 이 포스팅은 자바스크립트의 비동기 처리에 대한 이해를 기반으로 작성되었습니다. 이 포스팅..

설명현재 문서가 아닌 외부 문서의 노드를 복사하여 현재 문서에 넣을 수 있도록 해줍니다.문법var node = document.importNode(externalNode, deep); node문서에 추가될 새로운 노드입니다. 새로운 노드가 문서 트리에 추가되기 전까지, 새로운 노드의 parentNode는 null입니다.externalNode다른 문서에서 가져올 노드입니다.deep불리언 타입을 가지며, 다른 문서에서 노드를 가져올 때 노드의 자식 요소들을 포함하여 가져올 것인지에 대한 여부를 결정합니다.Note: DOM4 스펙 (Gecko 13.0 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10)에서 적용되어 있습니다)에서, deep은 선택적 인자입니다. 만약 해당 속성을..

유명함수는 재귀를 만드는 데 편리하다. 다음은 깊이를 가진 배열을 펴 주는 flatten 함수다. 재귀, 유명 함수, 괄호없는 즉시 실행 등의 기법이 사용되었다. function flatten(arr) { return function f(arr, new_arr) { // (1) arr.forEach(function(v) { Array.isArray(v) ? f(v, new_arr) : new_arr.push(v); // (3) }); return new_arr; }(arr, []); // (2) } flatten([1, [2], [3, 4]]); // [1, 2, 3, 4] flatten([1, [2], [[3], 4]]); // [1, 2, 3, 4] flatten([1, [[2], [[3], [[4]..

HTML 요소는 속성(attribute)을 갖고 있으며, 자바스크립트로 이 속성을 액세스할 수 있다. /** * Accessing attributes */ el.setAttribute( "tabindex", "-1" ); if ( el.hasAttribute( "tabindex" ) ) {} el.getAttribute( "tabindex" ); el.removeAttribute( "tabindex" ); 요소의 속성은 HTML에서 정의되지만, 프로퍼티(property)는 DOM에서 정의된다. 이것이 약간의 차이를 만든다. 예를 들어, 속성과 프로퍼티(el.value)의 초기값이 같은 input 요소가 있다고 가정해보자. 사용자 또는 스크립트가 값을 변경하면 프로퍼티(property)는 영향을 받지만, ..

el.classList 스타일이 필요할 때 el.classList를 사용한다. www.jsfiddle.net/1m33vjcv/4/embed/ 위 예제에서 toggle 메서도는 두번째 인수로 전달되는 부울 값에 따라 지정된 클래스를 추가하거나 제거한다. 명시적 스타일 el.style 속성을 사용해 요소에 동적인 스타일 정보를 읽거나 설정할 수 있다. 또는 cssText를 사용해 스타일을 한번에 지정할 수 있다. www.jsfiddle.net/9n6Lp7b5/1/embed/ window.getComputedStyle window.getComputedStyle는 상속된(계산된) 스타일을 반환한다. /** * Getting computed styles */ var el = document.querySelecto..

동적으로 DOM 트리에 새로운 요소 삽입하기 - el.innerHTML로 HTML 생성 /** * Insert elements into DOM #2 */ var target = document.getElementById( "target" ); target.innerHTML = ""; - 노드 생성후 추가 var target = document.getElementById("target"), div = document.createElement("div"); target.appendChild(div); 문제점 el.innerHTML을 변경하거나 요소에 자식을 추가할 때마다 DOM 리플로가 발생한다. 리플로가 반복적으로 발생하면 애플리케이션이 느려진다. 이는 자원을 많이 소모하는 작업이다. 최적화 유사한 요소를..

DOM 탐색 방법 ID로 요소 검색 (document.getElementById) 태그 이름으로 검색 (document.getElementByTagName) CSS 선택자로 요소 검색 (document.querySelector) Lorem ipsum 선택자는 하나 이상의 타입(태그) 선택자와 클래스 선택자, ID 선택자, 속성 선택자 또는 의사 클래스 선택자로 매우 다양한 조합이 가능하기 때문에 자바스크립트에서 HTML 요소를 바인딩하는 것은 쉽지 않다. 따라서 data-* 속성 선택자를 사용할 것을 추천한다. Lorem ipsum 이 방법은 HTML 구조에서 자유로우며 CSS 클래스 독립적이기 때문에 안전하게 CSS를 리팩토링할 수 있다. 또한 문서마다 고유한 값을 가지는 ID에 한정되지도 않는다. q..

스크린의 크기는 모니터의 크기와 브라우저 뷰포트의 크기가 있다. 이를 알아내는 방법은 아래와 같다. (실행) window.inner*은 뷰포트의 크기를 나타내고, screen.*은 스크린의 크기, 즉, 모니터의 해상도를 나타낸다.

그럼 문서의 스크롤 값을 변경하는 것은 어떻게 하는 것일까? window.scrollTo(x, y)를 이용하면 된다. (실행) 아래 코드는 버튼을 클릭하면 문서의 스크롤을 아래로 1000px 이동시킨다. Coding

요소의 위치를 생각할 때는 사실 조금 더 복잡해진다. 문서가 브라우저의 크기보다 큰 경우는 스크롤이 만들어지는데 스크롤에 따라서 위치의 값이 달라지기 때문이다. 이를 이해하기 위해서는 우선 viewport에 대한 이해가 선행되어야 한다.viewport의 좌표위의 그림처럼 뷰포트는 문서의 내용 중 사용자에게 보여주는 영역을 의미한다. 이에 따라서 문서의 좌표가 있고 뷰포트의 좌표가 있다. 위에서 살펴본 getBoundingClientRect는 viewport의 좌표를 사용한다. 아래 예제를 실행해보면 1초에 한번씩 getBoundingClientRect의 top 속성과 window.pageYOffset의 값이 출력된다. (실행) Coding 이를 통해서 알 수 있는 것은 getBoundingClientRe..