이다닷

Promise와 Callback의 차이점Callback 함수를 사용하면 비동기 로직의 결과값을 처리하기 위해서는 callback 안에서만 처리를 해야하고, callback 밖에서는 비동기에서 온 값을 알 수가 없다.하지만, promise를 사용하면 비동기에서 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이해진다.   이렇게 async 함수에서 비동기가 끝난 후의 값을 가지고 싶어서 이렇게 작성했다면 b를 1초 후, 100초 후에 찍어도 undefined라는 답이 나온다.   하지만 이렇게 promise를 사용하게 되면 promise 객체에 비동기가 처리된 결과값이 저장된다.callback의 경우 매번 비동기를 실행해야 그 값을 저장할 수 있지만 promise는 .then 메소드를 통해서 ..

Promise란? Promise는 자바스크립트 비동기 처리에 사용되는 객체이다. Promise가 필요한 이유는? Promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 즉, API를 사용할 때 데이터를 받아오기 전에 표시를 한다면 오류가 발생하거나 빈 화면이 뜬다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 Promise이다. Promise 코드 예제 3번 줄 : 서버에서 받은 데이터 response를 callbackFunction()한다. 8번 줄 : $.get()의 response 값이 data에 전달된다. Promise 적용 코드 콜백 함수로 처리하던 구조에서 new Promise(), resolve(), then()과 같은 Promise API를 사용한 구조로 바꾸었다...

다른 함수의 실행이 끝났을 때 실행되는 함수 => CallBack 함수 CallBack 함수란? JavaScript에서 함수는 object이다. 그래서 함수가 다른 함수의 인자로 사용될 수 있고, 또 어떤 함수에 의해 리턴될 수도 있다. ===> 함수를 등록하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수이다. 예제1) 함수 Func를 호출했을 때, 밑에 있는 특정 callBack 함수가 실행된다. 예제2) introduce 함수를 실행하면, callback 자리를 새로운 함수 function(name)으로 지정해주면서 fullName에 저장된 이름이 callback(fullName) 함수의 인자로 들어가서 실행된다. 필요한 이유 동기 / 비동기 1. 동기 - 하나의 요청..

자바스크립트의 this는 4가지 종류의 문맥으로 구분할 수 있다. 함수 실행 메소드 실행 생성자 실행 간접 실행 1. 함수 실행 함수 실행과 메소드 실행의 차이점을 알아보겠다. - 5라인에서 실행하고 있는 것은 hello라는 함수를 실행하고 있는 것이다. - 6라인에서 실행하고 있는 것은 자바스크립트에서 제공하는 console 객체의 log메소드를 호출하고 있는 것이다. 함수 실행에서의 this 함수 실행에서 this 는 전역 객체를 가리킨다. 한번에 이해할 수 있는 예시로 코드를 하나 가져와봤다. 함수 문맥으로 sum이 실행되었고, this는 sum() 안에 존재하는 전역객체이므로 window를 가리킨다. 3라인에서 this가 활용되면서 sum 함수가 호출되면 자바스크립트가 자동으로 this에 전역 객..

JavaScript는 싱글쓰레드 언어이다. 싱글 쓰레드 언어란? -> 여러 개의 작업이 있더라도 한 번에 하나의 작업만 수행할 수 있다. 하지만 JavaScript를 사용하다보면 멀티쓰레드처럼 동시에 여러 작업을 수행할 수 있다. JavaScript의 메인쓰레드인 이벤트 루프가 싱글쓰레드이다. 하지만 이벤트 루프만 독립적으로 실행되는것이 아닌 웹 브라우저나 NodeJS 같은 멀티쓰레드 환경에서 실행되고 이를 적절하게 사용함으로써 멀티쓰레드처럼 사용이 가능하다. JavaScript의 동작과정 JavaScript 엔진 JavaScript 엔진은 코드를 이해하고 실행을 도와주는 역할을 한다. JavaScript 엔진은 크게 Memory Heap과 Call Stack으로 이루어져 있다. - memory Heap..

