웹 프론트엔드/자바스크립트 (ES6)9 [ES6] 기존 javascript 비동기 방식과 새로운 Promise 함수 2020.12.07 - [웹 프론트엔드/자바스크립트] - [ES6] 기존 javascript 비동기 방식과 새로운 Promise 함수 어떤 프로그램 언어를 불문하고 비동기 처리는 중요합니다. 특히 웹 환경에서는 서버와의 잦은 통신으로 비동기 처리가 필수라고 할 수 있습니다. 그래서 오늘은 기존 자바스크립트의 비동기 방식과 새로운 Promise 함수를 비교하겠습니다. 먼저 총 4개의 프로세스가 있고 3개는 비동기 처리를, 나머지 하나는 즉시 호출하는 예로 코딩해보겠습니다. // 기존 자바스크립트 방식 function process1(onFin){ setTimeout(function(){onFin('프로세스1 완료')}, 1000); } function process2(onFin){ setTimeout(fu.. 2020. 12. 7. [ES6] 커링 함수를 조합해서 사용하기 compose 2020/09/16 - [Web프론트엔드/자바스크립트] - [ES6] 화살표 함수와 커링 디자인 패턴 [ES6] 화살표 함수와 커링 디자인 패턴 화살표 함수 ES6에 새로 추가된 화살표 함수(arrow function)는 함수 표현을 간단하게 할 수 있습니다. 기존 함수 사용과 화살표 함수 표현식을 비교해보고, 그것을 응용한 커링 디자인 패턴을 보겠� jiguin-hankun.tistory.com 처음부터 링크를 대문짝만 하게 달아놓은 이유는, 오늘 포스팅이 저 글의 연장선에 있기 때문입니다. 따라서 꼭 상기한 링크를 확인해 주시고 이번 글을 읽으시면 많은 도움이 됩니다. 그럼 일단 간략하게 지난 포스팅을 설명하겠습니다. const plus = (a, b) => a + b; const multiply =.. 2020. 10. 9. [ES6] 배열 함수 forEach , map , reduce 2020.09.21 - [웹 프론트엔드/자바스크립트] - [ES6] 프로토타입 prototype에서 class 클래스로 이번 포스팅을 쓸까 말까 고민했습니다. ES6 이전 버전에도 이미 배열 함수는 있었고 ES6에서도 크게 다르지 않기 때문입니다. 하지만 글의 카테고리가 자바스크립트인 만큼, 배열 관련 글은 빠질 수가 없기에 간단히라도 집고 넘어가 보겠습니다. 예시로는 URL의 Query String 형식 문자열을 파싱 하는 것으로 해보겠습니다. // 웹 주소에 포함된 이름=나이 정보 var queryString = "kim=18&lee=35&park=29"; // 쿼리 스트링 파싱 함수 function queryStringParse(str) { var list = str.split("&"); var r.. 2020. 9. 25. [ES6] 프로토타입 prototype에서 class 클래스로 2020.09.18 - [웹 프론트엔드/자바스크립트] - [ES6] 템플릿 문자열 (Template String) 프로토타입 prototype 이번 포스팅은 ES6에 추가된 클래스에 대해 설명해보려 합니다. 하지만 기존 자바스크립트의 프로토타입을 알지 못하면 비교가 어려우니, 간단하게라도 기존 버전에서는 어떻게 클래스를 표현했는지 살펴보겠습니다. 내용은 사각형의 넓이를 구하고(x * y) 그다음에 확장(extends) 또는 상속하여 부피를 구하는(x * y * z) 식입니다. // 생성자(constructor) 형태로 함수 선언 function Area(x, y) { this.name = "Area"; this.set(x, y); } // static 객체 생성 함수 Area.create = functi.. 2020. 9. 21. [ES6] 템플릿 문자열 (Template String) 2020.09.16 - [웹 프론트엔드/자바스크립트] - [ES6] 화살표 함수와 커링 디자인 패턴 오늘은 가볍게 템플릿 문자열에 대해서 알아보겠습니다. 먼저 기존 자바스크립트의 병합 연산자(+)입니다. var val1 = "코로나"; var val2 = 9; console.log(val1 + val2); // 코로나9 var val3 = 10; console.log(val1 + val2 + val3); // 코로나910 console.log(val1 + (val2 + val3)); // 코로나19 이처럼 기존 병합 연산자는 플러스 기호를 쓰기 때문에 문자형과 숫자형의 연산이 알아보기 어렵습니다. 또한 문자열 안에 계산식을 넣을 수 없기 때문에 코드가 길어지고 가독성이 떨어집니다. (디버깅 지옥 오픈) .. 2020. 9. 18. [ES6] 화살표 함수와 커링 디자인 패턴 2020.09.05 - [웹 프론트엔드/자바스크립트] - [ES6] 전개 연산자(spread operator) 사용법 화살표 함수 ES6에 새로 추가된 화살표 함수(arrow function)는 함수 표현을 간단하게 할 수 있습니다. 기존 함수 사용과 화살표 함수 표현식을 비교해보고, 그것을 응용한 커링 디자인 패턴을 보겠습니다. // 기존 function plusFunc(num1, num2) { return num1 + num2; } var plusFunc = function (num1, num2) { return num1 + num2; }; // ES6 var plusFunc = (num1, num2) => { return num1 + num2; }; var plusFunc = (num1, num2).. 2020. 9. 16. [ES6] 전개 연산자(spread operator) 사용법 2020.09.05 - [웹 프론트엔드/자바스크립트] - [ES6] 객체 확장 표현(Destructuring) 및 구조 분해 할당 배열 전개 연산자 ES6에서 새로 나온 문법으로 굉장히 중요하면서 강력한 기능입니다. 기존 배열 요소를 다룰 때는 index를 사용해 풀어쓰거나, 내장 메서드를 사용했지만 전개 연산자를 사용하면 간단하게 내용을 전달하고 표현할 수 있습니다. 기존 배열 요소 사용법과 전개 연산자 도입 비교 // 기존 var array1 = [1, 2]; var array2 = [3, 4]; var arrayNew = [array1[0], array1[1], array2[0], array2[1]]; // ES6 var arrayNew = [...array1, ...array2];// 참 간단하죠.. 2020. 9. 5. [ES6] 객체 확장 표현(Destructuring) 및 구조 분해 할당 2020.09.01 - [웹 프론트엔드/자바스크립트] - [ES6] 자바스크립트 문법 (var, let, const) 객체 확장 표현식 자바스크립트에서 자주 사용하는 key-value 데이터 형식의 객체를 조금 더 확장하여 표현할 수 있습니다. 기존 자바스크립트 객체 확장 표현식과 ES6의 새로운 표현식 // 기존 var num1 = 10; var num2 = 20; var obj = { num1: num1, num2: num2 };// 동일한 이름의 키와 값 // ES6 var obj = { num1, num2 };// 키값을 생략하면 위와 같이 의미 // 기존 var plusKey = '2020'; var obj2 = {}; obj2['year' + plusKey] = 'corona';// 키값에 연.. 2020. 9. 5. [ES6] 자바스크립트 문법 (var, let, const) var, let, const 변수 선언 var 선언은 아래 코드 처럼 중복 선언이 가능하고 에러 없이 막 쓸 수 있습니다. var text = 'korea'; console.log(text);// korea var text = 'japan'; console.log(text);// japan // 같은 변수명으로 중복 선언했는데도 에러없이 덮어씌어짐 // 기분이 나쁘게 한국에서 일본으로 바뀜 let 선언은 아래 코드 처럼 중복 선언이 불가능하지만 재할당은 가능합니다. let text = 'korea'; console.log(text);// korea let text = 'japan'; console.log(text);// Uncaught SyntaxError: Identifier 'text' has alr.. 2020. 9. 1. 이전 1 다음
