javascript

[JavaScript] Promise와 Fetch API, Axios 이해하기

Promise 프로미스(Promise)는 비동기 처리를 위한 패턴으로 ES6에서 도입되었다. 프로미스의 등장으로 전통적인 콜백 패턴의 단점을 보완할 수 있게 되었다. Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스 객체를 생성하게 된다. const promise = new Promise((resolve, reject) => { if (condition) { // 비동기 처리 성공 resolve('result'); } else { // 비동기 처리 실패 reject('failure reason'); } }); 프로미스는 비동기 처리 결과(resolve, reject)와 진행 상태(pending, fulfilled, rejected) 정보를 갖는다. 비동기 처리가 아직 수행되지 않은 상태..

[JavaScript] 동기와 비동기, 자바스크립트 엔진과 브라우저 환경

동기(Sync) JavaScript 엔진은 하나의 실행 컨텍스트 스택을 가지고, 한번에 하나의 태스크(함수)만 실행할 수 있는 싱글 스레드(single thread) 방식으로 동작한다. 따라서 처리에 시간이 걸리는 태스크를 실행 중이면 작업 중단(blocking)이 발생하고, 다음에 실행될 태스크는 대기해야 한다. 이를 동기(synchronous) 처리 방식이라고 한다. const sleep = (func, delay) => { const delayUntil = Date.now() + delay; while (Date.now() { console.log('함수1 실행'); } const bar = () => { console.l..

[WIL] ES란? | 이노베이션 캠프 동북권 - 2주차 회고

🚢 이번 항해는? 금요일부터 시작한 6일간의 알고리즘 주차가 딱 6월에 끝이 났다. 2주차 팀원분들과 프로그래머스 1단계 50문제를 풀었는데, 달리기반으로 주어진 문제보다 12문제를 더 푼 셈이다. 우리 팀은 노션을 적극 활용했다. 각자의 풀이도 공유하고 참고하면 좋은 글들이나 필요했던 개념들을 계속 노션에 추가해 나갔다. 6일만에 제법 쌓여서 복습할 때 활용하면 좋을 것 같단 생각이 든다. 뒤로 갈수록 1단계 내에서도 문제가 길고 조금 생각을 해야 하는 (주로 카카오) 문제들을 접할 수 있었다. 알고리즘을 알면 쉽게 풀렸던 비밀지도 문제나, 정규표현식으로 깔끔하게 푼 풀이를 보고 놀랐던 다트게임 문제 등이 기억에 남는다. 빠른 시일 내에 집중해서 1단계 문제들을 대부분 살펴볼 수 있어서 의미있는 시간이..

[S.A.] JavaScript 이해 | 이노베이션 캠프 - 리액트 입문주차

7월과 함께 항해99 동북권 이노베이션 캠프의 리액트 입문주차가 시작되었다. 본격적인 리액트 공부에 앞서 JavaScript의 필수 개념을 초반에 확실히 짚고 넘어가고자 한다. 이번 주는 JavaScript의 특성 및 자료형, 객체의 특성과 불변 객체, 얕은 복사와 깊은 복사, 스코프와 호이스팅, 실행 컨텍스트 개념 등을 살펴볼 것이다. 컴파일러 vs 인터프리터 언어 전통적인 컴파일러 언어는 소스코드 전체를 한번에 머신 코드로 변환해 실행 파일을 만드는 컴파일 단계와 실행 단계가 분리되어 있어 코드 실행 속도가 빠르다. 인터프리터 언어의 경우 코드 실행 단계인 런타임에 문 단위로 한 줄씩 바이트코드로 변환하고 즉시 실행한다. 인터프리트 단계와 실행 단계가 분리되어 있지 않고 반복 수행되기 때문에 코드 실..

[JavaScript] Array 생성자 함수와 Array.of, Array.from

Array 생성자 함수 꼭 new 연산자와 함께 호출하지 않아도 배열을 생성하는 생성자 함수로 동작한다. 생성자 함수 내부에서 new.target을 확인하기 때문! Array와 Array.of의 차이 Array 생성자 함수는 인수로 숫자 하나를 전달받으면 해당 인수를 length로 갖는 빈(희소) 배열을 생성한다. Array.of는 숫자 하나를 전달해도 그 인수를 요소로 갖는 배열을 생성한다. Array.from 이란 Array.from에 length만 존재하는 유사 배열 객체를 전달하면 undefined를 요소로 채운다. 첫 번째 인수로 전달한 유사 배열 객체에 의해 배열의 요소값과 인덱스를 순차적으로 전달하면서 호출하고, 두 번째 인수로 전달한 콜백 함수의 반환값으로 구성된 배열을 반환한다. 유사 배..

[JavaScript] 화살표 함수와 this

화살표 함수(Arrow Function) function 키워드 대신 화살표=>를 사용해 간략하게 함수를 정의할 수 있다. 표현 뿐 아니라 내부 동작도 기존의 함수보다 간략하다. 특히 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기 위한 대안으로 유용하다. 화살표 함수는 함수 선언문이 아닌 함수 표현식으로 정의해야 한다. const arrow = () => { ... }; 만약 매개변수가 한 개인 경우 소괄호( )를 생략할 수 있고, 함수 몸체가 표현식인 문 하나로 구성되어 있으면 중괄호{ }를 생략할 수 있다. const power = x => x ** 2; // const power = (x) => { return x ** 2 }; 와 동일함 화살표 함수가 객체 리터럴을 반환하는 ..