본문 바로가기

next.js4

[React, Next.js] Zod 라이브러리 추가하고 코드 작성해보자 사용자 선택 옵션을 검사하고로또 결과 응답을 검증하기 위해Zod 라이브러리를 추가했다.Zod가 어떤 라이브러리인지 알아보고코드 작성을 해보자 - 로또 번호 생성 마법진 로또 번호 생성 마법진행운 요소 3개를 선택하면 오늘의 로또 번호와 행운 점수를 만들어주는 사이트입니다.lotto-magic-frontend.vercel.app 1. ZodTypeScript를 위한 스키마 선언 및 데이터 검증 라이브러리이다.데이터가 우리가 원하는 형태와 규칙을 정확히 갖추고 있는지 검사해주는 도구이다.TypeScript는 컴파일 타임에만 타입을 검사해준다.코드가 변환되어 실제로 웹브라우저나 서버에서 실행될 때는 순수한 JavaScript로 동작하기 때문에 타입 검사가 불가하다.만약 서버 API에서 숫자를 .. 2026. 5. 30.

[React, Next.js] TanStackQuery, 설치하고 리액트 코드에 적용하기! 실제로 서버를 운영할 생각이기에서버 상태 관리를 위해TanStackQuery 라이브러리를 넣어볼 생각이다. https://lotto-magic-frontend.vercel.app/ 로또 번호 생성 마법진행운 요소 3개를 선택하면 오늘의 로또 번호와 행운 점수를 만들어주는 사이트입니다.lotto-magic-frontend.vercel.app 1. TanStackQuery서버에서 받아오는 데이터를 관리해주는 라이브러리이다.그 외 데이터 캐싱, 캐시 제어 등 데이터를 쉽고 효율적이게 관리해준다.React Query라는 이름으로 시작하지만 v4부터 Vue나 Svelte 등의 다른 프레임워크에서도 활용할 수 있도록 기능이 확장되며 TanStack Query라는 이름으로 변경되었다.대표적인 기능으로 .. 2026. 5. 12.

[React, Next.js] 리액트의 여러 알림 라이브러리, 그 중 Sonner 라이브러리로 코드 구현하기. 해당 페이지 사용에 몇 가지 규칙이 있다.그 규칙을 어겼을 때, 사용자에게 알리고 싶다.리액트에 사용할 수 있는 라이브러리 중 하나를 선택해사용자에게 규칙을 알려보자! https://lotto-magic-frontend.vercel.app/ 로또 번호 생성 마법진행운 요소 3개를 선택하면 오늘의 로또 번호와 행운 점수를 만들어주는 사이트입니다.lotto-magic-frontend.vercel.app 1. 화면 2. 다양한 알림 라이브러리React-toastify: 가장 인기 있는 라이브러리이다. React 애플리케이션에서 토스트 메시지를 쉽게 구현할 수 있게 해주는 라이브러리이다. 기능이 많고 안정적이다. 기본 스타일이 있어서 커스텀이 많이 필요하지 않을 때 편리하다... 2026. 5. 8.

[React, Next.js] 로또 마법진 사이트 만들기 (2) - 프론트 목업을 위해 MSW 설치하고 관련 코드 작성하기! 이번 프로젝트를 하면서꼭 해보고 싶었던 것 중 하나는 목업이었다.과연 목업이 무엇이며,React는 어떤식으로 목업을 할까? https://lotto-magic-frontend.vercel.app/ 로또 번호 생성 마법진행운 요소 3개를 선택하면 오늘의 로또 번호와 행운 점수를 만들어주는 사이트입니다.lotto-magic-frontend.vercel.app 1. 환경구성ReactNext.jsWebStormTypeScript 2. 목업(Mocking)개발에서의 목업은 실제 제품이나 API가 아직 준비되지 않았을 때, 그 역할을 대신할 가짜 데이터나 환경을 만드는 것을 의미한다.프론트엔드 개발 시 백엔드 API 서버가 완성될 때까지 기다리지 않고, 미리 정의된 데이터 구조를 이용해 U.. 2026. 4. 30.

이전 1 다음

티스토리툴바