[Next.js 프로젝트] React Hook Form 과 Zod 로 회원 가입 폼 만들기

react hook from 과 zod 를 사용해서 회원가입 폼을 만들었다. React hook Form 설치yarn add react-hook-form Zod 설치yarn add zod// react hook form 이랑 같이 사용할 때 설치yarn add @hookform/resolvers 코드"use client";import { FieldValues, useForm } from "react-hook-form";import { z } from "zod";import { zodResolver } from "@hookform/resolvers/zod";import Link from "next/link";import { useRouter } from "next/navigation";import { si..

• format_list_bulleted 🔥 프로젝트
• · 2024. 10. 15.
• textsms

[Next.js 로 롤 정보 사이트 만들기] footer 위치 이슈

푸터의 위치를 원하는대로 배치해보자. 챔피언 목록처럼 데이터가 많아서 스크롤이 생길 경우 푸터가 자연스럽게 아래로 가게 되는데, 챔피언 상세 화면에서 스크롤이 생길 정도로 데이터가 많지 않으면 푸터가 중앙에 자리 잡고 있는 현상이 발생했다. 😮‍💨 문제점목록은 푸터가 내가 원하는 대로 알아서 아래에 잘 자리 잡고 있다. 그러나. . 챔피언 상세 페이지에서는...데이터의 양이 적기 때문에 스크롤이 생기지 않고 애매한 중앙에 위치해 있는 상태가 되었다. 내가 원하던 것은.. 스크롤이 생기면 스크롤이 끝나고 푸터가 보이고, 데이터가 별로 없어서 스크롤이 생기지 않는다면 뷰포인트 하단에 푸더가 보이도록 하는 것이다. 이를 해결해 보자. 변경 전 코드 홈 ..

• format_list_bulleted 🔥 프로젝트
• · 2024. 10. 5.
• textsms

[Next.js] 사전렌더링 이해하기

Next.js 는 사전렌더링을 지원한다. 이는 사용자의 요청에 서버에서 이미 만들어진 HTML 을 응답하는 렌더링 방식이다. 이 사전렌더링이라는 것은 왜 생겼고, 사전렌더링을 함으로써 이점은 무엇일까? 리액트의 CSR 과 비교해서 이해해 보면 리액트의 어떠한 문제점을 해결하기 위해 사전렌더링이 나왔는지 이해할 수 있다. 그러면 리액트의 CSR 과 비교하여, 리액트의 어떠한 문제점을 해결하기 위해 사전 렌더링이 나왔는지 알아보자! 리액트에서 렌더링 방식 (CSR)리액트의 렌더링 방식은 CSR 이다. 구체적인 순서는 다음과 같다.사용자가 브라우저를 통해 접속 요청을 한다.리액트 웹 서버는 빈 index.html 파일을 브라우저에 전달한다.브라우저는 빈 화면을 사용자에게 전달한다. (이 때, 사용자가 보는 화..

• format_list_bulleted Next.js
• · 2024. 9. 27.
• textsms

[Next.js 로 롤 정보 사이트 만들기] API KEY 발급 후 환경변수 설정

키 발급riotgames developer 에 접속하여 Key 를 받아보자. 로그인 완료 후 MY ACCOUNT - DASHBOARD 에서 API KEY 를 발급한다. 환경변수루트 경로의 .env.local 에 발급받은 key 를 넣는다. NEXT_PUBLIC_RIOT_API_KEY=RG...-5.....-45......d......위와 같은 방식으로 key 를 넣어주면 완료

• format_list_bulleted 🔥 프로젝트
• · 2024. 9. 27.
• textsms

[Next.js 로 롤 정보 사이트 만들기] 프로젝트 생성 및 레이아웃 구성

프로젝트 생성Next.js 프로젝트 생성npx create-next-app@latest위와 같이 명령어를 입력한 후  필요한 옵션을 선택 후 프로젝트 생성! 생성한 프로젝트를 실행하는 방법은 react 와 동일하다. yarn dev 를 입력해 주면 된다! 레이아웃 설정내가 만들 페이지는 모든 페이지에 공통으로 있는 레이아웃이 필요하고 그 레이아웃에 페이지를 이동하는 링크가 필요하다. root 의 layout.tsximport type { Metadata } from "next";import "./globals.css";import Link from "next/link";export const metadata: Metadata = { title: "Create Next App", description:..

• format_list_bulleted 🔥 프로젝트
• · 2024. 9. 25.
• textsms

[typescript] todo list 만들기

타입스크립트를 처음 해보는데.. 처음 공부하면서 투두리스트 만들기를 해보았다. 프로젝트 생성프로젝트 생성yarn create vite ts-todo-list --template react-ts json-server 설치yarn add json-server 전체 코드todos.tsexport type Todo = { id: string; title: string; completed: boolean;};/** 조회 */export const getTodos = async (): Promise => { const res = await fetch("http://localhost:4000/todos"); const data = await res.json(); return data;};/** 등록 */e..

• format_list_bulleted Typescript
• · 2024. 9. 25.
• textsms