클라이언트 (169) 리스트형 [Next.js] Zod를 사용하여 데이터 검증하기 // Zod- 타입스크립트의 타입 안정성을 향상시켜주는TypeScript-first 스키마 선언 및 검증 라이브러리- 공식 문서: https://zod.dev/ GitHub - colinhacks/zod: TypeScript-first schema validation with static type inferenceTypeScript-first schema validation with static type inference - colinhacks/zodgithub.com▪ 설치npm install zod▪ 스키마 정의 및 검증import { z } from 'zod';const 스키마명 = z.자료형({ 데이터명: z.자료형().검증메소드(),});const 스키마명 = z.자료형().검증메소드();스키.. [Next.js] 렌더링 과정 및 개념 특정 페이지로 이동할 때, next.js는 서버에서 모든 page와 component를 render해서 HTML 형태로 브라우저에 넘겨준다.(SSR)그러면 사용자는 서버에서 렌더링된 초기 화면을 바로 볼 수 있다.초기 HTML이 제공되기 때문에 SEO 향상에 도움이 된다.그리고 그 즉시 React 애플리케이션을 생성하여 초기 HTML에 연결한다.(hydration)이를 통해 interactive한 SPA(Single Page Application) 가 된다.SSR은 모든 component에 발생하는데, hydration은 use client를 선언한 component에만 발생한다. [리액트(React)] Gatsby - Contentful // Contentful- 컨텐츠를 관리하는 시스템- 공식 사이트: https://www.contentful.com/ Where content drives business momentum | ContentfulBusiness moves faster when teams producing content have a platform that empowers them to collaborate, innovate, and deliver impactful experiences at scale.www.contentful.com// Content 모델 생성 회원가입 후 Content 모델을 생성한다.처음 가입하면 샘플들이 여러 개 있는데 싹 다 지워버렸다. content type의 Name을 정하고 Create를 누른.. [리액트(React)] Gatsby // Gatsby- 정적 사이트를 구축하는 리액트 기반 프레임워크- 기존 리액트에서 작업하는 것과 동일하게 작업하고, 빌드 후 배포할 때 모든 리액트요소를 html로 변환해준다.- 데이터를 편리하게 가져올 수 있도록 GraphQL을 사용한다.- 공식 사이트 :https://www.gatsbyjs.com/ The Best React-Based Framework | GatsbyGatsby is a React-based open source framework with performance, scalability and security built-in. Collaborate, build and deploy 1000x faster on Netlify.www.gatsbyjs.com▪ 설치npm install -g.. [리액트(React)] Vercel로 React 프로젝트 배포하기 간단한 프로젝트는 github pages로 배포하는 편인데, 이번엔 좀 제대로 관리하고 싶은 프로젝트라 vercel로 배포하기로 했다. 전에 Next 프로젝트를 Vercel로 배포한 적이 있어서 딱히 고민하지 않았던 것 같다 ㅎㅎ * 공식 홈페이지: https://vercel.com/ Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized Web. vercel.com Vercel은 깃허브와 연동.. [리액트(React)] 드래그 앤 드롭(drag & drop) // 드래그 앤 드롭, drag & drop - 마우스나 터치스크린을 이용해서 객체를 이동시킬 수 있게 하는 기술 // react-beautiful-dnd - drag & drop 을 구현하기 위한 라이브러리 - DragDropContext, Droppable, Draggable의 세 가지 주요 컴포넌트로 구성되어 있다. DragDropContext : 전반적인 프레임워크 Droppable : 드롭 가능한 영역 Draggable : 드래그 가능한 각 요소 1. 설치 npm install react-beautiful-dnd 타입스크립트를 사용한다면 @types도 추가로 설치한다. npm install --save-dev @types/react-beautiful-dnd 2. DragDropContext 사용.. [리액트(React)] Github page 배포 전에 바닐라 JavaScript로 코딩해서 직접 Github 사이트에서 설정을 통해 배포한 적이 있는데, React는 배포가 훨씬 간편하다. 먼저 gh-pages를 설치해준다. npm install gh-pages 다음으로는 루트 하위에 .env.production 파일을 생성하여 배포 사이트 주소를 적어준다. PUBLIC_URL=https://github이름.github.io/repository명 깃허브 사이트의 주소 규칙은 따로 도메인을 설정하지 않는 한 항상 일정하다. router v6 를 사용하는 경우, basename도 따로 설정해주어야 한다. const router = createBrowserRouter( [routes들], { basename: process.env.REACT_APP_PROF.. [리액트(React)] react-hook-form // react-hook-form - form을 쉽게 조작할 수 있도록 도와주는 React 라이브러리 - 코드를 간결하게 유지할 수 있다. - 불필요한 리렌더링을 줄일 수 있고, validation 체크가 용이하다. 1. 설치 npm install react-hook-form 2. 사용 import { useForm } from 'react-hook-form'; const { register, handleSubmit, formState: { errors }, setError, setValue } = useForm(); const onValid = (data: 타입) => { if(조건) { setError('식별자', { message : '메시지' }) } }; register : 입력 필드(input.. < 1 2 3 4 ··· 22 >
