Web/javascript

[자바스크립트] filter

자바스크립트의 'filter()' 함수는 배열을 순회하면서 주어진 조건에 따라 요소를 걸러내는 메서드이다. 이 함수를 사용하면 배열을 필터링하여 새로운 배열을 만들 수 있다. Array. 인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다. - mdn 👉 얕은 복사 생성? 인스턴스의 filter() 메서드는 배열에서 특정한 조건을 만족하는 요소들을 선택하여 그 요소들로 이루어진 새로운 배열을 반환한다. 여기서 얕은 복사(shallow copy)한 개념이 사용된다. 얕은 복사는 원본 배열의 요소들을 복사하여 새로운 배열을 생성하지만, 그 요소들은 참조만을 복사한다는 뜻이다. 이 말은, 만약..

[자바스크립트] offsetX, screenX, clientX, pageX, layerX 각각의 차이

자바스크립트 MouseEvent 실행 시 (e)의 console을 찍어보면 다양한 속성들이 있는데, 이 중 X들을 정리해 보겠다. offsetX 이벤트가 발생한 요소(Element)를 기준으로 마우스 포인터의 수평(x) 위치를 나타낸다. 이 속성은 주로 이벤트가 발생한 요소 내부에서 상대적인 위치를 파악하는데 사용된다. 요소의 좌측 가장자리를 기준으로 하며, 오른쪽으로 갈수록 양수의 값을 가지고 왼쪽으로 갈수록 음수의 값을 가진다. 요소의 경계를 넘어가면 음수나 요소의 크기보다 큰 양수 값을 가질 수 있다. 스크롤이 발생하면, 요소의 위치가 변경되기 때문에 스크롤에 영향을 받는다. 즉, 스크롤이 발생하면 요소 내부에서의 상대적인 위치가 변하게 된다. 스크롤 up : offsetX 값 증가 / 스크롤 do..

[자바스크립트] textContent와 innerText 차이

Node.textContent와 HTMLElement.innerText의 이름이 유사하지만, 중요한 차이가 있다. textContent는 와 요소를 포함한 모든 요소의 콘텐츠를 가져온다. innerText는 "사람이 읽을 수 있는" 요소만 처리한다. textContent는 노드의 모든 요소를 반환한다. innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않는다. iinnerText의 CSS 고려로 인해, innerText 값을 읽으면 최신 계산값을 반영하기 위해 리플로우가 발생한다. (리플로우 계산은 비싸므로 가능하면 피해야 한다.) IE 기준, innerText를 수정하면 요소의 모든 자식 노드를 제거하고, 모든 자손 텍스트 노드를 영구히 파괴한다. 이로 인해, 해당 텍스트 노..

[자바스크립트] 전개연산자

전개 연산자는 ... 으로 표시되며, 배열, 객체, 문자열 등을 개별 요소로 분해한다. 이를 통해 배열이나 객체를 풀어서 각각의 요소로 사용할 수 있다. 다음은 전개 연산자를 사용하는 몇 가지 예시이다. 배열 분해 const arr = [1, 2, 3]; console.log(...arr); // 1 2 3 위 코드에서 전개 연산자를 사용하여 arr 배열의 각 요소를 개별적으로 출력한다. const arr1 = [1, 2]; const arr2 = [3, 4]; const combinedArr = [...arr1, ...arr2]; console.log(combinedArr); // [1, 2, 3, 4] 위 코드에서 전개 연산자를 사용하여 두 배열을 합쳐서 새로운 배열을 생성한다. 객체 분해 const..

[자바스크립트] DOMContentLoaded, load 차이

DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생한다. 스타일시트, 이미지, 하위 프레임의 로딩은 기다리지 않는다. 즉, 스타일시트, 이미지, 하위 프레임이 로드를 완료할 때까지 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석되었을 때 발생한다. - 기본 사용법 window.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed'); }); - 지연 - 로딩이 이미 완료되었는지 확인 function doSomething() { console.info("DOM loaded"); } if (document.readyState === "loadi..

[자바스크립트] Optional Chaining 연산자(?.)

Optional Chaining 연산자(?.)는 JavaScript에서 사용되는 연산자로, 객체의 프로퍼티나 메서드를 사용할 때 객체가 undefined 또는 null인 경우 에러를 방지하기 위해 사용된다. 즉, 객체에 프로퍼티나 메서드가 존재하면 그 프로퍼티나 메서드를 사용하고, 존재하지 않는다면 undefined를 반환한다. 예를 들어, let person = {name: "John", age: 25}; // undefined console.log(person.address?.street); // TypeError: Cannot read properties of undefined (reading 'street') console.log(person.address.street); `person` 객체에 ..

[자바스크립트] axios

Axios 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)애서는 XMLHttpRequest를 사용한다. 특징 브라우저를 위해 XMLHttpRequests생성 node.js를 위해 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 변환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기위한 클라이언트 사이트 지원 XMLHttpRequests(XHR) XHR 객체는 서버와 상호작용할 때 사용한다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터는 가져올 수 있다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의..

[자바스크립트/HTML] Img onerror

외부파일 로드 중 img 태그에 이미지가 로드가 안될 때 1. 대체이미지로 변경 onerror="" 사용 대체이미지마저 없을 경우를 대비해서 null을 넣어준다. 2. display: none 참고 https://www.w3schools.com/jsref/event_onerror.asp onerror Event W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com

[자바스크립트] 제어 구문

제어 구문은 프로그램의 처리 흐름을 제어하는 문장이다. 제어 구문을 배우면 알고리즘에 담긴 논리를 표현할 수 있고 본격적으로 프로그램을 만날 수 있다. 문장은 위에서부터 아래 방향으로 작성한 순서대로 실행된다 => 순차적 실행 순차적 실행 흐름을 변화시키는 문장을 제어 구문이라고 한다. 분류 제어 구문 설명 조건문 if/else, switch, try/catch/finally 조건에 따라 처리를 분기 반복문 while, do/while, for, for/in, for/of 조건을 만족하면 처리를 반복 실행 점프문 break, continue, throw 프로그램의 다른 위치로 이동 조건문 조건문은 조건식의 값에 따라 실행 흐름을 분기한다. if / else '만약 ~ 이라면 ... 그렇지 않으면 ...'..

[자바스크립트] scrollY vs pageYOffset 무엇을 써야하나?

scrollY vs pageYOffset 스크롤 값을 얻을 때 둘 다 작동은 하지만, 어떻게 다른지 궁금해서 검색해보았다. 둘 다 스크롤 Y 값을 얻는다는 것은 동일하지만, scrollY는 IE에서 동작하지 않는다고 한다. MDN에서는 노후 환경을 신경 쓰지 않아도 된다면 둘 중 아무거나 사용해도 괜찮다고 한다. 하지만 나는 IE를 버릴 수 없기 때문에 scrollY만 쓰는 건 지양해야겠다. 결론은 구형 브라우저 신경안써도 되면 scrollY 쓰고, 구형 브라우저까지 신경써야 한다면 pageYoffset을 쓴다. 아니면 조건문 걸어서 둘 다 쓰던지. 아래처럼. window.scrollY || window.pageYOffset window.pageYOffset || document.documentEleme..