본문 바로가기
728x90

Web/CS공부

[JavaScript] Promise대신 사용할 수 있는 async / await 2017년에 나왔고 ES6라고 할 수는 없고 ES8부터 Promise를 대신하여 사용할 수 있는 문법이 있습니다. async / await이라는 키워드입니다. 이 키워드는 Promise와 then을 더 쉽게 만들어주는 문법입니다. async / await async 키워드를 사용하면 Promise 오브젝트가 자동으로 생성됩니다. 이 키워드는 function 선언 앞에서만 붙일 수 있습니다. async function fc(){ 1+1; } function앞에 async를 붙임으로써 fc()는 Promise가 되었습니다. 이제 fc()는 then을 사용할 수 있습니다. async function fc(){ return 1+1; } fc().then(function(result){ console.log(re.. 더보기
[JavaScript] ES6 프로미스(Promise) 프로미스(Promise) 프로미스(Promise)는 성공하면 then()안의 코드를, 실패하면 catch()안의 코드를 실행해주는 함수 입니다. 동기방식을 비동기방식으로 바꿔주는 함수가 아닙니다. Promise 코드를 작성할 때 성공과 실패 상황을 알 수 있도록 해야 합니다. 콜백함수 디자인패턴이 마음에 안드는 분들은 Promise 디자인패턴을 사용하시면 됩니다. Promise는 자바스크립트의 새로운 기능이라기보다는 코드/함수 디자인 패턴일 뿐입니다. Promise의 구조는 이렇게 됩니다. var promise1 = new Promise(); promise1.then(function(){ // 프로미스가 성공했을 경우 실행할 코드1 }).then(function(){ // 프로미스가 성공했을 경우 실행할.. 더보기
[JavaScript] 동기 / 비동기처리와 콜백함수란 무엇인가? 동기(Synchronous) / 비동기(Asynchronous) 자바스크립트는 코드 한 줄씩 순차적으로 실행되는 동기(Synchronous)처리 방식입니다. 자바스크립트를 실행하는 웹브라우저는 스텍(Stack)이라는 코드 실행 공간이 있습니다. 그리고 그 곳에서 코드를 한줄한줄 차례로 실행합니다. 자바스크립트 뿐만 아니라 대부분의 프로그래밍 언어들이 이러한 특징을 가지고 있습니다. console.log(1); console.log(2); console.log(3); -------------------- 결과 1 2 3 그리고 자바스크립트는 비동기(Asynchronous)처리와 유사한 방식을 사용할 수도 있습니다. 예를들어 특정 위치의 코드를 1초 지연한 뒤 코드를 실행하고 싶을 때가 있습니다. 그래서 아.. 더보기
[JavaScript] import / export 를 이용한 모듈 개발 일반적으로 자바스크립트 코드가 길어지면 다른 파일로 쪼개어 자바스크립트 코드만 따로 작성하여 불러옵니다. ES6 부터 import / export를 사용하면 원하는 변수와 함수, class만 따로 다른 파일로 보낼 수 있습니다. 하지만, import해온 변수와 함수는 사용이 가능하지만 수정은 불가능합니다. 지금까지의 웹 코딩에서는 위와 같은 방식으로 별도의 파일에서 자바스크립트 코드를 작성하고 원하는 곳에서 위 코드를 작성하여 자바스크립트를 불러와 사용했습니다. 그리고 이와 유사하지만 다르게 import / export를 사용하여 불러올 수 있습니다. /* library.js */ var a = 10; export default a; ---------- /* index.html */ 위 코드는 libra.. 더보기
[JavaScript] 배열 디스트럭처링(Destructuring) - 구조 분해 할당 배열이나 오브젝트에 있는 자료들을 변수로 꺼내고 싶으면 어떻게 할까요? var a = arr[0]; 이런식으로 하나하나 뽑아오면 되겠죠. 하지만, 한 두개면 모르겠는데 다수의 값을 변수로 만들려면 위와 같은 방법으로는 코드가 매우 길어집니다. 그럴 때 Destructuring 문법을 사용하면 변수를 쉽게 만들 수 있습니다. 배열 방식 var arr = [2,3,4]; // 이 arr안에 있는 2,3,4를 각각 새로운 변수에 담아주고 싶을 경우, // 기본 방법 var a = arr[0]; var b = arr[1]; var c = arr[2]; // destructuring 방법 var [a, b, c] = [2, 3, 4]; 위와같이 변수명에도 배열형식으로 지정하여 각 위치에 맞게 값을 담아줄 수 있습.. 더보기
[JavaScript] getter와 setter 원본 데이터는 불변(Immutable)해야 한다는 원리로 데이터의 무결성 보존을 위해 사용되는 getter와 setter. 데이터를 수정하거나 출력할 때, 직접 원본 데이터를 만지는것이 아니라 함수를 사용하여 간접적으로 다루는것이 요즘 코딩의 추세이며 그 원리에 합치되는 코딩 기술 입니다. 아래 오브젝트 데이터를 만들어 보겠습니다. var People = { name : 'kim', age : 30 } console.log(People.age + 1); // 31 위 오브젝트에서 내년의 나이를 출력하고 싶으면 보통 어떻게 하게 될까요? people.age + 1 을 하면 됩니다. 하지만, 데이터의 무결성을 보존하기 위해서는 함수를 따로 제작하여 사용합니다. var People = { name : 'kim.. 더보기
[JavaScript] class를 복사하는 extends / super class, prototype, constructor를 지나 이제 자바스크립트 객체지향 문법의 끝판왕인 extends를 배워보도록 합시다. class를 상속한 class를 만들 때 사용하는 extends 한 class와 유사한 class를 하나 더 만들고 싶은 경우가 있는데, 이 때 extends라는 문법을 사용할 수 있습니다. extends를 사용하여 class를 만들면 기존에 있던 class의 내용을 그대로 복붙해서 만들어낼 수 있습니다. 즉, class에 class를 상속해서 만들 수 있게 도와주는 문법 입니다. 그리고 extends된 오브젝트들은 super를 사용해서 값들을 받아와야 합니다. super()는 'extends로 상속된 부모 class의 constructor()'를 의미합니다. cla.. 더보기
[JavaScript] ES5/ES6 방식으로 구현하는 상속 기능 ES5 방식 prototype, this, class와 같은 방식 외에 ES5 출시 때 나온 Object.create()라는 문법이 있습니다. 상속을 이용해서 오브젝트를 만들고 싶다면 이 문법을 사용하면 쉽게 구현해낼 수 있습니다. 하지만 class문법에 밀려서 인지도는 낮습니다. var Parent = { name : 'Kim', age : 50 }; var Child = Object.create(Parent); // es5에 나온 상속된 오브젝트 만드는 방법 console.log(Child.age); // 50 위 예제에서 child를 직접 호출하면 아무런 값도 가지고 있지 않습니다. 하지만, prototype은 parent가 되어있기에 prototype으로 사용할 수 있습니다. Q. child의 a.. 더보기
728x90

티스토리툴바