웹언어/자바스크립트 - ES6 (16) 썸네일형 리스트형 [ES6강좌] 15강 CustomEvent 제작하기 - 오쌤의 니가스터디 - 커스텀이벤트는 자바스크립트가 미리 갖고 있지 않은 이벤트를 개발자가 만드는 것을 말합니다. - 자바스크립트는 클릭(click), 마우스관련(mouseenter 등)의 이벤트를 내장하고 있습니다. - 하지만 개발하다보면 내장된 이벤트 외에 이벤트를 만들어야 하는 경우가 있습니다. - 이처럼 자바스크립트가 내장하고 있지 않은 이벤트를 만드는 것이 Custom Event입니다. 1. 커스텀이벤트 생성하기 - 커스텀 이벤트를 생성하는 방법은 2가지가 있습니다. const 인스턴스변수명 = new Event(type, options); const 인스턴스변수명 = new CustomEvent(type, options); - 그럼 2개의 차이를 봐야겠죠? 일단 간단하게 먼저 설명해 보겠습니다. - CustomE.. [ES6강좌] 14강 Fetch API사용하기 - 오쌤의 니가스터디 - Fetch API를 사용하면 웹 브라우저가 웹 서버에 HTTP 요청을 할 수 있습니다. - 2015년~2017년 사이 모든 브라우저가 Fetch API를 지원하므로 더 이상 XMLHttpRequest가 필요하지 않습니다. 1. REST API - REST API는 웹 주소를 이용하여 서버와 통신하는 방법 중 하나라고 보면 됩니다. - 주소를 입력하는 방법으로 데이터를 생성, 요청, 변경, 삭제를 할 수 있습니다. - 그래서 우리는 REST API의 4가지 함수를 보도록 하겠습니다. 1) REST API 함수 REST API함수 설명 CRUD표현 주소입력방식 POST 데이터 등록 Create /test GET 데이터 조회 Read /test 또는 get/test/4 PUT 데이터 수정 Update /t.. [ES6강좌] 13강 async/await - 오쌤의 니가스터디 - 이 강의는 Promise를 공부하고 들어주세요. https://ossam5.tistory.com/367 [ES6강좌] 10강 JS Promise - 오쌤의 니가스터디 1. JavaScript Promise Object - Promise는 Producing code(생성코드)와 Consuming code(소비코드)를 연결하는 Javascript 객체입니다. - Producing code(생성코드)는 시간이 걸릴 수 있는 코드입니다. - Consuming code(소비코드) ossam5.tistory.com - async/await는 ES8에 나온 문법입니다. - async/await는 Promise를 작성하기 쉽게 만드는 키워드 입니다. - async는 함수가 Promise를 반환하도록 하고, awai.. [ES6강좌] 12강 Tagged Template literals - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://youtu.be/0LbAZ95qgcs 1. Tagged Template literals - tagged template literals는 templete literals에서 더욱 발전된 형태입니다. - 태그를 사용하면 템플릿 리터럴을 함수로 파싱할 수 있습니다. - 태그 함수의 첫번째 인수는 문자열 값의 배열을 포함합니다. - 나머지 인수는 표현식과 관련이 됩니다. - 결국 함수로 조작된 문자열을 반환할 수 있습니다. - 함수명은 개발자가 임의적으로 작성해 주면 됩니다. 1) 문법 var 변수명 = '문자열'; function 태그함수(매개변수){ //템플릿으로 사용할 함수 선언 return //태그템플릿으로 반환될 값 } var 태그.. [ES6강좌] 11강 Template literals - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://youtu.be/0PAXh-6iWQo - Template literals(템플릿 리터럴)은 내장된 표현식을 허용하는 문자열 리터럴입니다. - 여러 줄로 이루어진 문자열과 문자 보간기능을 사용할 수 있습니다. - ES5부터 나왔던 표현식입니다. 1. Template literals 문법소개 - 템플릿 리터럴은 숫자 1 옆의 ~와 같이 있는 기호인 [ ` ]를 사용합니다. - Backtick(백틱), Grave Accent 혹은 Back Accent(역 악센트)라고도 부릅니다. //grave accent `안녕하세요` //apostrophe(작은따옴표) '안녕하세요' - 작은 따옴표와 보기에도 차이가 있다는 것을 알 수 있습니다. - 그럼.. [ES6강좌] 10강 JS Promise - 오쌤의 니가스터디 1. JavaScript Promise Object - Promise는 Producing code(생성코드)와 Consuming code(소비코드)를 연결하는 Javascript 객체입니다. - 간단하게 말하자면 비동기 방식을 로딩, 성공, 실패로 나눠서 처리하는 객체입니다. - Producing code(생성코드)는 시간이 걸릴 수 있는 코드입니다. - Consuming code(소비코드) 는 결과를 기다려야 하는 코드입니다. - Promise객체는 Producing code(생성코드) 와 Consuming code(소비코드)에 대한 호출이 모두 포함됩니다. - 이 객체는 ES6에서 도입하기 시작했습니다. ## 문법 let 인스턴스변수명 = new Promise(function(testResolve, .. [ES6강좌] 9강 JS Asynchronous(비동기) - 오쌤의 니가스터디 1. Asynchronous JavaScript - 다른 함수와 병렬로 실행되는 함수를 비동기 함수라고 합니다. - 좋은 예시는 [ setTimeout() ]이 있습니다. - 실제로 콜백함수는 비동기 함수와 함께 자주 사용됩니다. 1) setTimeout을 통한 비동기 처리 ## 주의사항 - 함수를 인수로 전달할 때 괄호를 사용하지 않는다는 것을 기억해 주세요. setTimeout(testFunction,3000); //맞음 setTimeout(testFunction(),3000); //틀림 ## 코드 보기 일반함수 값: setTimeout 값: - [ output02() ]를 먼저 [ setTimeout() ]에 호출하고, [ output01() ]를 나중에 호출하였습니다. - 하지만 [ output0.. [ES6강좌] 8강 JS Callback - 오쌤의 니가스터디 1. Javascript Callback - 콜백 함수는 다른 함수에 인수로 전달되는 함수를 의미합니다. 함수명(function(){}); // 함수명(함수명); - 이 기술을 사용하면 함수가 다른 함수를 호출할 수 있습니다. - 다른 함수가 완료된 후 콜백 함수를 실행할 수 있습니다. 1) 함수의 순서 - JS에서 함수는 호출된 순서대로 실행이 됩니다. - 선언된 순서대로 실행되지 않습니다. ## 코드 보기1 - [ testFirst() ]를 먼저 호출해보겠습니다. ## 결과 보기1 ## 코드 보기2 - [ testSecond() ]를 먼저 호출해보겠습니다. ## 결과 보기2 2) 함수의 순서 제어 - 때때로 함수를 실행할 시점을 제어하고 싶을 때가 있습니다. - 그래서 시점을 제어해보도록 하겠습니다... 이전 1 2 다음
