Javascript13 Ajax with Fetch Fetch는 Promise-based다.단, 브라우저 호환성(Internet Explorer 등)의 문제로 Polyfill이 필요할 수 있다. fetch 사용법은 매우 간단하다.fetch(''); 주의할 것은 Cross-Origin Issue가 있을 수 있다는 점이다.Fetch가 간편하고 XHR object를 대체한다고 해서, 비동기 네트워크 요청을 하는 데 필요한 본래의 규칙들을 모두 스킵할 수 있는 것은 아니다! Fetch도 여전히 자원을 공유하는 데 있어 cross-origin protocol를 따라야 한다. 즉 기본적으로, 데이터를 load하게 될 사이트와 동일한 도메인에 있는 데이터에 대한 요청만 할 수 있다(Same origin policy). Fetch에서 또 하나 추가된 것은 'Header.. 2018. 7. 3. Ajax with jQuery jQuery는 각종 브라우저들이 아직 완전히 표준화되어 있지 않을 때, 개발자들이 태그 안에 jQuery를 포함시킴으로써 여러 브라우저에서 모두 JavaScript 코드가 잘 작동하도록 해주었다.최근에는 브라우저들이 꽤나 align 되어있는 상황이고, 따라서 jQuery가 꼭 필요하지는 않은 것이 사실이다. 하지만 jQuery가 제공하는 ajax() 메소드 만큼은 아주 강력하다. $.ajax();$.ajax({ url: 'https://swapi.co/api/people/1/' });위와 같은 방식으로 사용한다.즉 괄호 안에 Object를 넣어주면 된다. 하지만 이렇게만 하면 response를 받을 수 없다. done() 메소드를 사용해야 한다.function handleResponse(data) { c.. 2018. 7. 3. Ajax with XHR Ajax AJAX는 "Asynchronous Javascript and XML"의 약자다. 그러나 최근에는 XML 뿐만 아니라 수많은 데이터 형태들(Javascript, JSON, html 등)을 모두 뜻하며, "어떤 데이터를 비동기적(Asynchronous)으로 요청하고, 요청이 돌아오면 그 데이터를 활용"하는 것으로 이해하면 된다.사실 최근에는 XML보다는 JSON이 훨씬 많이 쓰여서, AJAJ라고 하는 게 더 맞는 것 같기도 하다(물론 실제로 그렇게 부르진 않지만). AJAX의 Asynchronous, 즉 비동기라는 것은, "요청이 다른 이벤트의 발생을 막지(block) 않는다"는 뜻이다.대신, 페이지는 하던 일을 계속 하고, 서버로부터 응답으로 받은 데이터를 사용하게 된다. 만약 클라이언트가 동기.. 2018. 7. 3. [Javascript] Global 변수, Global 함수가 좋지 않은 이유 Javascript에서(다른 언어에서도 마찬가지지만), 변수나 함수를 전역 범위에서 선언하는 것은 두 가지 이유로 인해 권장하지 않는다. 1. Tight coupling2. Name collisions Tight Coupling Tight coupling이란, 각각의 코드들이 서로 지나치게 의존적인 상황이 되는 것을 말한다. coupling이란 두 아이템의 쌍이 함께하는 것을 뜻하는데, 즉 tight coupling은 서로 다른 두 묶음의 코드들이 서로 의존적이어서 어느 한 쪽에 의도치 않은 변화를 일으키는 상황을 뜻한다. var instructor = 'Richard'; function richardSaysHi() { console.log(`${instructor} says 'hi!'`);} 위의 코드.. 2018. 6. 26. [Javascript] 기본 매개변수(Default Function Parameters) 아래의 코드를 보자.function greet(name, greeting) { name = (typeof name !== 'undefined') ? name : 'Student'; greeting = (typeof greeting !== 'undefined') ? greeting : 'Welcome'; return `${greeting} ${name}!`; } greet(); // Welcome Student! greet('James'); // Welcome James! greet('Richard', 'Howdy'); // Howdy Richard! greet()은 2개의 인자를 받아 각각 출력하는 간단한 함수이다. 다만 인자가 들어오지 않았거나 'undefined'인 경우에 대비해 각각 'Student.. 2018. 6. 12. [Javascript] 프로토타입 상속(Prototypal Inheritance) function Cat() { this.lives = 9; this.sayName = function () { console.log(`Meow! My name is ${this.name}`); }; }위의 코드에서, 새롭게 생성된 'Cat' object의 'sayName' attribute에 함수를 추가함으로써, sayName() 메소드가 모든 'Cat' Object에 추가된다.문제 없이 잘 동작하는 코드이지만, 만약 이 constructor로 더 많은 'Cat' object들을 초기화하고 싶다면? 각각의 'Cat' object의 sayName을 위한 함수를 매번 생성해야 할 것이다. 뿐만 아니라, 메소드를 수정해야 할 경우 각각의 object들을 일일이 고쳐야 한다.이 경우, 'Cat' construc.. 2018. 6. 2. [Javascript] Closure, 그리고 IIFE의 활용 이번에는 지난 포스트에서 소개한 Scope에 이어서, 역시 Javascript에서 자주 쓰이는 개념인 Closure에 대해 알아 보고, 추가로 IIFE(Immediately-Invoked Function Expressions)까지 정리해보도록 한다. Closure (클로저)closure를 이해하기 위해, 이렇게 생각해보자. 함수의 scope에 대한 접근(access) 권한이 일회성이 아니라 계속 유지될 수 있다.아직은 감이 잘 오지 않는다. 다음 코드에서 remember() 함수에 주목해 보자:function remember(number) { return function() { return number; } } const returnedFunction = remember(5); console.log( r.. 2018. 5. 3. Javascript의 스코프(Scope)에 대한 이해 Javascript에서 어떤 함수가 실행되면, 새로운 runtime scope가 생성된다. 이 scope는 함수의 context를 규정하며, 즉 어떤 함수에서 어떤 변수들이 사용 가능한지를 규정하게 된다.그렇다면 함수가 접근할 수 있는 영역은 어디까지일까? 이와 관련된 개념인 스코프(scope)에 대해 알아보자. Scope함수의 runtime scope는 주어진 함수 내에서 사용 가능한 변수를 일컫는다. 함수 내부의 코드는 다음에 대해 접근 가능하다: 1. 함수의 인자(argument)2. 함수 내부에 선언된 지역 변수3. 부모 함수의 scope로부터의 변수4. 전역 변수 다음의 코드를 보자.const myName = 'Kim'; // 전역 변수(Global variable) function introd.. 2018. 4. 29. 이전 1 2 다음
