inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

동기화

미해결

나도코딩의 자바 기본편 - 풀코스 (20시간)

동기화 강의 중 Room room = new Room(); Runnable cleaner1 = new Runnable() { @Override public void run() { System.out.println("-- 직원1 청소 시작 --"); for (int i = 1; i <= 5; i++) { room.clean("직원1"); try { Thread.sleep(1000); } catch (InterruptedException e) { throw new RuntimeException(e); } if (i == 2) { throw new RuntimeException("못해먹겠다!!"); } } System.out.println("-- 직원1 청소 끝 --"); } }; Runnable cleaner2 = () -> { System.out.println("-- 직원2 청소 시작 --"); for (int i = 1; i <= 5; i++) { room.clean("직원2"); try { Thread.sleep(1000); } catch (InterruptedException e) { throw new RuntimeException(e); } } System.out.println("-- 직원2 청소 끝 --"); }; Thread cleanerThread1 = new Thread(cleaner1); Thread cleanerThread2 = new Thread(cleaner2); cleanerThread1.start(); cleanerThread2.start(); 수업에 사용한 위 코드가 10번방까지 출력이 되는 것은, for 반복문으로 1~5 까지 5개씩의 반복을 두 개 만들었기 때문에 자연적으로 10번까지 출력할 수 있는건가요?

  • java
  • 객체지향
김재훈 댓글 2 좋아요 0 조회수 151

컨트롤러가 필수인지

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 프로젝트를 하다보니 내부적으로만 동작하는 로직이 담긴 엔티티 및 레포지토리, 서비스가 있는데 이럴 때는 컨트롤러를 안만들기도 하나요? 예를 들어 포인트 계산 로직이 외부적으로 쓰이기보다 내부적으로 다른 파트에서 그때그때 계산이 필요할 때 가져다 쓰기 위해 설계를 했다고 치면 이럴 때는 컨트롤러 없이 구현하기도 하나요?

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
염경호 댓글 1 좋아요 0 조회수 159

Casting3 클래스에서 형변환 값이 수업과 다르게 나옵니다

미해결

김영한의 자바 입문 - 코드로 시작하는 자바 첫걸음

[질문 내용] 강사님이 말씀하신 것 처럼 오버플로우가 발생하지 않고 값이 그대로 출력됩니다 ㅠ *코드 입니다 *컴파일 결과입니다

  • java
  • 객체지향
peachicedtea 댓글 2 좋아요 0 조회수 140

SearchResult 인수 타입 적용

해결됨

한 입 크기로 잘라먹는 Next.js

