Feedback - 디자인 패턴에 대한 깊이 있는 이해가 필요하다. Overview React Element를 하나로 감싸는 이유? CRA eject란? eject는 Create React APP을 통해서 애플리케이션을 설정했을 때, 감춰져있는 모든 설정들을 밖으로 추출해주는 명령어이다. 한번 실행하면 되돌릴 수 없으며, babel, webpack등의 기본적인 설정들이 추출되어 나온다. Infinite Scroll vs Virtual Scroll 무한 스크롤은 인스타그램 피드나, 페이스북 피드처럼 끝없이 스크롤 할 수 있도록 구현하는 방식으로, 웹 브라우저에서는 ScrollTop값을 이용해서 스크롤의 끝에 닿았는지를 판단한 후에 API Call을 통해 추가 함수를 로딩해오는 방식이다. 다만 수많은 피드들..

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 CSS Sprite and How does it enhance the performance. A. CSS Sprite란 웹사이트의 로딩 속도를 빠르게 하여 UX를 향상시키기 위한 최적화 기법 중의 하나로, 여러개의 이미지를 하나의 이미지로 합쳐서 관리하는 기술을 의미합니다. 브라우저는 웹사이트를 로드하는데 필요한 HTML파일, 이미지등의 리소스를 HTTP요청을 통해 가져옵니다. 이때 HTTP요청에는 오버헤드가 있기 때문에 이 요청을 최소화 하는 것이 브라우저의 로딩 속도를 줄이는데 큰 영향을 미칩니다. CSS Sprite는 페이지에 필요한 이미지들을 일일이 개별적인 HTTP요..

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. What are the differences between variables created using let, var or const? A. var은 자바스크립트에서 기본적으로 변수를 선언하는 방식입니다. var를 이용해서 전역 스코프에 변수를 선언하면, 해당 스코프의 변수로, 함수 스코프에 변수를 선언하면 함수 스코프의 변수로 할당되게 됩니다. var를 통해 선언한 변수는 참조형이든, 원시형이든 상관없이 그 값을 바꿀 수 있습니다. 또한 var은 변수를 재선언할 수 있다는 독특한 특성을 지니고 있습니다. 따라서 다음과 같은 코드도 에러를 내뿜지 않습니다. var foo = 2; var f..

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)라고 합니다. 그 외에도 자바스크립트에서는 다른 일반적인 프로그래밍 언어들과 같이 함수를 선언할 수 있..