툴킷으로 작업을 해보려고 하고 있는데 faker를 써보려다가 제로초님 깃허브에 HYDRATE에 관련된 사항이 있어서 작업을 하려고 하고 잇엇는데 제로초님처럼 똑같이 타이핑을 햇는데 에러가 납니다. const postReducer = createSlice({ name: "postReducer", initialState, reducers: {}, // 청크를 쓸때 필요함 extraReducers: (builder) => builder // 클라이언트 상태를 초기화하는 역할 .addCase(HYDRATE, (state, action) => ({ ...state, ...action.payload.data, })), }); 여기서 에러가 나는 부분은 .. . action.payload.dat a , 중 payload부분이고 에러 사항은 다음과 같이 나옵니다. 'Action<"__NEXT_REDUX_WRAPPER_HYDRATE__">' 형식에 'payload' 속성이 없습니다. next-redux-wrapper 의 버전은 아래와 같습니다. 혹시 "next-redux-wrapper": "^8.1.0", 혹시 next-redux-wrapper로 리덕스 툴킷에 HYDRATE를 하는 방법이 달라진걸까요....
react-query의 쓰임새가 잘 이해가 안가서 질문드립니다. 1. 컴포넌트가 server component 일때는 react-query에 prefetchQuery를 사용하여 미리 서버에서 데이터를 가져오고 dehydrate를 통하여 클라이언트에 전송할수있는 형태로 만들어주고, HydrationBoundary 로 감싸여진 클라이언트 컴포넌트는 서버에서 미리 가져온 데이터를 클라이언트의 쿼리 캐시에 적용하여, getQueryData를 사용하여 네트워크 요청 없이 데이터를 가져올수있고, useQuery 같은 경우에는 미리 가져온 데이터 외에 클라이언트에서 데이터를 가져올 때 사용하는 걸로 이해했습니다. 맞을까요?? 2. queryKey 같은 경우에는 queryFn에 있는 함수에 queryKey를 넘기는 경우가 있고 안넘기는 경우가 있던데 강의에서 props에 따라 키가 바뀌는 경우에만 넘기게 된다고 이해했습니다. 그러면 server component에서 모든걸 prefetchQuery 해서 getQueryData 로 가져다 쓰지 않는 이유가 useQuery를 이용해서 key 값을 다이나믹하게 바뀌는 요청들을 컨트롤 하기 위해서라고 생각이 들었습니다. 하지만 아래와 같이 queryKey를 넘기지 않는 경우에도 useQuery를 사용하는데 prefetchQuery를 해놓고 getQueryData 를 사용할지, prefetchQuery 를 사용하지않고 useQuery를 사용할지 에 대해서 나누는 기준이 있을까요? const { data } = useQuery<Hashtag[]>({ queryKey: ["trends"], queryFn: getTrends, staleTime: 60 * 1000, gcTime: 300 * 1000, enabled: !!session?.user, });
안녕하세요, 강의 잘 듣고 있습니다! 강의를 듣다보니 하나 의문점이 들어 질문드립니다. app 폴더 하위에서 "page.tsx"로 만들면 nextjs에서 자동으로 라우팅하여 경로로 인식한다고 설명해주셨는데요. 강의를 듣다보니 언더바를 붙인 폴더 경로는 라우팅에 포함되지 않는다고 이야기를 하시더라구요. 파일명을 page로 만들지 않으면 라우팅에 포함되지 않는데, 언더바 폴더를 사용하는 이유가 있는지 궁금합니다. 공식 문서에서는 명시적인 구분/이름 충돌 방지등 이점 설명이 있지만, 크게 와닿지 않아서 질문드려요!
안녕하세요 강사님! optimistic update 관련 강의를 듣던 도중에 API반환값이 스웨거에 명시된 부분과 다르게 반환이 되는 것 같아서 질문드립니다! 현재 id값을 기반으로 한 유저 정보 api 에 대한 명세가 스웨거에 명시된 바로는 Follwers 배열 이 있어야 하는데 이상하게 브라우저에서는 Follwers 배열 속성이 누락되어 있습니다.. 유저 정보를 가져오는 api를 호출하는 코드입니다 혹시 MSW에서 백엔드 API를 사용하게 될 때 다른 설정도 추가해줘야 하는 것이 있나요?
Server Error TypeError: inst.render is not a function This error happened while generating the page. Any console logs will be displayed in the terminal window. 요런식으로 오류가 뜨는데 어떻게 해야할까요?
안녕하세요? 경로명 관련 질문이 있습니다. 강의에서 경로명과 동일한 닉네임이 존재한다면 우선순위에 의해 경로명이 먼저다 라고 하셨는데요.(동적 경로, 정적 경로 우선순위 때문에) 만약에 그렇게 된다면 경로명과 동일한 닉네임을 사용하는 유저는 개인페이지를 볼 수 없게 될텐데 이런 유저를 위해서 어떻게 처리를 하면 좋을까요? (혹시나해서 z-com에 login이라는 닉네임으로 가입해서 테스트를 해봤는데 그냥 홈으로 라우팅 되더군요) 구글링도 해보고 GPT한테도 물어봤는데 경로와 동일한 닉네임을 못쓰게한다. 접두사를 하나 추가한다. 얼추 추려서 이정도 답변을 해주는 것 같습니다. 그러나 2번 같은 경우에는 X의 경로방식과 다른 것같고 선택지는 1번만 남은거 같은데.. 제가 만약에 모든 서비스의 닉네임을 login으로 한 유저라고 생각했을때 경로때문에 해당 닉네임을 못쓴다면 굉장히 열받을것 같거든요..ㅋㅋ (그럴 일은 없겠지만..) 뭔가 다른 방법이 또 없을까요..?
A라는 페이지에서 리스트를 여러 개 만들고, 각 리스트에 대해 버튼을 클릭하면 동적으로 생성되는 모달을 만들고 싶습니다. 넥스트의 디렉터리 구조가 특이한데, 이 특이한 것들이 조합되면 헷갈리네요. 이 경우에는 @modal/A/[listId] 와 같은 식으로 디렉터리를 구성하면 되나요?
안녕하세요. 2.1 단위 테스트란 무엇일까? 강의를 들으며 따라하고 있습니다. 강의에서 진행하고 있는 unit-test-example 브랜치에서 TextField.spec.jsx 파일을 따라 치며 테스트를 하려고 하는데 vscode 테스트 메뉴에서 '이 작업 영역에서 아직 발견된 테스트가 없습니다.' 라는 문구와 '추가 테스트 확장 설치'라는 버튼만 떠서 테스트 진행을 하지 못하고 있습니다. 강의에서 소개해주신 vitest를 설치하고 vscode를 껐다가 다시 켜봐도 테스트를 찾을 수 없다고 뜨고 있는데 제가 어떻게 하면 될까요?
예시로 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을 사용해서 상태관리를 해야하는 건가요? 어떻게 사용되는지 알고 싶습니다.
안녕하세요! '서버 쿠키 공유하기 & 게시글 업로드 완성' 강의에서 백엔드 전용 토큰을 생성하고 난 다음에 발생하는 에러가 있습니다. 현재 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 가 전부인가요?
토큰적용 후 발생하는 현상에 대해서 질문드립니다. Product게시판에 이미지에 경우, 아래와 같이 표시가되는데요 이때 토큰을 헤더에 설정 되어있지않기떄문에 {"error":"ERROR_ACCESS_TOKEN"}가 발생합니다. jwtAxios를 사용하여 처리는 가능할듯한데 문제는 결과값이 문자열로 되돌아와서 이미지표시가 좀 힘들어보이고 어떻게 처리해야할지 모르겠습니다. 이런경우 어떠한방식으로 처리하는게 좋을까요? src={`${host}/api/products/view/s_${product.uploadedFileNames[0]}`}
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이 각각 있는 형태인데요. 이러한 경우는 어떻게 해결해야 할까요?
안녕하세요! '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)이 직접적으로 체감되지 않기 때문인가요?
