react (7) 썸네일형 리스트형 React 19 출시 및 내용 React 19 버전이 출시되었다. 변경 점에 대해 알아보자.1. Actions1.1 개념Actions는 React 앱에서 비동기로 데이터를 전송하고, 이에 따른 상태 업데이트를 단순화하기 위한 새 기능이다.요청 대기 상태(loading), 에러 처리, 낙관적 업데이트 등을 자동으로 관리해준다.1.2 예시 코드기존 방식(대기 상태와 에러를 직접 관리)function UpdateName() { const [name, setName] = useState(""); const [error, setError] = useState(null); const [isPending, setIsPending] = useState(false); const handleSubmit = async () => { setI.. [React] 무한스크롤 구현 및 최적화(react-intersection-observer => virtuoso) 기존에 react-intersection-obsever를 사용해 무한스크롤을 구현하였던 코드를 virtuoso를 사용하여 리팩토링 하기로 했다.리팩토링을 하게 된 가장 큰 이유는 성능 최적화에 있다.Virtuoso란? Virtuoso는 무한 스크롤 구현 및 성능 최적화를 위한 라이브러리이다. 특징Virtual List(리스트 가상화)Virtuoso는 데이터를 렌더링 함에 있어서 화면에 보여지는 데이터 리스트들만 DOM 요소에 추가한다. 즉, 스크롤을 통해 데이터를 가져올 때 보이지 않는 요소는 DOM에 추가되지 않기 때문에 메모리 사용을 최적화 할 수 있다.Auto Resizing(자동 리사이징)Virtuoso 구성 요소는 콘텐츠 크기 조정, 이미지 로딩 등으로 인해 항목의 높이가 변경될 경우 이를 자동.. Transient Props를 사용해 styled-component 에러 해결하기 styled-components를 사용해 간단한 버튼을 만들었는데 콘솔에 처음 보는 에러가 찍혔다. styled-components를 자주 사용하지 않은 것도 있었겠지만 한 번도 발생해 본 적이 없는 에러였다. 에러의 내용은 다음과 같다. 해석하자면경고: React는 DOM 요소에서 isSelected prop을 인식하지 못합니다. 만약 이것을 의도적으로 사용자 정의 속성으로 DOM에 표시하고 싶다면, 소문자 isselected로 철자를 맞추세요. 만약 부모 컴포넌트에서 실수로 전달한 것이라면, DOM 요소에서 제거하세요. 라는 뜻의 에러였다.에러의 내용을 보고 조금 의아했다. '왜 prop을 인식하지 못하지? 소문자로 철자를 맞추라니 무슨 소리지? 오타는 없는데'라는 생각을 하였다. 원인에 대해 찾아보.. React + MSW(Mock Service Worker)로 백엔드 API 없이 개발하기 서비스 개발 단계에 있어서 보통 프론트엔드 작업은 후순위일 것이다. 기획을 하고 디자인과 백엔드 API가 나오면서 비로소 프론트에서의 본격적인 개발이 시작된다. 하지만 언제까지나 API 개발만을 기다릴 순 없기에 프론트엔드 개발자가 실제 백엔드 API가 아직 준비되지 않은 상황에서도 MSW를 사용하여 목(mock) 데이터를 생성함으로써, 프론트엔드 개발을 선행적으로 시작할 수 있는 방법에 대해 알아볼 것이다. 본 글은 React + TypeScript + MSW 2.0 이후의 버전에 기반하여 작성했습니다.https://mswjs.io/docs/migrations/1.x-to-2.x/1. MSW(Mock Service Worker) 란?Mock Service Worker (MSW)는 웹 애플리케이션 개발 .. react-datepicker로 생년월일 값 받기 폼에서 생년월일에 대한 정보를 받아야 한다. 폼은 react-hook-form을 이용해 구현하였고 폼 중에 생년월일 입력 필드를 클릭하면 달력에서 연월일을 지정할 수 있도록 만들 것이다. 달력을 직접 구현하기에는 시간이 오래 걸릴 것 같아 react-datepicker를 사용하기로 했다. React-datepicker란 ? 커스터마이징이 가능한 달력을 구현할 수 있는 React 라이브러리이다. 자세한 설명은 공식문서에 잘 나와있다.공식문서 : https://reactdatepicker.com/ date-fns 설치하기date-fns는 로케일 설정 및 날짜 포맷팅을 위해 사용되는 라이브러리이다.react-datepicker는 기본적으로 영어로 달력의 내용을 표시해주기 때문에 이를 한글로 설정하기 위해 .. CRA없이 Webpack(웹팩) + Babel(바벨) 기본 설정하기 이번에 과제를 진행하며 리액트의 초기 개발환경 설정을 하게 되었다. 항상 프로젝트를 시작하며 CRA나 Vite만 사용을 해서 처음부터 구축을 해보는 좋은 경험을 하게 되었다. 다음은 웹팩과 바벨 설정에 대한 단계이다.1. 프로젝트 초기화npm init -y새로운 프로젝트를 초기화하기 위해 터미널에 다음과 같이 npm init -y를 통해 package.json 파일을 생성해주었다. 2. Webpack과 babel 및 필요 패키지 설치npm i webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react css-loader style-loader각.. [Next.js] Fabric.js로 그림판 구현하기 이번 사이드 프로젝트를 하며 그림판을 다룰 일이 생겼다.수 많은 라이브러리가 있었지만 그 중 Fabric.js 라이브러리를 선택하여 구현하기로 하였고 선택을 하게된 이유는 다음과 같다.1. 객체 지향적 접근 - 캔버스 내의 각 요소들을 객체로 처리한다. 이를 통해 생성, 수정, 삭제를 쉽게할 수 있게 만들어준다.2. 다양한 플랫폼 지원 - Fabric.js는 모든 브라우저에서 동작하며, 크로스 플랫폼 호환성을 지원한다.3. 다양한 도구 지원 - 브러쉬, 색상 선택, 레이어 관리 등 다양한 그래픽 도구들을 쉽게 커스터마이징 할 수 있다.4. 간편한 이미지 포멧 - 캔버스의 내용을 쉽게 내보낼 수 있다. 첫번째 트러블 슈팅캔버스를 구현하며 가장 처음 맞이한 에러는 hydration 에러이다.Hydration.. 이전 1 다음
