TIL

svgr 플러그인을 사용해서 svg 이미지를 가져오기

카카오톡 공유하기

이미지 리사이징 라이브러리 사용하기

Auth.js(Next-Auth)를 사용하여 이메일/비밀번호로 회원가입을 구현해 보자

Auth.js Credential 로그인 구현하기

Prisma + MongoDB로 CRUD하기

프로젝트 레포지토리에 action 기능을 사용해 보자.

프로젝트에 OAuth를 추가해 보기로 했다. 이전까지는 Firebase Authentication만 사용했기 때문에, 한국에서 자주 사용되는 OAuth(e.g, 네이버, 카카오)를 사용하려면 따로 설정을 해주어야 했다. 그러나 Next Auth를 사용하면 간단한 설정만으로 OAuth를 사용할 수 있다. OAuth 추가하기 OAuth를 추가하는 방법은 위...

React testing library에서 이벤트를 발동시키는 방법에는 아래 두 가지가 있다.fire-eventuser-event테스팅 라이브러리에 내장된 fire-event는 DOM 이벤트를 전송한다. 개발자가 모든 요소에서 모든 이벤트를 트리거할 수 있도록 해준다.

불필요하고 가독성 낮은 방식에서 완전 탐색을 이용하여 리팩토링하기

전역 관리 중인 state들을 초기화할 필요가 있었다. 처음에는 state에 initialState를 할당시켜주는 방법을 생각했지만, Redux는 불변성을 유지해주어야 하기 때문에 직접적으로 state를 변경해서는 안된다.

리덕스는 이전 상태와 액션을 기반으로 상태를 업데이트하는 순수 함수로, state를 직접 변경해서는 안된다. 로직 작성 React-toolkit의 createSlice를 사용하면 immer가 적용되기 때문에, 그냥 할당해도 순수성을 유지하면서 업데이트가 되기 때문에, 일일히 아래처럼 작성해줄 필요는 없다. 그렇지만 Immer를 사용하지 않고 순수하게 업...

리액트-리덕스와 연결되어 있는 리액트 컴포넌트를 테스트해 보자. 먼저, 테스트 코드 작성에 필요한 라이브러리들을 설치해 준다. 함수 단위(Unit) 테스팅 기본적으로 통합 테스트를 작성하는 것이 좋지만, 단위 테스트를 작성해야 할 때도 있다. 단위 테스트는 이전 상태에 액션을 적용한 후, 새로운 상태를 반환하는 순수 함수다. 대부분의 경우, 명시적인 테...

리덕스는 언제나 불변성을 유지해야 한다.