Configuration 이전 포스트에서 웹팩 설치, 웹팩 빌드에 대한 간단한 튜토리얼을 통해 웹팩이 무엇이고, 왜 필요한지, 그리고 웹팩을 통해 빌드한 결과물이 어떤 모양인지를 간단하게 살펴보았습니다. 이번 포스팅에서는 웹팩을 다루기 위한 여러 설정들을 조작할 수 있는 Configurations file (webpack.config.js)과 간단한 몇 가지 설정들에 대해서 알아보고, Webpack에서 정적 리소스들 (Image, video, font 등)을 다루는 방법에 대해 간단하게 알아보도록 하겠습니다. 시작하기 전에 아래 "Reference"에 Webpack공식 문서 링크를 걸어두었습니다. 공식 문서에서 Configuration에 대한 상세한 내용을 살펴보실 수 있습니다. 이번 포스팅에서는 기초적..

webpack이란 webpack은 Frontend Framework에서 가장 많이 사용되는 모듈 번들러입니다. 현재의 반응형 웹 프로그램은 HTML, CSS, JS로 구성되어 있으며, 웹 페이지에서 점차 많은 기능들을 요구함에 따라 다양한 기능이 추가되고, 다양한 라이브러리들을 추가하게 됩니다. 기능이 추가된다는 것은 대부분의 경우에 작성하는 코드의 양이 많아진다는 것을 의미합니다. 하지만 방대한 코드를 개발자가 하나의 파일에서 모두 작업하는 것은 개발과 유지보수를 어렵게 만들게 됩니다. 따라서 개발자들은 의미 있는 부분(기능 단위, 페이지 단위 등)들로 코드를 쪼개어 별도의 모듈에서 작업하는 경우가 일반적입니다. (여기서 모듈이란 웹 애플리케이션을 구성하는 모든 자원을 의미합니다. HTML, CSS, ..

Kent. C Dodds의 'One simple trick to optimize React re-renders'를 Reference 하였습니다. Overview React를 사용해서 Web Application을 만들 때, 퍼포먼스의 향상하기 위하여 여러 가지 렌더링 최적화 기법들을 시도합니다. 대표적인 방법이 React.Memo를 사용하여 불필요한 리렌더링을 방지하기, 상태(State)를 업데이트 하는 로직은 최대한 하위 컴포넌트로 내리기등이 있습니다. 이번 포스팅에서는 자주 사용되고, 또 자주 접할 수 있는 위 두 가지 최적화 방법 이외에도 JSX가 가지고 있는 특성을 사용해서 불필요한 리 렌더링을 방지하는 방법을 살펴보려고 합니다. JSX JSX는 Javascript의 확장 문법으로, React에서..

Overview 웹 레이아웃을 짜다 보면 남은 시간을 표시하는 타이머를 표시해야 할 때가 종종 있습니다. 로그인 시 이메일 인증이나 SMS 인증을 할 때, 세션 만료까지 남은 시간을 표시해주어야 할 때도 있고, 브라우저에서 동작하는 간단한 게임을 만들 때 게임 종료 시까지 남은 시간을 표시해주어야 할 때도 있습니다. 자바스크립트에는 특정한 시간마다, 혹은 특정 시간이 지난 후에 callback함수를 호출할수 있는 setInterval, setTimout이라는 내장 함수를 제공하기 때문에, 이를 이용해서 타이머를 구현할 수 있습니다. 하지만, 싱글 스레드로 동작하는 자바스크립트의 특성상 setTimeout, setInterval이 항상 정확한 시간에 호출되지는 않기 때문에 브라우저에서 처리하는 일들이 많은..

Overview iPhone X 등 notch가 있는 디바이스들에서 웹뷰의 Element를 Inspect 해야 할 일이 생겼었습니다. 최신 Chrome브라우저(포스팅 날짜 기준 Version 87.0.4280.88 (Official Build) (x86_64)) 에서 기본적으로 iPhoneX에 대한 디바이스 시뮬레이션을 제공하지만, notch 등 safe-area가 제공된 환경이 아닌, 스크린 크기만 맞춰진 환경을 제공하기 때문에 safe-area에 대한 테스트가 어렵다는 단점이 있습니다. 따라서 디바이스 환경을 재현할 수 있는 다른 환경이 필요하게 되었고, notch가 있는 iPhone12 mini에서 테스트할 수 있는 환경을 찾아보게 되었습니다. 물론 디바이스가 없는 경우 Xcode에서 제공하는 시뮬..

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 +..