개발 노트

https://velog.io/@andy99/Next.js-App-Router-Data-Fetching2 Next.js App Router - Data Fetching(2)What is Next.js?velog.io> 공식홈페이지 번역 및 설명해놓은 자료

문제 원인 : next build 시에 typeError fetch failed가 발생하면서 빌드 실패 해결방법: 동적으로 배포해야할 부분에 다음 코드 추가하기 export const dynamic = "force-dynamic"; 참고 https://kyechan99.github.io/post/memo/nextjs-fetch-failed Next.js 13 배포시 TypeError fetch failed Error occurred prerendering page, TypeError fetch failed kyechan99.github.io

1. 사운드기능을 하는 컴포넌트 만들기 import { useRef, useEffect } from 'react'; import { useModalStore } from '@/store/useModalStore'; export const AlarmSound: React.FC = () => { const audioRef = useRef(null); const { play, togglePlay, alarmLevel } = useModalStore(); useEffect(() => { let intervalId: ReturnType | null = null; const playAudio = () => { if (audioRef.current) { // 오디오 로딩 대기 후 재생 const playPromise..

app router공식문서 한글화 정리 https://velog.io/@asdf99245/Next.js-app-router-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C-%EC%A0%95%EB%A6%AC#fetch-api Next.js app router 공식문서 정리 지난번엔 next.js pages router 공식문서 정리글을 올렸다. 이번에는 최근에 stable이 된 app router 공식문서의 핵심 내용에 대해 번역 및 정리해보았다. velog.io 서버컴포넌트에서 데이터 prop으로 가져오기 https://velog.io/@yoonvelog/React-Server-Component React Server Component 한 페이지에서 여러 정보를 보여주는 컴포넌트를 개발..

배열의 길이를 이용하여 새글이 추가됐는지를 추적하고자 함 1. useState를 이용하여 배열의상태와 알람이 켜졌는지를 추적함 const [allErrors, setAllErrors] = useState([]); const [isAlarmChecked, setIsAlarmChecked] = useState(true); 2. useEffect를 이용하여 배열의 정보가 업데이트가 되는 것을 추적 useEffect(() => { const farmCodes = Object.keys(groupedMessages); let tempAllErrors:{[key:string]:any}[] = []; farmCodes.forEach(farmCode => { const { errorList, robot, farmName..

1. 페이지 정보를 로컬스토리지에 저장하려고 하는데 라우팅을 사용하지않고 좌우 컴포넌트를 별개로 두고 zustand 에 저장값을 넣어서 적용시킴 import {create} from 'zustand'; type Store = { leftComponent: string | null; rightComponent: string | null; activeButton: string | null; setLeftComponent: (name: string) => void; setRightComponent: (name: string) => void; setActiveButton: (name: string) => void; }; export const usePageStore = create((set) => ({ left..