하얀 코딩

JavaScript에서 비동기를 경험하게 되는 첫번째 단계는 타이머와 관련된 API입니다. 해당 API는 브라우저에서 제공하는 Web API이며 비동기로 작동하도록 구성되어 있습니다. setTimeout(callback, millisecond) 일정 시간 후에 함수를 실행 setTimeout(function () { console.log('1초 후 실행'); }, 1000); 1. callback 실행할 콜백 함수 2. millisecond (1000ms = 1s) 콜백 함수 실행 전 기다려야 할 시간 3. return 임의의 타이머 ID. index 번호로 1번 부터 출력 된다. clearTimeout(timerId) setTimeout 타이머를 종료 const timer = setTimeout(fun..

동기(synchronous) 자바스크립트의 동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것’을 의미합니다. 주문 즉시 붕어빵을 만들어 주는 노점상이 있다고 생각해봅시다. 동기적으로 운영되는 노점상의 경우 붕어빵을 주문받은 후 주문받은 붕어빵이 다 만들어지고 난 후에야 다음 손님의 주문을 받고 붕어빵을 제작하게 됩니다. 이 경우 여러 손님의 주문을 소화하기에는 무리가 있습니다. 비동기(asynchronous) 자바스크립트의 비동기 처리는 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것’을 의미합니다. 앞선 예시로 든 노점상이 비동기적으로 운영되는 경우 여러 손님의 주문을 받으면서 붕어빵을 제작하게 되고 완성되는 대로 손님에게 붕어빵을 제..

JavaScript에는 기본적으로 내장된 고차 함수가 여럿 있습니다. 그중에서 배열 메서드들 중 일부가 대표적인 고차 함수에 해당합니다. 본 게시글에서는 다음과 같이 자주 사용하는 고차함수를 다루어 보도록 하겠습니다. Array.prototype.filter() Array.prototype.map() Array.prototype.reduce() Array.prototype.forEach() Array.prototype.filter() filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 ..

이해하기 고차 함수(higher order function)는 함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수입니다. 함수는 변수에 저장할 수 있습니다. 그리고 함수는, 함수를 담은 변수를 전달인자로 받을 수 있습니다. 마찬가지로, 함수 내부에서 변수에 함수를 할당할 수 있습니다. 그리고 함수는 이 변수를 리턴할 수 있습니다. 여기서 변수에 할당하지 않고 함수를 바로 이용할 수 있습니다. 어떤 고차 함수에 함수를 전달인자로 전달하고, 고차 함수는 함수 자체를 리턴합니다. 변수가 빠졌을 뿐, 동일하게 동작합니다. 이때 다른 함수(caller)의 전달인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 합니다. 어떤 작업이 완료되었을 때 호..

일급 객체(first-class citizen) 일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 그중에서 함수는 함수를 다른 변수와 동일하게 다루는 언어는 일급 함수를 가졌다고 표현합니다. 예를 들어, 일급 함수를 가진 언어에서는 함수를 다른 함수에 인수로 제공하거나, 함수가 함수를 반환할 수 있으며, 변수에도 할당할 수 있습니다. 이 글에서는 함수를 중점으로 다루어 보도록 하겠습니다. 일급 객체의 조건 1. 변수에 할당(assignment)할 수 있다. 2. 다른 함수를 인자(argument)로 전달 받는다. 3. 다른 함수의 결과로서 리턴될 수 있다. 함수는 1,2,3번 모든 내용을 포함하기에 일급 객체에 해당됩니다. 1. 변..

SSR (Server Side Rendering) 웹 페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌더링합니다. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송합니다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링됩니다. 서버에서 웹 페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 합니다. 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음, 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보냅니다. 웹 페이지를 살펴보던 사용자가, 브라우저의 다른 경로로 이동하면 어떻게 될까요? 브라우저가 다른 경로로 ..

AJAX (Asynchronous JavaScript And XMLHttpRequest) AJAX는 JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법입니다. AJAX는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. AJAX는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. 즉 AJAX를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다. 장점 1. 서버에서 HTML을 완성하여 보내주지 않아도 웹페이지를 만들 수 있습니다. 이전에는 서버에서 HTML을 완성하여 보내주어야 화면에 렌더링을 할 수 있었습니다. 그러나 AJAX..

Status line HTTP Responses는 서버가 클라이언트에게 보내는 메시지입니다. 다음의 정보를 포함합니다. 현재 프로토콜의 버전(HTTP/1.1) 상태 코드 - 요청의 결과를 나타냅니다. (ex. 200, 302, 404 등) 상태 텍스트 - 상태 코드에 대한 설명 Status line의 한 예시로 HTTP/1.1 404 Not Found가 있습니다. Headers 응답에 들어가는 HTTP headers는 요청 헤더와 동일한 구조를 가지고 있습니다. 대소문자 구분 없는 문자열, 콜론(:), 값을 입력합니다. 값은 헤더에 따라 다릅니다. 요청의 헤더와 마찬가지로 몇 그룹으로 나눌 수 있습니다 General headers : 메시지 전체에 적용되는 헤더로, body를 통해 전송되는 데이터와는 관..