Overview 이번 포스팅은 리액트 함수형 컴포넌트에서 단순히 다음 두 함수의 실행결과가 다른 이유를 명확히 찾아내기 위해서 작성하게 되었습니다. App.js import React, { useState } from "react"; export default function App() { const [count, setCount] = useState(0); const increase1 = () => { setCount(count+1); setCount(count+1); setCount(count+1); } const increase2 = () => { setCount(count => count + 1); setCount(count => count + 1); setCount(count => count +..

위 포스팅은 W3C의 스펙과 구글 개발자 문서를 참고하여 작성되었습니다. Overview 효율적인 웹 페이지를 작성하기 위해서는 이 웹 페이지를 다운로드하고, 파싱 하고, 렌더링 해서 사용자에게 보여주는 일련의 과정들을 이해하는 것이 중요합니다. 따라서 이번 포스팅에서는 브라우저가 웹 페이지를 HTTP를 사용해서 다운로드하여 사용자에게 보여주기까지 어떤 과정들을 거치게 되는지를 살펴보려고 합니다. Process 브라우저가 HTML파일을 파싱 해서 DOM트리를 그리고 렌더링을 하는 일련의 과정을 살펴보기 전에, 먼저 조금 더 포괄적인 관점에서 이를 살펴보려고 합니다. 먼저 아래와 같은 간단한 상황을 가정해보겠습니다. 현재 있는 페이지(www.a.com) 에서 주소창에 주소를 입력하여 다른 페이지(www.b..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain the differences on the usage of foo between function foo() {} and var foo = function() {} A. 자바스크립트에서 함수는 객체로 간주됩니다. (정확히 말하면 일급 객체 first class) 따라서 일반 객체처럼 값으로 취급될 수 있으며 다음과 같이 변수의 값으로 할당될 수 있습니다. var foo = function(){} 함수를 위와 같이 선언하는 방식을 함수 표현식(Function Expressions)라고 합니다. 그 외에도 자바스크립트에서는 다른 일반적인 프로그래밍 언어들과 같이 함수를 선언할 수 있..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain how prototypal inheritance works. A. 자바스크립트는 자바와 같은 일반적인 객체지향(이하 OOP) 언어들과는 다르게 "프로토타입 기반 언어"입니다. 따라서 클래스라는 개념이 없고(ES6에서 클래스를 도입하긴 했지만, 엄밀히 따지면 자바의 클래스 개념과는 많이 다른, 그저 Syntax Sugar에 지나지 않음), 이를 프로토타입을 통해 해결하려 합니다. OOP에서 상속이라는 개념은 부모 클래스의 속성(property)들을 자식 클래스에서 재선언할 필요 없이(오버라이드를 통해 재정의하는 것을 제외하고) 그대로 사용하는 것을 의미합니다. 앞서 언급했듯, ..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. What's the difference between an "attribute" and a "property"? A. Attribute와 Property는 둘 다 "속성"을 의미하나, 정의되는 곳에서 차이점이 생깁니다. Attribute는 HTML에서 정의되는 속성이고, Property는 DOM에서 정의되는 속성입니다. Attribute Attribute는 HTML태그에HTML 태그에 추가적인 정보를 제공합니다. 다음의 예시처럼 HTML 태그에 class, id, type 등의 추가적인 정보를 제공하는 경우가 있는데, 이때 이 name="value" 형식의 정보를 가리켜서 'name'이라는..

스코프는 자바스크립트 이외에도 대부분의 프로그래밍 언어들이 가지고 있는 것으로, 변수나 함수가 선언되어 사용할 수 있는 유효 범위에 대해 정의합니다. 이번 포스팅에서는 자바스크립트에서의 함수 스코프(function scope)와, ES6 표준에서 새롭게 추가된 let, const 키워드가 제공하는 블록 스코프(block scope)에 대해서 살펴보려고 합니다. 함수 스코프 (+ 전역 스코프) 자바스크립트는 기본적으로 전역 스코프(Global Scope)와 함수 스코프(Function Scope)를 가집니다. 앞서 언급한 것처럼 스코프는 변수나 함수가 선언되어 사용할 수 있는 유효 범위를 정의하기 때문에 전역 스코프인지, 함수 스코프인지에 따라서 변수가 사용될 수 있는 범위가 달라집니다. 아래의 예시를 보..