순서도 프로그래밍에서는 절차가 매우 중요하다. 코드를 에디터에 입력하기 전에 내가 만들 프로그램이 어떤 절차로 돌아갈지 미리 생각해야 한다. 여기에서는 먼저 끝말잇기가 어떤 식으로 진행되는지 말이나 그림으로 표현해보자. 끝말잇기 게임으로 순서도 작성해보기 1. 세 명의 참가자가 있다고 가정해보기(A, B, C) 2. A가 '자바 스크립트'라는 제시어를 말한다. 3. B가 '트집'이라고 말한다. 4. C가 '집합'이라고 말한다. 5. 다시 A가 '합체'라고 말한다. 6. 무한 반복된다. 프로그래밍적으로 이 순서도를 보았을때는 많은 오류가 있다. 오류 1. 참가자가 3명이 아닐 수도있다. 오류 2. 모든 참가자가 답을 말하는 것이 아니다. 프로그래밍적으로 순서도를 적을때 생각해 보아야 할 규칙 📌 1. 프로..

HTTP HTTP(HyperText Transfer Protocol)는 웹 브라우저와 웹 서버가 데이터를 주고받을 수 있게 디자인 된 통신 규약이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 이 규약을 암호화하여 보안을 확보한 규약은 HTTPS라 한다. => 데이터를 주고 받는다? HTML, 이미지, 영상, 음성 파일 등을 주고 받는다! HTTP 통신 HTTP에서는 클라이언트가 서버에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환한다. 서버는 응답 메시지를 반환한 후에 초기 상태로 돌아간다. 이러한 특징으로 인해 HTTP를 stateless 규약이라고도 한다. HTTP 요청 HTTP 요청 메시지는 요청 행, 요청 헤더, 메시지 본문으로 구성된다. 요청 행 : 요청 메소드, ..

객체 리터럴 객체를 구성하는 속성의 이름과 실제 값을 한 쌍으로 묶어 표현하는 '객체 리터럴'을 이용하면 객체를 생성할 수 있다. 이때 속성의 이름을 키(key), 속성의 실제 값을 밸류(value)라고 한다. const cat = { name : "국희", town : "부천" } => name과 town은 키, "국희"와 "부천"은 밸류! 📌키는 중복될 수 없다. 그러나 밸류는 같은 것이 있어도 상관 없다. 속성 참조하기 객체 안의 속성 값을 참조할 때에는 도트(.) 연산자 또는 대괄호([]) 연산자를 사용할 수 있다. // 도트 연산자 사용 console.log(cat.town) cat.scratch() // 대괄호 연산자 사용 console.log(cat['name']) cat['eat']() 스..

Element.classList 웹 요소로부터 클래스 콜렉션을 반환하는 읽기 전용 속성이다. 사용방법 const 이름 = document.querySelector('이름') 메소드 종류 메소드 기능 사용 예 add 지정한 클래스 값 추가 add("new_class") remove 지정한 클래스 값 제거 remove("old_class") item 인덱스를 이용해 클래스 값 반환 item(1) toggle 클래스 값 토글링(=있으면 제거, 없으면 생성) toggle("some_value") contains 지정한 클래스 값 존재 여부 확인 contains("is_contains") replace 기존 클래스를 새 클래스로 대체 replace("old", "new") 배열의 개념과 사용법 배열이란? 배열은 ..

내장 생성자 (= 빌트인 객체) 처음부터 사용할 수 있는 기본 객체 및 생성자를 제공한다. Date Date는 날짜와 시간을 처리하는 다양한 메소드가 정의된 내장 생성자이다. Date를 통한 객체생성은 다음과 같은 형태로 이루어진다. const now = new Date() // 코드가 실행되는 시점의 날짜와 시간 정보를 담은 객체 const then = new Date(2005, 5, 10) // 2005년 6월 10일의 날짜와 시간 정보를 담은 객체 Date 객체 주요 메소드 메소드 기능 특이사항 getFullYear 연도를 뜻하는 숫자 값 반환 getMonth 월을 뜻하는 숫자 값 반환 0부터 시작하므로 1월이면 0 반환 getDate 날짜를 뜻하는 숫자 값 반환 getDay 요일을 뜻하는 숫자 값..