리액트에서 컴포넌트 차원에서 예외처리하는 방법입니다. 에러를 발생할 수 있고 우아하게 처리하는 방법을 소개합니다.
물론 저의 방법은 우아하지 않습니다.
참고로 저는 React-Query와 조합해서 사용하는 것도 다룹니다.
리액트에서 컴포넌트 차원에서 예외처리하는 방법입니다. 에러를 발생할 수 있고 우아하게 처리하는 방법을 소개합니다.
물론 저의 방법은 우아하지 않습니다.
참고로 저는 React-Query와 조합해서 사용하는 것도 다룹니다.
개인적으로 적용하고 있는 리액트 코딩 컨벤션입니다. 일부는 차용했습니다. 또 배운 것이 있으면 추가할 것입니다.
스크롤을 정지시키는 custom hook입니다. modal에서 많이 호출합니다.
지금 구현해야 하는 것은 삭제시 경고 modal(더 구체적으로 Dialog)입니다. 이 작업을 기록하는 이유는 react portal로 구현하는 것이 처음이기 때문에 기록합니다.
이메일 저장하는 방법입니다. 하지만 이 방법을 적용하기 전에 왜 저장해야 하는가? 이것은 ux 문제입니다.
React-Router-DOM에 대해서 저는 생각보다 모르는 지식이 상당히 많습니다. url path에 접근하는 방법을 이번에 찾게 되었습니다.
로그인하고 홈페이지로 이동하면 하면 로딩 스피너가 보입니다. 잘 몰랐지만 상당히 기초가 없는 짓이라고 합니다.
예전에 포트폴리오 프로젝트를 진행할 때 동료가 custom hook을 추가했었습니다. 하지만 아쉬운 점이 많아서 개선한 버전을 다시 만들었습니다.
원래는 있는 줄 몰랐던 hook입니다.
그냥 vite으로 만든 react에서 webp로 이미지를 처리하는 방법입니다.
오늘은 사용자들에게 로그아웃 통신을 한다고 기만하는 기능을 만들었습니다. 이유는 사실 토큰을 비우는데 그냥 1 ~ 2초 기다리게 만들었습니다.
switch case
보다 더 깔끔한 in
연산자로 타입에 따라 조건부 랜더링하는 방법입니다.
카드 뒤집기 구현은 생각보다 난이도 있었습니다. 하지만 재미있습니다.
이유가 있다면 더 간소하고 성능이 더 좋습니다. HMR 지원이 상당히 빠릅니다. 그리고 설치 마법사가 직관적이고 친절합니다. 시작하거나 실험 프로젝트에 활용하기 적합합니다.
물론 예외도 있습니다. 처음 테스트를 공부하는 입장에서는 CRA 활용하는 것이 좋습니다.
프론트엔드 엔지니어링 코드의 관심사를 분리하는 방법들입니다. 모두 훔쳐배운 것들입니다.
vitest처럼 빠른 테스트러너에 RTL과 MSW를 같이 사용할 수 있게 설정하는 방법을 다룹니다.