Javascript

Promise : 비동기 처리를 위한 패턴, 콜백함수의 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다.Promise는 왜 만들어졌을까?계기를 알기 위해서는 기존 비동기처리를 위한 콜백패턴을 먼저 알아봐야한다.콜백 패턴은 비동기 처리를 하기 위하여 사용하는

fetch는 XMLhttpRequest 객체와 비슷하게 HTTP 통신 기능을 제공하는 WEB API이다.const promise = fetch(url \[options])fetch는 XMLhttpRequest보다 간편하게 통신할 수 있다.XMLhttpRequest와 f

async/await : ES8(ECMAScript 2017)에 도입된 키워드로 비동기 처리를 동기 처리처럼 구현할 수 있다.비동기 처리를 왜 동기 처리처럼 구현할까?여러가지 비동기 처리 코드가 있을 때 무엇이 먼저 실행될지 모르기 때문에 동기처리처럼 구현하여 순서를

여러가지 프로젝트를 만들면서 연산자와 데이터 타입변환을 활용하는 것은 중요하다.이는 가끔씩 헷갈리기도 하는 개념이므로 정리해보고자 한다.javascript에서 서로 다른 타입의 데이터들이 암묵적으로 타입변환이 되는 경우가 있다.각 타입이 어떻게 타입변환되는지 알아보고

논리 연산자는 우항과 좌항의 피연산자를 논리 연산한다.|| (논리합연산자)&& (논리곱연산자)논리합 연산자논리합 연산자는 둘 중에 하나라도 true라면 true값을 반환한다.또한 둘 다 true인 값일 때에는 좌항의 피연산자으로 반환된다.논리곱 연산자논리곱 연산자는 둘

Function.prototype.call(thisArg,\[arguments])this binding을 변경하여 함수를 호출하기 위한 메서드일반 함수내에서 this는 window객체를 가르킨다.본질적인 기능 : 함수를 호출하는 것함수를 호출하면서 첫 번째 인수로 전달

switch/case 문은 여러가지 case 조건 중 맞는 조건을 충족시키는 case를 실행하는 문이다.switch의 인자 안에 값을 충족시키는 case 구문이 실행된다.위 예제에서 switch 인자값이 value2라면 value2 statement(value is 2

jsconfig.json을 여기저기서 따라쓰긴 하였는데 어떤 역할을 하는 file인지 짚고 넘어가고 싶어 알아보려 한다.jsconfig.json 파일을 사용하는 이유가 뭘까?프로젝트 디렉터리 루트에 jsconfig.json을 생성함으로써 해당 프로젝트가 js 관련 프로

기술 면접을 준비하다 변수에 대해 다시 한번 되짚어보기 위해 이전에 보았던 자바스크립트 딥다이브를 보며 변수에 대한 개념을 정리해보고자 한다.변수에 값을 할당할 때는 할당 연산자 =를 사용한다.변수의 선언 시점과 할당 시점은 다르다.변수의 선언은 런타임(소스코드가 순차

Ajax는 현대 동적인 웹에서 필수적으로 사용되는 javascript 기술이다. 또한 기술 면접에서 자주 묻는 키워드이므로 한번 정리해보자. Ajax(Asynchronous Javascript and XML)과 탄생배경 ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기적으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 동적으로 웹페이지를...

🤔 자바스크립트에서 비동기 함수가 동작할 수 있는 원리는 무엇일까? 우리가 자바스크립트로 웹 프로그래밍을 할 때 이벤트 핸들러(ex onClick,onScroll),Http 요청(XMLHttpRequest,fetch,axios),타이머(setTimeout,setInt

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됩니다.이를 이벤트 전파라고 하는데요.생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타켓을 중심으로 DOM 트리를 통해 전파됩니다.이벤트 전파 방향에 따라 이벤트 버블

var,let,const는 2가지 맥락에서 차이가 있습니다.소스 코드 평가 과정에서 선언 단계와 초기화 단계의 차이함수 레벨 스코프와 블록 레벨 스코프의 차이var와 let와 const 차이를 설명하기 전에 우선 자바스크립트가 소스 코드를 실행하기 위한 단계를 알아야합

파일을 선택할 수 있는 파일 입력창에서 선택한 이미지를 미리볼 수 있게 해보자.전체적인 코드는 다음과 같다.<input type="file"/>을 사용하면 사용자의 디바이스에 접근하여 사용자의 파일을 선택할 수 있게 해준다.이 때 <input type="fi

프론트쪽에서 서버에 데이터를 보낼 때, 데이터 중 파일 객체 데이터가 포함되어있다면 특정 작업들을 추가적으로 해줘야한다. 특정 작업들이란 크게 두가지이다. 헤더의 content-type을 mulitpart/form-data로 변경 요청 데이터를 formData로 변