codinghatso

-ai를 사용해 개념정리 했음을 공지합니다.- 이번 장에서 배울 내용* 사용 방법eslint-plugin-jsx-a11y Next.js와 함께 접근성 모범 사례를 구현합니다.* 서버 측 양식 검증을 구현하는 방법.* 반응 사용 방법useActionState 양식 오류를 처리하여 사용자에게 표시합니다.useActionState 접근성이란 무엇인가 - What is accessibility?접근성은 장애인을 포함한 모든 사람이 사용할 수 있는 웹 애플리케이션을 설계하고 구현하는 것을 말합니다.키보드 내비게이션, 시맨틱 HTML, 이미지, 색상, 동영상 등 다양한 분야를 다루는 방대한 주제입니다.이 과정에서는 접근성에 대해 자세히 설명하지 않습니다.Next.js에서 제공하는 접근성 기능과 애플리케이션의 접근성..

이번 장에서 배울 내용* 스페셜 사용 방법error.tsx 경로 세그먼트에서 오류를 발견하고 사용자에게 폴백 UI를 보여주기 위해 파일을 작성합니다.* 사용 방법notFound 함수 및not-found 404개의 오류를 처리할 파일입니다(존재하지 않는 리소스의 경우).next.js에서 에러 핸들링을 어떻게 하는지 배운 챕터챕터를 시작하면서 데이터베이스와 관련된 에러는 치명적일 수 있기 때문에 try catch문을 사용하는 걸 권장한다.Error Handling 2가지 개념을 소개한다.error.tsx 와 not-found.tsx 이다.점차 폴더 기반 시스템에 익숙해지는 중이라면 이해하기 쉬울 것이다.우선 invoices 폴더 내의 error를 관리하는 게 목적이니 해당 폴더의 자식으로 error.tsx ..

-ai를 사용해 개념정리 했음을 공지합니다.- invoices page에서 invoices 생성, 업데이트 및 삭제 기능을 추가하는 작업을 진행할 것이다.이번 장에서 배울 내용* React Server Actions란 무엇이며, 이를 사용하여 데이터를 변경하는 방법입니다.* 양식 및 서버 구성 요소 작업 방법.* 현지인과 협력하는 모범 사례 FormData 객체, 유형 검증 포함.* 클라이언트 캐시를 다시 검증하는 방법 revalidatePath API.* 특정 ID로 동적 경로 세그먼트를 만드는 방법. 📌 React Server Actions 정의React Server Actions는 Next.js에서 서버에서 직접 실행할 수 있는 비동기 함수를 의미해요.이를 사용하면 클라이언트에서 서버로 데이터를 ..

-ai를 사용해 개념정리 했음을 공지합니다.- invoices page를 완성하는 챕터입니다. invocies page에는 검색기능과 6개의 고객 정보를 담는 테이블 6개를 넘어서면 다음 page의 데이터를 가져오는 Pagination 기능 총 3가지를 구현합니다.검색 원리 분석/dashboard/invoices?page=1&query=pending URL쿼리를 객체로 묶어 보면 이렇게 표시할 수 있다.{page: '1', query: 'pending'}.'use client';import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';import { useSearchParams, usePathname, useRouter } from 'next/..

-ai를 사용해 개념정리 했음을 공지합니다.- 📌 Next.js의 부분 프리렌더링 (Partial Prerendering, PPR)**부분 프리렌더링(Partial Prerendering, PPR)**은 Next.js 14에서 도입된 실험적 기능으로,정적(Static) 콘텐츠와 동적(Dynamic) 콘텐츠를 한 페이지에서 동시에 활용할 수 있도록 해주는 새로운 렌더링 방식이에요.✅ 기존 렌더링 방식의 문제점Next.js에서는 기존에 페이지를 렌더링 할 때 두 가지 방식을 사용했어요.정적 생성(Static Generation, SSG)빌드 시 HTML을 생성하여 빠르게 제공.데이터가 거의 변경되지 않는 페이지에 적합.하지만, 실시간 데이터가 필요할 경우 사용하기 어려움.서버 사이드 렌더링(Server-S..

-ai를 사용해 개념정리 했음을 공지합니다.- 스트리밍 (Streaming)스트리밍이란 컴포넌트들을 각각의 덩어리(Chunks)로 묶어 분류하여 병렬처리하는 방식이다. 일반적으로 서스펜스와 데이터 가져오기 작업 시 좋은 관행으로 "데이터 가져오기를 필요한 구성 요소로 이동"을 말할 수 있다.데이터를 필요한 구성 요소로 이동시키면 더 세분화된 서스펜스 경계를 만들 수 있습니다. 이를 통해 특정 구성 요소를 스트리밍 하고 UI가 차단되는 것을 방지할 수 있다. Next.js 에서는 loading.tsx라는 특별한 파일을 생성할 수 있습니다. 이 예약된 파일은 페이지를 로딩하는 동안 사용자에게 보여줄 화면을 정의할 수 있습니다.참고로 정적인 UI 이 과정에서는 SideNav 같은 요소는 즉시 표시됩니다.📌 ..

gitignore 파일에 제외하라고 했던 파일들이 state에 감지되고 있나요?감지되고 있다면 ignore 되지 않고 있다는 뜻입니다.여러 가지 이유 중에 가장 유력한 건 해당 파일이 이미 git repo에 등록되어 감지되는 것입니다.이를 해결하기 위해서는 캐시 삭제 후 다시 추가하기입니다.git rm --cached -r .git add .git commit -m "Apply .gitignore"위 커맨드를 입력하고 push 하면 gitignore 파일이 다시 정상 작동하는 모습을 볼 수 있을 것입니다. 이 방법으로 해결이 안 되었다면. gitignore 파일이 요구하는 문법 기준을 잘 지켰는지 확인해 보시길 바랍니다.

제목 : 언어 모델 완성한 카카오, 멀티모달 모델도 상반기 성능 공개…“비용 효율화 초점”저자 : [전자신문 변상근 기자 ] sgbyun@etnews.com출처 : https://www.etnews.com/20250304000370?mc=ns_003_00003 언어 모델 완성한 카카오, 멀티모달 모델도 상반기 성능 공개…“비용 효율화 초점”카카오가 올해 상반기 텍스트 외에도 이미지·음성을 인식할 수 있는 멀티모달 생성형 인공지능(AI) 모델을 공개한다. 또 연내 카나나 모델에 추론 성능도 업데이트 할 계획이다. 카카오는 최근www.etnews.com용어정리 멀티모달 : Multimodal Model은 텍스트, 이미지, 오디오, 비디오 등 다양한 유형의 데이터(모달리티)를 함께 고력하여 서로의 관계성을 학..