Web(26)
-
[React] Timer 만들기
Overview 웹 레이아웃을 짜다 보면 남은 시간을 표시하는 타이머를 표시해야 할 때가 종종 있습니다. 로그인 시 이메일 인증이나 SMS 인증을 할 때, 세션 만료까지 남은 시간을 표시해주어야 할 때도 있고, 브라우저에서 동작하는 간단한 게임을 만들 때 게임 종료 시까지 남은 시간을 표시해주어야 할 때도 있습니다. 자바스크립트에는 특정한 시간마다, 혹은 특정 시간이 지난 후에 callback함수를 호출할수 있는 setInterval, setTimout이라는 내장 함수를 제공하기 때문에, 이를 이용해서 타이머를 구현할 수 있습니다. 하지만, 싱글 스레드로 동작하는 자바스크립트의 특성상 setTimeout, setInterval이 항상 정확한 시간에 호출되지는 않기 때문에 브라우저에서 처리하는 일들이 많은..
2021.01.06 -
[Browser] 웹 페이지 로드 과정
위 포스팅은 W3C의 스펙과 구글 개발자 문서를 참고하여 작성되었습니다. Overview 효율적인 웹 페이지를 작성하기 위해서는 이 웹 페이지를 다운로드하고, 파싱 하고, 렌더링 해서 사용자에게 보여주는 일련의 과정들을 이해하는 것이 중요합니다. 따라서 이번 포스팅에서는 브라우저가 웹 페이지를 HTTP를 사용해서 다운로드하여 사용자에게 보여주기까지 어떤 과정들을 거치게 되는지를 살펴보려고 합니다. Process 브라우저가 HTML파일을 파싱 해서 DOM트리를 그리고 렌더링을 하는 일련의 과정을 살펴보기 전에, 먼저 조금 더 포괄적인 관점에서 이를 살펴보려고 합니다. 먼저 아래와 같은 간단한 상황을 가정해보겠습니다. 현재 있는 페이지(www.a.com) 에서 주소창에 주소를 입력하여 다른 페이지(www.b..
2020.10.27 -
[CSS] CSS Sprite란?
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요..
2020.10.07 -
[Javascript] 호이스팅이란
Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다. Q. Explain "Hoisting" A. 호이스팅을 간단하게 정의하자면, 자바스크립트가 코드를 컴파일하는 과정에서 코드 내의 선언문들을 찾아서 해당 선언문들이 속한 스코프의 최상단으로 스코프를 끌어올리는 것을 의미합니다. (값을 할당하는 것이 아닌 선언만 끌어올림.) 호이스팅이 제대로 동작하기 때문에 다음과 같은 코드가 오류를 발생시키지 않고 동작합니다. console.log(hoist); // undefined var hoist = 'hello'; console.log(hoist); // hello 위의 예제는 다음과 같이 컴파일되기 때문에 오류를 일으키지 않고 실행될 수 있습니다. var..
2020.09.28 -
[React] 클로저와 useState Hooks
Overview React Hooks는 React Functional Component(함수형 컴포넌트)에서 상태관리 및 컴포넌트 생명주기 API(Lifecycle API) 등 클래스 컴포넌트에서만 지원했던 기능들을 사용할 수 있도록 도와줍니다. 함수형 컴포넌트는 클래스형 컴포넌트에 비해 선언하고 사용하기가 편리하며, 코드를 간결하게 사용할 수 있고, 메모리를 비교적 덜 사용하는 등의 여러 장점들이 있기 때문에 최근에 많이 사용되는 추세인데, 여기에 클래스 컴포넌트에서만 사용가능했던 기능들을 Hooks가 지원하면서 함수형 컴포넌트의 효용이 더 높아졌다고 평가되고 있습니다. 이번 포스팅에서는 함수형 컴포넌트에서 상태관리를 할 수 있도록 도와주는 useState 메소드에 대해서 알아보고, 이 메소드가 내부적..
2020.09.20 -
[React] Redux Middleware 직접 구현해보기
Overview 미들웨어 (middleware)란 소프트웨어 공학에서 사용되는 오래된 개념으로, 운영 체제와 운영 체제 사이에서 실행되는 프로그램 사이에 존재하는 소프트웨어를 의미합니다. 말 그대로 운영 체제와 프로그램 '중간에' 끼어서 부가적인 일들을 처리하는 소프트웨어인 셈입니다. 미들웨어는 어떤 특정 소프트웨어를 지칭한다기 보다는 말 그대로 '추상적인 개념'이기 때문에 이 개념을 웹 서비스에서도 받아들여서 웹 서비스를 개발할 때 View와 Logic 을 분리하여 사이드 이펙트(Side effect)를 처리하거나, 중간중간 로그(Log)를 찍거나(Loggin)하는 등의 부가적인 액션들을 이 미들웨어를 통해서 처리합니다. 리액트 서비스를 예로 들자면 대표적으로 사가(Saga)가 있을 것이고, Node...
2020.09.19