zk202308a5410

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

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

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

챕터: React-Router 설정

혹시 Next.js 16버전으로 개발 중이라면 <a target="_blank" rel="noopener noreferrer nofollow" href="http://localhost:8080">http://localhost:8080</a> 경로가 'private ip ...'로 처리되면서 이미지가 출력되지 않는 상황이 발생합니다. &nbsp;Next.js16에서는 아래의 rewrites( )를 추가하시고 <pre><code class="language-typescript">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;
</code></pre><Image>의 링크는 &nbsp;<pre><code class="language-typescriptreact"> <Image
 src={`/api/backend/s_${fileName}`}
 alt={`${product.pname} thumbnail ${fileName}`}</code></pre>와 같이 경로를 수정해 주세요.&nbsp;&nbsp;이번주에 Next.js 16버전으로 변경된 코드를 업로드할 예정입니다.

이미지 변환

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

todoPagingCP.tsx에서

네.. 강의 제작시에 최신 버전이 15였기 때문에 .. 16버전은 아닙니다(하지만 최근에 문제가 생겨서 16버전으로 업데이트하고 있는 중에 질문하셨네요). &nbsp;혹시 말씀하시는 내용이아래 코드에 있는 images 설정을 의미하시는 걸까요?소스 코드내에도 적용되어 있겠지만 아래와 같은 설정이 필요합니다.&nbsp;<pre><code class="language-javascript">/** @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;
</code></pre>

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

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

백)TODO관련

저도 sidecar로 연결하는 상황에서 영상이 좀 끊기거나 한다는 ..그런 얘기를 들어본 적이 있긴 합니다만.. 죄송하지만 정확히 원인이 뭐라고 말씀드리긴 어렵네요.그런데 처음에는 잘 나오다가 중간 중간 잘 안나오는 증상은아마도 메모리를 많이 사용하면서 생기는 문제가 아닐까 생각해 봅니다.&nbsp;

맥북프로 보조모니터로 아이패드 사용시 강의 화면 미출력

다른 포트를 사용하셔도 문제가 되진않습니다만 나중에 데이터베이스 연결시에도 동일한 번호를 사용하셔야 하는 부분만 주의하시면 됩니다. 강의 중 3306부분만 조심하시면 됩니다.&nbsp;

마리아 db  설치중 포트를 이미 사용중이라고 합니다

좋은 질문 감사합니다. &nbsp;페이징 처리를 위한 카운트 쿼리(이하 카운트쿼리) 의 근본적인 문제는 거의 동일한 쿼리를 한 번 더 실행한다는 사실입니다. 그리고 이 과정에서 잘못하면 테이블 전체에 대한 스캔이 일어나게 됩니다(실제로 공격시에도 이상한 단어 검색을 유도하기도 합니다.). &nbsp;하지만 매번 달라지는 검색 조건 때문에 카운트 쿼리를 피할 수도 없습니다. 그런데 곰곰히 생각해 보면 강의에서도 언급했듯이 최근의 웹은 마지막 페이지는 노출하지 않는다는 특징이 있습니다. -- 그러면 마지막 페이지까지는 필요없게 됩니다. &nbsp;쿼리가 2번 필요하다고 생각들 하지만 사실 페이징 처리에 필요한 양은 (1페이지에 10개씩 화면에 페이지 번호가 10개 출력한다고 가정) 100 + 1 개 이상인지 입니다. 1개가 추가되는 이유는 마지막 페이지 번호 뒤에 붙는 '다음' 페이지로 이동하는 링크 때문입니다. &nbsp;만일 현재 페이지 3 페이지이고 101개의 데이터가 존재한다면? 페이징 처리가 온전히 가능해 집니다. 유사하게 11페이지라면 201개의 데이터만 있다면 됩니다. 201개 중에서 최종적으로 101개의 데이터만 반환된다면 화면에 페이징 처리가 가능합니다. &nbsp;한번의 쿼리를 통해 101개의 데이터를 조회하므로 실제 데이터와 추가적인 카운트 쿼리를 없애서 성능향상을 기대할 수 있습니다. 특히 검색의 경우는 1번 쿼리를 실행하는것과 2번 실행하는 것은 차이가 엄청납니다). 이 방식 역시 페이지 번호가 1000번 이상 넘어가면 성능이 저하될 수 있긴 합니다(때문에 은행이나 카드회사의 내역이 최근 몇 달로 제한되는 것입니다). 최근에 유행하는 방법들(캐싱이나 NoSQL 등)의 방법들도 있겠지만 근본적인 문제는 결국 많은 데이터를 여러 번 스캔하는 것입니다.&nbsp;Slice는 사실 JDBC의 Movable Cursor와 유사한 개념입니다. ResultSet에서 커서를 이동시키는 방식이라.. 페이지 번호가 높아지면 커서의 이동시에 메모리 사용등에서 치명적인 성능 저하가 일어나기 때문에 제가 일하던 곳에서는 사용하지 않도록 했던 적이 있습니다. &nbsp;데이터가 방대한 경우에는 인덱스 외에도 검색하는 데이터의 양을 줄일 수 있는 방법들(최근 100만건 내에서만 쿼리를 수행하거나 날짜로 제한) 을 이용하거나 테이블 파티셔닝과 같이 데이터를 줄여서 처리할 수 있는 방법을 고민하기도 합니다. 검색의 경우 성능 저하가 심해지기 때문에 색인 엔진(검색 엔진)의 도입을 고려하는 것도 필요하구요. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

수업 외 질문

개인적인 차이는 있겠지만 아시는 분들은 2,3년차 수준이라고 하시더군요.프리랜서들에게는 필수라고 말씀하신 분들도 많구요.&nbsp;하지만 솔직히 제 개인적인 의견은 React와 스프링(부트)는 이미 몇년 전부터 기본 스펙이라고 생각합니다. 이미 AI로 생성하는 코드들도 리액트가 많습니다.

zk202308a5410

Posts