본문 바로가기

728x90
반응형

Javascript

(129)
[Javascript] innerHTML, innerText, textContent innerHTML, innerText, textContent는 DOM 요소의 콘텐츠를 읽어오고 설정할 수 있다는 점에서 비슷해 보이지만 조금씩 차이가 있다. 속성HTML 태그 처리숨겨진 요소의 텍스트보안(XSS)innerHTMLHTML 태그로 렌더링가져올 수 있음설정할 수 있음위험 가능성 큼innerText단순 텍스트로 변환하여 렌더링가져올 수 있음설정할 수 있음상대적으로 안전textContent단순 텍스트로 변환하여 렌더링가져올 수 없음설정할 수 있음상대적으로 안전    innerHTMLinnerHTML은 element의 속성으로 element 내에 포함된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를..
[Javascript] 즉시 실행 함수(IIFE) IIFE란?Immediately Invoked Function Expression의 줄임말로 정의되지마자 득시 실행되는 함수 표현식을 말한다.// 아래 두 함수는 동일한 동작을 수행한다.var app = function() { console.log('함수 호출');};app(); // '함수 호출'// 즉시실행함수 IIFE(function() { console.log('함수 호출');}()); // '함수 호출' 위의 두 함수는 동일한 로직을 가지고 있다. IIFE는 전체 익명함수를 괄호로 감싸 줌으로써 내부 코드가 선언문이 아니라 표현식인 것처럼 Parser를 속인다. 단, 익명함수이기 때문에 재사용은 적합하지 않다. 물론 기명으로도 가능은 하다. 하지만 보통 함수의 이름을 짓는 것은 호..
[Javascript] this this 정의let group = { title: "1team", students: ["Kim", "Lee", "Park"], title2 : this.title, title3() { console.log(this.title) }};console.log(group.title2); //undefinedgroup.title3(); // 1team this는 함수의 블록 스코프 내에서 선언되어야 작동한다.  브라우저의 콘솔창을 켜고(F12) this를 입력해 보자.this; // Window {} 그리고 이번엔 변수와 함수 안에 넣어서 실행해 보자.var ga = 'Global variable';console.log(this.ga); // === window.gafunction a() { console..
[Javascript] Fetch API 자바스크립트 AJAX 요청 방식정통적으로 XMLHttpRequest 객체를 생성하여 요청하는 방법이 있지만 문법이 난해하고 가독성 또한 좋지 않다. 따라서 이번 포스트에서는 자바스크립트 AJAX 통신의 최신 기술인 fetch() 사용법에 대해 알아보려 한다.   XMLHttpRequest 방식 XMLHttpRequest 객체를 이용한 정통적인 초창기 비동기 서버 요청 방식이다. 성능에는 문제가 없지만 코드가 복잡하고 가독성이 좋지 않다는 단점이 있다.var httpRequest = new XMLHttpRequest();httpRequest.onreadystatechange = function () { if (httpRequest.readyState == XMLHttpRequest.DONE && htt..
[Javascript] XMLHttpRequest로 AJAX 요청하기 AJAX(Asynchronous Javascript And XML)AJAX는 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신할 수 있게 해 준다. AJAX를 이용하면 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. AJAX를 통한 웹 브라우저와 웹 서버 간의 통신 절차는 다음과 같다.사용자에 의한 요청 이벤트 발생.요청 이벤트 발생 시 이벤트 핸들러에 의해 자바스크립트가 호출.자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냄.서버는 전달 받은 XMLHttpRequest 객체를 가지고 요청을 처리.서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 응답 데이터를 생성 및 웹 브라우저에 전달.이때 전달되는 응답은 ..
[Javascript] console 사용 시 쉼표(,)와 +의 차이 , 를 사용하면 별도의 객체로 반환되어 내부 값을 확인 가능함. + 를 사용하면 toString()이 호출되어 문자 타입으로 형변환 후 값이 반환되어 객체 내부의 값을 확인 불가능함. 예시 1)let array = [ { a: 1, b: 2 }, { a: 3, b: 4 }, { a: 5, b: 6 },];console.log('logging with ,: ', array); // logging with ,: (3) [{…}, {…}, {…}]console.log('logging with +: '+ array); // logging with +: [object Object],[object Objec..
[Javascript] 이벤트 캡처링 지난 포스트에서 이벤트 버블링(bubbling)에 대해 소개한 바 있다. [Javascript] 이벤트 버블링버블링(bubbling)의 원리는 간단하다. 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작한다. 이러한 과정이 가장 최상단의 조상 요소를 만날developing-move.tistory.com   이벤트에는 버블링 외에도 캡처링(capturing)이라는 흐름이 존재한다. 실제 코드에서는 자주 쓰이지 않지만 종종 유용한 경우가 있으니 알아보도록 하자. cf) 캡처링 단계를 이용해야 하는 경우는 흔치 않기 때문에, 캡처링에 관한 코드를 발견하는 일은 거의 없을지도 모른다. 표준 DOM 이벤트에서 정의한 이벤트 흐름에는 아래의 3가지 단계가 있다. 캡처..
[Javascript] Event 객체 Event 객체는 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 유용한 정보들을 제공한다. 이벤트가 발생하면 Event 객체는 동적으로 생성되며 이벤트를 처리할 수 있는 이벤트 핸들러에 인자로 전달된다.  클릭한 곳의 좌표가 표시됩니다.  위와 같이 Event 객체는 이벤트 핸들러에 암묵적으로 전달된다. 그러나 이벤트 핸들러를 선언할 때 event 객체를 전달 받을 첫 번째 매개변수를 명시적으로 선언해야 한다(위 예시에서의 e).   Event 객체 속성 종류  Event.target 실제로 이벤트를 발생시킨 요소를 가리킨다. 단, 버블링에 의해 쌩뚱맞는 다른 target이 인식될 수도 있다.   Event.currentTarget 코드에서 이벤트에 바인딩된 DOM 요소를 가리킨다. 즉 addEv..

728x90
반응형