React & Reactive & React Native React 페이스북이 웹 개발을 쉽게하기 위해 만든 기술 커스텀 컴포넌트를 만들고, 쉽게 조합해서 손쉽게 만들 수 있음 Reactive 마이크로소프트가 창안한 개념 스트림과 비동기 처리등을 LINQ에서 영향을 받은 방법 비동기 처리를 할 수 있게 한 패러다임 ReactiveX(Rx)를 중심으로 여러 언어에 맞게 다양하게 구현되어있음 React Native 리액트의 접근 방법을 모바일로 확장하는 페이스북의 오픈소스 프로젝트 기존 - 모바일 자바스크립트 Tool들이 WebView를 통해 인터페이스를 구축하는 하이브리드 방식 리액트 네이티브 - 자바스크립트로 작업하지만, 인터페이스는 네이티브 위젯으로 표시하는 방식 - 네이티브 UI를 통해 이질감 없고 ..

async/await 문법은 ES8에 해당하는 문법으로서, Promise 를 더욱 쉽게 사용 할 수 있게 해줍니다. 기본적인 사용법을 알아봅시다. function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function process() { console.log('안녕하세요!'); await sleep(1000); // 1초쉬고 console.log('반갑습니다!'); } process(); async/await 문법을 사용할 때에는, 함수를 선언 할 때 함수의 앞부분에 async 키워드를 붙여주세요. 그리고 Promise 의 앞부분에 await 을 넣어주면 해당 프로미스가 끝날때까지 기다렸다가 다음 작업을 수..

프로미스는 비동기 작업을 조금 더 편하게 처리 할 수 있도록 ES6 에 도입된 기능입니다. 이전에는 비동기 작업을 처리 할 때에는 콜백 함수로 처리를 해야 했었는데요, 콜백 함수로 처리를 하게 된다면 비동기 작업이 많아질 경우 코드가 쉽게 난잡해지게 되었습니다. 한번 숫자 n 을 파라미터로 받아와서 다섯번에 걸쳐 1초마다 1씩 더해서 출력하는 작업을 setTimeout 으로 구현해봅시다. function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(increased); } }, 1000); } increaseAndPrint(0,..

AJAX (Asynchronous Javascript And XML) AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. 즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다. 동기, 비동기 flow 비동기 방식이란 99geo.tistory.com/64 비동기 프로그래밍 ( Asynchronous ) ? 비동기 프로그래밍 ( Async..

binding이란? javascript의 함수는 각자 자신만의 this라는 것을 정의한다. 예를 들어 자기소개를 하는 함수를 만들기 위해 say()이라는 함수를 만든다고 하자. const say = function() { console.log(this); // 여기서 this는 뭘까? console.log("Hello, my name is " + this.name); }; say(); 실행해보면 window객체가 나타난다. 기본적으로 this는 window이기 때문이다. 사실 참 어려운게, 꼭 window라고만 말할 수는 없다. this는 객체 내부, 객체 메서드 호출시, 생성자 new 호출시, 명시적 bind시에 따라 바뀌기 때문이다. 어찌되었든 우리는 say함수에서 Window객체를 사용하고 싶지 않..

Document 객체 웹 페이지 그 자체 웹 페이지에 존재하는 HTML 요소에 접근하고자 할때 만드시 Document 객체부터 시작해야한다. Document 메소드 Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공 - HTML 요소의 선택 - HTML 요소의 생성 - HTML 이벤트 핸들러 추가 - HTML 객체의 선택 HTML 요소의 선택 HTML 요소를 선택하기 위해 제공되는 메소드는 다음과 같다. document.getElementsByTagName(태그이름) 해당 태그 이름의 요소를 모두 선택함. document.getElementById(아이디) 해당 아이디의 요소를 선택함. document.getElementsByClassName(클래스이름) 해당 클래스에 속..