이 기술 블로그를 만들기 위해 5년을 미뤘다.

오늘은 프론트엔드 개발에서 많이 사용되는 디바운싱과 쓰로틀링 개념에 대해 araboza. 디바운싱과 쓰로틀링은 성능을 목적으로 자바스크립트의 이벤트를 제어하기 위해 사용되는 기법이다. 디바운싱(debouncing) 디바운싱은 스위치 회로에서 채터링(바운싱) 현상을 해결하기 위해 사용되는 개념이다. 기본 상태가 LOW, 스위치를 눌렀을 때의 상태가 HIGH인 스위치가 있다고 하자. 스위치를 한 번만 눌렀다 떼는 경우에도 눌림 상태일 때의 지속 시간이나 외부 진동, 충격에 의해 스위치가 여러 번 눌린 것처럼 동작하게 되는데, 이러한 현상을 바운싱이라고 한다. 바운스 구간의 값을 무시하기 위해 처음 HIGH 값으로 상태가 바뀌었을 때부터 특정 시간 동안은 판단을 지연했다가 해당 시간 이후에도 HIGH 상태라면..

자바스크립트에서 배열을 정렬하기 위해서는 보통 sort() 메소드를 사용한다. 배열.sort([비교 함수]) 비교 함수는 ((이전 값, 현재 값) => { 정렬 가중치 함수 }) 형태로 이루어짐 정렬 가중치 함수는 특정 조건에 따라서 1, 0, -1 처럼 정렬의 기준이 되는 값을 리턴하거나 혹은 숫자 배열의 경우에는 가중치 자체가 되는 값을 리턴한다. sort() 메소드는 원본 배열을 변경하는 함수이며, 동시에 변경된 배열을 리턴하기 때문에 특정 변수에 sort된 배열 값을 저장할 수 있다. 그리고 비교 함수를 인자로 전달할 수 있다. 비교 함수는 다음과 같은 형태를 갖는다. // 조건에 따라 0보다 큰 수(1), 0, 0보다 작은 수(-1) 중 하나의 값을 반환한다. (prev, cur) => { //..

React로 개발을 하다 보면 정말 유용하게 많이 사용되고 있는 useEffect 훅에 대해 알아보자. useEffect 훅은 클래스형 컴포넌트의 componentDidMount + componentDidUpdate + componentWillUnmount의 기능을 담당하는 훅이다. 함수 컴포넌트 내에서 사이드 이펙트를 일으키는 함수들을 실행시키고자 할 때 사용된다. // 클래스형 컴포넌트 예시 class Example extends Component { componentDidMount() { // 컴포넌트가 마운트 되었을 때 실행되는 코드 } componentDidUpdate() { // 컴포넌트 리렌더링이 완료되었을 때 실행되는 코드 } componentWillUnmount() { // 컴포넌트가 언..

자바스크립트에서는 input type="file" 태그를 이용하여 이미지를 포함한 다양한 확장자의 파일을 업로드할 수 있다. 만약 이미지만 업로드하게끔 제한하고 싶다면 accept="image/*" 프로퍼티를 추가하면 된다. 이와 비슷하게 비디오 파일만 업로드하고 싶다면 accept="video/*", 오디오 파일만 업로드하고 싶다면 accept="audio/*" 이렇게 사용하면 된다. 혹은 특정 확장자만 허용하는 방법도 있다. 예를 들어 아래와 같이 작성하면 png, jpeg 확장자를 갖는 이미지만 업로드가 가능하다. // png, jpeg 확장자를 갖는 이미지만 업로드 허용 // 혹은 이제 업로드한 이미지 미리보기를 구현하는 방법을 알아보자. 미리보기를 구현하기 위해 널리 사용되는 두 가지 방법으로는..

2021년 11월에 드디어 react-router-dom v6 정식 버전이 출시되었다. 기존에 사용되던 버전 5와 비교하여 다양한 기능이 추가/삭제되면서 자잘한 문법 수정이 이루어졌으며, 패키지 번들 사이즈도 약 70% 이상 감소했다. 그리고 react-router-dom v6은 React 16.8 이상 버전에서 사용이 가능하다. 이 두 버전의 차이점에 대해 먼저 알아보고, react-router-dom 사용 꿀팁도 알아보자. Redirect 컴포넌트 삭제 버전 5에서 유용하게 사용되던 Redirect 컴포넌트가 삭제됐다. Redirect는 사용자가 유효하지 않은 path로 접근했을 때, 올바른 특정 path로 이동시킬 수 있도록 하는 컴포넌트이다. 따라서 버전 6에서는 서버 측에서 리다이렉트 처리를 하..

