react6 [TypeScript] Zod 시작하기, 타입스크립트 Validation 라이브러리 TypeScript를 사용하면서 가장 흔히 겪는 문제 중 하나는 외부에서 들어오는 데이터(API 응답, 사용자 입력 등)의 타입을 보장할 수 없다는 점인데. TypeScript의 타입 시스템은 컴파일 타임에만 작동하기 때문입니다.이러한 문제를 해결하고 런타임에서도 데이터의 무결성을 완벽하게 보장해주는 라이브러리가 바로 Zod 입니다. 1. Zod란?Zod는 TypeScript-first 스키마 선언 및 검증 라이브러리로.단순히 데이터를 검사하는 것을 넘어, 정의한 스키마로부터 TypeScript 타입을 자동으로 추론할 수 있다는 점이 가장 큰 특징입니다.https://zod.dev/ Intro | ZodIntroduction to Zod - TypeScript-first schema validation .. 2026. 3. 12. [REACT] useMemo UseCallback useMemo와 useCallback은 둘 다 React Hooks으로, 최적화를 위해 사용하며, 비슷한 역할을 하는 것 같지만 사용 방법과 목적이 다르기에 공부한 내용을 정리합니다. # Memoization ? 위의 두 hook을 사용하기 전, 메모이제이션이라는 개념에 대해 알아야합니다. 메모이제이션은 함수의 결과를 저장해두고, 동일한 입력이 들어올 때 저장된 결과를 반환하여 재사용하는 최적화 기법입니다. 적재적소에 사용 시, 함수의 성능 향상 및 불필요한 계산을 줄일 수 있습니다. (메모리를 조금 더 사용하더라도 애플리케이션의 성능을 최적화 할 수 있음) # useMemo useMemo는 렌더링 중에 계산된 값을 기억하고, 의존성 배열의 값이 변경되지 않으면 이전에 계산된 값을 반환하는 함수. (메모.. 2024. 2. 12. [React] React Ajax 활용 프로젝트를 진행할 폴더 생성 (예, ajax_prac) $ npx create-react-app '프로젝트명' App.js 에 아래 예시 처럼 코드를 작성했습니다. 먼저 하드 코딩 후, react의 함수형 컴포넌트로 변경하겠습니다. import "./App.css"; function App() { return ( Hello React example 1 example 2 example 3 title desc ); } export default App; 제목과 nav메뉴, 메뉴 선택시 변경되는 하위 아티클의 제목과 내용의 구조입니다. 함수형 컴포넌트로 변경 https://jsonplaceholder.typicode.com/users → 해당 json 데이터를 이용하여 리스트에 출력하겠습니다. 컴포넌트 생성 .. 2023. 10. 9. [React] 리액트로 간단한 게시판 만들기 (simple board/ CRUD) 기본 설정 프로젝트 파일 생성 $ npx create-react-app '프로젝트명' 간단한 레이아웃과 css 적용을 위해 부트스트랩을 사용하겠습니다. (필수 x) 참조 : https://react-bootstrap.github.io/ react bootstrap 설치 $ npm install react-bootstrap bootstrap 상단에 import 합니다. import 'bootstrap/dist/css/bootstrap.min.css'; 필요한 부트스트랩 component도 import. 서버 기본 세팅 XAMPP에서 서버 M SQL DB, Apache server 실행 같은 root에 서버 폴더 생성하고 터미널에 명령어 입력 node express 서버 실행 //패키지 json 설치 $ n.. 2023. 10. 6. 이전 1 2 다음
