안녕하세요. 클라이언트 컴포넌트 안에, 서버 컴포넌트를 import 할 수 없다 라는 주의 사항에 대해 궁금한 점이 있습니다. Next.js 공식문서에는 아래와 같이 클라이언트 컴포넌트 안에 서버 컴포넌트를 직접 Import해 사용할 수 없다 고 나와 있는데요. 공식문서 강의에서 실습했을 때는, 클라이언트 컴포넌트 안에서 서버 컴포넌트가 사용되는 경우, 자동으로 클라이언트 컴포넌트로 바뀌는 것을 확인했습니다. 그렇다면, 서버 컴포넌트가 클라이언트로 바뀔 수 있는 경우는 해당 패턴을 사용해도 되는 건가요? 아래와 같이 서버 컴포넌트의 기능을 사용한다면, 에러는 나지 않지만 fetch 요청이 여러 번 되는 등, 정상적인 동작이 되지 않는 것을 확인했습니다. 이런 경우에 한해 지양하면 될까요? 결과적으로, 서버 컴포넌트가 클라이언트 컴포넌트로 바뀔 수 있는 경우, 제대로 동작하지만, 지양하자 는 것으로 이해하면 될까요? // 클라이언트 컴포넌트 "use client"; import ServerComponent from "@/components/server-component"; export default function ClientPage() { console.log("클라이언트"); return ( <div> <h1>클라이언트</h1> <ServerComponent /> </div> ); } // 서버 컴포넌트 export default async function ServerComponent() { const res = await fetch("https://jsonplaceholder.typicode.com/todos/1"); const value = await res.json(); console.log(value); return ( <h1>서버 컴포넌트</h1> ); } 감사합니다.
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] java -version에서 21인거 확인했고 환경변수,path 설정도 제대로 된것 확인하였습니다. 인텔리제이에서 tool 설정에서 실행이 인텔리제이로 되어있는것도 확인했습니다 근데 왜 자꾸 test부분에서 오류가 나는지 모르겠습니다. 혹시 build.gradle 파일 안에 junit 부분이 인텔리제이에서 밑줄 쳐진것처럼 이상하게 보이긴 했는데 거기가 문제인걸까요? gradlew 까지는 잘 실행되는데 gradlew build를 입력하면 항상 실패합니다. https://drive.google.com/file/d/1H2-IATqwNphgZoDcjcEQXkbAmcfELT8D/view?usp=sharing hello-spring이 들어있는 zip 입니다.
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] PC에서 소리는 나오는데 검은화면으로 나옵니다.
안녕하세요! 다이나믹 페이지에서 데이터 패칭이 오래 걸리는 문제를 해결하기 위해, Next에서 임시로 로딩 UI를 보여주고, 추후 패칭이 완료되면 스트리밍으로 업데이트하는 것으로 이해했습니다. 로딩 UI는 데이터 패칭이 느릴 때 유용하지만, 패칭이 빠른 경우 오히려 깜빡거리는 느낌이 들어 사용자 경험 측면에서 안 좋을 수 있다고 느꼈습니다. 물론 제가 생각했을 때 가장 베스트는 API 속도를 측정하여 특정 시간 이상인 경우에 스트리밍 기술을 적용하고, 그 외에는 안하는 것이 좋다고 생각을 했지만, 측정하기도 힘들 뿐더러, 사용자 네트워크도 신경을 써야 하기 때문에 이러한 방법은 어렵다고 생각을 했습니다. 이러한 문제에서 강사님의 생각을 듣고 싶어 질문드리게 되었습니다.
1. 강의 내용과 관련된 질문인가요?예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 안녕하세요, 강의 수강 중 궁금한 것이 생겨 여쭤보게 되었습니다. 내부 클래스가 바깥 클래스의 인스턴스의 멤버에 접근, 지역 변수는 내부 클래스 특징 + 지역 변수에 접근 이라는 것에 대해 여쭤보고 싶습니다. 강의 자료 중 '바깥 클래스의 인스턴스의 멤버에 접근' 이라는 것이 바깥 클래스에 있는 '바깥 클래스 자기 자신'에 대한 객체나 '다른 클래스 타입으로 선언한 객체'를 사용할 수 있다는 말일까요 ? 그리고 지역변수 접근이라는 말도 여쭤보고 싶은데, 예시 코드 void process()를 보면 메서드 내부에 지금 지역 클래스가 있습니다. 지역 변수 접근이라는 말은 바깥 클래스의 메서드 내부에서 존재한다는 말일까요 ?
import java.util.LinkedList; import java.util.Queue; import java.util.Scanner; public class Main { static int n, m, left=0; static int[][] boxes; static int[][] directions = new int[][]{{-1, 0}, {0, -1}, {1, 0}, {0, 1}}; static Queue<Integer[]> q; public int BFS() { /* 정수 1은 익은 토마토, 정수 0은 익지 않은 토마토, 정수 -1은 토마토가 들어있지 않은 칸 | 모두 익을 때까지의 최소 날짜 nx-1, ny | nx, ny-1 | nx+1, ny | nx, ny+1 */ if (left==0) return 0; int L = 0; while (!q.isEmpty()) { int size = q.size(); for (int i=0; i<size; i++) { Integer[] point = q.poll(); for (int j=0; j<4; j++) { int nx = point[0] + directions[j][0]; int ny = point[1] + directions[j][1]; if (nx>=0 && nx<n && ny>=0 && ny<m && boxes[nx][ny]==0) { left--; boxes[nx][ny] = 1; q.offer(new Integer[]{nx, ny}); } } } L++; } if (left >0) return -1; return L-1; } public static void main(String[] args) { Scanner kb = new Scanner(System.in); m = kb.nextInt(); n = kb.nextInt(); boxes = new int[n][m]; q = new LinkedList<>(); for (int i=0; i<n; i++) { for (int j=0; j<m; j++) { boxes[i][j] = kb.nextInt(); if (boxes[i][j]==1) q.offer(new Integer[]{i, j}); if (boxes[i][j]==0) left++; } } Main main = new Main(); System.out.println(main.BFS()); } } 코드는 위와 같이 짰는데 계속 타임 에러가 발생해서 강의를 들었습니다.. 제가 보기엔 강사님이 짜신 거랑 차이를 모르겠는데 제 코드의 어떤 부분이 문제가 됐을까요? =========================== AI 답변 보고 혹시나 싶어서 강사님이 하신대로 Point class 를 따로 만들어서 진행했더니 해결됐습니다..!!!! 배열로 선언한 것과 차이가 있네요
안녕하세요! 클라이언트 라우터 캐시 기능에 대해 궁금증이 있어서 질문합니다. 클라이언트 라우터 캐시에 공통적으로 쓰이고 변하지 않는? 레이아웃들을 캐싱한다고 이해했습니다. 제가 궁금한 것은 RSC Payload는 수시로 바뀔 수 있을 것 같아 라우터 캐시에 저장하기 어렵겠지만, JS Bundle은 클라이언트 컴포넌트들로 구성되어 있다면 변하지 않으므로 캐싱해도 되지 않을까 생각을 해봤습니다.
안녕하세요! 풀 라우트 캐시 이후 JS Bundle, RSC Payload도 불러오는지 궁금해서 질문해봅니다. Next Link를 통해 페이지를 교체할 때, Next 서버는 JS Bundle과 RSC Payload를 클라이언트로 전송하고, 클라이언트는 이를 적절히 결합하여 페이지를 렌더링하는 것으로 이해했습니다. 만약 초기 접속 시 풀 라우트 캐시되어 있는 static html를 불러온 이후, JS Bundle, RSC Payload도 불러오는지 궁금합니다. 그리고 초기 접속 시 다이나믹 페이지 또한 html을 불러온 이후, JS Bundle, RSC Payload도 불러오는지 궁금합니다. 제 생각은 불러올 것 같지만, 확실히 알면 좋을 것 같아서 질문드려봅니다.
안녕하세요! build할 때 계속해서 type 오류가 발생하여 질문 드립니다. 현재 page.tsx에는 아래와 같이 작성되어 있습니다. import BookItem from "@/components/book-item"; import { BookData } from "@/types"; export default async function Page({ searchParams, }: { searchParams: { q?: string; }; }) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/search?q=${searchParams.q}` ); if (!response.ok) { return <div>오류가 발생했습니다...</div>; } const books: BookData[] = await response.json(); return ( <div> {books.map((book) => ( <BookItem key={book.id} {...book} /> ))} </div> ); } 근데 여기서 build를 하면 아래와 같은 에러가 발생합니다. .next/types/app/(with-searchbar)/search/page.ts:34:29 Type error: Type 'Props' does not satisfy the constraint 'PageProps'. Types of property 'searchParams' are incompatible. Type 'Record<string, string | string[]> | undefined' is not assignable to type 'Promise<any> | undefined'. Type 'Record<string, string | string[]>' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] 32 | 33 | // Check the prop type of the entry function > 34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>() | ^ 35 | 36 | // Check the arguments and return type of the generateMetadata function 37 | if ('generateMetadata' in entry) { Next.js build worker exited with code: 1 and signal: null 사실 gpt를 이용하여 받은 코드로 작성해보면 에러를 해결할 수는 있는데 이게 근본적인 해결 방법인지 잘 모르겠고, gpt가 작성한 코드가 잘 이해가 되지 않습니다. 우선 gpt에서 받은 답변은 아래와 같습니다. import BookItem from "@/components/book-item"; import { BookData } from "@/types"; export default async function Page({ searchParams }: any) { const qRaw = searchParams?.q; const q = Array.isArray(qRaw) ? qRaw[0] : qRaw ?? ""; const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/search?q=${encodeURIComponent(q)}` ); if (!response.ok) { return <div>오류가 발생했습니다...</div>; } const books: BookData[] = await response.json(); return ( <div> {books.map((book) => ( <BookItem key={book.id} {...book} /> ))} </div> ); } 이렇게 하면 해결은 되긴합니다. 다만 왜 해결이 되는 건지 이해가 잘 되지 않아서 그런데 왜 자꾸 build할 때 type 오류가 발생하는지 알려주시면 감사드리겠습니다!
[질문 내용] final이 붙은 int value를 생성자를 통해 초기화하는 법을 배웠습니다. 그런데, final이 변수 앞에 붙은 경우, 생성자를 통해서 한번만 초기화 될 수 있다고 했는데, 아래 ConstructInit 메서드를 두 번 사용하여 초기화를 두 번 진행한 것을 볼 수 있습니다. 한번만 초기화 할 수 있다고 했는데, 왜 객체를 두개나 생성해서 final int value를 두번 초기화한 것일까요? final int value; public ConstructInit(int value) { this.value = value; } package final1; public class FinalFieldMain { public static void main(String[] args) { //final 필드 - 생성자 초기화 System.out.println("생성자 초기화"); ConstructInit constructInit1 = new ConstructInit(10); ConstructInit constructInit2 = new ConstructInit(20); //한번만 초기화 된다며 System.out.println(constructInit1.value); System.out.println(constructInit2.value); } }
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 인텔리제이 설치하고 설치옵션이 뜨는데 뭘 선택해야되나요?
안녕하세요 강의를 보고 javac에 대해서 궁금한 점이 있어서 질문 드립니다. .class로 컴파일 된 파일을 각각 os에 맞는 자바가 각자의 os에 맞게 바꿔서 실행을 한다고 하셨는데 javac도 java이지 않나요?. 정확한지 모르겠지만 linux에서 컴파일한 .class와 window에서 컴파일한 .class의 값이 다르다면 window에서 컴파일한 .class 파일이 linux에서 실행이 되는 건가요? 모든 os에서 실행이 되려면 .class 파일의 내용은 같아야 될 것 같은데 궁금합니다.
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문 전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 2.람다.pdf 36p MyFunction 은 함수형 인터페이스이며, String apply(String s) => StringFunction 이거죠??
