이다닷

Async, Await는 비동기 처리 방식 중 한가지의 방법이다. Promise를 조금 더 편리하게 사용할 수 있도록 도와주는 편리한 친구다. 사용법async function functionName() { let promise = new Promise((resolve, reject) => { setTimeout(() => resolve("success"), 1000) }); let result = await promise; aler(result);}functionName(); 이렇게 코드를 작성하면 functionName를 실행했을 때, await promise 부분에서 promise가 실행이 될 때까지 기다리게 된다.이 기능을 사용하여 서버를 통해서 api 연결을 ..

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..

'의미론적인 HTML 태그 문서 작성'이라는 뜻을 가진 시멘틱 마크업은 => 의미를 잘 전달할 수 있도록 HTML 태그 문서를 작성하는 일을 한다. 시멘틱 마크업이란? 시멘틱 마크업을 사용하는 이유 웹 접근성에 효율적 코드 가독성에 따른 유지 보수 용이 검색엔진 최적화에 유리 시멘틱 마크업의 종류 header : 소개 및 탐색에 도움을 주는 콘텐츠, 제목, 로고, 검색 폼 등의 요소가 포함된다. nav : 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 내비게이션이다. 메뉴, 목차, 색인 등에 사용된다. main : 문서 의 주요 콘텐츠를 나타낸다. article : 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 구분되는 요소에 해당된다. section : 문서나 애플리케이션 영역을 ..

display 속성이란 요소 크기를 어떻게 결정 할건가를 결정하는 속성이다. display 속성 display 속성값의 종류 none block inline inline-block DOCTYPE html> None Block Inline Inline-block body div { font-size: large; margin-bottom: 50px; } .none_div { display: none; background-color: #000000; } .block_div { display: block; background-color: aqua; } .inline_div { display: inline; width: 500px; background-color: chartreuse; } .inline-bloc..

HTML 요소(element)를 원하는 위치에 배치하기 위해서 사용하는 속성이 position 속성이다. position 속성 CSS에서 position 속성은 HTML 문서 상에서 요소를 배치할 수 있다. position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용된다. position: static - 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다. absolute - 절대 좌표와 함께 위치를 지정할 수 있다. relative - 원래 있던 위치를 기준으로 좌표를 지정한다. fixed - 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정한다. inherit - 부모 태그의 속성값을 상속받..

웹 페이지에서 사용하는 margin(마진)과 padding(패딩)은 여백 공간을 의미한다. margin과 padding을 잘 활용하면 웹 페이지에서 원하는 공간에 콘텐츠를 삽입할 수 있게 된다. - 웹 페이지에 요소를 삽입하면 다음과 같은 구성을 보이게된다. - 콘텐츠가 있고, 그 밖을 padding이, 콘텐츠의 테두리 와 다른 요소와의 공백은 margin 영역이라고 한다. margin(마진) margin(마진)은 현재 요소 주변의 여백 공간을 의미한다. margin을 조절하면 현재 요소와 다른 요소간의 공간을 조절할 수 있다. margin 속성 margin: 사방의 마진 영역을 조절한다. margin-top: 상단 마진 영역을 조절한다. margin-bottom: 하단 마진 영역을 조절한다. margi..