173만명의 커뮤니티!! 함께 토론해봐요.
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요, 섹션 7 듣고 있습니다. Apollo-Client를 설치하고 yarn dev 실행하니 저렇게 뜨네요. 해당 파일을 지우거나 해도 이번엔 그 파일이 없다는 이유로 에러가 뜹니다. Node.modules랑 package.lock.json 삭제 후 재설치해도 똑같고요. 조속한 해결 부탁 드리겠습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
//section05/05-05-dynamic-routing-board-mutaton import { gql, useMutation } from "@apollo/client"; import { useRouter } from "next/router"; const 나의그래프큐엘셋팅 = gql` mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } } `; export default function GraphqlMutationPage() { const router = useRouter(); const [myFunction] = useMutation(나의그래프큐엘셋팅); const onClickSubmit = async () => { try { // 코드 시도하다 실패하면 catch로 넘어감 const result = await myFunction({ variables: { //variables === $ 역할을 함. 그렇다고 여기선 $를 쓰면 안됨 writer: "훈이", title: "안녕하세요", contents: "반갑습니다.", }, }); console.log(result); console.log(result.data.createBoard.number); router.push( `/section05/05-05-dynamic-routing-board-mutation-moved/${result.data.createBoard.number}` ); } catch (error) { alert(error.message); } }; //한줄일땐 괄호 생략 가능 return ( <> <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button> </> ); } //section05/05-05-dynamic-routing-board-mutation-moved/[number] import { useQuery, gql } from "@apollo/client"; import { useRouter } from "next/router"; // 폴더 [qqq] 대괄호로 감 싸놓으면 폴더가 변수가됨 const FETCH_BOARD = gql` query fetchBoard($number: Int) { fetchBoard(number: $number) { number writer title contents } } `; export default function StaticRoutingMovedPage() { const router = useRouter(); console.log( router); const { data } = useQuery(FETCH_BOARD, { variables: { number: Number(router.query.number) }, //graphql fetchBoard에 자료가 없거나 null이면 오류가 뜸 }); console.log(data); return ( <> <div> {router.query.number}번 게시글 </div> <div>작성자 : {data?.fetchBoard?.writer}</div> <div>제목 : {data?.fetchBoard?.title}</div> <div>내용 : {data?.fetchBoard?.contents}</div> {/* 자료가 없거나 null이 뜨면 fetchBoard에 옵셔널체이닝('?' 자료가 오면 다시 리 렌더링 해줌) 붙이기 */} </> ); } 게시물을 정상적으로 잘 등록이 됩니다 플레이그라운드에서 fetchboard 조회를 해봐도 잘 나옵니다. 네트워크 탭에 들어가도 아무것도 안나오고 콘솔에는 그저 on-demand-entries-client.js:86 GET http://localhost:3000/section05/05-05-dynamic-routing-board-mutation-moved/23131 404 (Not Found) 뭐가 문제일까요?
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
해당 영역 을 17.0.2로 바꾸는데도 "@types/node": "^17.0.2", "@types/react": "^17.0.02", 이렇게 뜨더니 18.2.79로 바뀌고 에러가 뜹니다
미해결
[리뉴얼] React로 NodeBird SNS 만들기
도메인을 연결하고 프론트 도메인으로 접속 로딩시간이 엄청 오래걸립니다. 이런경우는 도대체 뭐때문에 그럴까요? 용량이 커서 그럴까요? 백 서버 도메인은 접속이 잘됩니다.. vscode에서도 front터미널만 자꾸 렉걸리는 현상이 생겨요 ㅠㅠ
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님. 강의 잘보고있습니다 강의와 관련된 질문이 아니라 죄송합니다.. 여러군데에서 찾아봐도 명쾌한 내용이 보이지 않아서 질문드립니다. 백엔드서버(spring)에서 jwt를 발급하는데, axios 인터셉터 처럼 401에러시 백엔드 jwt재발급요청을 하는방법이 Next에서 fetch함수에서는 할수가없는거 같더라고요. 저가 생각한 해결법은 2가지인데 어떤게 좋을까요..? next-auth 미사용, axios사용하기 fetch를 둘러싸는 customFetch()함수 정의하여 모든곳에서 사용하기
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
지켜보고 싶습니다 제가 분량조절이 잘 안될것같아서요 혹시 일정표같은게 있을까요?
미해결
Next + React Query로 SNS 서비스 만들기
@vanilla-extract/css에서 혹시 스타일드 컴포넌트와 같이 값을 넘겨서 처리 해주는 건 없나요?! pr &.group-item { display: grid; grid-template-columns: repeat(${pr => pr.columns}, 1fr); column-gap: 30px; padding-right: ${props => (props.category === 'POSITION' ? '0px' : '30px')}; } &.group-item-half { display: grid; grid-template-columns: repeat(${pr => pr.columns}, 1fr); column-gap: 30px; padding: 0px 0px 30px 30px; &:first-of-type { padding-top: 30px; } }
미해결
Next + React Query로 SNS 서비스 만들기
NextJs를 빌드하면 .next라고 빌드 파일이 나오는 것까지 확인했는데, 강의에서는 빌드 산출물을 실행시키는게 아니라 git으로 전체 프로젝트를 클론받아서 실행시키는거 같더라구요 Export를 해서 out 파일이 나오는 static 실행방법은 아니에요 혹시 NextJS 빌드 산출물을 실행시키는 방법이 있을까요??
미해결
Next + React Query로 SNS 서비스 만들기
저스탠드 관련해서 하다가 안풀려서 여쭤 봅니다 백엔드와 통신을 하여 값을 받아 온 객체의 값을 저스탠드에 set으로 저장 하려고 하는데 이렇게 계속 나오더라구여 .. 제가 지금 하려고 했던건 인터페이스를 만들어주고 각 타입을 주려고 했는데 안되더라구여 ㅠㅠ 어떤 걸 수정을 해야 될까요 ㅠㅠ 타입을 any로 하니 되긴 하던데 any는 사용 하지 말라고 하셔서 되도록 ㅠㅠ
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
2분 50초쯤에서 멀티선택 하는 방법 알려주시면 감사하겠습니다!!
해결됨
Next + React Query로 SNS 서비스 만들기
궁금 한게 있어서 여쭤 봅니다 ㅎㅎ useMutation을 사용 하였을때 prefetchQuery의 queryKey에 데이터를 저장해 놓고 useQueryClient에 데이터를 넣어 두둣이 onSuccess를 했을때 queryKey처럼 데이터를 저장 할 수 있을까요? 저스탠드와 같은 라이브러리 없이 혹시 쿼리에서 uuseMutation을 했을때 캐쉬 값을 가지고 있을 수 있을까요?!
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
강사님은 내부적으로 Banner.css에 대한 내용을 복붙하셨는데, 강의 영상에서 Banner.css 내에 소스가 다표기가 되지 않아서 동일하게 진행하기 어려운 것 같습니다.
미해결
Next + React Query로 SNS 서비스 만들기
▲ Next.js 14.2.1 - Local: http://localhost:3000 ✓ Starting... ✓ Ready in 5.2s ○ Compiling / ... ✓ Compiled / in 5.5s (583 modules) GET / 200 in 5896ms TypeError: rt.toLowerCase is not a function at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:30:274042 at finishResolved (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:192383) at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:193267 at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:194059 at eval (eval at create (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:15:28858), <anonymous>:12:1) ... at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:194059 at eval (eval at create (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:15:28858), <anonymous>:13:1) at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:194059 at eval (eval at create (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:15:28858), <anonymous>:12:1) at C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bundle5.js:3:204068 at Hook.eval [as callAsync] (eval at create (C:\Users\KimByeongHwa\Desktop\inflearn\z-com\node_modules\next\dist\compiled\webpack\bund ○ Compiling /home ... 화면이 버벅거릴 정도로 에러 코드가 길어서 어쩔 수 없이 잘라서 올립니다. < 현재 상황 > npm run dev 하면 바로 TypeError: rt.toLowerCase is not a function 에러가 발생합니다. 에러가 발생해도 첫 랜딩 화면은 렌더링 됩니다. 그러나 주소창에 url 입력하여 페이지 이동 시 에러 코드 맨 마지막 줄 처럼 무한 로딩이 걸리고 아무 것도 안됩니다. < 시도 해 본 것> https://stackoverflow.com/questions/78321779/typeerror-rt-tolowercase-is-not-a-function-nextjs 를 따라 npm 재설치 => 실패 프로젝트 폴더 삭제 후 재설치 => 실패 다른 구글링 자료를 보면 13버전을 사용하라고 하는데, 14버전 강의를 듣기에 적용할 수 없는 해결책
미해결
Next + React Query로 SNS 서비스 만들기
강의 3:53초 부분에 회원가입을 하자마자 로그인을 하면 useSession에 값이 제대로 들어오지 않는다고 하셨는데 라이브러리 자체 오류인가요 아니면 onSubmit에서 회원가입 플로우 직후 redirect("/home")하는 부분이 영향을 받아서 그런건가요?
미해결
Next + React Query로 SNS 서비스 만들기
react-query에서 하나의 궁금 증이 있는데 제가 아직 다 안봐서 헷갈릴 수도 있긴 하겠지만 prefetchQuery의 경우는 post, pus, delete 등의 메소드 일때는 사용 하지 않고 대부분 get일때만 사용 하나요?! post, pus, delete 의 메소드들은 Mutation으로 사용 된다고 생각 하면 될까요?! 헷갈리네요 ㅠㅠ prefetchQuery말고 axios 와 같은 라이브러리를 붙여서 사용 해도 될까요?! fatch 를 사용 하셔서 한번 여쭤 봅니다 ㅎㅎ
미해결
Next + React Query로 SNS 서비스 만들기
Suspense 컴포넌트를 아래처럼 TabDeciderSuspense 컴포넌트 안에 포함시켰더니 데이터 페칭하는 동안 Tab, PostForm 컴포넌트가 로딩 스피너 때문에 보이지 않던데 Suspense 컴포넌트는 데이터 페칭하는 컴포넌트 밖으로 무조건 빼야 제대로 동작하는 건가요? <Suspense fallback={"Loading..."}> <HydrationBoundary state={dehydratedState} queryClient={queryClient}> <TabDecider /> </HydrationBoundary> </Suspense>
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하십니까 형님 진행하다 보니 궁금한게 생겨서 여쭤보려고 합니다. reducer설정 중 초기값이 undefined로 들어오는 에러가 놔왔었는데욥 error - Error: The slice reducer for key "user" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. 에러 났던 부분운 default: state 이 부분이고 코드 보고 아래처럼 수정하니 잘 동작했습니다. export const initialState = { isLoggedIn: false, user: null, signUpData: {}, loginData: {}, } const reducer = (state=initialState, action) => { switch(action.type) { default: { return { ...state } } } } default: state vs default: { return {...state}} 문법적으로 똑같은 내용이 아닌지...어떤 차이가 있는지를 모르겠어서 질문드립니다!
미해결
Next + React Query로 SNS 서비스 만들기
제로초님이 강의 하시다 Link태그 안에 img 태그를 넣는 방식으로 하시다가 사진 두개를 넣는 부분 부터 이작업을 안하셨는데 두번 째 방식까지는 .postImageSection img { border-radius: 16px; height: 100%; width: 100%; } img 태그에 100%를 주는 방법으로 해결했지만 그림 3개를 넣는 부분 부터는 크기가 맞지 않습니다 어떻게 해결하면 크기가 정확히 맞을까요? if (post.Images.length === 3) { return ( <div className={cx(style.postImageSection, style.threeImage)}> <Link href={`/${post.User.id}/status/${post.postId}/photo/${post.Images[0].imageId}`} style={{ backgroundImage: `url(${post.Images[0]?.link})`, backgroundSize: "cover", }} > <img src={post.Images[1]?.link} alt="" /> </Link> <div> <Link href={`/${post.User.id}/status/${post.postId}/photo/${post.Images[1].imageId}`} style={{ backgroundImage: `url(${post.Images[1]?.link})`, backgroundSize: "cover", }} > <img src={post.Images[1]?.link} alt="" /> </Link> <Link href={`/${post.User.id}/status/${post.postId}/photo/${post.Images[2].imageId}`} style={{ backgroundImage: `url(${post.Images[2]?.link})`, backgroundSize: "cover", }} > <img src={post.Images[2]?.link} alt="" /> </Link> </div> </div> );
미해결
Next + React Query로 SNS 서비스 만들기
제로초님 안녕하세요. 강의 활용 방안에 대해서 간단한 질문이 있어서 글 남깁니다. 제가 해당 강의를 듣는 이유는 Next.js에 대한 학습이며 이와 더불어 추가적으로 활용하시는 기술 (웹소켓 등) 을 함께 학습하는 것이며, 최대한 빠르게 개념을 잡고 혼자서 사이드 프로젝트 등을 만들며 익숙해지는 것이 목적입니다. 본래는 강의 초반부에 추천해주신 것처럼 일정 부분 강의를 수강한 후 올려주시는 예시 코드를 바탕으로 직접 코드를 짜며 비교해보는 방식으로 활용해보려 했습니다. 하지만 해당 방식에 다소 불편함이 있어서 (ex. 올려주신 예시 코드에서도 로그인/아웃 기능이 구현되지 않은 상황이라 화면 구현하는데 다소 불편함이 따르는 등) 먼저 강의를 보기만 하는 식으로 완강한 후 배운 내용을 바탕으로 혼자서 구현해보는 방식으로 활용해보려 합니다. 관련하여 혹시 보다 추천하시는 방법이 있으신지 궁금해서 질문글 남기게 되었습니다.
미해결
Next + React Query로 SNS 서비스 만들기
강의 언제나 잘보고 있습니다. 따로 작업하다가 난감한게 있어서 문의드립니다. 예를 들어 ["ABC"] 라는 캐시가 있다는 가정하에 A페이지, B페이지에서 해당 캐시를 사용합니다. 이때 질문이 있습니다. A,B 페이지에서 useQuery로 데이터를 불러올 경우 실수로 A와 B가 다른 queryFn이 정의 되어있을 때, InvalidateQueries를 해도 데이터가 미스매칭될 수 있는 가능성이 존재할까요? prefetchQuery 사용 시, A페이지와 B페이지가 ABC라는 데이터가 공통으로 필요할 경우, A페이지에서 prefetchQuery를 읽어서 B로 가면 A의 ABC를 캐시해서 B에서도 사용 가능한 걸로 알고있는데요. 이럴때 만일 B페이지로 바로 접근이 가능할 경우, B 페이지에서도 prefetchQuery를 적용해야 둘다 SSR이 제대로 적용되는걸까요?
