8장 마지막 강의 시 오류

소스 코드를 다시 확인했을때 문제는 없어 보입니다. 아래 그림처럼 refresh 처리된 후에 다시 list를 호출하고 있습니다. (사진)해당 코드는 혹시 몰라서https://drive.google.com/drive/folders/10Td0CHoQdEwBIMLAt57YCsjEapp-uOmV?usp=drive_link에 올려두었습니다. (Access Token : 10, Refresh Token: 20)으로 되어 있습니다. 혹시 필요하시면 본인 코드를 링크에 올려두시고 댓글 남겨두시기 바랍니다(버전 문제가 아닐까 싶습니다만 코드를 봐야 확인가능하긴 합니다.).

8장 마지막 강의 시 오류

제가 다시 점검 해보겠습니다. 예제 소스 코드 외에 작성하신 코드를 cookie_00@naver.com 로 링크등을 보내주시면 감사하겠습니다.

Actions formData 질문.

수정 화면에서 기존 파일들은 업로드 되는 것이 아니라 화면에서 남겨진 파일이름들만 문자열로 필요하고 사용자가 새로운 파일을 추가할 수도 있습니다. updatedFormData 안에는 'fileNames'라는 이름으로 기존의 파일들 중에 남겨진 파일들의 이름만을 확인해서 fileNames로 담기 때문에 실제 파일은 아니고 문자열의 배열입니다. 아래쪽의 코드는 새로운 첨부파일을 처리하기 위해서 files라는 이름으로 전달되는 데이터들이 진짜 파일인지까지 확인한 후에 FormData에 파일을 추가하는 로직입니다.

revalidatePath('/product/catalog/1')

네 서버에서 새로운 데이터를 가져오게 합니다

혹시 뭐가 문제인지 알 수 있나요?

JDK설정, 그레이들 세팅을 변경해 보세요.그레이들은 기본세팅으로 되어 있을텐데 Intellij로 변경하시고 그레이들을 새로고침하신후에 재시작해 보세요 JDK설정도 project structure메뉴에서 체크해 보시기 바랍니다 해결 안되시면 원격제어 가능하신 시간 알려주세요

챕터: React-Router 설정

제가 소스코드 제공때문에 그렇게 한 것 뿐이라 편하신대로 하시면 됩니다

이미지 변환

혹시 Next.js 16버전으로 개발 중이라면 http://localhost:8080 경로가 'private ip ...'로 처리되면서 이미지가 출력되지 않는 상황이 발생합니다. Next.js16에서는 아래의 rewrites( )를 추가하시고 import type { NextConfig } from "next"; const nextConfig: NextConfig = { /* config options here */ images: { remotePatterns: [ { protocol: 'http', // 이미지 프로토콜 (http, https) hostname: 'localhost', // 이미지 호스트 이름 (IP 주소 또는 도메인) port: '8080', // 포트 번호 (필요한 경우) pathname: '/**', // 허용할 경로 패턴 (모든 경로 허용 시 '/**') }, ], }, async redirects() { return [ { source: '/product', // 사용자가 접근하려는 경로 destination: '/product/catalog/1', // 리다이렉트될 경로 permanent: true, // 영구적인 리다이렉트 (308 Permanent Redirect) }, ]; }, async rewrites() { return [ { source: '/api/backend/:path*', // 사용자가 접근하려는 API 경로 destination: 'http://localhost:8080/:path*', // 내부적으로 매핑될 백엔드 서버 경로 }, ]; }, experimental: { serverActions: { bodySizeLimit: '10mb' } }, }; export default nextConfig; 의 링크는 와 같이 경로를 수정해 주세요. 이번주에 Next.js 16버전으로 변경된 코드를 업로드할 예정입니다.

todoPagingCP.tsx에서

네 맞습니다. 만일 1분마다 목록을 갱신하고 싶다면 아래 처럼 설정을 변경할 수 있습니다.const res = await fetch('http://localhost:8080/api/todos/list?page=${page}', { next: { revalidate: 60 }, // 60초 동안 캐싱 });강의에서는 자주 변하지 않는 경우와 변경이 잦은 경우에 따라 설정하는 방법을 모두 설명합니다.

21강 이미지 출력이 안됩니다.

네.. 강의 제작시에 최신 버전이 15였기 때문에 .. 16버전은 아닙니다(하지만 최근에 문제가 생겨서 16버전으로 업데이트하고 있는 중에 질문하셨네요). 혹시 말씀하시는 내용이아래 코드에 있는 images 설정을 의미하시는 걸까요?소스 코드내에도 적용되어 있겠지만 아래와 같은 설정이 필요합니다. /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: 'http', // 이미지 프로토콜 (http, https) hostname: 'localhost', // 이미지 호스트 이름 (IP 주소 또는 도메인) port: '8080', // 포트 번호 (필요한 경우) pathname: '/**', // 허용할 경로 패턴 (모든 경로 허용 시 '/**') }, ], }, experimental: { // 'experimental' 아래에 serverActions를 정의해야 합니다. serverActions: { bodySizeLimit: '40mb', // 원하는 크기로 조절하세요 (예: '50mb', '100mb') }, }, async redirects() { return [ { source: '/product', // 사용자가 접근하려는 경로 destination: '/product/catalog/1', // 리다이렉트될 경로 permanent: true, // 영구적인 리다이렉트 (308 Permanent Redirect) }, ]; }, }; export default nextConfig;

백)TODO관련

죄송합니다. 질문을 받고 다시 확인해 보니 스프링 부트 강의에서는 titie, content 로 작성되어 있는데 리액트 강의에서는 title,writer로 되어 있는 것을 확인했습니다. 리액트 부분을 25년도에 새로 개정하는 과정에서 설명이 누락된 것을 확인했습니다. (빠른 시간내에 수정하겠습니다.). 변경된 부분은 다행히 각 파트에 제공되는 코드에는 writer로 되어 있으니 주어진 소스 코드를 통해서 실행하실 수 있을 듯 합니다. 다시 한번 불편을 드려서 죄송합니다.