Next.js (23) 썸네일형 리스트형 [Next.js] Loading UI and Streaming loading.js로 로딩 상태 표현loading.js를 폴더 안에 생성하면 layout.js를 제외한 page.js를 suspense로 감싼 형태로 로딩 상태를 표현한다. Streaming with Suspense스트리밍은 각 컴포넌트를 하나의 청크로 간주할 수 있다.컴포넌트를 각각 Suspense로 감싸고 fallback을 사용하여 모두 로딩되기 전 대체되는 UI가 나타날 수 있게 한다. 렌더링 단계1. 서버에서 데이터를 모두 패칭한다.2. 서버가 페이지의 HTML을 렌더링한다.3. 페이지의 HTML, CSS 및 JavaScript가 클라이언트로 전송된다.4. 생성된 HTML 및 CSS를 사용하여 비대화형 사용자 인터페이스가 표시된다.5. 마지막으로, React는 사용자 인터페이스에 hydrate하여.. [Next.js] Error Handling error.js 파일로 중첩된 경로의 runtime errors를 처리중첩된 경로에서 error.js로 runtime errors를 처리할 수 있다.에러가 발생한 상위 컴포넌트는 상태를 유지하며, 상호작용할 수 있다. React Error Boundary를 자동으로 생성하며 내부의 모든 컴포넌트에 대한 오류를 처리한다.error.js 내에 에러가 발생했을 때의 UI를 생성하면, 에러가 발생 시 fallback되며 error.js가 리랜더링된다. Layout, Template에서의 error.jsLayout과 Template의 오류 처리는, 같은 수준의 폴더에 있는 error.js가 하지 않는다.그 결과 내부의 컴포넌트 하나가 오류를 반환해도 다른 페이지로 이동을 수월하게 할 수 있다.만약 오류를 처리하고.. [Next.js] Linking and Navigating Nest.js의 라우팅 방법Next.js는 새로운 라우트에 이동할 때 가장 위쪽으로 이동하며, 뒤로가기 또는 앞으로가기로 이동했을 때 스크롤의 위치를 기억한다. 1. Linkprefetching을 제공한다.클라이언트 측 이동(client-side navigation)에 해당한다.* 추천하는 항목이다.* 특정 id로 스크롤하고 싶다면 URL이나 href에 #로 표시하여 나타내면 된다.* 스크롤의 위치를 기억하게 하고 싶지 않다면 Link, router.push(), router.replace()에서 scroll=false로 초기값을 지정한다. 2. useRouter()클라이언트 컴포넌트에서 사용한다.이벤트 핸들러에서 사용해야 할 때 사용한다. 3. redirect function307번이 기본값, 서버에서.. [Next.js] Layouts and Templates Layout레이아웃은 여러 라우트가 공유하는 UI다.페이지와 같은 위치에 있으면 페이지를 감싸며 생성된다.상위폴더와 하위폴더가 모두 레이아웃이 있는 경우 중첩되어 생성될 수도 있다. 레이아웃은 처음 랜더링 후 다시 랜더링되지 않는다.따라서 중첩되는 레이아웃이 있어도 레이아웃간 데이터를 전달할 수 없다. layout.js 파일에서 React 컴포넌트를 내보내 레이아웃 UI를 생성한다. Root Layout모든 라우트에 적용되는 레이아웃으로 필수적으로 포함해야 한다.또한 html, body tag를 포함해야 한다.Root Layout 이외에는 html, boty tag를 포함할 수 없다.*Layout은 server, client Compnent에 모두 적용할 수 있으나, Root Layout만은 serve.. [Next.js] Routing Next.js에서 라우트를 생성하는 방법홈페이지를 만들다보면 페이지 전환이 필요한 경우가 있다.이때 필요한 것이 라우터다. 라우터는 둘 이상의 패킷 전환 네트워크 또는 서브네트워크를 연결하는 장치를 말한다.Next.js 프로젝트에서는 홈페이지에서 페이지를 이동하는 것에 해당한다. 페이지의 경로는 어떻게 생성될까?React에서는 경로를 일일히 지정해주었지만 Next.js에서는 경로를 설정하는 법칙이 정해져 있다. Next.js의 프록젝트에서 app 폴더 아래에 생성되는 것은 라우트라고 간주된다.app 폴더 아래의 구조에 따라 폴더명을 segment로 URL 경로가 자동으로 생성, 할당된다.페이지는 page.js의 형식으로 생성되어야 하며, page 이외의 다른 이름으로 생성되면 안된다.페이지의 파일 확장자.. [Next.js] 최종발표회 피드백(2024.05.01) pdf로 다운로드 될 수 있다.prefetch 사용 로컬스토리지에 저장, 기반으로 수파베이스에 저장되었음이메일: sntp 서버를 다루는 경우도 많아서 깊게 파보면 좋다. 낙관적인 업데이트: 좋아요 또는 댓글, 티가 바로 난다. 리엑트 19버전 이후로는 훅이 생겼다. 뭔말이지조퀴즈와 게임, 소통 커뮤니티객관식, 주관식 퀴즈 만들기배경음악 볼륨 조절관리자 모드의 게시글 관리new Audio로 오디오 실행supabase 크라운? 삭제하는 기능이 있다. 이미지 CDN에 저장연계된 콜이 있으면 마지막 콜이 취소되면 다 취소되는 롤백 전략?내려오는 것은 interval을 usestate로 생명력 5개윈도우 높이에 맞게 땅에 닿으면 생명이 1씩 감소하게 구현 믿고조유저데이터를 기반으로 불러오는 데이터가 많아서 하이드.. [Next.js] Throttling and Debouncing 짧은 시간 여러번 이벤트가 발생했을 때 서버의 요청을 제한해서 서버의 부담을 줄이는 방법이다. Throttling이벤트를 단위로 그룹화하여 호출하는 것 코드 실행 순서1. onClick으로 throttle 함수가 실행된다.2. timerId가 null이므로 if는 통과한다.3. setTimeout이 실행되면서 timerId가 생성된다.4. 다시 한번 클릭하면 timerId가 이미 있으므로 return되어 빠져나간다.5. setTimeout의 만료후 timerId = null이 실행된다.6. 다시 요청이 들어오면 1번부터 반복하여 실행된다. 코드 실행 순서1. onClick으로 throttle 함수가 실행된다.2. 함수가 클로저 함수이므로 외부의 timerId의 null값을 받아오면서 if는 통과한다.. [Next.js] 리엑트 컴포넌트 코드실행순서 componentDidMount, componentDidUpdate, componentWillUnmount는 useEffect에서 실행된다.componentDidUpdate는 의존성 배열에 따른 업데이트에 해당된다.componentWillUnmount는 useEffect의 return문에 해당되며 unmount 되기 직전에 실행된다. useEffect의 위치리턴문 바로 위에 useEffect를 쓰는 것이 좋다. 읽기가 더 편한 구조가 된다.왜냐하면 랜더링 될 때는 useEffect가 실행되지 않고, 랜더링 후 useEffect가 실행되기 때문이다. 처음 랜더링 될 때처음 랜더링 되면 위에서 아래로 읽으면서 실행시킨다. 이것은 render까지의 과정에 해당된다.return까지 모두 실행된 직후 useEff.. [Next.js] 새로고침 새로고침하여 fetch로 데이터를 다시 불러오게 하고 싶었다. - 새로고침을 하고 싶은데 클릭한 부분만 새로고침 기능이 작용해야 했다. - 처음 찾은 것은 이벤트 리스너로 click 이벤트를 컨트롤 하는 것이다. - 이 경우 useState로 boolean 값을 할당한 뒤 클릭하면 useEffect 안에서 리로드 되면서 false로, 버튼을 클릭하면 true로 변경된다. - useEffect 안에 return 문으로 false로 변경해주기 때문에 이벤트가 끝나면 false로 고정되었을 것이다. - 그러나 true로 변경되어도 바로 새로고침이 되지 않았고, 새로고침 기능을 추가하기 위해 useEffect 부분을 무효화하면 화면 어디를 클릭하든 새로고침이 되었다. - 그래서 useState를 거치지 않고 바.. [Next.js] tailwindcss className에서 index 사용 - 3개의 카드가 번갈아 나오는 회전목마(carousel) 형태를 tailwind css의 className에 index를 page 조건으로 주면 카드가 나오기는 한다. - 그러나 index 결과의 규칙을 알 수 가 없다. index>page로 입력하고 page를 1을 넣으면 index가 0만 나올것 같지만.. 0,1,2가 나온다. - page * 3index는 카드가 안 나올것 같지만.. 나온다. - page*3을 하고 조건을 두개 걸면 세개만 나올줄 알았는데 아니다. - map에서 if 조건으로 정보를 뿌려주는 것으로 변경하였다. - 해당 내용은 map의 공식문서, tailwind css의 공식문서에서 발견하지 못했다. - 적절한 활용 방법이 아니라서 그런 것으로 보인다. 이전 1 2 3 다음
