묻고 답해요
140만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
getLayout을 왜 사용하는 건가요?? (5:20)
이번 강의에서 페이지별 레이아웃을 사용할 때, 레이아웃이 필요한 컴포넌트에 getLayout 메소드를 추가해서 사용합니다// 1 export default function Home() { return <h1 className={style.h1}>인덱스</h1>; } Home.getLayout = (page: ReactNode) => { return <SearchableLayout>{page}</SearchableLayout>; };// 2 export default function Home() { return <SearchableLayout> <h1 className={style.h1}>인덱스</h1> </SearchableLayout>; }// _app.tsx // a type NextPageWithLayout = NextPage & { getLayout?: (page: ReactNode) => ReactNode; }; export default function App({ Component, pageProps, }: AppProps & { Component: NextPageWithLayout }) { const getLayout = Component.getLayout ?? ((page: ReactNode) => page); return <GlobalLayout>{getLayout(<Component {...pageProps} />)}</GlobalLayout>; } // b export default function App({ Component, pageProps, }: AppProps) { return <GlobalLayout><Component {...pageProps} /></GlobalLayout>; } 2번째 코드처럼 사용하면 app 컴포넌트(b)와 레이아웃이 필요한 컴포넌트(2) 둘 다 더 짧게 사용할 수 있을 거 같은데, getLayout 메소드를 사용해야 하는건지 질문드립니다 그냥 표준처럼 사용 되는 건지??페이지 컴포넌트와 레이아웃 컴포넌트를 분리하기 위해서인지??레이아웃이 필요한 컴포넌트에서 레이아웃을 부모 컴포넌트로 사용하면 해당 컴포넌트간 상태 유지 관련 문제가 있는건지??질문 드립니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
접속이 안돼요
데이터통신 실습을 위해서 스웨거하고 graphql을 접속하려고하는데 접속이안돼요..
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
nextjs 프리패칭
2.4) 프리페칭 강의 6분 44초 경의 화면입니다next js 같은 경우 유저가 이동할 가능성이 있는 페이지의 js bundle파일을 미리 서버로 부터 받아온다고 하셨는데만약 초기화면에서 링크 태그를 통해 페이지 이동이 일어나게 된다면1) 서버로부터 수화되기 전 html 파일을 받아와서 화면에 렌더링2) 프리페칭 받아온 js파일로 수화과정3) 상호 인터렉션 가능제가 이해한 과정이 이게 맞을 까요??만약 그렇다면 페이지 이동 시 html 파일은 서버로부터 기본적으로 매 번 불러오는 걸까요?🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨Firebase보다 10배 좋은 Supabase
'[풀스택 완성] Supabase로 웹사이트 3개 클론하기 심화 강의' 3만원 쿠폰
"Firebase보다 10배 좋은 Supabase" 무료강의 수강하면 쿠폰수령 가능하다는데, 어떻게 받나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
카카오 맵 오류
import { useEffect } from "react"; declare const window: typeof globalThis & { kakao: any; }; export default function KakaoMapPage(): JSX.Element { useEffect(() => { const container = document.getElementById("map"); const options = { center: new window.kakao.maps.LatLng(33.450701, 126.570667), level: 3, }; const map = new window.kakao.maps.Map(container, options); console.log(map); }, []); return ( <> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키" ></script> <div id="map" style={{ width: 500, height: 400 }}></div> </> ); } Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <div> in <div>.See more info here: https://nextjs.org/docs/messages/react-hydration-error 카카오 맵 하는데 오류 왜 뜨는건가요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
그래프큐엘 패치보드 질문
포트폴리오 과제중 BoardDetail 작성글 페이지에서 패치보드가 안불러와져서 계속 코드 고쳐보다가결국 강사님이 올려주시는 포트폴리오리뷰 파일 불러와서 코드보고 똑같이 따라쳐도 제 파일에서만 패치보드가 안불러와져서 오류가 계속나네요..혹시 좀 봐주실수 있을까요?(_app.js에서 아폴로 주소 확인도 했습니다)아래는 패치보드 로드 실패로 나오는 창입니다
-
미해결Next + React Query로 SNS 서비스 만들기
fetch 함수에 searchParams.toString() 사용 관련
export const getSearchResult : QueryFunction<Post[], [_1 : string, _2 : string, searchParams : {q : string, pf? : string, f? : string> = async ({queryKey}) =>{ const res = await fetch(`http://localhost:9090/api/search/$ {searchParams.toString()? ${searchParams.toString()}` 여기서 searchParams는 객체 타입인데 toString() 처리가 가능한지 궁금합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
2.1 프로젝트 설치 alias 부분
이 부분 진행할 때 "default alias를 쓸 거냐? No" 라고 말씀해 주셨는데 반대로 말씀해 주신 거 같아요! default alias를 쓴다는 선택이니까요. default import alias 대신 custmize으로 쓰겠냐는 질문에 No라고 선택한 걸로 보입니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
댓글 비밀번호 입력 오류
안녕하세요, 댓글 삭제 기능을 구현하던 도중 Modal에서 입력받은 비밀번호가 제가 댓글을 생성할 때 입력했던 비밀번호와 동일함에도 비밀번호가 틀렸다는 에러 메시지가 나옵니다.제가 작성한 코드에서 어떠한 오류가 있는 건지 가르쳐주시면 감사하겠습니다... BoardComment Containerimport { useState } from "react"; import { useRouter } from "next/router"; import { useMutation, useQuery } from "@apollo/client"; import BoardCommentsUI from "./BoardComments.presenter"; import { FETCH_BOARD, CREATE_BOARD_COMMENT, FETCH_BOARD_COMMENTS, DELETE_BOARD_COMMENT, } from "./BoardComments.queries"; import { MouseEvent, ChangeEvent, MouseEventHandler } from "react"; import { IMutation, IMutationCreateBoardCommentArgs, IMutationDeleteBoardCommentArgs, IQuery, IQueryFetchBoardArgs, IQueryFetchBoardCommentsArgs, } from "../../../../commons/types/generated/types"; export default function BoardComments() { const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [contents, setContents] = useState(""); const [rating, setRating] = useState(0); const [user, setUser] = useState(""); const [boardCommentId, setBoardCommentId] = useState(""); const [modalPassword, setModalPassword] = useState(""); const [contentLength, setContentLength] = useState(0); const [isOpen, setIsOpen] = useState(false); const router = useRouter(); if (typeof router.query.boardId !== "string") { router.query.boardId = Array.isArray(router.query.boardId) ? router.query.boardId[0] : String(router.query.boardId); } const { data } = useQuery<Pick<IQuery, "fetchBoard">, IQueryFetchBoardArgs>( FETCH_BOARD, { variables: { boardId: router.query.boardId, }, } ); const { data: commentData, refetch } = useQuery< Pick<IQuery, "fetchBoardComments">, IQueryFetchBoardCommentsArgs >(FETCH_BOARD_COMMENTS, { variables: { boardId: router.query.boardId, }, }); const [createBoardComment] = useMutation< Pick<IMutation, "createBoardComment">, IMutationCreateBoardCommentArgs >(CREATE_BOARD_COMMENT); const [deleteBoardComment] = useMutation< Pick<IMutation, "deleteBoardComment">, IMutationDeleteBoardCommentArgs >(DELETE_BOARD_COMMENT); const onChangeWriter = (event: ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); }; const onChangePassword = (event: ChangeEvent<HTMLInputElement>) => { setPassword(event.target.value); }; const onChangeContents = (event: ChangeEvent<HTMLTextAreaElement>) => { setContents(event.target.value); setContentLength(event.target.value.length); }; const onChangeRating = (value: number) => { setRating(value); }; const onChangeUser = (event: ChangeEvent<HTMLInputElement>) => { setUser(event.target.value); }; const onChangeModalPassword = (event: ChangeEvent<HTMLInputElement>) => { setModalPassword(event.target.value); }; const showModal = (event: MouseEvent<HTMLImageElement>): void => { setBoardCommentId(event.currentTarget.id); setIsOpen(true); console.log(boardCommentId); }; const handelOk = (): void => { setIsOpen(false); }; const handelCancel = (): void => { setIsOpen(false); }; const onClickSubmitComment: MouseEventHandler< HTMLButtonElement > = async () => { try { if (typeof router.query.boardId !== "string") { return; } await createBoardComment({ variables: { boardId: router.query.boardId, createBoardCommentInput: { writer, password, contents, rating, }, }, }); refetch(); } catch (error) { console.log(error.message); } setRating(0); setWriter(""); setPassword(""); setContents(""); }; const onClickDeleteComment = async ( event: MouseEvent<HTMLButtonElement> ): Promise<void> => { try { await deleteBoardComment({ variables: { boardCommentId, password: modalPassword, }, }); refetch(); } catch (error) { alert(error.message); } setIsOpen(false); setModalPassword(""); }; return ( <BoardCommentsUI data={data} commentData={commentData} writer={writer} password={password} contents={contents} modalPassword={modalPassword} contentLength={contentLength} rating={rating} user={user} isOpen={isOpen} onChangeWriter={onChangeWriter} onChangePassword={onChangePassword} onChangeRating={onChangeRating} onChangeContents={onChangeContents} onChangeUser={onChangeUser} onChangeModalPassword={onChangeModalPassword} onClickSubmitComment={onClickSubmitComment} onClickDeleteComment={onClickDeleteComment} showModal={showModal} handelOk={handelOk} handelCancel={handelCancel} /> ); } BoardComment Presenterimport * as S from "./BoardComments.styles"; import { IBoardCommentsUIProps } from "./BoardComments.types"; import { Rate } from "antd"; export default function BoardCommentsUI(props: IBoardCommentsUIProps) { return ( <S.Container> <S.PasswordCheck open={props.isOpen} onOk={props.onClickDeleteComment} onCancel={props.handelCancel} > 비밀번호 입력:{" "} <input type="text" onChange={props.onChangeModalPassword} /> </S.PasswordCheck> <S.CommentTitleWrapper> <S.CommentIcon src="/icon/rate_review.png" /> 댓글 </S.CommentTitleWrapper> <S.CommentInputWrapper> <S.CommentInputWrapperHeader> <S.CommentWriter type="text" placeholder="작성자" onChange={props.onChangeWriter} value={props.writer} /> <S.CommentPassword type="password" placeholder="비밀번호" onChange={props.onChangePassword} value={props.password} /> <Rate onChange={props.onChangeRating} value={props.rating} /> </S.CommentInputWrapperHeader> <S.CommentInputWrapperBody> <S.CommentInputWrapperBottom placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다." onChange={props.onChangeContents} maxLength={99} value={props.contents} /> <S.CommentTextCount>{props.contentLength}/100</S.CommentTextCount> <S.CommentSubmitButton onClick={props.onClickSubmitComment}> 등록하기 </S.CommentSubmitButton> </S.CommentInputWrapperBody> </S.CommentInputWrapper> <S.CommentListWrapper> {props.commentData?.fetchBoardComments.map((el) => ( <S.CommentListItemWrapper key={el._id}> <S.CommentListProfileWrapper> <S.CommentListProfileImage src="/icon/profile.png" /> </S.CommentListProfileWrapper> <S.CommentListContentsWrapper> <S.CommentListContentsHeader> <S.CommentListWriter>{el.writer}</S.CommentListWriter> <Rate disabled defaultValue={el.rating} /> </S.CommentListContentsHeader> <S.CommentListContents>{el.contents}</S.CommentListContents> <S.CommentListDate>2024-07-27</S.CommentListDate> </S.CommentListContentsWrapper> <S.CommentListItemButtonWrapper> <S.CommentListItemButton src="/icon/mode.png" //onClick={() => props.onClickDeleteComment(el._id)} /> <S.CommentListItemButton src="/icon/clear.png" //onClick={() => props.onClickDeleteComment(el._id)} id={el._id} onClick={props.showModal} /> </S.CommentListItemButtonWrapper> </S.CommentListItemWrapper> ))} </S.CommentListWrapper> </S.Container> ); }
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
이 강의는 Next.js 어떤 버전으로 진행되나요?
일단 결제하고 미리보기인 첫번째 영상도 봤는데 페이지 라우터 다루다가 앱 라우터로 들어간다는 것까진 확인이 되었습니다.그래도 버전은 제대로 알고 강의 듣고 싶어서 이렇게 질문 남깁니다!
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
리액트 dockderfile 작성 시 COPY 질문
따라하며 배우는 리액트 A-Z 강의 중 리액트를 위한 도커 파일 작성하기 강의 중 궁금한 것이 있어 질문 드립니다 COPY 부분에 package.json 파일을 복사를 하는데package-lock.json 파일은 왜 복사를 하지 않나요?package-lock.json 파일이 더 버전 명시가 확실히 되어있어 안전하지 않나요?
-
해결됨한 입 크기로 잘라먹는 Next.js(15+)
강의 자료 링크가 어딨는지 모르겠습니다
예제 코드 및 강의 자료 안내 탭에서 강의 자료 확인하기에서 강의 자료가 어딨는지 모르겠네요 파비콘 및 썸네일 파일 링크만 보이고 pdf는 링크가 따로 안보입니다
-
미해결Next + React Query로 SNS 서비스 만들기
패레럴 라우트와 인터셉터 라우트를 공부하다 생긴 의문점입니다.
안녕하세요 제로초님 강의를 듣다 의문점이 하나 생겨 질문드립니다. 패레럴 라우트와 인터셉터 라우트를 사용해서 모달을 띄우는 방법을 알려주셨는데 기존의 react에서 사용하던 방식으로 모달의 띄우는게 더 코드도 단순하고 간단하게 구현할 수 있을것 같은데 nextjs에서는 페레럴 라우트와 인터셉터 라우트를 사용해서 모달을 구현하는게 어떤 이점이 있는지 궁금합니다.기존의 모달을 띄우는 방법은 여러가지가 있지만 state를 통해서 구현하거나 queryString을 사용해서 구현할 수 있을것 같습니다.queryString을 사용하면 뒤로가기 버튼클릭시 모달을 띄우기전 url로도 이동할 수 있고 새로고침을 해도 모달과 뒤의 배경을 같이 보여줄 수 있을 것 같습니다.혼자서 생각도 해보고 인터넷에서 자료도 찾아봤지만 정확한 이유를 잘 모르겠어서 질문드립니다. 오늘도 좋은 하루 되셨으면 좋겠습니다. 감사합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
인터셉팅 라우트
인터셉팅 라우트의 본 목적은 아닌 것 같으나 제 생각으론 가능하지 않을까 하는 생각이 드는데 진짜 가능한 건지 궁금해서 여쭤봅니다,,ㅠㅠ 인터셉팅 시에 모달이 뜨면서 children이 변경되도록 하고 싶은데,,, 가능한 건가요,,? 그러면 폴더 경로를 어떻게 설정 해야 할까요,,?
-
미해결Next + React Query로 SNS 서비스 만들기
서버 컴포넌트 렌더링 질문
안녕하세요 선생님. "Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx)" 강의 내용중에 궁금한점이 있어 질문드립니다.강의에서 5:42 ~ 6:35 시간 구간에서의 내용에 관해서 이해가 잘 안되는 부분이 있는데요. 홈 화면에 처음 들어올 때에는 로딩스피너가 안보이고 탐색하기 등 다른 페이지에서 홈 화면으로 들어오면 로딩스피너가 보이는 이유를 설명해주시는 부분입니다.홈 화면에 처음 들어왔을 때에는 홈 화면에 해당하는 page.tsx를 서버에서 다 그려주기 때문에 로딩 상태가 없어서 로딩스피너가 안보이고, explore에 있다가 클라이언트에서 홈으로 넘어갈 때에는 explore에서 홈 페이지를 새로 로딩을 하기 때문에 로딩 스피너가 뜨는거라고 설명해주셨는데요. "explore에서 홈 페이지를 새로 로딩을 한다" 라는게 무슨 말인지 잘 모르겠습니다 ㅠ page.tsx가 CSR이 된다는 것인가요?저는 어떤 페이지에 들어오면 그 페이지에 해당하는 page.tsx가 실행되는걸로 알고 있었는데 아닌가요? 홈의 page.tsx는 서버 컴포넌트인데 왜 홈에 처음 들어왔을 때만 page.tsx가 서버에서 실행되고 그 이후에는 마치 클라이언트에서 데이터 패칭하고 그에 따라 렌더링이 되는것처럼 "로딩"이라는 상태가 존재하는것인지가 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section04
어제는 잘됬는데 오늘 다시 해보니까 계속 오류가 생겨서 무슨 문제일까요?서버에서도 에러가 뜨고 어제는 잘됬는데요 어제는 오류 안떳는데 오늘은 뜨고요 이거 다운받아야 할까요? 네트워크는 잘 작동을 하는데요.페이로드랑 응답에는 에러가 뜨네요.어제는 분명이 됬는데 오늘 이러니까 이유를 모르겠어요 ㅠ 다른 섹션도요
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
Client provider in layout.tsx - 어떻게 동작하나요?
강사님 강의를 이제 막 듣기 시작한 수강생입니다!지금 리코일 기본 문법 관련 강의를 듣던중 궁금증이 생겨 질문드립니다.클라이언트 페이지 하위의 페이지는 모두 클라이언트 페이지로 바뀌는 것으로 이해하고 있었는데전역에 리코일 프로바이더로 감싸주는 형태로 사용하게 되면 부분적으로 클라이언트 페이지가 되는 것인가요?!어떻게 이해하면 좋을지 궁금합니다!
-
해결됨Firebase보다 10배 좋은 Supabase
nextjs 학습여부
로펀 선생님 supabase 자료가 거의 없길래 firebase를 최근에 공부했었습니다그러다 선생님의 강의를 발견하게되었습니다.supabase를 공부함에 있어서 제가 react는 공부한적 있었는데 next.js는 없습니다. next.js를 어느정도로 알아야할까요?앞으로 supabase를 공부함에 있어 next.js를 깊게 알아야할까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로그인 / 로그아웃 시 이전의 data가 남아있습니다.
import React, { useState, MouseEvent } from "react"; import * as S from "./mypoint.index.styles"; import TapPointLoading from "./mypoint_loading"; import TapPointBuying from "./mypoint_buying"; import TapPointAll from "./mypoint_all"; import TapPointSelling from "./mypoint_selling"; export default function MyPoint(): JSX.Element { const [selectedValue, setSelectedValue] = useState<{ name: string; index: number; }>({ name: "전체내역", index: 0, }); const MyPageHeadInfoButton = [ { name: "전체내역", component: <TapPointAll /> }, { name: "충전내역", component: <TapPointLoading /> }, { name: "구매내역", component: <TapPointBuying /> }, { name: "판매내역", component: <TapPointSelling /> }, ]; const onClickTap = ( event: MouseEvent<HTMLDivElement>, index: number ): void => { const newValue = event.currentTarget.id; setSelectedValue({ name: newValue, index, }); }; // 버튼 클릭으로 해당 data 값을 보여주기 위함 const renderData = (): JSX.Element | undefined => { return ( <S.TableWrap> {/* 해당 탭의 배열의 객체 name통해 컴포넌트 가져옴 */} {MyPageHeadInfoButton.map((el) => { if (el.name === selectedValue.name && el.component) { return <div key={el.name}>{el.component}</div>; } return null; })} </S.TableWrap> ); }; return ( <S.Wrap> <S.MyPageHeadWrap> <S.MyPageHeadBtn> {/* 서브 탭 버튼 */} {MyPageHeadInfoButton.map((el, index) => ( <S.MyPageInfoBtn key={el.name} id={el.name} onClick={(event) => onClickTap(event, index)} selected={selectedValue.name === el.name} > {el.name} </S.MyPageInfoBtn> ))} </S.MyPageHeadBtn> </S.MyPageHeadWrap> <S.MyPageBodyWrap> {/* 해당 탭 data */} <div>{renderData()}</div> </S.MyPageBodyWrap> </S.Wrap> ); } 이렇게 탭을 클릭을 해서 해당 컴포넌트가 보이도록 했습니다.그러면서 각각의 API data도 받아와 cache에 저장을 하도록 해 추가 API 요청이 일어나지 않도록 했는데여기서 로그아웃을 하고 다른 아이디로 로그인을 하면이전의 로그인 했던 data가 그대로 남아있어 최신 data를 가져오기 위해 여러가지 방법으로 시도했습니다.로그아웃 시 useApolloClient를 활용해 cache를 삭제 했습니다. 이렇게 하면 다시 로그인 한 유저의 data를 잘 가져오는데 로그아웃을 하면서 cache data가 삭제되니 다른 API, Board, Markets 등 해당 page의 사용한 query문의 data를 다시 요청하는 문제가 있습니다. refetch()로 query문을 선언하면 해당 refetch()를 실행하지 않아도 API 요청이 일어나 refetchQueries를 사용해 data 최신화 하려는데 그렇게 되면 모든 탭을 refetch 해줘야 되는 문제가 있습니다.각 탭 이동마다 API 요청 나가는게 싫어서 fetchporicy나 refetch()를 사용 하지 않았는데 보통 어떻게 사용을 하나요? 로그인에 의한 data는 탭 이동마다 refetch를 시켜주는게 좋을까요? 그리고 구매, 충전 등 하면 바로 MyPoint에 업데이트 되도록client.writeQuery / readQeury 나 refetchQueries를 사용했는데 이런 결제 정보 같은거는 refetch로 실시간으로 data를 가져오는게 좋겠죠? 로그인, 로그아웃은 LayoutHeader에서 사용하고 있습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql 서버 언제 고쳐질까요.. ㅠ
공부하고 싶어요..ㅠ