탄탄한 기본기!

Karma + Jasmine 환경 설정 Karma는 실제 브라우저에서 테스트를 진행할 수 있도록 해주는 Test-Runner이며, Jasmine은 Karma와 같은 Test Runner 환경에서 돌아가는 행동 기반의 자바스크립트 테스팅 프레임워크이다. 먼저 Karma와 Karma에서 돌아갈 Jasmine 의존성을 설치한다. npm i -D karma karma-jasmine karma-safari-launcher 그다음 karma 설정 파일을 생성해준다. 공식문서에 따르면, 따로 arg를 주지 않는 이상 ./karma.conf.js ./karma.conf.coffee ./karma.conf.ts ./.config/karma.conf.js ./.config/karma.conf.coffee ./.config..

Client Side Routing (React Router 등)을 사용한 React 앱을 배포했을 때, index.html(root)에서 HTML5 pushState history API 를 활용해서 앱이 잘 동작하지만 만약 /www.example.com/user 등의 root가 아닌 경로에서 새로고침을 하거나, 직접 해당 경로를 요청하면 404 page not found 에러를 만나게 되었다.  분명 webpack의 dev server에서는 잘 동작했는데 도커 컨테이너로 테스트해보니 라우팅 과정에서 에러가 발생하는 것 같았다. 로컬에서 dev server로 라우팅을 할 때에는 라우팅 경로에서 새로고침을 하거나, /subject/ko 등으로 직접 접근해도 정상적으로 동작하는 반면에, productio..

웹 개발을 하던 도중, 배경화면으로 사진들을 렌더링하고 그 위에 다른 HTML 요소를 렌더링 하고자 했다가 아래와 같은 상황이 발생하는 이슈가 있었다. 해당 이슈의 원인은, background 이미지로 사용되는 이미지가 load 되지 않았을 경우에 이를 포함하고 있는 컨테이너의 height가 auto이기 때문에 height가 0으로 취급되기 때문이었다. 그래서 고민하다가 이미지가 load 되었는지 상태를 감지해주면서 이미지가 load 되었을 때만 컨테이너 내부의 요소(컴포넌트) 들을 렌더링 하도록 로직을 작성해보았다. import React, { useState } from "react"; import { styled } from "linaria/react"; interface IProps { src: ..

0. 개요 DOM 요소에 이벤트를 바인딩해주고 이를 해제해주는 과정에서, 문득 이벤트 리스너들이(메모리가) 잘 해제되는지 궁금해 개발자 도구를 열어 performance 탭의 memory 부분에 있는 리스너 개수를 확인해보았다. 그런데 removeEventListener를 호출할 때, 리스너 개수가 줄어드는 것이 아닌 오히려 증가했다가, 나중에 GC에 의해 리스너가 사라지는 것을 확인하고 이 부분을 조금 더 확인해보며 그 내용을 정리했다. 1. HTMLElement.prototype.removeEventListener 개념 보통 DOM요소에 이벤트 핸들러를 바인딩해서 다양한 이벤트를 캐치한다. 하지만 메모리 누수 방지를 위해서 불필요할 경우 (컴포넌트가 unMount 되는 등) 이를 해제해주어야 한다. ..

React 내부 동작 원리를 알아야 하는 이유 React는 아주 많이 추상화되어 있는데, 일반적으로 React를 공부하는 개발자라면 React가 내부적으로 VirtualDOM을 사용하고 있다는 사실을 다들 알 것이다. (모른다면...? Virtual DOM and Internals) 그리고 React가 16.8 버전업이 되며 hook이라는 개념이 등장한 후 많은 (거의 대부분...) 개발자들이 이 hook에 대해서 공부하고, 사용하고 있다 (참고). 그 이유는 hook이 아주 편리하고, 사용하기 간편하며 심지어 가독성까지 좋기 때문인데 라이브러리가 깊게 추상화가 되어있어서 그런 것이라고 생각한다. 이렇게 사용하기 쉬움에도 불구하고, 내부 동작 원리를 정확하게 이해하지 못하고 사용할 경우 예상치 못한 에러..

1. 프로젝트 진행 동기 나는 평소에 공부할 때, 공부한 내용들을 진짜 내 것으로 만들었는지 확인하기 위해서 직접 코드로 짜보며 궁금했던 것들을 직접 확인하는 습관이 있다. 그래서 최근 리액트를 공부하면서 배운 내용들이 진짜 내 지식이 되었는지, 스스로 코드를 짤 수 있는지 확인하고 싶어서 간단한 프로젝트 하나를 만들어보며 더 많이 공부해보기로 결심했다. 그래서 Git 버전 관리, React 개발 환경 (webpack, babel 등) 세팅 및 컴포넌트 상태 관리, 스타일링 방법 등에 중점을 두고 아래와 같이 동작하는 아주 간단한 애플리케이션 하나를 제작해보았다. 이번 프로젝트에서는 관리해줄 상태가 매우 적었기 때문에 Redux와 같은 상태 관리 라이브러리는 사용하지 않았고, React의 Context ..

동일한 데이터를 여러 컴포넌트에서 공유하고 싶을 때, 상태를 끌어올려서 반영해줄 수 있다 Lifting State Up – React A JavaScript library for building user interfaces reactjs.org Source of truth 리액트 공식 문서에서는 변경 사항들을 관리할 때에 단 하나의 "source of truth"를 두어야 한다고 설명하고 있다. 보통 리액트 컴포넌트를 설계할 때, 먼저 해당 컴포넌트에 state를 저장하여 관리하게 한다. 하지만 애플리케이션이 커지고, 로직이 변화하거나 하는 등의 과정을 거치면서 다른 컴포넌트도 역시 같은 상태를 공유해 함께 반영되어야 할 상황이 충분히 생길 수 있다. 이때, 여러 가지 방식으로 상태들을 "동기화"할 수 ..

const getName = () => new Promise((resolve) => { setTimeout(() => { resolve('Dooyeong'); }, 2000); }); const sayHi = async () => { const name = await getName(); console.log(`Hello ${name}!`); }; sayHi(); 자바스크립트에는 async와 await이라는 특별한 문법이 존재한다. 그리고 "비동기(async)"라는 어려울 것 같은 이름을 가지고 있지만 생각보다 이해하기 쉽고 사용하기도 쉽다. Asynchronus function 비동기 함수란, 동기적으로 작동하지 않는 함수이다. 이 말이 무슨 말이냐면, 두 개 이상의 이벤트들이 서로를 기다리지 않고 (b..