Javascript

호이스팅(hoisting)이란? 호이스팅이란 "끌어올린다"라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 현상을 말합니다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있습니다. 단, 할당문 이전에 변수를 참조하면 언제나 undefined를 반환합니다. 여기서 주의할 점은 "선언문"이라는 것이며 "대입문"은 끌어올려지지 않습니다. 기술적으로 정확한 답변 : 실행 컨텍스트 생성 시, 렉시컬 스코프 내의 선언이 끌어올려 지는 것이 호이스팅입니다. 호이스팅이 발생하는 원리 (모던 자바스크립트 Deep Dive 23장 실행 컨텍스트 발췌) 자바스크립트 엔진은 소스코드를 "소스코드의 평가"와 "소스코드의 실행" 과정으로 나누어 처리한다. 소스코드 ..

개발 목표 Code Pen이라는 온라인 코딩 툴 사이트가 있다. - https://codepen.io/ 해당 사이트와 같이 코드를 입력하고 번들링하여 실시간으로 보여주는 사이트를 React로 만들고자 한다. 단, 로그인과 같은 인증 기능은 제외한다. 코드 입력 창에서 발생할 수 있는 문제점 간단하게 만들 수 있을 것 같았지만 코드를 입력하는 창을 구현하기 위해서는 아래와 같은 이슈사항들이 있었다. 코드 입력창에 오류를 발생시키는 문법 등의 잘못된 코드가 작성될 수 있다. DOM을 조작하는 코드로 인해 예상하지 못한 현상이 발생할 수 있다. ex) document.body.innerHTML = ‘’; 사용자가 악의적인 코드를 넣을 수 있다. ex) for (var i = 0; i { axios.post('..

2024.01.04 - [Javascript] - [JavaScript] 클로저(Closures) - 활용편(1/2) [JavaScript] 클로저(Closures) - 활용편(1/2) 이전 포스팅에서 클로저의 개념을 살펴보았다. 이번 포스팅에서는 배웠던 개념을 바탕으로 클로저의 예시와 활용법에 대해서 알아보고자 한다. 클로저 예시 1 코드 let f; const g = function () { const a codesmoothie.tistory.com 상기 포스팅에서 연장되는 글입니다. 클로저 예시 코드 const boardPassengers = function(n, wait) { const perGroup = n / 3; setTimeout(function(){ console.log(`We are n..

이전 포스팅에서 클로저의 개념을 살펴보았다. 이번 포스팅에서는 배웠던 개념을 바탕으로 클로저의 예시와 활용법에 대해서 알아보고자 한다. 클로저 예시 1 코드 let f; const g = function () { const a = 23; f = function () { console.log(a * 2); } } g(); f(); 클로저 예시 1 코드 해석 해당 코드를 콘솔창에서 실행했을 경우 '46'이라는 결과값을 얻게 된다. f 함수는 어떻게 g의 'a'라는 변수에 접근할 수 있을까? 'g()'를 실행했을 때 'a'는 23이되고, 'f'는 함수라는 것까지 정의된다. 이후 'f()'가 실행되면서 '46'이 나온다. 이 과정을 자세히 살펴보면 f 함수에 정의된 실행 컨텍스트의 모든 변수가 클로저로 연결(C..

클로저의 개념 클로저란 기능은 배열이나 새기능을 만드는 것처럼 사용자가 명시적으로 사용하지 않는다. 특정 상황에서 자동으로 사용되며 클로저를 사용하고 있다고 이해하면 된다. 클로저를 이해하기 위해 아래 코드를 통해 예시를 살펴보자. secureBooking이라는 함수를 정의하였다. 이 함수는 passengerCount라는 변수를 가지며 이는 외부에서 조작하거나 접근할 수 없다. secureBooking 함수는 함수를 return하는데 상위에서 정의한 passengerCount 변수를 업데이트하는 것이다. const secureBooking = function() { let passengerCount = 0; return function() { passengerCount++; console.log(`${p..

앞서 AJAX와 API 무엇인지 학습했고, 비동기 코드와 Promise에 대해서 배웠다. 이번 포스팅에서는 자바스크립트 이면에서 해당 코드들이 어떻게 동작하는지 이해해보자. Javascript 런타임 Javascript 런타임은 기본적으로 컨테이너이다. 이 컨테이너에는 자바스크립트 코드를 실행하는 데 필요한 모든 요소(pieces)가 포함되어 있다. 각 요소에 대해서 알아보자. Javascript Engine Javascript 런타임의 핵심은 엔진(Engine)이다. 엔진(Engine)은 힙(Heap)과 콜 스택(Call Stack)으로 구성되어 있다. 힙(Heap)에서는 객체가 저장되고, 콜 스택(Call Stack)에서는 코드가 실행된다. 여기서 기억해야할 사실은 Javascript의 실행 쓰레드(..

자바스크립트에서 작성하는 대부분의 코드는 동기(synchronous) 코드이다. 동기 코드는 라인 순서대로(line by line) 실행된다. 아래의 코드를 보자. const p = document.querySelector('.p'); // 1번 p.textContent = 'My name is Jonas!'; // 2번 alert('Text set!'); // 3번 p.style.colro = 'red'; // 4번 동기(Synchronous) 코드의 문제점 코드가 '1번'라인에 도달하면 '실행 스레드(Thread of execution)'가 동작하며 코드가 실행된다. '실행 스레드'는 실행 컨텍스트의 일부로 컴퓨터 CPU에서 코드를 실질적으로 실행한다. 이 '실행 스레드'에서 '2번', '3번', '..

https://codesmoothie.tistory.com/4 [JavaScript] 프로미스(Promise) Consume - fulfilled 처리 방법 fetch 함수가 반환하는 Promise를 어떻게 사용(Consume)하는지 방법을 알아보자. 아래는 오픈 API를 사용해 국가(country) 데이터를 가져오는 코드이다. 처음 fetch로 요청했을 때 Promise는 'pending' 상태이다. codesmoothie.tistory.com 이 글은 "프로미스(Promise) - fulfilled 처리 방법"의 포스팅에서 연장되는 글이다. 아래의 코드는 지난번 작성한 코드이다. const getCountryData = function (country) { fetch(`https://restcount..

fetch 함수가 반환하는 Promise를 어떻게 사용(Consume)하는지 방법을 알아보자. 아래는 오픈 API를 사용해 국가(country) 데이터를 가져오는 코드이다. 처음 fetch로 요청했을 때 Promise는 'pending' 상태이다. 비동기 작업이 백그라운드에서 실행 중이기 때문이다. 이후, 어느 시점이 되면 Promise는 'settled(정해짐)' 상태로 이동하여, fulfilled 또는 rejected가 된다. const getCountryData = function (country) { fetch(`https://restcountries.com/v2/name/${country}`).then(function ( response ) { console.log(response); }); }..

프로미스의 정의 An object that is used as a placeholder for the future result of an asynchronous operation. 프로미스란 비동기 작업의 미래 결과를 위해 자리표시자 같은 객체이다. 즉, 미래의 값을 위한 컨테이너라고 생각하면 된다. 여기서 미래의 값은 AJAX와 같이 Call이 시작될 때는 값이 없지만 미래에 값이 생기는 것을 의미한다. 즉, 미래의 값을 위해 Promise를 사용한다. 프로미스는 로또 복권을 생각하면 굉장히 쉽게 이해할 수 있다. 로또는 번호(결과)를 맞추면 나중에 돈을 받는 것을 약속(Promise)한다. 당첨 여부를 결정하는 추첨은 비동기(asynchronous)적으로 나중에 발생한다. 만약 번호(결과)를 맞추면..