window 전역 객체 내에는 location, navigator, web storage 등 다양한 프로퍼티가 존재한다. var 키워드로 선언된 전역 변수 또한 window 전역 객체의 프로퍼티로 접근이 가능하다. window 전역 객체는 식별자 window.을 앞에 붙이지 않고도 객체 내 프로퍼티에 접근이 가능하다. const path = window.location.pathname; const path2 = location.pathname; console.log(path === path2); // true window.navigator에 포함된 값으로 userAgent라는 값에 접근이 가능한데, userAgent는 HTTP 요청을 보내는 디바이스와 브라우저 등의 사용자 식별 정보를 담고 있는 head..

리덕스 강의 과제를 따라하다가 아래와 같은 오류와 직면했다. 오류 내용을 천천히 읽어 보면 action에 직렬화가 불가능한 값을 전달했다는 뜻으로 해석할 수 있다. 여기서 직렬화란 redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말한다. (JSON.stringify) 역직렬화는 직렬화의 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정이다. (JSON.parse) Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 에러가 발생한 것이다. 해결 방법은 다음과 같다. 아래처럼 사용한 코드를 dispatch({ type: setMovies, payload: { movies } }); ↓ dispatch(setMov..

오늘은 못생긴 bash를 버리고 zsh을 설치하여 사용해 보자. zsh은 macOS의 기본 쉘이며, bash와 거의 비슷하지만 다음과 같은 장점을 갖고 있다. 자동 완성 및 탭(tab)으로 이동 가능 zsh는 자주 사용하는 명령어에 대한 자동 완성(추천) 기능을 제공한다. zsh-autosuggestions 플러그인을 설치하면 사용할 수 있다. 또한 bash는 사용 가능한 목록만 보여주는 정도로만 자동 추천을 제공하지만, zsh은 tab 키를 이용하여 리스트를 탐색하고 선택할 수 있는 옵션을 제공한다. 다양한 플러그인 및 테마 지원(oh my zsh) zsh은 oh my zsh라는 커뮤니티를 통해 다양한 플러그인과 테마를 제공한다. 사용자가 원하는 작업 환경을 설정하여 사용할 수 있는 다양성을 누릴 수 ..

이전 글에서 WSL2를 설치하고 VSCode 연동까지 하는 방법을 정리했다. WSL - 1. Windows에서 Ubuntu 개발 환경 설정을 위한 WSL2 설치 및 VSCode 연동 Mac OS 사용자와 함께 개발 협업을 하다 보면 종종 아래에 보이는 것처럼 이상한 에러와 마주할 수 있다. 이런 에러가 발생하는 이유는 무엇일까? 정답은 Mac OS와 Windows의 개행 문자 방식이 다르기 guiyomi.tistory.com 오늘은 WSL을 ubuntu GUI 모드로 실행하는 방법을 알아보자. 기본적으로 microsoft 공식 문서를 참고하여 WSL을 설치하는 경우에는 CLI 모드로 ubuntu를 이용할 수 있다. 하지만 CLI 모드로만 사용하기에는 여간 불편한 점이 많다. 가장 큰 단점은 GUI 프로그..

** 이 글은 react 16.2 버전 이후 기준으로 작성되었습니다. ** 리액트에서는 직접적으로 DOM 요소에 접근하는 것을 권장하지 않는다. 부득이하게 DOM 요소에 접근해야 할 때에는 ref 속성을 이용하여 특정 DOM 요소에 접근할 수 있다. 클래스형 컴포넌트에서는 createRef, 함수 컴포넌트에서는 useRef를 사용하여 ref 변수를 생성할 수 있다. 함수 컴포넌트에서도 createRef를 사용할 수는 있지만, 컴포넌트가 리렌더링될 때마다 ref 값이 null로 초기화되어 화면에 표출되는 원하는 값을 얻을 수 없으므로 useRef를 사용하는 것을 권장한다. import React, { useState, createRef } from 'react'; const App = () => { con..