doeunn.log

▶자바스크립트 프로미스(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..

▶타입스크립트란? 1. 타입스크립트란? 2012년 마이크로소프트가 발표한 타입스크립트(TypeScript) 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 자바스크립트 냅두고 타입스크립트 왜 쓰는데..? 자바스크립트는 장점이자 단점이 존재합니다. 예를 들어 5 - 3 을 하게 되면 2가 나옵니다. 그런데 자바스크립트에서는 5 - '3' 도 2가 나오게 됩니다. 자바스크립트는 Dynamic Typing이 가능합니다. 그렇기 때문에 원래는 숫자 - 숫자만 가능하지만, 자바스크립트가 알아서 '3' 같은 경우에도 알아서 숫자로 바꿔서 계산해주게 됩니다. 이 점은 편리하기도 하지만 프로젝트가 커지면 단점이 되게 됩니다. 원하지 않은 부분에서도 이러한 자바스크립트의 특징들이 적..

▶모듈 모듈은 외부로 공개한 API를 통해서 상태를 변경하고 내부 구현에 대한 캡슐화의 역할을 합니다. 각각의 모듈은 애플리케이션을 구성하는 단위가 하며, 모듈 단위로 재사용하여 불필요한 코드를 줄이고 유지 보수성을 높일 수 있습니다. 1) export, import 모듈 안에 선언한 식별자를 다른 모듈에서 접근할 수 있도록 하고 싶다면 export 키워드를 사용하여 내보내기를 하면 됩니다. 함수, 변수, 클래스 모두를 내보낼 수 있으며, 이들은 반드시 모듈의 최상위 위치(top-level)에 존재해야 합니다. export const a = 1; export function foo() { // ... } const b = 1; function bar() { // ... } export { b, bar }..