태그: 자바스크립트

PropTypes로 React 입력 타입 체크하기

PropTypes는 React에서 타입 체크를 위해서 사용되는 라이브러리입니다.이 번 포스트에서는 PropTypes를 이용해서 React 컴포넌트의 prop에 대한 타입 정의와 기본값 설정을 하는 방법에 대해서 알아보겠습니다. 패키지 설치PropTypes 라이브러리는 prop-types이라는 패키지 이름을 가지고 있는데요.기본적으로 react 패키지에 내장

React Testing Library 사용법

React Testing Library(RTL)라는 테스팅 라이브러리가 React 개발자들의 입소문을 타고 점점 인기가 올라가고 있습니다.이번 포스트에서는 최근 React에서 테스팅 트랜드와 패러다임을 바꾸고 있는 React Testing Library에서 다뤄보도록 하겠습니다. React Testing Library 소개React Testing Libra

React Router 기본 사용법

React를 이용해서 SPA(Single Page Application)을 개발할 때 흔히 겪는 어려움 중에 하나가 웹페이지 라우팅입니다.이 번 포스트에서는 React Router라는 라이브러리를 사용해서 SPA에서 라우팅을 하는 방법에 대해서 알아보겠습니다. 간단한 라우팅 구현기본적으로 SPA는 index.html 파일에 div 엘리먼트만 하나 두고, 자

React에서 Font Awesome 사용하기

Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다.이번 포스트에서는 React 앱에서 Font Awesome을 사용하는 방법에 대해서 알아보도록 하겠습니다. React와 무관한 Font Awesome 자체에 대한 설명은 관련 포스트를 참고 바랍나다. Font Awesome 5의 SVG 지원Font Awes

React Hooks: useEffect 사용법

Side Effect 처리를 위해 React Hooks에서 제공되는 setEffect() 함수에 대해서 알아보도록 하겠습니다. Side Effect란?React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컽습니다.대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단

React Hooks: useState 사용법

컴포넌트의 상태 관리를 위해 React Hooks에서 제공되는 setState() 함수에 대해서 알아보도록 하겠습니다. this.state - 클래스 기반 상태 관리React Hooks가 나오기 전에는 컴포넌트의 상태 관리를 하려면 클래스 기반 React 컴포넌트를 작성해야 했습니다.대표적으로 상태 관리가 필요한 경우인, 사용자 입력 양식을 위한 컴포넌트를

Font Awesome 5 사용법 (ver 4 포함)

Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다.Font Awesome 5가 출시된지 시간이 꽤 흘렀음에도 불구하고, 아직까지도 Font Awesome 4가 많이 사옹되고 있습니다.여러가지 이유가 있겠지만 저는 개인적으로 Font Awesome가 일부 아이콘들을 유료화하는 과정에서 다소 복잡해진 부분이 없지

React Context 사용법

리액트 앱을 개발하다보면 모든 컴포넌트에 어떤 값을 props으로 넘기고 싶은 데이터가 필요할 때가 있습니다.다시 말해, 어떤 컴포넌트 트리 내에서 최상위 컴포넌트 부터 최말단 컴포넌트에 걸쳐 전역(global)으로 관리해야 할 데이터가 필요한 상황이 되겠네요. 이번 포스트에서는 React Context를 활용하여 리액트 앱에서 전역 데이터를 관리하는 방법

[자바스크립트] 비동기 처리 3부 - async/await

이전 두 개의 포스트를 통해서 기존에 자바스크립트로 어떻게 비동기 처리 코드를 작성해왔는지에 대해서 살펴보았습니다.이번 포스트에서는 좀 더 개선된 방식으로 비동기 처리를 할 수있도록 도와주는 async/await에 대해서 알아보도록 하겠습니다.async/await를 제대로 시용하려면 Callback과 Promise에 대한 이해가 무엇보다 중요하오니 아래 포

[자바스크립트] 비동기 처리 2부 - Promise

많은 분들이 자바스크립트 공부를 하시다가 프라미스(Promise)에 때문에 그만 두시곤 합니다.이번 포스트에서는 자바스크립트에서 비동기 처리를 위해 굉범위하게 사용되는 Promise에 대해서 알아보겠습니다. 콜백 함수를 통한 비동기 처리의 문제점ES6에서 Promise가 도입되어 지금처럼 널리 사용되기 이전에는 주로 콜백 함수를 다른 함수의 인자로 넘겨서