frontend6 TypeScipt - zod 라이브러리 zod 라이브러리란?Zod는 TypeScript 및 JavaScript 프로젝트에서 입력 데이터를 *스키마로 정의한 후 이를 기반으로 유효성 검사를 가능하게 도와주는 라이브러리이다. Zod를 사용하면 간단한 문법을 통해 데이터 검증과 변환을 동시에 작동할 수 있다. 주로 API 요청과 서버 응답, 폼 데이터 등의 데이터를 안정적으로 검증할 때 사용할 수 있다. 그렇다면 사용 방법에 대해 알아보자 *스키마란 데이터를 구조화하고 해당 데이터에 대한 규칙과 제약을 정의한 것이다. 기본 스키마 정의 및 유효성 검사기본 타입 스키마 정의Zod를 통해 여러 기본 타입을 검증할 수 있는 스키마를 정의할 수 있다. 또한 예시와 같이 기본 타입에 추가적인 검증 규칙을 정의할 수 있다.import { z } from '.. 2024. 10. 17. FLUX 아키텍쳐에 대해 알아보자 Flux 아키텍쳐Flux는 Facebook이 만든 애플리케이션 아키텍처 패턴으로, 데이터 흐름과 상태 관리를 단방향으로 구성한 것이 특징이다. 이렇게 아키텍쳐를 한 줄로 요약하면 이해가 잘 가지 않으니 더 깊게 알아보자. 등장 배경 Facebook은 서비스가 성장하고, 더 많은 기능들이 추가되면서 상태 관리의 어려움이 점점 커졌다. 기존에 Facebook 서비스는 MVC(Model-View-Controller) 패턴을 사용하였는데, MVC 패턴은 여러 컴포넌트가 상호작용하면서 각자의 상태를 변화시키는 양방향 데이터 바인딩을 사용하게 된다. 하지만 이렇게 될 경우 하나의 컴포넌트에서 발생한 상태 변화가 다른 컴포넌트에 영향을 미치고, 이는 다시 또 다른 컴포넌트에 영향을 미치면서, 복잡한 상호작용 구조가.. 2024. 10. 14. React란? React란?React는 사용자 인터페이스(UI)를 구축하기 위해 개발된 JavaScript 라이브러리이다. 2013년 Facebook에서 처음 개발되어 공개되었으며, 현재는 Meta와 오픈 소스 커뮤니티에 의해 유지·관리되고 있다. 컴포넌트 기반으로 설계되어 재사용성, 유연성, 성능 최적화에 장점을 가지고 있다. React의 탄생 배경Virtual DOM의 등장: Virtual DOM은 DOM의 가상 버전을 메모리에 저장하여, 실제 DOM과의 차이를 비교하고 최소한의 변경 사항만 실제 DOM에 적용하여 성능을 최적화하는 기술이다. 이를 통해 React는 복잡한 UI에서도 빠르게 동작할 수 있게 되었다.Virtual DOM : React에서 UI 성능을 최적화하기 위해 사용하는 가상화된 DOM 구조이다.. 2024. 10. 6. [React] console, warning, error 메세지 제거 개발을 하다보면 어쩔 수 없이 개발자도구 안에 콘솔에 warning과 console.log 메세지가 수도 없이 많을 수 있다. 배포 하기 전에 한 번쯤은 신경써야할 내용에 대해 써보겠습니다! 방법은 매우 간단하다 ㅋㅋ,,, App.js 에 아래와 같은 코드를 추가하면 된다..! 원리는 모든 console 메세지에 대해 빈 함수로 대체하여 재정의 하는 것이다. if (1+1 === 2) { window.console = { log: function () {}, warn: function () {}, error: function () {}, }; } 2023. 10. 5. 이전 1 2 다음
