이번 포스팅에서는 Jest를 이용해서 스냅샷(snapshot) 테스트를 하는 방법에 대해서 알아보겠습니다. Jest에 대한 기본적인 설치 및 사용 방법은 관련 포스팅를 참고하시길 바랍니다. 스냅샷 테스팅 스냅샷 테스팅(snapshot testing)이란 어떤 기능의 예상 결과를 미리 정확히 포착해두고 실제 결과에 비교하는 테스트 기법입니다. 테스트 대상 기능의 구현이 변경되어 실제 결과과 스냅샷을 떠놓은 예상 결과와 달라질 경우 해당 테스트 케이스는 실패하게 되는데요. 이럴 경우, 다시 새로운 스냅샷을 떠서 기존 스냅샷을 교체하는
이번 포스팅에서는 useMemo() 함수와 더불어 성능 최적화에 사용되는 React의 useCallback() hook 함수에 대해서 알아보겠습니다. useMemo에 대한 내용은 관련 포스팅를 참고하시기 바랍니다. 함수 메모이제이션 useCallback()은 함수를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수입니다. 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줍니다. 예를 들어, 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다
코딩을 하다 보면 여러 가지 이유로 프로그램의 실행을 잠시 멈추거나 일정 시간동안 실행을 지연시키고 싶을 때가 있습니다. 예를 들어, 자바에서는 Thread.sleep() 함수, 파이썬에서는 time.sleep() 함수를 사용해서 이렇게 의도된 지연을 줄 수가 있습니다. 다른 프로그래밍 언어들에서는 이러한 API를 쉽게 찾아볼 수 있는데요. 자바스크립트에서는 어떻게 프로그램의 실행을 일정 시간동안 지연시킬 수 있을까요? setTimeout() 함수 자바스크립트 API에서 다른 언어에서 제공하는 sleep 함수와 그나마 가장 유사한
React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 setState() 함수인데요. 좀 더 복잡한 상태 관리가 필요한 React 컴포넌트에서는 setReducer() hook 함수를 사용할 수 있습니다. React Hooks 중 하나인 setState() 함수에 대한 설명은 관련 포스팅를 참고 바랍니다. Redux 패턴 기본적으로 useReducer() hook 함수는 다음과 같은 형태로 사용을 합니다. reducer 함수는 현재 상태(state) 객체와 행동(action) 객체를 인자로 받아서 새로운
자바스크립트로 코딩을 하다보면 한 번쯤 듣게 되는 용어가 클로저(closure)입니다. 기술 면접 같은데서 자주 물어보는 질문이기도 한데요. 이번 포스팅에서는 이 알쏭달쏭한 클로저에 대해서 한 번 얘기해보려고 합니다. 클로저란? 클로저에 대해서 얘기를 하려면 일단 클로저가 도대체 어떤 개념인지에 알아야겠죠? 클로저는 일반적으로 어떤 함수가 자신의 내부가 아닌 외부에서 선언된 변수에 접근하는 것을 뜻합니다. 다음과 같이 미국 달러를 대한민국 원으로 환전해주는 간단한 함수를 예를 들어 설명해보겠습니다. 이 함수는 미국 달러(usd)를
Git의 pre-commit 훅(hook)은 우리가 작성한 코드를 커밋할 때 마다 자동으로 특정 작업을 실행해줍니다. 많은 프로젝트들이 이를 통해 포맷터(formatter)를 실행하여 코드 스타일을 통일하고, 린터(linter)를 실행하여 코드에 잠재하고 있는 문제들을 찾아냅니다. 이번 포스팅에서는 Git의 pre-commit hook을 편리하게 사용할 수 있도록 도와주는 pre-commit라는 도구에 대해서 알아보겠습니다. 설치 pre-commit은 자신의 컴퓨터에 파이썬이 설치가 되어 있다면 파이썬의 패키지 매니저인 pip를 사
JavaScript, API, Markup를 근간으로 하는 JAM stack이 모던 웹 개발의 새로운 트랜드가 되고 있습니다. 이에 따라, 예전처럼 서버 단에서 대신 API를 호출해주기 보다는 클라이언트 단에서 직접 API를 호출하는 경우가 많아지고 있습니다. (이렇게 브라우저에서 직접 비동기로 HTTP 통신을 하는 것을 한 때 소위 Ajax라고도 일컬었죠...) 이번 포스팅에서는 원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하는 fetch() 함수에 대해서 살펴보겠습니다. 라이브러리? 원격 API 호출하면 제일 먼저
React Hooks 중에서 useState()나 useEffect() 처럼 많이 쓰이지는 않지만 가끔 나와서 햇갈리게 하는 녀석이 있습니다. 바로 useRef() 훅(hook) 함수인데요. 이번 포스팅에서는 useRef() 함수가 왜 필요하고, 언제 사용하는지에 대해서 알아보겠습니다. 상태 변경 -> 컴포넌트 재 랜더링 React 컴포넌트는 기본적으로 내부 상태(state)가 변할 때 마다 다시 랜더링(rendering)이 됩니다. 예를 들어, 아래 <Counter/> 컴포넌트의 버튼을 5번 클릭하면 count 상태값은 5번 바뀌
![[자바스크립트] 웹 스토리지 (localStorage, sessionStorage) 사용법](https://img.youtube.com/vi/PfbrRd8xLB8/maxresdefault.jpg)
자바스크립트로 웹 개발을 하다보면 아무리 간단한 애플리케이션이라도 데이터를 어딘가에 저장해야 할 일이 생깁니다. 보통 이럴 때 데이터베이스(DB) 서버나 클라우드(Cloud) 플랫폼에 데이터를 저장하거나 경우가 많을 것입니다. 하지만 저장해야 할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다. 이번 포스팅에서는 클라이언트 단, 즉 브라우저 상에 데이터를 저장할 수 있는 기술인 웹 스토리지에 대해서 알아보겠습니다. 로컬 스토리지 vs. 세션 스토리지 웹 스토리지(we
자바스크립트에서 모듈을 불러올 때 보통 파일 맨 위에 import 문을 작성하죠. 이 방식은 간결하고 직관적이지만 항상 파일의 최상단에 위치해야 하고 조건에 따라 불러올 모듈을 바꾸는 게 불가능합니다. 앱 규모가 커지면서 모든 모듈을 한꺼번에 불러오는 것이 성능 문제로 이어지기도 하는데요. 이런 상황에서 빛을 발하는 게 바로 Dynamic Import, import() 표현식입니다. 이 글에서는 import()의 기본 사용법부터 코드 분할, React에서의 활용까지 차근차근 살펴보겠습니다. 정적 import/export 문법이 아직
리액트(React)는 보통 HTML과 매우 흡사한 JSX 코드로 작성하는 경우가 대부분인데요. 이 JSX 때문에 리액트를 좋아하는 사람도 많지만 반면에 이 JSX 때문에 리액트를 싫어한다는 분들도 많이 보게 됩니다. 이번 포스팅에서는 이렇게 말도 많고 탈도 많은 리액트의 JSX와 JSX를 변환해주는 Babel에 대해서 알아보도록 하겠습니다. 왜 React를 임포트할까? 리액트를 처음 사용해 본 자바스크립트 개발자라면 한 번 쯤 이러한 생각을 해보신 적이 있으실 겁니다. 내 코드에 React를 사용하는 곳이 없는데 왜 React를 굳
JSX 문법으로 코드를 작성하다보면 리액트(React)가 어디까지나 자바스크립트 라이브러리는 사실을 잊어버리기 쉬운 것 같습니다. 이번 포스팅에서는 리액트 API를 JSX 없이 날 것 그대로 자바스크립트로 사용하면서 리액트가 어떻게 작동하는지 알아보겠습니다. JavaScript Library 리액트(React)를 비롯하여 최근에 많이 사용되는 프론트엔드(frontend) 라이브러리들은 기본적으로 자바스크립트로 HTML 엘리먼트를 동적으로 생성하여 DOM에 추가하는 방식을 취합니다. 따라서, 이러한 모던(modern)한 라이브러리로
CSS 트랜지션(transition)은 어떤 엘리먼트에 스타일의 변화가 일정 시간에 걸쳐서 부드럽게 나타나도록 할 때 사용합니다. 기본 사용법 CSS에서 트랜지션과 관련된 속성은 다음과 같은데 처음에는 좀 복잡하게 느껴질 수도 있습니다. transition: 아래 4가지 속성을 한 번에 지정 가능 transition-property: 트랜지션을 적용할 속성 이름 transition-duration: 스타일 변화가 일어나는 기간 (s: 초, ms: 밀리초) transition-timing-function: 스타일 변화을 일으키는 방식
많은 프로그래밍 언어에서 주어진 여러 값 중에서 최소값 또는 최대값을 반환하는 기능을 제공합니다. 예를 들어 파이썬(Python)은 min(), max() 내장 함수를 제공하고, 자바(Java)는 Math 클래스에서 min(), max() 정적 메서드를 제공합니다. 자바스크립트(JavaScript)에서도 마찬가지로 Math.min(), Math.max() 함수를 통해 같은 기능을 사용할 수 있습니다. 흥미롭게도 CSS에서도 동일한 기능을 하는 min()과 max() 함수가 존재하는데요. 이번 포스팅에서는 반응형 웹디자인을 할 때 유
웹 접근성(accessibility)을 준수하는 드롭다운(dropdown)를 구현하는 것은 생각보다 쉽지 않은 일입니다. 사실 가장 쉬운 방법은 지난 포스팅에서 소개했던 것처럼 HTML의 <select> 엘리먼트를 사용하는 것인데요. <select> 엘리먼트를 사용하면 내부에 있는 <option> 엘리먼트에 커스텀 스타일을 적용할 방법이 없기 때문에 스타일링에 한계가 있습니다. 그래서 여러 가지 엘리먼트를 이용해서 직접 드롭다운를 만드는 경우가 많은데요. 이 때, 시각적으로는 원하는 모습의 UI를 얻을지 몰라도, 웹 접근성 측면에서
![[자바스크립트] 키보드 이벤트 (keydown/keyup)](https://img.youtube.com/vi/y_wAsalPDTM/maxresdefault.jpg)
자바스크립트를 이용하여 웹페이지 상에서 사용자의 키보드 입력을 감지하여 처리하는 방법에 대해서 알아보겠습니다. 키보드 이벤트 타입 키보드 이벤트(Keyboard Event)는 사용자가 키를 누르거나 키를 놓을 때 발생합니다. 키를 누를 때는 keydown 타입의 이벤트가 발생하고, 키를 놓을 때는 keyup 타입의 이벤트가 발생합니다. (예전에는 keypress라는 이벤트 타입도 사용되었으나, 현재는 deprecated되어 권장되지 않으므로 다루지 않겠습니다.) 키보드 이벤트는 DOM 상에서 창(window)이나 문서(documen
CSS로 웹사이트의 레이아웃을 잡다보면 브라우저 화면 맨 중앙에 어떤 HTML 요소를 배치해야 할 경우가 자주 생기지요? 이번 글에서는 CSS의 Flexbox나 Grid를 활용하여 얼마나 쉽게 HTML 요소를 브라우저 화면에 중앙에 위치시킬 수 있는지 알아보겠습니다. 기본 HTML/CSS 중앙에 위치시킬 컨텐츠(content) 요소와 이 요소를 감싸는 래퍼(wrapper)요소에 대한 HTML 마크업을 하겠습니다. 그 다음 각 요소를 구분하기 쉽도록 CSS로 약간의 스타일을 해주겠습니다. 여기서 주의 깊게 보실 부분이 바로 래퍼 요소
CSS를 사용하다 보면 정말 간단한 정렬이 생각처럼 되지 않아서 애를 먹는 경우가 있습니다. 특히 초보자들이 많이 겪는 문제가 HTML 요소(element)를 우측으로 정렬하는 것입니다. HTML 웹페이지의 레이아웃에서 HTML 요소를 우측으로 정렬해야 하는 대표적인 경우는 헤더 영역입니다. 예를 들어, 다음과 같이 사이트명과 네비게이션으로 이루어진 간단한 헤더를 생각해보겠습니다. <h1> 요소와 <nav> 요소가 같은 줄에 나란히 배치될 수 있도록, CSS의 display 속성값을 변경해주겠습니다. 지금부터 <nav> 요소로 마크
드롭다운(dropdown), 리스트박스(listbox), 콤보박스(combobox), 등 여러 가지 이름으로 불리우는 HTML의 <select> 엘리먼트와 CSS를 이용하여 아래와 같이 만들어보겠습니다. HTML 작성 사실 웹에서 드롭다운를 구현하는 방법은 여러 가지가 있지만, 본 포스팅에서는 가장 기본적인 HTML의 <select> 엘리먼트를 사용하도록 하겠습니다. 웹 접근성(accessibility)을 위해서 <label> 엘러먼트도 추가한 후에 <select> 엘리먼트와 연결을 해줍니다. 이렇게 해주면 <label> 영역뿐만
HTML과 CSS를 이용하여 다음과 같은 웹에서 흔히 볼 수 있는 버튼을 만들어보도록 하겠습니다. HTML 작성 먼저 4가지 종류(기본, 성공, 오류, 경고)의 버튼에 대한 HTML을 작성합니다. 디폴트 스타일 제거 대부분의 브라우저는 User Agent Style이라고 불리는 디폴트(default) 스타일을 버튼에 적용해줍니다. 아무 스타일을 적용하지 않더라도 <button/> 엘리먼트가 시각적으로 버튼처럼 보이게 하기 위함인데요. 아이러니하게도 커스텀 스타일을 적용할 때는 이러한 브라우저 별로 조금씩 상이한 이 디폴트 스타일이