Web Front End/React

[Yup+Formik] 객체 값 유효성 검사

안녕하세요, 오늘은 가볍게 Yup+Formik을 사용할 때 유효성 검사에 대해 얘기해 보겠습니다. 오늘 겪었던 바보 같은 일을 회고하면서 Yup과 Formik에 대해서도 간단히 소개하겠습니다. 1. Yup https://github.com/jquense/yup Dead simple Object schema validation라고 소개합니다. 유효성 검사를 선언적으로 할 수 있게 해줍니다. 가장 상단에 있는 예시를 보면 형태가 모두 객체 형태인 것을 볼 수 있습니다. 심지어 if-else 기능에 해당하는 부분도 객체 형태로 사용이 가능합니다. let userSchema = object({ name: string().required(), age: number().required().positive().int..

[Vite] Webpack 대체 가능할까? Vite + React 설정하기

vite는 사전 번들링은 esbuild, 번들링 시에는 rollup을 기반으로 속도 개선과 module, ssr 지원 등 모던한 개발 구성을 갖출 수 있는 빌드 도구입니다. 차세대 프런트엔드 개발 툴이라고 소개하는 vite로 React 환경을 구성해 보고 장단점과 개인 의견까지 덧붙여 보겠습니다. 개요 구성 및 주의점 장단점 결론 1. 구성 및 주의점 react, scss, webpack, babel, typescript로 구성되어 있던 것을 vite로 재구성하였습니다. 1) index.html은 기본적으로 프로젝트의 root 경로에 있어야 합니다. root 경로가 아닌 다른 곳에 위치하고 싶다면 root 옵션에 해당 경로를 추가해 주어야 합니다. // vue.config.js export default..

[React] Checkbox 상태관리하기

[React] Checkbox 상태관리하기 이번 포스팅에서는 React에서 체크박스 UI 를 만들고 컴포넌트 간 상태관리를 하는 방법을 예제와 함께 설명할 예정입니다. 개요 Checkbox UI 만들기 Checkbox 하나 선택 상태관리 Checkbox 전체선택 상태관리 요약 및 추가 사항 참고: 예제 코드 환경은 React, styled-component를 주로 하며, 스타일 코드는 생략되어 있습니다. 스타일 코드를 포함한 전체 프로젝트 코드는 여기에서 보실 수 있습니다. 1. Checkbox UI 만들기 Checkbox는 html의 input 태그에 타입을 체크박스로 지정해 만들 수 있습니다. 체크박스만 만든다면 아래와 같이 작성 가능합니다. 우리는 리스트와 전체선택에 체크박스를 모두 포함시켜야 합니..

[React] Context API 와 Redux 비교하기

[React] Context API 와 Redux 비교하기 리액트에서 전역 상태를 관리할 때 많이 쓰는 Context API 와 Redux를 사용법과 장단점 위주로 비교해 보겠습니다. 개요 전역 상태 관리는 언제 할까? Context API의 특징 Redux의 특징 요약 및 결론 1. 전역 상태 관리는 언제 할까? 상태 관리는 View 중심으로 이루어진 React Component에서 변하는 값에 대한 상태를 관리한다고 할 수 있습니다. 우선, React의 useState를 이용하면 지역 상태 관리를 할 수 있습니다. 이를 사용하는 컴포넌트 안 혹은 props로 전달할 때만 하위 컴포넌트에서 사용할 수 있습니다. 모든 상태 관리를 useState만을 이용하여 진행할 수도 있습니다. 하지만 여러 컴포넌트에..

[React] 환경설정 제대로 알고 하기 (without CRA) ②

[React] 환경설정 제대로 알고 하기 (without CRA) ② 지난 포스팅에서는 CRA 없이 React 기반 환경설정을 하기 위해 필요한 기본 라이브러리와 Babel을 설정해 보았습니다. 이번 포스팅에서는 webpack 설정을 개발/배포로 나눠서 하는 방법을 설명하려고 합니다. 1편 보기: https://egg-programmer.tistory.com/259 목차 webpack config와 scripts 설정 기본 라이브러리 설치 production 모드 환경설정 공통 환경설정 및 webpack merge 1. webpack config와 scripts 설정 이제 webpack.config.js 파일을 생성해 Webpack 실행 규칙을 작성하면 됩니다. 이 포스팅에서는 package.json의 ..

[React] Infinite Scroll과 Skeleton Loading 만들기

[React] Infinite Scroll과 Skeleton Loading 만들기 아무리 빠른 인터넷 환경이라고 해도 수백 개, 1,000개 이상의 데이터를 받는 데에는 시간이 오래 걸립니다. 오늘 포스팅에서는 많은 데이터를 하나의 페이지에 랜더링해야 할 때 어떻게 지연 로딩을 할 수 있는지 알아보겠습니다. 개요 Infinite Scroll과 Skeleton Loading은 무엇일까? 자바스크립트에서 지원하는 Observer API Intersection Observer를 자세히 알아 보자. Infinite Scroll 만들기 Skeleton Loading 만들기 1. Infinite Scroll과 Skeleton Loading은 무엇일까? Infinite Scroll Infinite Scroll, 즉 ..