async/await먼저 async/await는 비동기 처리를 위한 방법 중 하나로, Promise를 더 읽기 쉽게 사용할 수 있도록 하는 문법입니다. async/await 은 자바스크립트에서 비동기 처리는 기존의 동기식 처리 방식을 보완하면서도 간단하게 코드를 작성할 수 있도록 해줍니다. async/await 의 특징1. async 함수 선언async 키워드를 함수 앞에 붙여 비동기 함수를 선언합니다.async 함수는 항상 Promise 객체를 반환합니다.2. await 사용await 키워드는 Promise 앞에 붙여 해당 프로미스가 완료될 때까지 기다립니다.await는 프로미스가 resolve한 값을 반환합니다.3. 예외 처리(try/catch)async 함수 내에서 try/catch를 사용하여 예외..
프론트엔드 면접 질문
Promise와 Callback은 JavaScript에서 비동기 작업을 처리하기 위한 방법 입니다.1. CallbackCallback은 함수가 다른 함수에 인수로 전달되어, 특정 작업이 완료된 후에 실행되는 함수입니다. 비동기 작업을 수행한 후에 해당 작업의 결과를 처리하기 위해 주로 사용됩니다.function fetchData(callback) { setTimeout(() => { const data = "some data"; callback(data); }, 1000);}fetchData((result) => { console.log(result); // "some data"});장점단순하고 직접적임: 작은 규모의 비동기 작업을 처리할 때는 이해하기 쉽고 빠르..
자바스크립트 엔진과 웹에서 동작과정1. 자바스크립트 엔진의 구성자바스크립트 엔진은 싱글 스레드로 동작하는 언어이며, 자바스크릡트 엔진은 콜스택과 힙으로 구성되어 있습니다. 콜 스택: 실행 컨텍스트 스택으로, 요청된 작업을 순차적으로 실행합니다.힙: 객체가 저장되는 메모리 공간으로, 실행 컨텍스트에서 참조됩니다. 자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 작업만 처리할 수 있는데, 저희가 사용하는 웹에서는 서버에서 데이터를 받아오는 작업 등을 동시에 비동기적으로 처리할 수 있는 이유가 무엇일까요?2. 자바스크립트 엔진의 동작 과정과 브라우저 Web API 그 이유는 브라우저 또는 Node.js와 같은 환경에서 제공하는 Web API, 이벤트 루프(Event Loop), 그리고 콜백 큐(..
1. HTTP 란?HTTP는 HyperText Transfer Protocol의 약자로, 클라이언트와 서버 간 통신을 위한 프로토콜입니다. 사용자가 웹 사이트를 방문하면 사용자 브라우저가 웹 서버에 HTTP 요청을 전송하고 웹 서버는 HTTP 응답으로 응답합니다. 웹 서버와 사용자 브라우저는 데이터를 일반 텍스트로 교환합니다. 간단히 말해 HTTP 프로토콜은 네트워크 통신을 작동하게 하는 기본 기술입니다. https://aws.amazon.com/ko/compare/the-difference-between-https-and-http/ HTTP와 HTTPS 비교 - 전송 프로토콜 간의 차이점 - AWS1996~1997년에 출시된 최초의 HTTP 버전이 HTTP/1.1입니다. HTTP/2와 HTTP/3은 ..
브라우저 저장소 브라우저 저장소는 클라이언트 웹 브라우저에 데이터를 저장하는 기능입니다. 이 기능은 웹사이트를 사용하는 다양한 클라이언트(웹 브라우저, 스마트폰, 스마트워치, 태블릿, CCTV, 센서 등)에게 응답하기 위해 서버에서 사용됩니다. 브라우저 저장소는 웹 브라우저를 통해 방문자의 컴퓨터에 데이터를 저장할 수 있습니다. 이 기능은 웹사이트의 성능을 향상시키고 네트워크 연결 없이도 사용 가능하게 합니다이러한 브라우저 저장소는 쿠키(Cookie)와 웹 스토리지(Web Stroage)가 있으며, 웹 스토리지의 종류에는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 있습니다. 1. 쿠키(Cookie)쿠키는 웹 사이트에 접속할 때 생성되는 정보를 담은 임시 파일..
REST 란?먼저 REST API 에서 REST는 Representatinal State Transfer 의 약자로자원을 이름(자원의 표현)으로 구분해 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미합니다. 즉, REST 란HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고,HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다.REST 구성 요소1. 자원(Resource) - URI웹 서버가 관리하는 모든 것들을 자원이라고 합니다.자원은 고유한 URI를 통해 식별됩니다.2. 행위(Verb) - MethodHTTP 프로토콜의 Meth..
클로저란?클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(렉시컬 스코프)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다.즉, 자신이 생성될 때의 환경(렉시컬 스코프)을 기억하는 함수다.function outerFunc() { var x = 10; function innerFunc() { console.log(x); }; return innerFunc;}var closure = outerFunc();closure(); // 10 렉시컬 스코프는 함수를 어디에 선언하였는지에 따라 상위 스코프가 결정되는 것..
호이스팅(Hoisting)호이스팅이란 함수, 변수, 클래스 또는 임포트(import)와 같은 선언문을 해당 유효범위의 맨 위로 끌어올리는 것처럼 보이는 현상 이러한 현상이 발생하는 이유는 자바스크립트 엔진이 먼저 전체 코드를 스캔하면서 변수 같은 정보를 실행 컨텍스 어딘가에 미리 기록해두었기 때문이다. (이때, 그 어딘가는 환경레코드 입니다.)호이스팅 발생 과정 호이스팅이 발생하는 과정은 생성단계와 실행단계 두 단계가 있습니다.생성 단계 (Creation Phase)자바스크립트 엔진은 코드를 실행하면우선 전역 실행 컨텍스트를 가장 먼저 생성해서 콜 스택에 넣는다.그 후 전체 코드를 스캔한다.이 과정에서 선언할 식별자 변수가 있다면 전역 실행 컨텍스트의 환경 레코드에 미리 선언해둔다.식별자 변수가 var..
