예시로 pagination을 통해 4번째 게시물 목록을 보고 있는데 여기서 새로 고침을 하거나 4번 게시물 목록의 해당 게시글 클릭해서 들어가고 다시 뒤로 가기를 통해 게시물 목록으로 이동이 되었을 때 4번 게시물 목록이 아닌 1번 게시물 목록으로 초기화가 되는데 저는 4번 게시물 목록으로 유지하고 싶습니다. 다른 사이트의 게시물 홈페이지를 참고해 보면 page=4 이런 식으로 주소 창에 입력이 되어있는데 pages폴더에 폴더를 추가해서 유지를 해야 하나요? 인프런에서 질문 & 답변 부분에서도 다음과 같이 사용되고 있습니다. https://www.inflearn.com/community/questions?page=2&order=recent 만약 폴더를 추가 해야 한다면 다음과 같이 폴더가 있을 때 boards 하위 폴더에 추가하고 해당 page폴더 안에 [boardId], new 폴더를 넣어야 할 까요? (page폴더 생성 안 한 상태입니다.) 아니면 useState나 useRecoil을 사용해서 상태관리를 해야하는 건가요? 어떻게 사용되는지 알고 싶습니다.
import java.util.Scanner; public class 멘토링 { public static void main(String[] args) { Scanner scan = new Scanner(System.in); int n = scan.nextInt(); int m = scan.nextInt(); int[][] intArrArr = new int[n][m]; for(int i=0;i<m;i++){ for(int j=0;j<n;j++){ int temp = scan.nextInt(); intArrArr[temp-1][i] = j; } } System.out.println(solution(n,m,intArrArr)); } private static int solution(int n, int m, int[][] intArrArr) { int answer = 0; for(int i=0;i<n;i++){ for(int j=0;j<n;j++){ boolean flag = true; for(int k=0;k<m;k++){ if(intArrArr[i][k] >= intArrArr[j][k]){ flag = false; break; } } if(flag){ answer++; } } } return answer; } } input을 받을 때 학생이 행에 오도록 변경을 해서 등 수를 열로 변경해서 받으면 3중 for문으로도 가능합니다. 참고가 될까 싶어 올려봅니다 화이팅!!
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] Switch 문을 while 문 중간에 넣었을 때 break 는 중단되지 않았습니다. return 문은 프로그램을 종료시켰습니다. 왜 break 문은 쓸 수 없는지 궁금합니다! package method.ex; import java.util.Scanner; public class MethodEx4 { static Scanner sc = new Scanner(System.in); static int balance = 0; public static void main(String[] args) { while (true) { switch (chooseMenu()) { case 1 -> balance = deposit(); case 2 -> balance = withdraw(); case 3 -> checkBalance(); case 4 -> { printFooter(); return; // break 대신에 return 문 쓰기 } default -> printError(); } } } static int chooseMenu() { System.out.println("------------------------"); System.out.println("1.입금|2.출금|3.잔액 확인|4.종료"); System.out.println("------------------------"); System.out.print("선택: "); return sc.nextInt(); } static int deposit() { System.out.print("입금액을 입력하세요: "); int depositAmount = sc.nextInt(); balance += depositAmount; System.out.println(depositAmount + "을 입금하였습니다. 현재 잔액: " + balance + "원"); return balance; } static int withdraw() { System.out.print("출금액을 입력하세요: "); int withdrawAmount = sc.nextInt(); if (balance >= withdrawAmount) { balance -= withdrawAmount; System.out.println(withdrawAmount + "원을 출금하였습니다. 현재 잔액: " + balance + "원"); } else { System.out.println(withdrawAmount + "원을 출금하려 했으나 잔액이 부족합니다."); } return balance; } static void checkBalance() { System.out.println("현재 잔액: " + balance + "원"); } static void printFooter() { System.out.println("시스템을 종료합니다."); } static void printError() { System.out.println("잘못 번호를 입력하였습니다."); } }
안녕하세요! '서버 쿠키 공유하기 & 게시글 업로드 완성' 강의에서 백엔드 전용 토큰을 생성하고 난 다음에 발생하는 에러가 있습니다. 현재 connect.sid는 잘 받아와 졌고 게시글과 사진을 올린 다음에 게시하기를 누르게 되면 강사님과 다르게 {"statusCode":500,"message":"Internal server error"} 가 발생합니다 서버쪽 에러로그는 다음과 같습니다 제가 백엔드쪽은 아예 몰라서... 혹시 추가로 첨부해야 할 코드가 있다면 말씀해주시면 감사하겠습니다
안녕하세요. 제로초님. 질문 많이 드려서 죄송합니다. 아마 마지막 질문이 될 것 같아요. 강의에서 CSS-in-JS 라이브러리와 Next의 호환성 문제를 언급해주셨음에도 불구하고, styled-componets로 진행을 하다가 문제점을 깨닫고 멈춘 상태입니다. 제가 꾸역꾸역 styled-componets 써보려고 한 이유는 다음과 같았습니다. 프로젝트를 마이그레이션 하는 과정에서 라이브러리를 바꾸게 됐을 때의 비용이 너무 많이 발생한다 고 판단함. Next에도 babel, swc 등의 설정 파일을 추가 하면 사용할 수 있다는 글들이 구글링에 많이 보였기 때문에, '이제 업데이트 돼서 가능한가?' 싶었음. 하지만 결론적으로 layout.tsx, page.tsx 파일에도 스타일이 들어가지 않을 수 없었고, use client로 떡칠된 프로젝트가 되어서 next.js를 사용하는 의미를 잃었습니다. 서론이 길었습니다. 위와 같은 이유로 아래 내용 질문드립니다. styled-component가 된다고 우기는 블로그들은 다 ssr의 이점을 버리고 사용중인 거라고 보면될까요? 채용공고에서 next와 styled-component를 동시에 요구하는 공고는 두 개를 같이 쓰고 있는 곳일까요? 현실적으로 next와 함께 쓰일만한 라이브러리는 유명한 라이브러리 중에서 postCSS, SASS 가 전부인가요?
D:\coding\codecamp-frontend\class> npx husky install 위 내용처럼 허스키를 설치하면 husky - .git can't be found (see https://typicode.github.io/husky/#/?id=custom-directory) 이렇게 .git을 찾을 수 없다고 뜹니다. 저는 작업물을 git으로 버전 관리했는데 찾아보니 package.json과 .git의 경로가 형제관계여야 오류가 안난다는 정보를 찾았습니다. 제 작업물의 폴더 구조가 최상위 폴더에 .git이 있고 저렇게 클래스 / 클래스_퀴즈 / 포폴 폴더에 package.json이 각각 있는 형태인데요. 이러한 경우는 어떻게 해결해야 할까요?
변수타입 1 강의에서 7:20 쯤 설명하시는 리터럴에 대해 이해가 잘 되지 않는 점이 있습니다. 변수의 값은 변할 수 있지만 리터럴은 개발자가 직접 입력한 고정된 값이다. 따라서 리터럴 자체는 변하지 않는다. 라고 강의 내용과 강의자료에 설명이 되어있습니다. 위 내용이 무슨 뜻인지이해가 잘 안됩니다. 개발자가 변수에 입력한 값이 리터럴 이고,, 리터럴을 수정하면 변수 값이 변하는 것 아닌가요?
안녕하세요! 'Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx)' 강의를 듣던 도중 갑자기 궁금한 것들이 생겨서 이렇게 질문드립니다! “ /home은 서버컴포넌트여서 서버에서 다 그려서 보내주기 때문에초기 로딩 자체가 존재하지 않는다. 그러므로 /home에서 새로고침을 해도 loading.tsx 가 적용되지 않는다 그렇지만 /explore에서 ‘새로고침 하고’ /home이라는 페이지로 넘어가면 /explore에서 /home페이지를 새로 로딩한다. 그래서 loading.tsx 가 적용된다 ” 라고 말씀하셨는데 여기서 ‘/explore에서 새로고침을 하고난 다음에 /home페이지로 가면 해당 페이지를 새로 로딩한다’ 는 개념이 무슨 말씀이신가요? 이와 관련된 Next.js 의 개념 키워드가 있을까요? “ 첫 페이지를 로딩 할 때 서버에서 미리 로딩된 것을 불러오기 때문에 Next에서 구성해주는 loading.tsx나, 리액트 쿼리에서 사용하는 isPending둘 다 의미가 없다. Next에서 첫 페이지의 데이터는 서버에서 전부 로딩하고 이걸 가져다 쓰기 때문이다 “ 라고 하셨는데 여기서 첫 페이지가 정확히 무엇을 의미하는 것인가요? 최초 렌더링인지, 새로고침 이후 접근하는 페이지인지, 아니면 다른 페이지를 갔다가 그대로 다시 돌아오면 그것도 첫페이지가 되는 것인지 헷갈립니다ㅠㅠ (Next의 Streaming with Suspense 를 사용하기 전 내용입니다) API에 await delay(3000) 를 사용했을 때, prefetchInfiniteQuery를 사용한 PostRecommends.tsx 에서는 리액트 쿼리의 isPending은 적용되지 않지만, loading.tsx로 지정한 로딩 스피너는 보여집니다. loading.tsx로 지정한 로딩 스피너가 보여질 때, 어쨌든 prefetchInfiniteQuery 를 통해 서버측에서 미리 데이터를 fetch할 때 API를 사용할텐데 이 때 API에 await delay(3000)가 있음에도 loading.tsx는 항상 await delay(3000)와 관계없이 아주 짧은 시간동안만 (거의 0.5초?) 나타나는데 이는 왜 그런가요? 최소 이 때 역시 API 호출로 인해 delay(3000)가 작동되면 3초 이상이 걸려야하는게 맞지 않나요? 이는 혹시 prefetchInfiniteQuery가 컴포넌트가 마운트 되기 전에 미리 데이터를 받아놓기 때문에 dealy(3000)이 직접적으로 체감되지 않기 때문인가요?
안녕하세요 Querydsl Projection 을 활용해 DTO에 담는경우 성능 관련 질문이 있습니다. Querydsl에서 Projections.constructor를 활용해서 query를 작성하는경우 fetchJoin이 되지 않더라구요. 일대 다 관계에서 fetchJoin을 하지 않게되면 n+1 이슈가 발생할거 같은데 Projections을 활용하는 환경에서 성능개선은 어떻게 해야할까요?
안녕하세요 제로초님, 강의 완강했습니다. 덕분에 많은 지식 얻었었습니다. 감사합니다. 이제 여기서 배운 내용을 바탕으로 제 리액트 프로젝트 하나를 next로 마이그레이션 해보려고 합니다. 마이그레이션이 처음이라 막상하려고하니, 폴더 구조가 완전히 바뀌고, 거의 모든게 달라지기 때문에 어떻게 마이그레이션을 시작해 나갈지 의문이 듭니다. 구글링에서도 뚜렷하게 방법을 설명해주는 글이 보이지 않아 문의 드립니다. 질문1. 기존 프로젝트는 git-flow 전략을 통해 v1.0.0까지 배포를 마친상태입니다. 마이그레이션을 해서 v2.0.0로 배포를 하면 좋을 것 같은데, 기존 develop 브랜치에서 feature/next-migration 브랜치를 따서 작업하는게 좋을까요? 질문2. next를 설치하는 순간 많은 설정이 달라져서, 기존 코드 파일들을 그대로 두면 npm start시 에러가 날 것 같습니다. 현업에서는 기존 파일을 다 삭제하고 next의 디렉토리 구성을 만들어 놓은 다음에 다른 브랜치에서 코드를 복사해와서 재작성을 하나요? 아니면 다른 좋은 방법이 있나요?
Warning: Cannot update a component (`Router`) while rendering a different component (`RedirectLoginPage`). To locate the bad setState() call inside `RedirectLoginPage`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at RedirectLoginPage (webpack-internal:///(app-pages-browser)/./src/app/(beforeLogin)/login/page.tsx:15:78) at StaticGenerationSearchParamsBailoutProvider (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/static-generation-searchparams-bailout-provider.js:15:11) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:240:11) 로그인 버튼 클릭시 '/login' 이동하면 이런 Warning 이 발생하는데 빌드시에도 Error occurred prerendering page "/login". Read more: https://nextjs.org/docs/messages/prerender-error ReferenceError: location is not defined 위 같은 에러가 발생합니다. location을 사용하는 부분도 없고, useRouter도 'next/navigation' 에 있는 것을 사용중입니다. 해결법으로는 useEffect로 감싸주는 법이 있어 useEffect((router.replace(path)) => []) 이런방식으로 해봤는데 오류는 해결되네요. 하지만 오류 내용대로 해석해보면 렌더링 도중 set을 통한 상태변화를 하지 않는데 오류가 나는 이유는 뭔가요? return 으로 Main 컴포넌트를 그려주어야하는데 replace시 LoginModal의 컴포넌트를 그려주어야해서 렌더링해야할 컴포넌트가 겹쳐서 발생하는 문제인가요?
강의에서 진행 된 요소 추가 전까진 정상 작동 되는 것 확인 했습니다. Menu 추가 후 아래와 같은 오류가 출력 됩니다. Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. TypeError: Cannot read properties of null (reading 'useRef') at useRef (C:\Users\sion\node_modules\react\cjs\react.development.js:1630:21) at Object.render (C:\Users\sion\node_modules\antd\lib\menu\index.js:19:37) at ReactDOMServerRenderer.render (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3535:44) at ReactDOMServerRenderer.read (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29) at renderToString (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27) at Object.renderPage (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\server\render.js:50:851) at Document.getInitialProps (C:\Users\sion\Documents\prepare\front\.next\server\pages\_document.js:264:19) at loadGetInitialProps (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\lib\utils.js:5:101) at renderToHTML (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\server\render.js:50:1142) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 터미널에 찍힌 로그입니다. react/react dom 버전은 동일함을 확인했고 16.14.0 버전 사용 중입니다. 구글링 중 react hook form을 인스톨 하라는 검색 결과가 있어 해당 패키지 설치 했습니다. 버전은 7.49.2 사용 중 입니다. 로컬에서 실행 된 화면입니다.
안녕하세요 강의 잘 듣고있습니다 제로초님! 질문 한 가지 있습니다! 섹션3 마지막 강의 suspense 관련 간단 질문입니다. 검색 엔진이 로딩화면을 긁어가서 SEO가 안 좋아지는 것을 막기위해서 preFetchInfiniteQuery를 통해 SSR를 구현해야한다고 하셨는데, 마지막에 알려주신 post 목록에 suspense로 따로 로딩을 구현한 부분은 검색 엔진에 감지 되나요? 만약에 감지가 되지 않는다면 가장 중요한 게시물의 내용이 안보이게되는 셈이 될텐데 괜찮나요?
안녕하세요! revalidateTag 함수 관련 코드를 보다가 궁금한 점이 생겨서 질문 드립니다! 우선 fetch 를 통해 데이터를 받아오는 비동기 호출은 서버 컴포넌트에서만 호출할 수 있다고 해서 날씨API나 시간API를 서버 컴포넌트에서 fetch 를 이용해 받아오는 것 까지는 이해가 갔습니다. 그런데 아래와 같이 캐시를 비우는 버튼을 만들 때는 클라이언트 컴포넌트에서 fetch 가 사용되었습니다. 'use client' type Props = { tag : string } export default function RevalidateButton({tag} : Props) { const handleClick = async () => { const res = await fetch(`/api/revalidate?tag=${tag}`, { method : 'POST' }) console.log(res) } return <button onClick={handleClick}>캐시 비우기</button> } 일단 이벤트 핸들러는 클라이언트 컴포넌트에서 사용 해야 되서 'use client' 를 작성하는 것도 이해가 갔습니다. 그리고 revalidateTag 함수는 서버 컴포넌트에서 호출되야 하니깐 'api요청을 보내야 되서 fetch 를 사용해야 한다' 라고 이해를 했는데요.. 그럼 혼란 스러운게.. ' fetch 비동기 호출은 서버 컴포넌트에서 하라고 되어 있는데 revalidateTag 같이 서버 컴포넌트에서 동작하는 함수를 호출하기 위해서는 어쩔 수 없이 fetch 를 클라이언트 컴포넌트에서 사용해야한다' 라고 이해 하는게 맞을까요?? 그리고 위의 코드에서 method : 'POST' 라고 세팅하여 주셨는데 보내는 방식은 POST 로 정해져 있는 것인지, 다른 메서드 (get, update, delete)로 사용하면 안되는 것인지 궁금합니다! 아래는 핸드북(3. Next.js 손에 익히기 / 7.날씨데이터 조회하기 / 데이터 재검증하기 )에 설명해주신 내용인데요! revalidateTag 는 서버 사이드에서 호출 가능합니다. 하지만 캐시를 풀어달라는 요청은 클라이언트(브라우저)에서 만들어집니다. 때문에 API 형태로 revalidateTag 를 호출할 수 있도록 만들어야 합니다. Next.js에서의 API는 라우트 핸들러를 통해 만들 수 있습니다. "캐시를 풀어달라는 요청은 클라이언트(브라우저)에서 만들어집니다." 라는 말이 RevalidateButton 버튼을 클릭했을 때 handleClick 함수가 호출되는 때를 말씀하신 것인지 궁금합니다. 아래는 revalidateTag 가 호출되는 서버 컴포넌트 코드입니다. import { revalidateTag } from "next/cache"; import { NextRequest, NextResponse } from "next/server"; export async function POST(req:NextRequest) { const tag = req.nextUrl.searchParams.get('tag'); if(!tag) throw new Error('태그는 필수!!') revalidateTag(tag) return NextResponse.json({message : '재검증에 성공했습니다', tag}) } revalidateTag 함수는 호출시 에러가 발생하는 경우는 없는건가요?? 제 생각에는 revalidateTag 도 제대로 작동을 안할 수도 있으니깐 try catch 문으로 감싸서 호출하는게 맞지 않을까? 생각이 들었는데 그렇게 안해도 되는 것인지 궁금합니다!
[질문 내용] 제가 지금 이해한 내용으로는 Parent parent = new child(); 가 있을때 메모리에는 Child를 기준으로 상위 부모 클래스만 메모리에 적재되고 (편의상 Child 메모리라고 하겠습니다), parent의 참조 주소는 생성된 Child 메모리 안의 Parent 클래스를 참조하며, parent의 멤버변수는 Parent 클래스의 멤버변수만 가질 수 있고, 오버라이딩된 메소드가 존재한다면 무조건 오버라이딩된 메소드가 우선권을 가진다 라고이해했는데, 덧붙일 개념들이 혹시 있을까요? 아, 그리고 만약 오버라이딩된 메소드가 부모클래스에서 실행할 수 없는 메소드라면 어떻게되는지도 궁금합니다. (혹시, 오버라이딩된 메소드가 부모클래스에서 실행되지않을 가능성은 아예 없나요?)
