지금 계속 프론트서버에서 npm run build를 하려는데 왠지는 모르겟는데 빌드가 되다가 멈추는 현상이 생깁니다. 여기서 멈추고 30분째 가만히 있는데 이유가 따로 있을까요? 우분투 서버는 Ubuntu Server 22.04 LTS (HVM), SSD Volume Type 이거를 사용했고 인스턴스 유형은 t2.micro입니다..

데이터가 사라진건가요 .. null 떠서 강의을 맞춰 가기가 힘들어요 ㅠㅠ

tsx 수정 시 마다 빌드 후 서버 시작 해야하나요?백엔드 서버의 경우 nodemon으로 자동으로 수정사항 발생 시 서버 재시작 해주던데, 리액트 서버의 경우 어떻게 하는게 좋은가요?

useState 쳤을 때 자동완성 되는 단축키 무엇인가요? extention 인가요?

리액트 서버 npm run dev 와 npm run build 후 npm start 의 차이가 무엇인지 궁금합니다.

import { gql } from "@apollo/client"; export const FETCH_BOARDS = gql` query fetchBoards { fetchBoards { _id writer title createdAt } } `;import { useQuery } from "@apollo/client"; import { useRouter } from "next/router"; import BoardListUI from "./BoardList.presenter"; import { FETCH_BOARDS } from "./BoardList.queries"; export default function BoardList() { const { data } = useQuery(FETCH_BOARDS); //쿼리문을 실행하면 데이터에 값 넣어주기 return ( <BoardListUI data = {data} /> ); } 강사님 하고 똑같이 했는데 제것만 에러가 나네요 강사님껄로 하면 실행이 됩니다 _id 받질 못해서 안되는데 왜이럴까요 ㅠㅠ { "errors": [ { "message": "Cannot query field \"_id\" on type \"BoardReturn\".", "locations": [ { "line": 3, "column": 5 }

안녕하세요. 제로초님 좋은 강의 감사합니다. 해당 강의에서 fresh 상태일 때는 새로고침을 해도 서버에서 데이터를 가져오지 않고 캐시된 데이터를 사용한다고 하셨습니다. 그래서 fresh 상태일 때 새로고침을 하여 FollowRecommendSection를 트리거 하였고 해당 API가 요청이 되는지 보았습니다.export default function FollowRecommendSection() { const { data } = useQuery<User[]>({ queryKey: ['users', 'followRecommends'], queryFn: getFollowRecommends, staleTime: 60 * 1000, // fresh -> stale, 5분이라는 기준 gcTime: 300 * 1000, }); return data?.map((user) => <FollowRecommend user={user} key={user.id} />); } export async function getFollowRecommends() { const res = await fetch(`http://localhost:9090/api/followRecommends`, { next: { tags: ['users', 'followRecommends'], }, cache: 'no-store', }); ... } 그런데 개발자도구 네트워크 탭에서는 밑에 사진과 같이해당 API가 다시 요청되는것을 확인할 수 있었습니다.fresh라 할지라도 API 요청은 항상 이루어지며 데이터만 캐시된 것을 ?? 가져오는 것인지 궁금합니다.  감사합니다. 

test("Prevent the -,+ button from being pressed when the on/off button is clicked",()=>{ render(<App />); const onOffButtonElement = screen.getByTestId("on/off-button"); // click onOffButtonElement button fireEvent.click(onOffButtonElement); const plusButtonElement = screen.getByTestId("plus-button"); expect(plusButtonElement).toBeDisabled(); })on/off버튼을 통해 플러스와 마이너스 버튼의 클릭시 disable속성을 추가하는 과정에서 app.test.js에 테스트항목에 마이너스에 대한 내용을 안적어도 무관한가요?플러스가 잘작동하면 마이너스도 잘 작동할 것이기 때문인가요?

안녕하세요 섹션 1 듣고 혼자 해보다가 궁금한 게 생겨서 질문드립니다.기존 사이트는 왜 "/login"으로 진입하면 "/i/flow/login"로 리다이렉트하게 했을까요?단순하게 생각하면 그냥 "/login", "/signup"에 페이지를 두던가 아니면 "/i/flow/login", "/i/flow/signup"만 사용하도록 하면 리다이렉트 로직 필요없이 더 깔끔할 것 같은데 말이죠.또 의아한 것은 기존 사이트에서 '/signup' url로 진입하면 '/i/flow/signup'으로 리다이렉트하는데 계정 만들기 버튼은 로그인과 다르게 href를 /i/flow/signup'으로 해두었네요. 실수인가..물론 제로초님은 기존 사이트를 최대한 그대로 구현하려고 하신 것 뿐이니까 당연히 정확한 의도를 알 수 없으시겠지만 현업자 입장에서 추측이 가는 부분이 있으신가 싶어 질문드립니다!

데이터패칭을 리액트쿼리로하고 데이터 공유를 zustand로 하는데요!만약 데이터 패칭을 해서 받아온 데이터를 전역으로 공유해서 사용하고싶으면 어떤식으로 처리되는게 가장 좋은 방법인가요??

사진 상세보기에서 오른쪽 UI에 댓글 달기랑 게시글이 있는데 이 때 게시글 눌렀을 때 단순 도메인만 바뀌고 이동이 안되더라구요. 그래서 아래 코드처럼 PostArticle 컴포넌트 에서 router.refresh() 넣어서 처리했는데 이렇게 해도 될까요? const router = useRouter(); const handleOnClickCapture = () => { router.push(`/${post.User.id}/status/${post.postId}`); router.refresh(); // 추가 } return ( <article onClickCapture={handleOnClickCapture} className={style.post}> { children } </article> )   

위에 코드로 docker-compose up을 해도 data 폴더가 생성되지 않아요. 다른 질문 참가해서 volumes: data:를 넣어봐도 생성되지 않습니다. 밑에 코드는 docker-compose up을 실행했을 때 뜨는 코드 입니다.PostgreSQL Database directory appears to contain a database; Skipping initialization2024-03-15 02:14:21.650 UTC [1] LOG: starting PostgreSQL 16.2 (Debian 16.2-1.pgdg120+2) on x86_64-pc-linux-gnu, compiled by gcc (Debian 12.2.0-14) 12.2.0, 64-bit2024-03-15 02:14:21.650 UTC [1] LOG: listening on IPv4 address "0.0.0.0", port 54322024-03-15 02:14:21.650 UTC [1] LOG: listening on IPv6 address "::", port 54322024-03-15 02:14:21.665 UTC [1] LOG: listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432"2024-03-15 02:14:21.683 UTC [30] LOG: database system was shut down at 2024-03-15 02:13:06 UTC2024-03-15 02:14:21.697 UTC [1] LOG: database system is ready to accept connections 어떻게 해야할까요?

안녕하세요.강의보고 따라하니 https 적용이 잘 됐습니다. 저는 https를 적용하기 전에 3050번 포트에 프론트,3060번 포트에 백,3000번 포트에 관리자 페이지를 각각 배포해놓았습니다. ec2의 한 인스턴스에 이 3개를 배포하는 방법은 있을까요?예를 들어 도메인이 domain.com 일때,프론트는 domain.com에 배포하고관리자는 domain.com:3000에 배포하고백은 domain.com:3060에 배포하는 방법이 있을까요?

현재 강의에서 @modal 컴포넌트에 [photoId] / page.tsx 에서 아래 코드를 작성후 hydrationBoundery로 감싼 후 게시글의 사진을 눌르면 모달이 나와야 하는데 아래의 오류가 발생합니다. 도저히 해결하지 못해서 ch3-2를 클론해서 실행시켜보았는데도 똑같이 이런 에러가 나옵니다. 그래서 "use client"컴포넌트로 만들어 준 후 QueryClientProvider 로 감싸주었더니 해결되었습니다. 근본적인 문제가 뭔지 모르겠네요 ㅠㅠㅠ"use client" import CommentForm from "@/app/(afterLogin)/[username]/status/[id]/_component/CommentForm"; import ActionButtons from "@/app/(afterLogin)/_component/ActionButtons"; import style from './photoModal.module.css'; import PhotoModalCloseButton from "@/app/(afterLogin)/@modal/[username]/status/[id]/photo/[photoId]/_component/PhotoModalCloseButton"; import {dehydrate, HydrationBoundary, QueryClient, QueryClientProvider} from "@tanstack/react-query"; import {getSinglePost} from "@/app/(afterLogin)/[username]/status/[id]/_lib/getSinglePost"; import {getComments} from "@/app/(afterLogin)/[username]/status/[id]/_lib/getComments"; import SinglePost from "@/app/(afterLogin)/[username]/status/[id]/_component/SinglePost"; import React from "react"; import Comments from "@/app/(afterLogin)/[username]/status/[id]/_component/Comments"; import ImageZone from "@/app/(afterLogin)/@modal/[username]/status/[id]/photo/[photoId]/_component/ImageZone"; type Props = { params: { id: string } } export default async function Default({params}: Props) { const {id} = params; const queryClient = new QueryClient(); await queryClient.prefetchQuery({queryKey: ['posts', id], queryFn: getSinglePost}); await queryClient.prefetchQuery({queryKey: ['posts', id, 'comments'], queryFn: getComments}); const dehydratedState = dehydrate(queryClient); return ( <div className={style.container}> <QueryClientProvider client={queryClient}> <HydrationBoundary state={dehydratedState}> <PhotoModalCloseButton/> <ImageZone id={id} /> <div className={style.commentZone}> <SinglePost id={id} noImage /> <CommentForm/> <Comments id={id} /> </div> </HydrationBoundary> </QueryClientProvider> </div> ); }

안녕하세요 제로초님 강의 잘보았습니다!본론부터 말씀드리자면 2가지 고민이 있습니다. 하나는 msw component가 필요한지 궁금합니다.왜냐하면 현재 express로 하고 있어서 msw component가 없어도 mock 서버(express)를 키면 작동하는데 msw component가 관여하지 않은것 같아서요~ 두번째는 localhost 9090 외에 실제로 사용하는 api를 모킹하고 싶은데 어떻게 해야할지 고민이 됩니다.예를 들어주소가 naver.com이라면 이 백엔드 api를 넣는 방법을 모르겠습니다.~! 감사합니다!

이미지 상세 보기 눌렀을때 모달창이 켜지고, 닫기 버튼 누르면router.back() 으로 처리하셨는데이 때 문제점이 게시글 위치가 다시 맨 위로 올라가게 되더라구요. 만일 닫기 버튼 눌러도 제가 스크롤 해서 봤던 게시글 위치 그대로 보여질려면 어떻게 처리하면 좋은가요?

docker-compose up을 사용하면 initdb: error: directory "/var/lib/postgresql/data" exists but is not emptyinitdb: hint: If you want to create a new database system, either remove or empty the directory "/var/lib/postgresql/data" or run initdb with an argument other than "/var/lib/postgresql/data". 라는 오류가 자꾸 발생합니다. 삭제하고 다시 해도 해결이 안되서 질문남깁니다. 어떻게 해결해야하나요.

type Props = { postId: number; userName: string, userId: number; }위 코드처럼 type에서는 끝에 ; 혹은 , 둘 다 섞어서 써도 괜찮은가요?

ex) src/components/commons/apollo/index.tsx// ... const uploadLink = createUploadLink({ uri: "...", headers: { Authorization: `Bearer ${accessToken}` }, }); const client = new ApolloClient({ link: ApolloLink.from([uploadLink]), cache: GLOBAL_STATE, }); // ...이전 강의에서 createUploadLink 함수를 이미지같은 파일을 업로드 설정을 위해 불러왔었는데 이 안에 accessToken을 넣어주는 게 이해가 가지 않았습니다. 지금 제 머릿속에는 자동으로 headers에 accessToken을 담아서 인가를 해주는 설정을 왜 이미지업로드를 위한 설정함수에 accessToken을 넣어주는 거지?라는 생각이 들어서 혼란스럽습니다.. 이 부분에 대해서 제가 잘못 이해하고 있거나 이렇게 해주는 이유에 대해서 알려주신다면 감사드리겠습니다!

auth.ts 관련 코드입니다. export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/login", }, events: { // signOut(data) { // console.log(data); // }, }, callbacks: { session: async ({ session }) => { console.log("session", session); return session; }, }, providers: [ CredentialsProvider({ name: "credentials", async authorize(credentials) { const { email, password } = credentials; const res = await axios.post( `${process.env.NEXT_PUBLIC_LOCAL_API_URL}/api/login`, // `${process.env.NEXTAUTH_URL}/api/login`, { email, password, } ); let setCookie = res.headers["set-cookie"]; let stringCookie; setCookie && setCookie.map((item) => (stringCookie = item)); if (setCookie && stringCookie) { const parsed = cookie.parse(stringCookie); cookies().set("connect.sid", parsed["connect.sid"], parsed); // 브라우저에 쿠키 심기 } if (!res.data) { return null; } const data = res.data; if (data) { return { email: data.email, nickName: data.nickName, area: data.area, location: data.location, distance: data.distance, ...data, }; } else { return null; } }, }), GitHubProvider({}), NaverProvider({}), GoogleProvider({}), ], secret: process.env.NEXTAUTH_URL, });auth.ts에서 log를 찍어보았을 때는 auth.ts를 아예 타지 않습니다. (로그인 submit 을 했을 시 ) 또한 현재 오류 Network에서 이와 같은 오류가 계속 발견되어서 그리고 쿠키에는 아무것도 담기지 않습니다. 분명 몇 일 전까지만 해도 잘되던 녀석이었는데 갑자기... 이러한 오류로 안됩니다. package의 버전은 아래와 같습니다. "@auth/core": "0.19.0", "next-auth": "^5.0.0-beta.3", 이러한 부분은 왜 계속 오류가 나는 것인지 궁금합니다.