우리가 사용하는 웹 사이트나 웹 애플리케이션에서는 수많은 이벤트가 발생합니다. 사용자가 마우스나 키보드로 일으킬 수 있는 이벤트도 있고, 브라우저 스스로도 웹페이지를 로딩하면서 여러 이벤트를 발생시킵니다. 이번 포스팅에서는 이렇게 웹에서 다양한 이유로 발생하는 이벤트를 처리하는 여러 가지 방법에 대해서 알아보겠습니다. HTML 이벤트 속성 먼저 가장 고전적이지만 사용하기 간단한 방법부터 알아볼까요? HTML 요소(element)에서 발생하는 이벤트를 처리하는 가장 쉬운 방법은 HTML의 이벤트 속성을 활용하는 것입니다. on<이벤트
2006년에 출시되었던 jQuery는 한 때는 자바스크립트 개발이 곧 jQuery 개발이라고 여겨질 정도로 정도로 상당히 오랫동안 자바스크립트 생태계를 주름잡던 라이브러리입니다. 하지만 최근에는 React, Angular, Vue.js, Svelte와 같은 모던 자바스크립트 라이브러리에 밀려 주로 레거시(legacy) 코드에서나 미처 못해 쓰는 라이브러리로 전략하고 말았는데요. 아무래도 컴포넌트 기반의 웹 프로그래밍의 대세가 되고 브라우저의 표준화가 전반적으로 개선되고 있어서 앞으로 jQuery의 입지는 점점 더 좁아질 것 같습니다
이번 포스팅에서는 자바스크립트에서 패키지 매니저로 가장 많이 사용되고 있는 npm과 Yarn에 대해서 알아보겠습니다. 자바스크립트 패키지 매니저 패키지 매니저(package manager)는 프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 갱신, 삭제할 수 있도록 도와주는 관리 도구입니다. 그 어떤 프로그래밍 언어보다 풍부한 오픈 소스 생태계를 자랑하는 자바스크립트에서 특히 패키지 매니저는 중요한 역할을 하는데요. 아무리 간단한 자바스크립트 프로젝트라고 해도 적게는 수십게 많게는 수백개의 다른 패키지에 의존하기 때문입니다. 대부
자바스크립트 프로젝트에서 개발을 하다보면 터미널을 열고 명령어를 실행해야하는 경우가 빈번하게 생기는데요. 대표적인 예로 로컬 환경에서 애플리케이션을 빌드하고 구동하거나 테스트를 실행하는 것을 들 수 있습니다. 이번 포스팅에서는 자바스크립트 프로젝트에서 자주 사용되는 명령어를 스크립트로 등록하고 실행하는 방법에 대해서 알아보겠습니다. 반복 명령은 스크립트로 자바스크립트 프로젝트에서 개발을 진행하다보면 테스트나 빌드(build), 린트(lint), 포맷(format)처럼 반복적으로 수행해야하는 작업들이 생기기 마련입니다. 각 작업은 일
이번 포스팅에서는 React 프로젝트를 쉽고 빠르게 만들 수 있도록 도와주는 Create React App에 대해서 알아보겠습니다. Create React App React로 개발 프로젝트를 맨땅에서 시작하려면 웹팩(Webpack), 바벨(Babel) 등 정말 미리 배워야하는 기술들이 한 두개가 아닙니다. 초보 개발자들이 이러한 선수 기술들을 일일이 학습하다보면 본래 목표했던 React 애플리케이션 개발이 아득하게 멀어지기 일수인데요... React는 각종 개발 편의 도구가 함께 포함된 프레임워크(framework)라기 보다는 어느
국내 많은 서비스들이 당장 다국어 지원의 요구가 없더라도 향후 해외 진출을 염두해두고 개발 초기부터 애플리케이션을 국제화(internalization, i18n)하는 사례가 늘고 있는데요. 이번 포스팅에서는 React Intl 라이브러리를 이용해서 다국어를 지원하는 방법에 대해서 알아보겠습니다. React가 아닌 일반 자바스크립트에서 국제화하는 방법에 대해서는 관련 게시물을 참고 바랍니다. React Intl 설치 React Intl 라이브러리는 Node.js 패키지 매니저인 npm으로 설치할 수 있습니다. Locale: Langu
React v16.8에서 리액트 훅(React Hook)이 소개된 이후로 많은 프로젝트에서 커스텀(custom) 훅 함수를 사용하고 있는 것 같은데요. 이번 포스팅에는 리액트 훅(React Hook)을 테스트하는 방법에 대해서 알아보겠습니다. 예제 React Hook 먼저 테스트 대상이 될 간단한 React Hook 함수 하나를 작성해보겠습니다. 아래 useToggle() 함수는 true 또는 false가 될 수 있는 상태 state와 그 상태값을 반전할 수 있는 함수 toggle()을 배열에 담아 반환합니다. 초기 상태값을 ini
지난 포스팅에서 가짜 데이터를 만들 때 사용하는 Faker.js에 대해서 간단히 알아보았는데요. 이번 포스팅에서는 실제로 테스트를 작성할 때 Faker.js를 어떻게 활용할 수 있는지에 대해서 다뤄보려고 합니다. 테스트 대상 코드 작성하기 먼저 테스트 대상이 될 임의의 함수를 하나 필요한데요. 사용자 객체를 인자로 받아 회원 가입을 처리해주는 함수를 작성해보겠습니다. 이 함수는 인자로 넘어온 사용자의 이메일과 비밀번호에 대한 입력값 검증이 실패할 경우 error 속성에 오류 메시지를 담아서 반환하며, 회원 가입이 성공한 경우 use
중요: 본 포스팅에서 소개하고 있는 faker라는 라이브러리는 안타깝게도 안타깝게도 2022년에 faker를 유지보수하던 개발자가 불미스러운 일을 저질러 더 이상 사용하면 안 되는 라이브러리가 되었습니다. 가짜 데이터 생성을 위한 라이브러리가 필요하신 분들은 새로운 포스팅을 참고하시길 바랍니다. 가짜 데이터 시제품(prototype)을 개발하거나, 단위 테스트를 작성할 때 가짜 데이터가 필요할 때가 자주 있습니다. 이럴 때, 직접 가짜 데이터를 하드코딩(hard-coding)할 수도 있겠지만, 좀 더 편하고 빠르게 가짜 데이터를 얻
웹에서는 UI가 비동기로 업데이트되는 경우가 참 많죠? UI가 변경될 때까지 기다려줘야 하기 때문에 많은 개발자들이 테스트하기 어려운하는 부분입니다. 이번 포스팅에서는 Testing Library로 비동기(asynchronous)로 작동하는 React 컴포넌트를 테스트하는 방법에 대해서 알아보겠습니다. 예제 컴포넌트 우선 테스트 대상이 될 간단한 React 컴포넌트 하나를 작성해보도록 하겠습니다. 아래 <Switch/> 컴포넌트 함수는 on 상태값에 따라 ON 버튼 또는 OFF 버튼을 리턴합니다. on 상태값은 최초에는 false이
이번 포스팅에서는 fontsource를 사용하여 웹폰트를 직접 호스팅하는 방법에 대해서 알아보겠습니다. fontsource fontsource는 오픈 소스(open source) 웹폰트를 npm 패키지의 형태로 손쉽게 설치하고 직접 호스팅이 가능하게 해주는 라이브러리입니다. 웹폰트를 사용할 때 Google Fonts와 같은 외부 서비스를 통해서 웹폰트를 호스팅하는 경우가 많은데요. 하지만 다양한 웹폰트를 사용하거나 속도가 민감한 서비스의 경우에는 웹폰트를 직접 호스팅하면, 웹폰트 다운로드로 인한 지연을 최소화하여 사용자 경험을 개선
버튼은 웹 에서 사용자와 상호 작용에 있어서 핵심이 되는 요소로서 하나의 웹 애플리케이션에서도 여러 종류의 버튼이 필요하기 마련입니다. 이번 포스팅에서는 다앙한 크기와 형태의 버튼을 표현하기 위해 사용할 수 있는 React로 컴포넌트를 함께 개발해보도록 하겠습니다. 컴포넌트 함수 우선 disabled와 children prop을 인자로 받고 아무 스타일링없이 단순히 <button> HTML 엘리먼트를 반환하는 간단한 컴포넌트 함수를 작성합니다. 지금부터 React에서 Styled Components 라이브러리를 사용해서 이 버튼 컴
이번 포스팅에서는 Styled Components로 전역 스타일(global style)을 정의하는 방법에 대해서 알아보겠습니다. Styled Components 자체에 대한 자세한 설명은 관련 포스팅를 참고 바랍니다. 컴포넌트 레벨 스타일링 React와 Styled Components로 웹 개발을 하다보면 대부분의 경우 컴포넌트 레벨에서 스타일을 하게 됩니다. React가 컴포넌트 기반 자바스크립트 라이브러리라는 것을 감안해보면 너무나 자연스러운 현상일 것입니다. 예를 들어, 다음 <BlogPost/> React 컴포넌트는 Sty
테스트를 작성하다보면 다양한 테스트 데이터에 대해서 동일한 테스트 코드를 돌리고 싶을 때가 있죠? 이러한 테스팅 기법을 보통 파라미터화(parameterized) 테스팅이라고 하는데요. 이번 글에서는 Jest에서 제공하는 test.each()와 describe.each() 함수를 사용하여 파라미터화 테스트를 하는 방법에 대해서 배워보겠습니다. 파라미터화(parameterized) 테스트 간단한 실습을 위해 2개의 문자열의 인자로 받아 애너그램(anagram) 여부를 반환해주는 함수를 작성해볼까요? 이제 위 함수에 대한 테스트를 작성
React 컴포넌트에 ref prop을 넘겨서 그 내부에 있는 HTML 엘리먼트에 접근을 하게 해주는 forwardRef() 함수에 대해서 알아보겠습니다. HTML 엘리먼트의 ref prop React에서 ref prop은 HTML 엘리먼트의 직접 접근하기 위해서 사용됩니다. 예를 들어, 아래 <Field/> 컴포넌트에서는 useRef() 훅(hook) 함수로 생성한 inputRef 객체를 <input/> 엘리먼트의 ref prop으로 넘기고 있습니다. 이렇게 해주면 inputRef 객체의 current 속성에 <input/> 엘리
React로 웹 애플리케이션을 개발하다 보면 간혹 React 컴포넌트가 아닌 HTML 엘리먼트에 직접 접근해서 DOM API를 이용해서 제어해야 할 필요가 있는데요. 이번 포스팅에서는 이럴 때 유용하게 사용할 수 있는 React의 독특한 prop인 ref 에 대해서 알아보도록 하겠습니다. ref prop React의 ref prop은 HTML 엘리먼트의 레퍼런스를 변수에 저장하기 위해서 사용합니다. 예를 들어, 다음과 같이 <input> 엘리먼트에 ref prop으로 inputRef라는 변수를 넘기게 되면, 우리는 이 inputRe
웹 페이지 상에서 많은 양의 데이터를 일목요연하게 보여주기 위해서 테이블(table) UI가 많이 사용됩니다. 정렬이나 검색을 지원하는 완성도 있는 테이블 UI를 직접 개발하려면 생각했던 것보다 구현이 복잡해지는 경우가 많은데요. React Table은 React로 테이블 UI를 간단하게 구현할 수 있도록 도와주는 라이브러리 입니다. 이 번 포스팅에서는 React Table을 이용하여 정렬과 검색을 지원하는 테이블 UI를 구현해보도록 하겠습니다. 테이블 데이터 생성 본인의 React 프로젝트에 npm으로 랜덤 데이터를 생성해주는 f
웹 페이지에서 많은 양의 데이터를 일목요연하게 보여주기 위해서 테이블(table) UI가 많이 사용됩니다. React로 완성도 있는 테이블 컴포넌트를 개발하려면 이외로 고려할 부분이 많아서 생각보다 많은 시간과 노력이 들어가게 되는데요. 이번 포스팅에서는 Material UI를 이용하여 좀 더 손쉽게 테이블 UI를 구현해보도록 하겠습니다. Material UI의 기본적인 셋업에 대한 부분은 관련 포스팅를 참고 바랍니다. 필요한 컴포넌트 HTML을 사용해서 테이블의 열과 행의 골격을 만들 때, <table> 엘리먼트 뿐만 아니라, <
많은 Node.js 프로젝트에서 환경 변수를 좀 더 효과적으로 관리하기 위해서 dotenv라는 라이브러리를 사용하고 있습니다. 이번 포스팅에서는 환경 변수를 파일에 저장해놓고 접근할 수 있게 도와주는 dotenv 라이브러리에 대해서 알아보겟습니다. dotenv 패키지 설치 npm 패키지 매니저를 이용하여 dotenv 라이브러리를 Node.js 프로젝트에 설치합니다. .env 파일 작성 dotenv 라이브러리는 아무 설정을 하지 않으면 현재 디렉토리에 위치한 .env 파일로 부터 환경 변수를 읽어오는데요. .env 파일을 생성하고,
여러 환경에 동일한 애플리케이션을 배포하려면 환경 변수(environment variable)라는 것을 사용해야하는데요. 이번 포스팅에서는 환경 변수에 대한 기본 개념을 설명드리고 Node.js에서는 어떻게 환경 변수에 접근하고 설정할 수 있는지에 대해서 알아보겠습니다. 환경 변수란? 먼저 환경 변수(environment variable)가 무엇인지 간단하게 개념부터 짚고 넘어가면 좋을 것 같아요. 일반적으로 우리는 코드 베이스는 하나만 관리하고, 개발, 테스트, 운영 등 여러 환경에 애플리케이션을 배포하는데요. 어느 환경에 배포하