search 페이지에서 아래 처럼 SearchResult 함수로 빼준 경우, searchParams의 타입을 어떻게 해야 하나요? async function SearchResult({ searchParams }: { searchParams: Promise<T> }) { await delay(1500); const { q } = await searchParams; const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/search?q=${q}`, { cache: "force-cache" } ); if (!response.ok) { return <div>오류가 발생했습니다.</div>; } const books: BookData[] = await response.json(); return ( <div> {books.map((book) => ( <BookItem key={book.id} {...book} /> ))} </div> ); }

  • react
  • typescript
  • next.js
Full Stack 개발자 댓글 2 좋아요 0 조회수 96

트리 구조의 구현에서의 노드 객체 필드

미해결

김영한의 실전 자바 - 중급 2편

========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] "트리 구조의 구현" 부분에서 Node0의 왼쪽 노드는 자신의 왼쪽 자손 노드, 오른쪽 노드는 자신의 오른쪽 자손 노드라고 할 때 Node 객체의 필드를 구성하는 prev, item, next에서 prev는 left, next는 right로 생각하면 될까요? 해당 교재 내용에서 Node 객체 필드가 prev, item, next라고 되어있어 질문드립니다.

  • java
  • 객체지향
  • 코딩-테스트
  • 알고리즘
공이_21jh 댓글 1 좋아요 0 조회수 134

enum 마지막 문제 질문

미해결

김영한의 실전 자바 - 중급 1편

[질문 내용] 여기에 질문 내용을 남겨주세요. enum의 마지막 문제 정답인데, 어떻게 values()를 아무런 호출변수없이 바로 호출이 가능하나요?

  • java
  • 객체지향
진우 댓글 1 좋아요 1 조회수 94

초반부 pnpm dev 후 발생하는 에러

미해결

손에 익는 Next.js - 블로그 만들기

초기에 pnpm으로 example 다운받고 pnpm dev로 실행 후 기능을 사용해보면, 블로그의 글을 클릭하면 아래처럼 에러가 나오는데 이유와 해결방법이 어떻게 되나요? 아래는 명령창에 나오는 에러입니다. Error: Route "/blog/[slug]" used `params.slug`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at eval (app\blog\[slug]\page.tsx:55:70) at Array.find (<anonymous>) at Blog (app\blog\[slug]\page.tsx:55:34) 53 | 54 | export default async function Blog({ params }) { > 55 | let post = await getBlogPosts().find((post) => post.slug === params.slug); | ^ 56 | if (!post) { 57 | notFound(); // ?룷?뒪?듃媛� ?뾾?쑝硫? 404 ?럹?씠吏�瑜? 諛섑솚 58 | } 殊? [Error: A React Element from an older version of React was rendered. This is not supported. It can happen if: - Multiple copies of the "react" package is used. - A library pre-bundled an old copy of "react" or "react/jsx-runtime". - A compiler tries to "inline" JSX instead of using the runtime.] { digest: '685037146' } Error: Route "/blog/[slug]" used `params.slug`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at eval (app\blog\[slug]\page.tsx:15:64) at Array.find (<anonymous>) at Module.generateMetadata (app\blog\[slug]\page.tsx:15:28) 13 | 14 | export function generateMetadata({ params }) { > 15 | let post = getBlogPosts().find((post) => post.slug === params.slug) | ^ 16 | if (!post) { 17 | return 18 | }

  • react
  • 블로그
  • next.js
손근수 댓글 2 좋아요 1 조회수 585

확장 질문

미해결

김영한의 실전 자바 - 기본편

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요 강사님 Closed for modification: 기존의 코드는 수정되지 않아야 한다. 이 부분에서 클라이언트는 수정되면 안되는 것으로 이해를 했는데 만약 Car에서 옵션기능이 추가 됐으면 Driver도 사용 할 수 있게 추가 되어야 될텐데 OCP 원칙을 어기는 걸까요?

  • java
  • 객체지향
딩띵 댓글 3 좋아요 0 조회수 169

클라이언트 컴포넌트에서의 서버컴포넌트 재호출에 대한 질문

해결됨

한 입 크기로 잘라먹는 Next.js

선생님이 이번 강의에서 서버액션을 이용한 서버컴포넌트 재검증에 대한 설명을 해주셨는데요. 방금 강의를 듣고나니 불현듯, 어? 그럼 클라이언트 컴포넌트에서, post요청을 날리면 서버컴포넌트 업데이트를 어떻게 치지? 방금 설명해주신것처럼 모든 post 요청을 서버액션으로 만든 후에 revalidatePath나 revalidateTag를 사용해야하는건가? 라는 의문점이 들었습니다. 보통 실무에서는 프론트가 다이렉트로 db에 접근하는 일이 거의 없기 때문에, 백엔드가 항상 붙어있는데 그럼 결국 클라이언트 컴포넌트에서 서버액션을 통해 post요청을 보내고, 웹서버측에서는 백엔드에 post요청을 보내는식의 2번작업이 일어나야만, post요청이 끝나고 서버컴포넌트의 업데이트가 가능한걸까요 ?

  • react
  • typescript
  • next.js
2Digit APP 댓글 2 좋아요 0 조회수 119

App 라우터 쿼리스트링

해결됨

한 입 크기로 잘라먹는 Next.js

App 라우터 방식에서 쿼리 스트링을 불러오는 방식이 강의를 보니까 두 가지로 확인 됩니다. 두 가지의 차이점이 무엇 인지와 두 개를 병행하면서 사용해도 상관없는지 확인 부탁 드립니다. 1. useSearchParams( ) 사용 export default function Searchbar() { const router = useRouter(); const searchParams = useSearchParams(); //searchParams 훅은 쿼리스트링을 가져오는 것인데 빌드타임에는 //쿼리스트링을 가져올 수 없으므로 빌드타임에서 오류가 발생한다. //그래서 해당 페이지는 사전렌더링에서 제외시켜야 한다. const [search, setSearch] = useState(""); const q = searchParams.get("q"); 2. searchParams를 함수에 인자로 넣은 경우 export default async function Page({ searchParams, }: { searchParams: Promise<{ q?: string; }>; }) { const { q } = await searchParams;

  • react
  • typescript
  • next.js
Full Stack 개발자 댓글 2 좋아요 0 조회수 112

실행 시켰을 때 화면이 좀 다르게 나와서 고치고 싶습니다.

미해결

김영한의 자바 입문 - 코드로 시작하는 자바 첫걸음

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 여기에 질문 내용을 남겨주세요. 실행 했을 때 강사님과의 실행 결과 화면이 다르게 나오는데 혹시 세팅하는 방법을 좀 알 수 있을까요?

  • java
  • 객체지향
hjldd0523 댓글 2 좋아요 0 조회수 127

안녕하세요,

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

4월에 구매하여 늦게서야 해당 강의를 수강 중인데 업데이트 된 강의 쿠폰 발급하는걸 몰랐네요ㅠㅠ 혹시 현강의랑 많이 다를까요? 어떤 차이점이 있는지 궁금해요. 듣는다고 하면 중간부터 들어야하나요. 현재 eslint부분 듣고있는데 애매하네요. 그리고 듣는다는 가정 하에 쿠폰 재발급이 가능한지 궁금합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
조은 댓글 2 좋아요 0 조회수 128

자바 중급 마지막 문제 코드리뷰 및 아이콘 출력 부탁드려요

미해결

김영한의 실전 자바 - 중급 2편

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 코드리뷰 및 아이콘 출력 부탁드려요 안녕하세요. 자바 중급 마지막 문제를 풀어보았는데, 코드가 난잡한거 같습니다. 혹시 코드 리뷰나 틀린점을 짚어주시면 감사하겠습니다. 또한 아이콘 출력은 어려워서 이름으로 출력하게 했는데 아이콘 출력 나온는 법도 알려주시면 감사하겠습니다. 참고로 Suit 클래스는 영한님의 클래스를 재사용 하였습니다. 마지막으로 List가 비교적 사용이 쉬워서 List를 통한 풀이를 진행했는데, HashMap이나 다른 컬렉션을 이용한 풀이도 있을까요? package class2_8Iterator.MyArray.cardGame; /** * 카드에 대한 속성을 정의하는 클래스 * 1. 문양을 가진다 * 2. 번호를 가진다 * 3. 소팅이 가능하다 */ import static class2_8Iterator.MyArray.cardGame.Suit.*; public class Card implements Comparable<Card>{ private final Suit suit; private Integer cardNumber; public Card(Suit cardIcon, Integer cardNumber ){ this.cardNumber = cardNumber; this.suit = cardIcon; } /**문양을 비교하기 위해 숫자로 변환한다. * */ public Integer iconConverter(String cardIcon) { if(SPADE.getIcon().equals(cardIcon)) { return 1; } else if(HEART.getIcon().equals(cardIcon)){ return 2; } else if(DIAMOND.getIcon().equals(cardIcon)) { return 3; } else if (CLUB.getIcon().equals(cardIcon)) { return 4; } return 0; } public Suit getSuit() { return suit; } /* @Override public String toString() { return "Card{" + "icon=" + icon + ", cardNumber=" + cardNumber + '}'; } */ @Override public String toString(){ return cardNumber+"("+suit+")"; } /** * 문양을 비교하고 같은 문양이면 숫자가 더 큰게 먼저 앞으로 나온다. * */ @Override public int compareTo(Card card) { Integer thisIcon = iconConverter(this.suit.getIcon()); Integer inputIcon = iconConverter(card.suit.getIcon()); if(this.cardNumber==cardNumber){ return thisIcon<inputIcon ? -1 : (thisIcon==inputIcon ? 0 : 1); } else return this.cardNumber<cardNumber ? -1 : (this.cardNumber==cardNumber ? 0 : 1); } public int numberCompareTo(Card card){ return this.cardNumber<card.cardNumber ? -1 : (this.cardNumber==card.cardNumber ? 0: 1); } public Suit getIcon() { return suit; } public Integer getCardNumber() { return cardNumber; } public void setCardNumber(Integer cardNumber) { this.cardNumber = cardNumber; } } package class2_8Iterator.MyArray.cardGame; public enum Suit { SPADE("♠"), // 스페이드(♠) HEART("♥"),// 하트(♥) DIAMOND("♦"),// 다이아몬드(♦) CLUB("♣");// 클로버(♣) private String icon; Suit(String icon){ this.icon=icon; } public String getIcon() { return icon; } } package class2_8Iterator.MyArray.cardGame; import java.lang.reflect.Array; import java.util.ArrayList; import java.util.Collection; import java.util.Collections; import java.util.List; import java.util.stream.Collectors; import java.util.stream.Stream; import static class2_8Iterator.MyArray.cardGame.Suit.*; /** * 카드를 이용하여 덱을 구성한다. * */ public class Deck { private Card card; private List<Card> masterDeck; private List<Card> spadeDeck = new ArrayList<Card>(); private List<Card> heartDeck = new ArrayList<Card>(); private List<Card> diamondDeck = new ArrayList<Card>(); private List<Card> clubDeck = new ArrayList<Card>(); /*** * */ public Deck(){ for(int i =1 ;i <= 13; i++){ card = new Card(SPADE,i); spadeDeck.add(card); } for(int i =1 ;i <= 13; i++){ card= new Card(HEART,i); heartDeck.add(card); } for(int i =1 ;i <= 13; i++){ card = new Card(CLUB,i); clubDeck.add(card); } for(int i =1 ;i <= 13; i++){ card =new Card(DIAMOND,i); diamondDeck.add(card); } /**배열 합치기 * */ List<Card> mergedDeck1 = Stream.of(clubDeck, diamondDeck) .flatMap(Collection::stream) .collect(Collectors.toList()); List<Card> mergedDeck2 = Stream.of(spadeDeck,heartDeck) .flatMap(Collection::stream) .collect(Collectors.toList()); masterDeck = Stream.of(mergedDeck1, mergedDeck2) .flatMap(Collection::stream) .collect(Collectors.toList()); Collections.shuffle(masterDeck); /*** * 덱 생성 확인을 위한 디버깅 */ // for(Card cardEntry :deck){ // // System.out.println(cardEntry.getCardNumber() + "," + cardEntry.getIcon()); // // } // System.out.println("size ie "+ deck.size()); // System.out.println( masterDeck.getClass()); } public List<Card>getMaterDeck(){ return masterDeck; } } package class2_8Iterator.MyArray.cardGame; import java.util.ArrayList; import java.util.List; /** * DECK에서 카드를 뽑아 패에 넣는다. * */ public class Player { List<Card> hands = new ArrayList<>(); Deck deck = new Deck(); // new 연산자 (메모리에 올리기) 안쓰면 nullPointerException 터진다 Integer [] cardNumberList = new Integer[5]; Integer totalNumber = 0; public void drawCard(int turn){ List<Card> playableDeck = deck.getMaterDeck(); Card inputCard = playableDeck.get(turn); hands.add(inputCard); playableDeck.remove(turn); } public Integer getSumOfCardNumber(){ for(int i = 0 ; i <5;i++){ Card handCard = hands.get(i); cardNumberList[i] = handCard.getCardNumber(); totalNumber = totalNumber+cardNumberList[i]; } return totalNumber; } } package class2_8Iterator.MyArray.cardGame; import java.lang.reflect.MalformedParameterizedTypeException; import java.util.*; public class CardGameMain { public static void main(String args[]) { Player player1 = new Player(); Player player2 = new Player(); Deck deck = new Deck(); // List<Card> playerList1 = new ArrayList<>(); // List<Card> playerList2 = new ArrayList<>(); for (int i = 0; i < 10; i++) { if(i%2!=0){ player2.drawCard(i); } else player1.drawCard(i); } //Player 클래스의 hands에 값을 넣었으나 다른 값을 참조하니까 자꾸 OUTOFINDEX 에러 나옴 //다음 코드는 hands내 값을 디버깅 할때 사용 한다 System.out.println("player1의 카드 리스트 "+Arrays.toString(player1.hands.toArray())); System.out.println("player2의 카드 리스트 "+Arrays.toString(player2.hands.toArray())); /*** TODO * 1.손패 카드를 소팅하고 * 2. 카드 번호의 계를 구한다. */ Arrays.sort(player1.hands.toArray()); Arrays.sort(player2.hands.toArray()); System.out.println("==================정렬후 카드 패=================="); System.out.println("player1의 카드 리스트 "+Arrays.toString(player1.hands.toArray())); System.out.println("player2의 카드 리스트 "+Arrays.toString(player2.hands.toArray())); System.out.println("================== 카드 패 숫자 합계 ============="); System.out.println(player1.getSumOfCardNumber()); System.out.println(player2.getSumOfCardNumber()); if(player1.getSumOfCardNumber()> player2.getSumOfCardNumber()){ System.out.println("플레이어 1이 이겼습니다"); }else { System.out.println("플레이어 2가 이겼습니다"); } } }

  • java
  • 객체지향
  • 코딩-테스트
  • 알고리즘
정현 댓글 1 좋아요 0 조회수 98

main 메서드의 클래스 위치변경

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 제가 main 메서드가 존재하는 클래스의 위치를 변경하였는데요. 변경 후 부터 class not find 오류가 발생해서 클래스를 찾을 수 없다고 하는거 같은데 한 번 main 메서드가 존재하는 클래스를 만들고 나면 위치를 변경시키면 안 되는건가요?

  • java
  • spring
  • mvc
  • spring-boot
jeongho lee 댓글 1 좋아요 0 조회수 74

2.16) 빌드 후 실행한 환경에서 네트워크 탭에서의 Json 요청

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요. 좋은 강의 잘 듣고 있습니다. "2.16) SSG 4. 폴백옵션 설정하기" 강의를 듣다가 궁금한 점이 생겨서 질문남깁니다! 홈 경로는 getStaticProps 함수를 사용해 빌드 타임에 사전 렌더링이 이루어지고 있습니다. Next App을 빌드 후에 홈 / 경로에서 네트워크 탭을 살펴보다가 현재 화면 내에서 인덱스에 해당하는 Json 응답을 받은 것을 보았습니다. 하나를 열어보니 아래와 같습니다. // 6.json?id=6 { "pageProps": { "book": { "id": 6, "title": "프론트엔드 성능 최적화 가이드", "subTitle": "웹 개발 스킬을 한 단계 높여 주는", "description": "...", "author": "유동균", "publisher": "인사이트", "coverImgUrl": "https://shopping-phinf.pstatic.net/main_3562758/35627588630.20230704084326.jpg" } }, "__N_SSG": true } 제가 이해한 바로는 / 경로에 진입해서 초기 요청이 이루어지면 서버는 사전에 렌더링 된 HTML 페이지를 응답한 이후 현재 페이지에 필요한 모든 자바스크립트 파일을 JS Bundle로 전달합니다. 네트워크 탭에서 localhost HTML 문서를 확인하고 이후에 http://localhost:3000/_next/static/chunks/pages/book/%5Bid%5D-4bfc2418ccf58b5f.js JS Bundle을 응답받은 것을 확인했습니다. 그리고 현재 페이지에서 이동 가능성이 있는 페이지들에 한해 사전에 요청이 이루어집니다. js 파일이 전달되어야 하지만 북( /book/[id] )페이지가 SSG 방식으로 사전 렌더링이 이루어지므로 데이터를 뿌려주기만 하면 되니까 json 형식으로 응답이 온 것이 아닐까 생각했습니다. (북페이지를 SSR 방식으로 바꾸니 북페이지의 js 파일이 전달되었습니다.) 이후 Link 컴포넌트인 도서 목록 중 하나를 클릭하면 자바스크립트 코드를 실행시켜 컴포넌트를 교체하는 CSR 방식으로 페이지를 이동합니다. Q. SSG 방식에서는 사전 렌더링의 응답으로 Json 형식으로 전달받아 새로운 페이지를 보여주는 제가 이해하고 있는 방식이 맞는지 궁금합니다. 다른 하나는, 현재 화면에서 네트워크 요청(예: 6.json?id=6)이 무수히 많이 이루어진 것을 보았습니다. 그래서 Link 컴포넌트의 prefetch 값을 false로 설정하여 각 컴포넌트에 마우스를 호버했을 때 프리페칭이 이루어지도록 했습니다. 그러자 마우스를 호버하면 프리페칭이 이루어졌지만 마우스를 호버할 때마다 요청이 이루어져 의문이 생겼습니다. Q. 잦은 요청이 서버에 부하를 주는 것은 아닌지, 이를 개선할 수 있는 방법이 있는지 궁금합니다. 긴 글 읽어주셔서 감사합니다. 아래 코드 첨부하였습니다! 📄 /pages/index.tsx import SearchableLayout from "@/components/Searchable-layout"; import BookItem from "@/components/Book-item"; import { InferGetStaticPropsType } from "next"; import fetchBooks from "@/lib/fetch-books"; import style from "./index.module.css"; import fetchRandomBooks from "@/lib/fetch-random-books"; export const getStaticProps = async () => { const [allBooks, recoBooks] = await Promise.all([ fetchBooks(), fetchRandomBooks(), ]); return { props: { allBooks, recoBooks, }, }; }; export default function Home({ allBooks, recoBooks, }: InferGetStaticPropsType<typeof getStaticProps>) { return ( <div className={style.container}> <section> <h3>지금 추천하는 도서</h3> {recoBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> <section> <h3>등록된 모든 도서</h3> {allBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> </div> ); } Home.getLayout = (page: NextPageWithLayout) => { return <SearchableLayout>{page}</SearchableLayout>; }; 📄 /pages/book/[id].tsx /* eslint-disable jsx-a11y/alt-text */ /* eslint-disable @next/next/no-img-element */ import fetchBook from "@/lib/fetch-one-book"; import style from "./[id].module.css"; import { GetStaticPropsContext, InferGetStaticPropsType } from "next"; export const getStaticPaths = () => { return { paths: [ { params: { id: "1" } }, { params: { id: "2" } }, { params: { id: "3" } }, ], fallback: "blocking", }; }; export const getStaticProps = async (context: GetStaticPropsContext) => { const { id } = context.params!; const book = await fetchBook(Number(id)); return { props: { book, }, }; }; export default function Page({ book, }: InferGetStaticPropsType<typeof getStaticProps>) { if (!book) return "문제가 발생했습니다. 다시 시도해주세요."; const { title, subTitle, description, author, publisher, coverImgUrl } = book; return ( <div className={style.container}> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <img src={coverImgUrl} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </div> ); }

  • react
  • typescript
  • next.js
seong2 댓글 2 좋아요 0 조회수 117

루프에서 i 값 범위 질문

미해결

자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비

public int solution(int N, int K, int[] arr){ int sum = 0; int answer = 0; for (int i = 0 ; i < K; i++){ sum += arr[i]; answer = sum; } for (int i = K; i <= N-K; i++){ sum += arr[i] - arr[i-K]; if (sum > answer){ answer = sum; } } return answer; } 강의에서는 i 의 범위를 i = k ; i < n; 으로 놓았으나, i = k ; i <= n-k ; 로 두고 제출을 하니 정답이 나왔습니다. 왜 정답이 나왔는지 모르겠습니다. 인덱스 i 는 슬라이딩 윈도우의 마지막 위치나 다름이 없는데, 배열의 마지막 인덱스인 n-1 까지 도달해야함이 분명합니다. 그러나, i 가 n-k 까지 가게 되면 i 가 n-1 까지 도달을 못하게 됩니다.

  • java
  • 코딩-테스트
rookie21 댓글 1 좋아요 0 조회수 109

middleware 관련 질문입니다

미해결

Next + React Query로 SNS 서비스 만들기

해당 코드를 수정했던 강의가 어디였는지 기억이 안나 여기에 글 남깁니다. 아래는 auth.ts의 코드이고 callbacks 부분을 작성하셨다가 나중에 없애는 걸로 수정하셨는데 이 코드의 역할을 middleware에서 대신한다고 생각하면 될까요 ? export async function middleware() { const session = await auth(); if (!session) { return NextResponse.redirect('http://localhost:3000/i/flow/login'); } } // callbacks: { // async authorized({ request, auth }) { // if (!auth) { // return NextResponse.redirect('http://localhost:3000/i/flow/login'); // } // return true; // }, // },

  • react
  • next.js
  • react-query
  • next-auth
  • msw
심현석 댓글 2 좋아요 0 조회수 143

mysql 연결 오류

미해결

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]

안녕하세요 맥북을 사용 중이고 homebrew 로 mysql을 설치했습니다 mysql 을 인텔리제이에 연결하려하면 DBMS: MySQL (no ver.) Case sensitivity: plain=mixed, delimited=exact Connection refused. 이러한 오류가 뜹니다. 어떤 것이 문제일까요? 초기화하고 다시 sudo brew services start mysql 해도 똑같은 오류가 뜹니다.

  • java
  • spring
  • aws
  • mysql
  • spring-boot
  • jpa
cg10046 댓글 2 좋아요 0 조회수 734

인기 태그

인프런 TOP Writers

주간 인기글