redux-saga에서는 스토어에 지정된 액션들이 dispatch 될 떄 task를 만들기 위해 내부 함수를 감싸는 몇몇 helper 함수(Effect Creator)를 제공한다. 그 중 액션을 감지하기 위한 목적으로 takeEvery와 takeLatest를 많이 사용 했었는데, 며칠 전 팀원이 takeLeading을 사용 했기에 호기심이 생겨 세 가지 헬퍼 함수의 기능에 대해 알아보기로 했다.

MobX는 Redux 및 Context API 외에 React 앱에서 사용할 수있는 상태 관리 라이브러리로 객체 지향 프로그래밍 및 반응형 프로그래밍 원칙의 영향을 받는다. MobX에서는 특정 상태(데이터)를 관찰하여 상태가 변경되었을 때 자동으로 업데이트 한다.

리덕스를 사용하다 보면 급격하게 늘어나는 코드 양과 그에 비례한 복잡함에 불만이 생기기도 한다. 이러한 단점을 보완한 Redux Toolkit이 공개 되었는데, Redux를 사용하기에 필수적인 로직들을 포함하고 있어 단순하지만 강력한 도구이다.

TypeScript는 MS에서 개발한 자바스크립트의 슈퍼셋(상위언어)로 Javascript에 타입을 지정함으로써 더욱 가독성이 높고 견고한 코드를 짤 수 있도록 도와준다.

TypeScript와 Unit Test 공부를 위해 React로 간단한 StopWatch를 만들고 TypeScript로 리팩토링 해봤다. 👩‍💻

처음 개발을 배울 때 테스트 주도 개발이 대세라는 이야기를 들었을 때 '코드를 테스트 하기 위해 또 다른 코드를 작성해야 한다고?' 하며 겁먹었던 기억이 난다 ㅎㅎ 그런데 공부를 하다보니 조금 더 깔끔한 코드, 효율적인 코드에 대해 고민하게 되고 이참에 테스트에 대해 공부해 보기로 했다.

지난 7월에 만들었던 프로젝트를 리팩토링 중인데, 지금 보니 좀 더 깔끔하게 react의 특성을 살려 구현할 수 있었던 코드들이 있다. 그 중 하나가 이전에 포스팅했던 이미지 업로드 전 미리보기 이다.

구글맵에서 마커를 클릭했을 때, 팝업창을 띄워 위치 정보를 게시하고 싶다면 Maps JavaScript API에서 제공하는 Info Windows를 사용할 수 있다.

이미지를 업로드하기 전에 어떤 이미지를 선택했는지 미리 보여주고, 대표이미지를 설정하거나, 필요없는 파일은 삭제하도록 하는 기능이 필요하다. 이번 포스트에서는 미리보기 기능을 구현하는 방법을 알아보겠다.

파일 업로드하는걸 구현하기 어렵지 않을까? 라고 생각했었는데 의외로 아주 간단했다. input type="file" 만 있으면 이미 반은 성공한 것!

기본적인 Google Maps API는 서버에서의 요청을 기본으로 하므로, client-side에서 요청을 보내기 위해서는 Maps JavaScript API를 사용해야 한다.

CRA로 만든 프로젝트에서는 프로젝트 전체에서 접근할 수 있는 환경변수(Environment Variables)를 루트 디렉토리의 .env 파일에 정의하여 사용할 수 있다.

리액트로 앱을 개발하다 보면 자식 컴포넌트 A의 state 변화가 자식 컴포넌트 B에 영향을 줄 때가 있다. 하지만 자식 컴포넌트 A와 B는 직접적으로 state를 공유하지 못하며 반드시 부모를 거쳐서만 state를 전달할 수 있다.

Styled Components는 자바스크립트 파일 안에 CSS 를 작성하는 style 라이브러리이다. CSS 파일을 따로 만들 필요가 없어 더욱 간편하게 쓸 수 있다. 이번 포스트에서는 Styled Components를 활용하여 Global Navigation Bar를 만들어 보겠다.

개발자 경험 향상에 유용한 두가지 tool, ESLint와 Prettier. ESLint는 JavaScript 코딩 컨벤션과 에러 체크를 도와주며, Prettier는 말 그대로 코드를 더 이쁘게 만들어 주는 도구로 사전에 설정한 규칙에 따라 코드를 포맷해준다.

Javascript는 Type에 있어 매우 유연한 언어이다. React로 앱을 개발하면서 Type 체킹을 통해 많은 버그를 잡을 수 있는데, React에서 Type 체킹을 할 수 있는 방법으로는 PropTypes, Flow, Typescrip 등이 있다. 이 중, 컴포넌트의 props Type을 체크할 때 사용할 수 있는 PropTypes를 알아보자.

위의 사진과 같이 인라인 텍스트 편집기(inline text editor)는 React로 어떻게 만들 수 있을까? 이 문제는 조건부 랜더링(conditional rendering)으로 간단하게 해결할 수 있다. 조건부 랜더링이란, if문을 사용하여, state에 따라 조건적으로 렌더하는 것이다. 🐶🍯

리액트를 다루면서 맞닥뜨리게 되는 중요한 개념 중 하나가 바로 state의 immutability(변경불가성)이다. 프로그래밍에서 immutability란, 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 말한다.

단방향 데이터 플로우(one-way data flow)는 리액트의 큰 특징 중 하나이다. 위의 그림처럼 상위 컴포넌트는 하위 컴포넌트에게 props의 형태로 data를 전달할 수 있으나, 하위 컴포넌트는 받은 props를 변경할 수도 없을 뿐더러, 상위 컴포넌트로 전달할 수도 없다. 그렇다면, 하위 컴포넌트에서의 변화로 인해 상위 컴포넌트가 변화해야하는 경우엔 어떻게 해야할까?

요소는 React 앱의 가장 작은 구성 블록입니다. 리액트 공식문서는 리액트에서의 요소(element)를 위와 같이 정의하고 있다. element를 component와 혼동해선 안된다!

리액트를 쉽게 시작할 수 있는 방법은 페이스북에서 제공하는 create-react-app을 이용하는 것이다. 리액트 앱을 만들수있는 기본 프로젝트 환경이다. 컴퓨터에 npm 5.6버전 이상이 설치되어 있다면, 터미널에서 간단한 코드를 실행하여 프로젝트를 생성할 수 있다.

React는 Facebook이 만든 JavaScript 라이브러리다. 그렇다면, JavaScript 라이브러리는 무엇이고, 왜 필요한 것일까?