전체 글 (265) 썸네일형 리스트형 [Javascript] Axios Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 쉽게 말해서 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 Ajax와 더불어 사용하는 것. 이미 자바스크립트에서는 Fetch API가 있지만 프레임워크에서 Ajax를 구현할 땐 Axios를 쓰는 편이라고 볼 수 있다. Axios 특징운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용.Promise(ES6) API 사용요청과 응답 데이터의 변형HTTP 요청 취소HTTP 요청과 응답을 JSON 형태로 자동 변경 Axios vs FetchAxiosFetch써드파티 라이브러리로 설치 필요현대 브라우저에 빌트인이라 설치 불필요XSRF 보호해 .. [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 형태의 응답 데이터를 생성 및 웹 브라우저에 전달.이때 전달되는 응답은 .. [WEB] URL과 URI와 URN 브라우저를 통해 웹을 이용해 온 우리에게 URL이라는 단어는 익숙할 것이다. 하지만 가끔 뭔가 비스무리하면서도 다른 듯한 URI나 URN이라는 단어를 사용하기도 하는데 이번 포스트에서는 URL과 URI, URN의 명확한 차이에 대해 알아보려 한다. 위 그림에서 볼 수 있듯 URI는 URN과 URL을 포함하는 개념이다. 이들의 각 뜻은 다음과 같이 정의할 수 있다. URI: 자원의 식별자URL: 위치(Location)URN: 이름(Name) URI(Uniform Resource Identifier) 통합 자원 식별자(Uniform Resource Identifier)는 인터넷에 있는 자원을 어디에 있는지 자원 자체를 식별하는 방법이다.Uniform: 리소스를 식별하는 통일된 방식Resou.. [WEB] HTTP 메시지 개발자 도구의 네트워크 창에서 서버로부터 다운 받은 파일을 눌러 보면 아래와 같이 Headers 탭에 적혀 있는 것을 본 적 있을 것이다. 이는 클라이언트와 서버 간에 HTTP 메시지를 통해 통신한 이력이라고 이해할 수 있다. Request Headers는 클라이언트가 서버에 보내는 HTTP 메시지 이력이며, Response Headers는 서버가 클라이언트에 응답하는 HTTP 메시지 이력이다. HTTP 메시지 구조 HTTP 메시지는 기본적으로 위에서부터 차례대로 시작 라인(Start Line), 헤더(Header), 공백 라인(Empty Line 또는 Blank Line), 바디(Message Body)로 구성되어 있다. 이중 공백 라인의 경우 HTTP 메시지 값 구분을 하기 위한 라인이므로 단.. 이전 1 2 3 4 ··· 34 다음
