728x90 반응형 분류 전체보기286 [JavaScript] 자바스크립트 콜백 지옥(동기, 비동기) 1. 동기와 비동기javascript를 사용하면서 데이터를 처리할 때 사용하는 방식인 동기와 비동기 처리에 대해 설명해볼려고 한다 비동기 함수를 사용해 본 적은 있지만 이것의 개념을 정확하게 알지 못하고 넘어간 거 같아 이번 기회에 한 번 동기와 비동기의 차이점과 비동기 함수의 콜백함수 개념을 간단한 예제를 통해 설명하겠습니다.동기(Synchronous)동기는 반드시 작성된 순서대로 실행된다 먼저 불러온 순서대로 차례대로 나오는 방식입니다 이전의 함수가 무조건 끝나야 다음이 실행됩니다비동기(Asynchronous)자바스크립트는 싱글스레드이기 때문에 한 번에 하나의 작업만 수행할 수 있습니다 이를 해결하기 위해 비동기 처리가 생겼습니다 비동기는 작성된 순서대로 실행하지 않고 내가 원하는 함수를 먼저 호출하.. 2023. 3. 10. [JavaScript] 자바스크립트 async와 await의 개념과 사용법 목차들어가며async & await는 뭔가요?개발자에게 읽기 좋은 코드란?그래서 읽기 좋은 코드와 async & await가 무슨 상관이죠?async & await 맛보기async & await 적용된 코드와 그렇지 않은 코드async & await 기본 문법async & await 간단한 예제async & await 실용 예제async & await 예외 처리마무리글보다 더 쉽게 배우는 온라인 강좌이해가 잘 안되시나요? 방송에서 직접 물어보세요 :)[Javascript] 비동기, Promise, async, await 확실하게 이해하기들어가며안녕하세요. 오랜만에 글을 올립니다. 작년에 Promise 글을 작성할 때까지만 해도 Async 편을 작성하는 데까지 이렇게 오랜 시간이 걸릴 거라고는 생각 못 했.. 2023. 3. 10. [JavaScript] 자바스크립트 비동기 처리와 콜백 함수(callback, promise, async/await) 목차들어가며비동기 처리? 그게 뭔가요?비동기 처리의 첫 번째 사례비동기 처리의 두 번째 사례콜백 함수로 비동기 처리 방식의 문제점 해결하기비유로 이해하는 콜백 함수 동작 방식콜백 지옥콜백 지옥을 해결하는 방법마무리글보다 더 쉽게 배우는 온라인 강좌이해가 잘 안되시나요? 방송에서 직접 물어보세요 :)[Javascript] 비동기, Promise, async, await 확실하게 이해하기들어가며얼마 전 수강생 한 분에게 Promise에 대해서 잘 설명된 글이나 예제 코드를 공유해달라고 요청받았습니다. 영어로는 잘 정리된 글이 많은데 한글로 쉽게 설명된 글을 찾아드리려고 하니 생각보다 자료가 많지 않더라구요. 그래서 Promise를 정리하기 위해 글을 쓰기 시작했습니다.‘Promise는 자바스크립트 비동기 처.. 2023. 3. 10. [JavaScript] 자바스크립트 비동기에 대해서 이해하기 자바스크립트는 싱글쓰레드기반의 언어인데 어떻게 비동기로 동작을 할까?먼저 아래 영상을 보면 이해가 쉬울 것이다.https://youtu.be/8aGhZQkoFbQ[ 한국어 자막 ON. ]사실 자바스크립트가 비동기로 동작하는 이유는 브라우저에 있다.브라우저는 Web API, Callback Queue, Event Loop 등으로 구성되어있고 자바스크립트 코드가 실행될 때 브라우저와의 동작은 아래 그림으로 표현할 수 있다.자바스크립트 엔진의 구성요소브라우저의 자바스크립트 엔진은 Memory Heap과 Call Stack으로 구성되어있다.자바스크립트는 싱글쓰레드기반의 언어기 때문에 한 번에 하나의 일만 처리할 수 있다. 즉, 선입후출(LIFO, Last In First Out)방식이다.Runtime Envir.. 2023. 3. 10. [JavaScript] 자바스크립트 비동기 처리 📌 동기 처리동기(Synchronization): 어떤 일이 순차적으로 발생한다.📌 비동기 처리비동기(async): 어떤 일을 병렬적으로 실행한다.📕 배경자바스크립트의 특징 중 하나는 단일 스레드로 동작한다는 것이다.(엥 단일 스레드요? 그게 뭐죠?)쉽게 생각해서 단일 스레드란, 한번에 하나의 일을 처리하는 것. 이라 표현할 수 있다.이러한 특징으로 인해 자바스크립트에서는 한가지 문제가 발생하게 된다.너무 오래 걸리는 작업이 있으면 그 작업을 하느라, 다른 작업들은 그만큼 기다려야 한다는 점이였다. (블록킹)이를 해결하기 위해 나온 개념이 비동기 처리이다.특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 비동기 처리라 부르고, 이를 이용해 코드의 블록킹을 방.. 2023. 3. 10. [JavaScript] 자바스크립트 this란? C++, JAVA와 같은 언어에서 this는 자기자신 객체를 가리킨다.그러나 JavaScript 의 this 값은 실행 컨텍스트의 thisValue 에 의해 값이 바인딩 된다.thisValue는 아래의 5가지 패턴에 의해 결정된다.전역(global)함수 호출(function Invocation)과 메서드 호출(Method Invocation)call(), apply(), bind()생성자(Construction)strict 모드💡 바인딩 : 실제 값이 변수에 묶이는 것💡 strict 모드 : ES5 에 있는 새로운 기능으로 엄격하게 문법을 검사하는 모드이다.1. 전역(global)전역에서 this는 전역 컨텍스트의 영향을 받아 this 값은 전역 객체 가 된다.// 브라우저에서는 window 가 전역.. 2023. 3. 10. [JavaScript] 자바스크립트 클로저(Closure)란? 클로저의 의미클로저는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성입니다. 자바스크립트 고유의 개념이 아니라서 ECMAScript 명세에서도 클로저의 정의를 다루지 있습니다. 더구나 클로저를 설명하는 문장 자체도 이해하기 어려운 경우가 많습니다.클로저는 실행 컨텍스트의 스코프 체인과 깊은 관련이 있습니다.어떤 컨텍스트 A에서 선언한 내부함수 B의 실행 컨텍스트가 활성화된 시점에는 B의 outerEnvironmentReference가 참조하는 대상인 A의 LexicalEnvironment에도 접근이 가능하겠죠. A에서는 B에서 선언한 변수에 접근할 수 없지만 B에서는 A에서 선언한 변수에 접근 가능합니다. 이 부분이 바로 클로저를 관통하는 개념입니다.클로저의 원리inner 함수의 실행 시점에서 o.. 2023. 3. 10. [JavaScript] 자바스크립트 제너레이터(Generator)와 이터레이터(Iterator) 원문 : 💡🎁 JavaScript Visualized: Generators and IteratorsES6는 generator functions를 도입했습니다 🎉. 제가 사람들에게 제너레이터 함수에 대해 물어보면, 보통 이런 반응을 보입니다."한 번 써봤는데 어려워서 다신 쓰지 않는다.", "제너레이터에 대한 블로그 글을 많이 봤지만 여전히 이해가 가지 않는다.","이해는 하지만 그런 왜 써? 🤔" 저도 오랫동안 이러한 생각을 가지고 있었지만, 제너레이터는 사실 꽤 멋진 녀석입니다.그렇다면, 제너레이터 함수는 무엇일까요? 먼저 일반적인 구식 기능을 살펴보겠습니다.👵🏼특별한건 없습니다! 단지 값을 4번 기록하는 일반적인 함수일 뿐입니다. 호출해봅시다!"하지만 리디아, 왜 이런 평범하고 지루한 함수.. 2023. 3. 10. [JavaScript] 자바스크립트 프로토타입 상속 원문 : 🎉👨👩👧👧 JavaScript Visualized: Prototypal Inheritance문자열, 배열, 객체에서 .length, .split(), .join()과 같은 기본 내장 메소드를 사용할 수 있는 이유가 궁금한적 있나요?우리는 그 메소드들을 명시한적 없는데 그것들은 어디서 오는걸까요? 이제 그것들을 마법이라 하지 마세요.바로 프로토타입 상속이라 불리는 것 덕분입니다. 이건 꽤 멋지고, 여러분이 알고 있는 것보다 더 자주 사용합니다!우리는 종종 같은 타입의 객체를 많이 만들어야 합니다. 사람들이 개를 검색할 수 있는 웹사이트가 있다고 가정해 봅시다.모든 개를 위해, 그 개를 묘사하는 객체가 필요합니다. 매번 새로운 객체를 작성하는 것 대신에, 우리는 constructor .. 2023. 3. 10. 이전 1 ··· 27 28 29 30 31 32 다음 728x90 반응형
