카테고리: JavaScript

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 컴포넌트를 작성해야 했습니다.대표적으로 상태 관리가 필요한 경우인, 사용자 입력 양식을 위한 컴포넌트를

Jest Mock: jest.fn(), jest.spyOn()

자바스크립트 테스트 테스팅 프레임워트로 Jest를 사용할 때 장점 중에 하나는 다른 라이브러리 설치 없이 바로 mock 기능을 지원한다는 점입니다.여기서 mock을 한국어로 뭐라고 번역해야 모르겠는데, 주변에서 보면 “모킹하다”, “뫀객체” 등으로 영어를 차용해서 쓰고 있는 것 같습니다. mocking 이란?먼저 mocking이 생소하신 분들을 위해서 mo

React Context 사용법

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

Apollo Server를 이용한 초간단 GraphQL 서버 개발

이번 포스트에서는 Apollo Server를 이용하여 매우 간단하게 GraphQL 서버를 개발해보도록 하겠습니다.기존에 GraphQL 서버를 한 번도 개발해보신 적이 없으신 분들께 도움이 되었으면 합니다. 프로젝트 생성원하는 디렉토리(ex. my-server)에 index.js 파일을 생성합니다.그리고 NPN 초기화 명령어를 실행하면 package.json

Jest로 테스트 전/후 처리하기

테스트를 작성하다보면 모든 테스트 함수에서 공통적으로 필요한 공통 로직이 필요할 때가 있습니다.이번 포스트에서는 Jest를 이용해서 이렇게 테스트 전이나 후에 실행되야 하는 코드를 작성하는 방법에 대해서 알아보겠습니다. 테스트 대상 코드데이터베이스에 접근하는 코드에 대한 테스트를 작성한다는 가정 하에, 다음과 같이 간단한 예제 코드를 작성해보겠습니다. /

Jest로 비동기 코드 테스트 작성하기

지난 포스트에서 Jest로 기본적인 테스트 코드 작성하는 방법에 대해서 알아보았습니다.자바스크립트 언어 특상 상 실제 프로젝트에서는 비동기(Asynchronus)로 돌아가는 코드를 테스트해야 할 일이 많은데요.Jest Runner가 비동기 코드에 대한 테스트라는 사실을 인지할 수 있도록 테스트를 작성해주지 않으면 예상치 못했던 테스트 결과에 당황할 수가 있

Jest로 기본적인 테스트 작성하기

Jest는 페이스북에서 만들어서 React와 더불어 많은 자바스크립트 개발자들로 부터 좋은 반응을 얻고 있는 테스팅 라이브러리입니다.출시 초기에는 프론트앤드에서 주로 쓰였지만 최근에는 백앤드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있습니다. Jest: All-in-one 테스팅 라이브러리페이스북에서는 Jest를 단순한 테스팅 라이브러리가 아닌