Next 프로젝트는 클라이언트에서도 동작하고 서버에서도 동작한다. 그래서 MSW가 클라이언트, 서버에서 동작해야한다. 그러나 아직 서버에서 MSX를 실행하는 방식이 아직 나오지 않았다. 그래서 우리는 임시로 노드 서버를 사용한다. browser.ts - 클라이언트에서 API 요청 모킹 처리해주는 파일 -> 클라이언트 컴포넌트에서 API 요청 시 처리? http.ts - 서버에서 API 요청 모킹 처리해주는 파일 (노드 서버 사용) -> 서버 컴포넌트에서 API 요청시 처리? handlers.ts - 실제 API 모킹 코드
안녕하세요. 리프레쉬 토큰을 사용하여 useAuth에 적용을 했는데요. 로그인을 하여 리프레쉬 토큰이 발급 되어도 조건에 만족하지 못하고 있습니다. 확인해보니 restoreAccessToken을 가져오지 못하여 발생하는 이벤트 였습니다. 하지만 새로고침을 하면 리프레시 토큰을 찾아서 인증이 됩니다. 무슨 이유 때문인지 잘 모르겠습니다. 리프레시 토큰 코드도 첨부하도록 하겠습니다. 추가적으로 로그인 인증시 getAccessToken을 직접 불러오면 문제가 없지만 리코일로더블로 이용하면 이런 문제가 생깁니다.!!
signOut({ redirect: false }).then(() => { fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/logout`, { method: "post", credentials: "include", }); router.refresh(); router.replace("/"); }); 로그아웃 버튼에 `router.refresh()`를 추가하면 로그아웃 버튼을 누르고 다시 로그인했을 때 기존 정보의 캐시가 삭제되고 새로 갱신된다고 하셨는데 저 코드를 추가해도 기존 정보가 계속 남아있는 경우는 어디를 확인해봐야 할까요? 브라우저에서 캐시 지우고 새로고침, 브라우저 창 재시작, 서버 껐다 켜기를 해봤는데도 계속 이전 정보가 남아있습니다..
자잘하게 궁금한게 있으면 여러방식으로 직접해보고는 하는데요 아래의 코드처럼 {...["a", "b", "c"]} 이렇게 props를 전달했을 때 console에는 {0: "a", 1: "b", 2: "c"} 이렇게 없던 배열값의 키값이 생겼습니다. 짐작하기로는 index 위치가 key값이 된 것 같기는 한데 왜 이렇게 되는지 궁금합니다. ex) parent/index.tsx import Child from "./child/index.tsx"; export default function Parent(): JSX.Element { return <Child {...["a", "b", "c"]} />; } ex) parent/child/index.tsx export default function Child(props: any): JSX.Element { console.log(props); // {0: "a", 1: "b", 2: "c"} return <></>; }
message페이지 수정하기편에서 queryClient.prefetchQuery를 사용했는데 다른 컴포넌트에서 queryClient. prefetchQuery를 사용할때는 HydrationBoundary컴포넌트로 감싸고 state에 fetching 해온 데이터를 주입시켜서 사용했는데 여기서는 왜 아무곳에서도 사용하고 있지 않은건지 궁금합니다. 그리고 HydrationBoundary컴포넌트로 감싸고 state에 fetching해온 데이터를 주입시켜서 사용하고 있는곳들도 자식 컴포넌트에서 또 useQuery를 사용하는데 부모 HydrationBoundary에 접근해서 데이터를 사용하지 않고 useQuery로 fetching해와서 사용하는건지 궁금합니다. 저는 여태 HydrationBoundary가 fetching해온 데이터를 공유해주는 ContextAPI같은 컴포넌트라고 생각했었습니다. 자식컴포넌트에서 일일이 useQuery로 데이터를 가져오는거면 상위에 HydrationBoundary컴포넌트 안만들어줘도 되는거 아닌가요?
안녕하세요. 중고마켓 리스트를 무한스크롤로 구현 중에 있는데요. 부모 요소를 감싸서 overflow로 스크롤을 주면 height값이 먹혀서 데이터를 20개 가져오고 나서는 더이상 스크롤을 내릴 수가 없네요. 이건 ListWrap인 스크롤 컴포넌트의 부모요소를 없앨때 이구요. 이건 ListWrap을 넣었을 때 저렇게 값이 나옵니다. 어떻게 해야할까요? 아니면 무한스크롤은 아래처럼 overflowscroll을 넣고 구현이 안되는건가요?
안녕하세요 제로초님, 로컬상에서 mysql workbench 처럼 ec2인스턴스 ubuntu내에 있는 mysql db 데이터들을 시각화해서 관리할 수 있는 툴 같은 건 혹시 없을까요? 데이터들을 수정하고 싶을때 query문으로 직접 관리하는 것이 일반적인지 문의드립니다!
안녕하세요 해당 영상을 통해 학습하고 따로 프로젝트를 진행하는 중에 서버 컴포넌트에서 data를 fetch하고 api 상태코드에 따라서 next에서 제공하는 error.tsx에서 해당 에러 상태에 따라 모달에 메세지를 띄우는 작업을 하고 있습니다. 로컬 환경에서 실행시켰을때는 정상적으로 error status가 523이 발생했을때 정상적인 메세지를 받아서 error.tsx 화면에서 해당 에러 메세지를 모달에 띄우나 빌드 후 실행시켰을 때에는 An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error. 모달안의 메세지에 이러한 문구가 뜹니다. 아무리 찾아봐도 정확한 원인을 모르겠는데 혹시 해결방법을 아실까요? 다국어 처리 라이브러리는 next-intl를 사용하였습니다. /note/page.tsx async function fetchSharedNote(guid: string) { try { const res = await fetch( `${process.env.API_SERVER_URL}/v1/...`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(guid), } ); if (res.ok) { return res.json(); } else { const errorData = await res.json(); throw errorData; } } catch (err: any) { const t = await getTranslations("Index"); if (err.status === RestApiErrorType.notExistResourceException) { throw new Error(t("error523")); } throw new Error(err.message); } } /note/error.tsx "use client"; // Error components must be Client Components import CommonDialog from "@/app/_components/CommonDialog/index"; import { useState } from "react"; export default function Error({ error, }: { error: Error & { digest?: string }; reset: () => void; }) { const [showDialog, setShowDialog] = useState(!!error.message); return ( <CommonDialog isShow={showDialog} contents={error.message} onClick={() => { setShowDialog(false); }} /> ); }
안녕하세요~ backUrl을 수정하여 소스코드가 변동되었으니 github에 commit push를 한 뒤, 우분투 서버에 접속하여 front에서 다시 git pull을 할 경우, 우분투 서버 front에서 build를 또 진행 해야하나요? 그리고, 이전에 강의에서 vim으로 .env를 만든것들도 다시 만들어야할까요?
