codinghatso

지금까지 애플리케이션에는 홈페이지만 있습니다. 레이아웃과 페이지로 더 많은 경로를 만들 수 있습니다. 이번 장에서 배울 내용 * dashboard routes를 만들고 file-system routng을 사용해 봅니다. * 새 경로 세그먼트를 만들 때 폴더와 파일의 역할을 이해합니다. * 여러 대시보드 페이지 간에 공유할 수 있는 중첩 레이아웃을 만듭니다. * colocation, partial rendering, 그리고 the root layout이 무엇인지 이해합니다. Nested routing 중첩 라우팅 Next.js는 폴더가 중첩된 경로를 만드는 데 사용되는 파일 시스템 라우팅을 사용합니다. 각 폴더는 URL segment에 매핑되는 route segment를 나타냅니다. 라우팅 페이지 만들기 ..

이번 장에서 배울 내용 * 사용자 정의 글꼴을 추가하는 방법 next/font. * 이미지를 추가하는 방법 next/image. * Next.js에서 글꼴과 이미지가 최적화되는 방법. 글꼴을 최적화하는 이유 글꼴 파일을 가져와서 로드해야 하는 경우 성능에 영향을 미칠 수 있습니다. Cumulative Layout Shift 줄여서 CLS라고 불리는 레이아웃 변경 횟수는 안정적인 Core Web Vitals 측정항목이다. 이는 시각적 안정성을 측정하는 데 있어 중요한 사용자 중심 측정항목이다. 예를 들면 링크나 버튼을 탭 하려고 하는데 손가락이 닿기 직전에 링크가 이동하여 다른 것을 클릭하게 되는 피해가 일어날 수 있습니다. 글꼴의 경우 브라우저가 처음에 텍스트를 대체(fallback) 하거나 system..

개요 스타일링 : Next.js에서 응용프로그램 스타일을 지정하는 다양한 방법. 최적화 : 이미지, 링크 및 글꼴을 최적화하는 방법. 라우팅 : 파일 시스템 라우팅을 사용하여 중첩 레이아웃 및 페이지를 만드는 방법 데이터 가져오기 : Vercel에서 데이터베이스를 설정하는 방법 및 가져오기 및 스트리밍 모범 사례. 검색 및 페이지 지정 : URL Search Params를 이용한 Search 및 Pagination 구현 방법 데이터를 변형하는 중 : React Server Actions를 사용하여 데이터를 변경하고 Next.js 캐시를 다시 확인하는 방법. 404 오류를 찾을 수 없습니다. 양식 점증 및 접근성 : 서버 측 양식 검증 방법 및 접근성 향상을 위한 팁 인증 : 및 미들웨어를 사용하여 응용프..

https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form library Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com React-Hook-Form 라이브러리를 사용하는 이유 직관적인 기능을 제공 패키지 크기가 작다 재렌더링 수를 최소화하고 유효성 검사 계산을 최소화 종속성이 없는 작은 라이브러리 직관적인 UI 코드의 양이 줄어든다. import React from "react"; import { useForm } from "react-hook-form"; const HeaderContent ..

발생한 문제 styled-components에서 styled component에 전달된 props 중에서 HTML 요소에 해당하지 않는 (props로 전달되지 않는 isDarkMode와 같은 속성이 감지됐다.)는 경고 메시지를 만나서 해결하려고 합니다. 즉, 해당 속성은 브라우저에 직접 적용되지 않는데도 전달되고 있다는 뜻입니다. Transient props styled-components에서 styled component에만 전달되고 HTML에는 전달되지 않는 props를 생성할 수 있습니다. 이를 위해서는 '$' 접두사를 사용하면 됩니다. 결론은 프롭이 스타일시트에만 필요하고 DOM으로 프롭을 전달할 필요가 없다면 '$'명시적으로 붙여서 사용할 필요가 있다는 것입니다. 해결한 코드 const Todo..

react를 사용해서 개인적으로 하는 첫 프로젝트입니다. react 공문서를 학습하고, 이해하기 힘들거나 정보가 마음에 안 들 때는 ChatGPT를 활용해서 학습했습니다. 그리고 글이 맥락이 없을 것입니다. 개발하면서 생각나는 대로 끄적이는 낙서장이니 가볍게 구경하고 가시면 될 것 같습니다. 감사합니다. 1. flexbox 같은 css 기능이 왜 적용이 안 되지? react로 개발을 하면서 javascript를 사용하듯이 개발하면 여러 문제를 만나는 것 같습니다. css에서 직접 사용 /* YourComponent.css */ .flex-container { display: flex; /* 다양한 Flexbox 속성을 여기에 추가하세요 */ } /* 각각의 Flex Item에 대한 스타일 */ .flex..

사전 설정 Custom Instructions 구체적인 질문을 통해 답 추출하기 역할 부여하기 보이스 활용하기 자료 리서치 활용법 새로운 언어를 학습할 때 내가 지금 까지 공부했던 내용을 사전설정을 통해 AI에게 알려주고 학습한다면, 나의 경험을 활용한 학습이 가능할 것입니다. 새로운 개념을 학습할 때 가이드라인을 받아 볼 수 있습니다. 보이스는 음성(육성)으로 소통하면서 질문하는 훈련을 할 수 있습니다. 문서 요약이나 첨삭을 AI를 활용해 작업할 수 있습니다.

전체적인 틀 AttendanceBook.js import React, { useState, useReducer } from "react"; const reducer = (state, action) => { } const initialState = { } function AttendanceBook(){ const [name, setName] = useState(""); const [] = useReducer(reducer, ); return ( 추가 ) } export default AttendanceBook; 구현 import React, { useState, useReducer } from "react"; import Student from "../components/Student"; //reducer..