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

[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 }; 와 동일함 화살표 함수가 객체 리터럴을 반환하는 ..

[jQuery] Ajax 기본 골격과 로딩 직후 호출 방법

Ajax 기본 골격 $.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } }) jQuery로 Ajax 콜을 하는 기본 골격이다. 여기에서 URL 위치에 openAPI 주소를 붙여 넣는다. 이렇게 서버에서 데이터를 response 받아와서 나 , 등으로 tempHtml을 구성한 다음, .append(tempHtml)로 원하는 화면에 뿌려주면 된다. 이미지를 바꾸는 것은 .attr("src", 이미지URL) 형태로 태그의 src 어트리뷰트 값을 수정해 준다. 서울시 실시간 미세먼지, 서울시 실시간 따릉이 현황, 랜덤 이미지, 날씨 API 등이 강의에서 제공되어 다양하게 실습해 볼..