https://github.com/ZeroCho/react-nodebird/blob/master/toolkit/front/pages/index.js 여기 코드를 가져와서 ssr을 설정했습니다 front 코드 에러로 Error: Hydration failed because the initial UI does not match what was rendered on the server. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. 이렇게 두개가 나오는데 이걸 어떻게 해결할지 잘 모르겠습니다 initaial UI 에러라길레 initialState: { user: { ...userInitialState, me: myInfo, }, post: { ...postInitialState, mainPosts: posts, hasMorePosts: posts.length === 10, }, }, 주석 처리 되어있는 이부분을 어떻게 해야되는거 같은데 잘 모르겠습니다
Next.js로 Google Cloud Platform에 App Engine 서비스 배포를 진행하고 있습니다. 문제는 production ( 실 서비스 )와 development ( 개발용 )으로 나누어서 .env.development, .env.production의 두개의 환경변수를 가지고있습니다. 배포 시 실서비스 에서는 .env.production을 사용하도록 개발용 에서는 .env.development를 사용하도록 설정하려는데 이것저것 만져보아도 production만 사용하는 문제가 발생해버리네요. 현재 프로젝트구조와 설정코드는 이렇습니다. project ├── local └── Dockerfile └── docker-compose.yml ├── resource └── .next └── ... (Next.js 빌드 파일) └── node_modules └── package.json └── dev_app.yaml └── prd_app.yaml └── .env.development └── .env.production └── next.config.js └── ... (기타 Next.js 프로젝트 파일) 여기서 package.json의 script설정은 다음과 같습니다. { dev: "next dev", start: "next start", lint: "next lint", deploy: "npm run build && gcloud app deploy --project='production' -q --appyaml=prd_app.yaml", deploy:dev: "npm run build:dev && gcloud app deploy --project='development' -q --appyaml=dev_app.yaml", build: "dotenv -e .env.production next build", build:dev: "dotenv -e .env.development next build" } next.config.js는 특별히 건드리지 않았습니다. dev_app.yaml, prd_app.yaml파일은 서비스명만 각각 설정해 주었습니다. runtime: nodejs20 # or another supported version service: development 질문 1. 현재 app engine 업로드된 용량, 로직을 보니 빌드파일이 아닌 프로젝트 그대로 들어가는 것 같습니다. 빌드는 환경변수파일도 정상적으로 분기되는데 앱엔진에서 해당문제가 발생하는 것으로보아 혹시 Next.js에서 빌드된 파일로 app engine에 배포할 수 있는지 궁금합니다. 질문 2. 빌드파일만 올릴수 없다 라고 하더라도 프로젝트 그대로 올리면서 환경변수를 분기할 방법이 있는지 궁금합니다. 정말 문서건 블로그건 구글서칭, 깃허브검색, GPT 모두 끈질기게 시도해봤지만 능력부족 탓인지 성공하지 못했습니다.. 능력자분들께서 도움주시면 잊지않겠습니다!!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. const movieId = request.data.result[Math.floor(Math.random() * request.data .results.length)].id; 부분 작성 후 컴파일 시 리액트에서 Cannot read properties of undefined 에러가 발생합니다. 하나가 아니라 여러개 발생하는데 조치방법이 있을까요?
로그인 및 인증,인가(세션,jwt둘다 사용), 게시판(이미지포함), 댓글, 소켓채팅 정도의 기능을 구현하여 테스트 코드와 docker로 띄워서 CI/CD까지 구현하려고 합니다. 상태랑 로직 관리를 useReducer, React Context API, React Query, redux, graphql 정도로 생각하고 있는데 어떤걸로 하는게 좋을까요?!
강의의 중고마켓 포트폴리오를 만들고 있는 수강생입니다 해당 포트폴리오는 배포를 못한다고 알고 있는데, 배포링크 없는 프로젝트를 면접관이 안좋게 보지 않을지 걱정됩니다 (git소스코드와 함께 readme에 gif, 기타 설명은 첨부하려고 합니다) 그래서 다 수강한 후에 강의의 프로젝트와 함께, 배포까지 하는 새 프로젝트를 만들어볼까 생각중인데 이경우 파이어베이스나 node.js를 활용해서, 제가 직접 기본적인 백엔드만 구축하려고 하는 새 프로젝트가 취업에 도움이 될지 궁금합니다.. 비효율적인가 싶기도 하고요 아니면 다른 좋은 방법이 있을까요..?
ApolloClient를 이용해서 graphql 연동 시 다음과 같은 에러가 발생합니다. 사용 환경이 localhost가 아니라 "Access-Control-Allow-Origin" 정보가 일치하지 않아 거부되고 있습니다. backend-practice graphql연동 시 localhost:3000 만 허용되는 것 같습니다. 아래 에러 정보 공유합니다. Access to fetch at 'http://backend-practice.codebootcamp.co.kr/graphql' from origin 'http://10.10.9.109:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. ApolloClient에서 no-cors로 설정시에는 서버 에러를 수신하게 되어 현재 연동이 어려운 상태입니다. 어떻게 해야 할까요?
프로필페이지 에서 세로고침을 할때 로그인이 풀리면서 로그인 정보가 사라지면서 에러가 발생하는 현상이 있었습니다 const Profile = () => { const { me } = useSelector((state) => state.user); const dispatch = useDispatch(); useEffect(() => { if (!(me && me.id)) { Router.push("/"); } }, [me && me.id]); useEffect(() => { dispatch(loadFollowers()); dispatch(loadFollowings()); }, []); return ( <> <Head> <title>프로필 | NodeBird</title> </Head> <AppLayout> <NicknameEditForm /> <FollowList header="팔로잉 목록" data={me?.Followings} /> <FollowList header="팔로워 목록" data={me?.Followers} /> </AppLayout> </> ); }; 그런데 이해가 안되는점은 Router.push로 me에 대한 정보가 없으면 루트 페이지로 넘어가게 만들어두었는데도 로그인 정보가 없다고 에러가 발생하고 그래서 로그인 정보를 가져오는 loadMyInfo를 사용해도 계속 에러가 발생한다는 점입니다. 이부분이 일단 첫번째로 이해가 안되는 점이고 아래 질문자님들이 질문하신 내용으로 me?.Foolowings로 일단 해결하고 넘어갔습니다 그런데 또 프로필 페이지에서 세로고침을 해보니까 이번에도 me에 대한 정보가 없다고 나옵니다 me에 대한 정보가 없어서 발생하는 에러인데 팔로워에 대한 정보를 불러오는 리듀서에서 에러가 발생합니다 하지만 사진에 state 정보를 보시면 me에 정보가 들어있습니다. 아마 me 정보를 갱신하기 이전에 발생한 action에 대한 에러인거 같은데 어떻게 해결하면 좋을까요?
안녕하세요 선생님! 전에 Bad request 400 문제로 글 올렸던 사람입니다 답변 주신 부분은 잘 확인 했습니다. 그런데 variables는 잘 작성했구 연결도 했습니다. 그런데 useEffect 로 boardId가 유효하면 실행, 아니면 loading이라는 문구를 내보내게 작성한 후 확인을 해보니 아래와 같은 문제가 있었습니다 console.log(router.query.boardId) ;에서 undefined 가 떳길래 useRouter가 작성됐는지 import했는지랑 확인했고, 문제 없었습니다. 또, ReferenceError: boardId is not defined 메시지가 떳습니다 . . ] 그래서 다른 방법으로 해결을 해보고자 console.log(router.query.boardId);가 담긴 index에서 import를 선언하는 부분 최상위에 " use client "를 작성하고, import { useRouter } from 'next/router' 를 ' next/navigation '으로 바꿨더니 아래와 같이 오류가 확인 됐습니다.. . 아래는 문제가 있는 컴포넌트입니다 (useEffect 지움, next/router로 바꿈) "use client" import { useRouter } from "next/router"; import { gql, useQuery } from "@apollo/client"; import { Avatar, AvatarWrapper, Body, BottomWrapper, Button, CardWrapper, Contents, CreatedAt, Header, Info, Title, Wrapper, Writer } from "../../../styles/boardnewpage"; export const FETCH_BOARD = gql` query fetchBoard($boardId: ID!) { fetchBoard(boardId: $boardId) { _id writer title contents createdAt } } `; export default function BoardDetailPage() { const router = useRouter(); console.log(router.query.boardId); const { data } = useQuery(FETCH_BOARD, { variables: { boardId: router.query.boardId }, }); if (!data) { // boardId가 없는 경우에 대한 처리 (예: 로딩 스피너 표시 등) return <div>Loading...</div>; } return ( <Wrapper> <CardWrapper> <Header> <AvatarWrapper> <Avatar src="/images/ic_profile.png" /> <Info> <Writer>{data?.fetchBoard?.writer}</Writer> <CreatedAt> {data?.fetchBoard?.createdAt} </CreatedAt> </Info> </AvatarWrapper> </Header> <Body> <Title>{data?.fetchBoard?.title}</Title> <Contents>{data?.fetchBoard?.contents}</Contents> </Body> </CardWrapper> <BottomWrapper> <Button>목록으로</Button> <Button>수정하기</Button> <Button>삭제하기</Button> </BottomWrapper> </Wrapper> ); } 아래는 위 컴포넌트를 실행하고 나서 뜨는 화면 입니다 if문을 지우고 나면 저번에 올렸던 질문 글 처럼 화면은 넘어가는데 varibales 데이터들만 안뜹니다...! + 로딩 뜬 화면의 개발자도구 화면 입니다!! 확인해주시고 답변 주시면 감사하겠습니다.!!!😂🥹
저의 경우 '나만의 페이지'라고 하지 않고, my_page(소문자)로 해서 실행했는데, 안되더라구요.... 계속 왜 안되지 해메고 있었는데 my_page를 My_page(대문자)로 하니까 실행되는걸 확인했습니다. 혹시나 앞글자를 소문자로 하신분들은 대문자로 바꿔주시면 나올거 같아요~ 여기서 소문자로 import했을경우엔 왜 나오지 않을까요? react의 규칙인가요?
안녕하세요! 섹션27 포트폴리오 제작에 문제가 있어서 질문 올립니다. 위 사진은 등록하기를 누르고 나면 나온 상세페이지 인데요, 다 하고나서 검토 한 뒤에도 varibales한 createBoardInput들만 확인 되지 않습니다.. 오타도 없고(혹시몰라서 선생님이 작성하신 코드(gql, try~catch부분)를 복사붙여넣기도 해보았습니다), package.json도 확인했고, app.js의 uri에도 문제가 없는데 어떻게 된걸까요.ㅠㅠ 아래는 추가 오류상세메시지 입니다 확인해주시고 답변해주시면 감사하겠습니다!! + 제 폴더를 복붙해서, 그 복붙한 폴더 안에 포트폴리오 자료인 선생님 폴더의 pages-boards 내의 [boardId]와 new의 index.js 를 복사해 붙여넣어봤는데(나머지 파일들은 냅둠) 같은 에러가 뜹니다. 그래서 ui와 container의 문제는 아닌 것 같아요.. 개발자도구 Sources탭에서 cteathttpLink의 currentFetch 부분에 오류가 뜨더라구요 그럼 아예 처음에 프로그램들을 설치할 때 잘못설치해서 충돌했을 그런 가능성이 있단건가요??
