doeunn.log

▶자바스크립트 비구조화 할당(destructuring assignment) 🔎 배열의 비구조화할당(destructuring assignment) 비구조화할당이란 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식입니다. 기존 배열 값을 해체(ES6전 코드) // 배열 선언 const animalList = ['CAT', 'DOG', 'TIGER']; // 각각 변수 담기 const cat = animalList[0]; const dog = animalList[1]; const tiger = animalList[2]; // 각각 호출 console.log(cat); console.log(dog); console.log(tiger); 배열이 갖는 값을 각각 꺼내어..

▶타입스크립트의 제네릭(Generics) 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용되는데요. 🔎 제네릭의 정의와 예시 - 타입을 함수의 파라미터처럼 사용하자 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다. 일반적인 자바스크립트의 함수 형태에서 살펴봅시다. function getText(text) { return text; } 위 함수는 text라는 파라미터에 값을 넘겨 받아 text를 반환해 주는 함수입니다. 'hi', 10, true 등 어떤 값이 들어가더라도 그대로 반환합니다. getText('hi'); // 'hi' getText(10);..

▶자바스크립트 프로미스(Promise) 지난 글에서 자바스크립트의 비동기 처리 방식의 문제점을 콜백 함수로 해결할 수 있지만 잘못 쓰게 되면 콜백 지옥에 빠질 수도 있으며 이 콜백 지옥을 Promise나 Async를 통해 해결할 수 있다고 했었습니다. 🔎 Promise ? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 💡프로미스는 객체이다! 여기서 자바스크립트의 비동기 처리는 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성' 을 의미합니다. 🔎 Promise가 필요한 이유 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 ..

▶자바스크립트 비동기 처리와 콜백 함수 이번 글에서는 자바스크립트의 특성이라고 할 수 있는 비동기 처리를 알아보고 이어서 콜백 함수까지 알아보도록 하겠습니다 :) 🔎 비동기 처리 ? 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 기다리지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 즉, 자바스크립트는 위에서부터 아래로 순서대로 코드를 실행하지 않고 먼저 실행할 수 있는 코드가 있다면 기다리지 않고 먼저 실행시켜 버립니다. // #1 console.log('first console'); // #2 setTimeout(function() { console.log('second console'); }, 3000); // #3 console.log('third console'..

▶타입스크립트 클래스(Class) 타입스크립트에서의 클래스를 알아봅시다😀 🔎 클래스? 자바스크립트에서는 ES6에서부터 클래스 문법을 지원하고 있습니다. 클래스를 사용하는 가장 큰 이유는 재사용성 입니다. 객체를 직접 작성하여 정의하고 생성할 수도 있지만, 클래스로 만들어주면 여러 객체를 더 쉽게 만들 수 있습니다. → 클래스는 객체를 생성하기 위한 틀 💡 🔎 ES6 이전에는 객체를 그냥 다 작성해줬을까? ES6 이전 문법에서도 재사용성을 위해 생성자 함수라는 것을 통해 ES6에서의 클래스와 동일한 역할을 수행했는데요. 📄 class.js 코드 // ES6 이전 - 생성자 함수 function Person(name, age) { this.name = name; this.age = age; } var doe..

▶자바스크립트 프로토타입(Prototype) 다음 글에서 클래스에 대해서 공부하려고 하는데 이때 필요한 프로토타입에 대해 알아보려고 합니다. 🔎 상속(Inheritance) 상속(inheritance)는 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 의미합니다. 예를 들어 설명하면, A 클래스가 B 클래스의 속성들을 상속받게 되면 A 클래스는 B 클래스의 모든 속성들을 사용할 수 있게 됩니다. 따라서 상속을 통한다면, 똑같은 속성들을 일일이 또 선언해주지 않아도 상속을 받고, 또 필요하다면 수정을 통해 재사용할 수 있다는 점이 중요한 포인트입니다💡 하지만 C#이나 C++과 같은 클래스 기반(class-based)의 객체 지향 언어와는 달리 자바스크립트는 프로토타입 기반(p..