안녕하세요 강사님. 양질의 강의 잘 듣고 있습니다. 다름이 아니라 클라이언트 컴포넌트와 서버 컴포넌트 개념 설명에서, "상호작용(Interaction)이 지속적으로 발생하는 컴포넌트는 클라이언트 컴포넌트로 작성해야 한다" 라고 이해했었습니다. 그런데 리뷰를 작성하는 기능 또한 상호작용이 지속적으로 발생하는 것이 아닌가 하는 의문이 들었습니다. 제가 이해를 잘 못 한 부분이 있는 걸까요? 아니면 서버 컴포넌트에서도 어느정도 상호작용을 처리할 수 있는건가요?

리엑트를 이어서 넥스트까지 완강~~! 🥳강의 재밌게 잘 달렸습니다좋은 강의 감사합니다 🙇‍♂

안녕하세요! 강의 잘 보고있습니다!사전렌더링시에 해당 페이지에 대한 HTML과 JS bundle을 받고 수화 과정을 통해 상호작용을 하는 건 이해를 하였습니다! 궁금한점은 그럼 해당 페이지가 아닌 다른 페이지의 HTML과 Js파일들은 프리페칭 과정에서 받아 CSR방식으로 동작하는건가요??

안녕하세요! next.js 설치 완료후 package.json을 확인해보니테일윈드가 3.4.1 버전이 아닌 4.0.14 버전이 설치 되어있음을 확인했습니다.강의 내용과 다른점이 있어 node_modules , yarn lock 삭제후 버전 다운그레이드를 시도해보았지만 자꾸 에러가나서.. 테일윈드 독스를 찾아 새로운 버전을 적용시켰어요https://tailwindcss.com/docs/installation/framework-guides/nextjs 다만 기존 강의에서는 tailwind.config.js 에서 변수를 설정하는 법을 알려주셨는데..그 방법에 대해서는 해결방법을 찾지 못하였습니다. 나만의 변수를 만들어 다양한 컴포넌트에서 재사용하는 방법이 테일윈드의 강의의 쟁점이라고 생각해서. global.css에 변수를 만들어 컴포넌트 스타일에 적용시키는 방법으로 비슷하게는 진행해 보았는데이렇게 해도 되는 사항 일까요?  또한 강의 후반부에 @layer로 utilities를 만들어 스타일을 적용시키는 부분에서스타일 자체는 먹지만, 테일윈드 자체에서 제공해주는 반응형 명령어에는 적용이 안돼요 ㅠㅠ좋은 방법이 있을까요.....  

학습한 내용 이미지와 코드를 블로그에 올려도 되나요??

안녕하세요 강사님깃헙 파일에서 누락된 코드를 확인하였습니다.https://github.com/winterlood/onebite-next/blob/main/section07/chapter03/src/components/review-editor.tsx [변경 전]<input name="bookId" value={bookId} hidden /> [변경 후]<input name="bookId" value={bookId} hidden readOnly/>

에러나 로딩을 전역적으로 상태로 봐서 에러나 로딩을 띄우는게 아닌, 페이지별로 전부 다 복붙으로 넣는 이유가 따로 있나요..? 일단 따라해보고있긴 한데, 뭔가 좀 아닌것 같아서 질문 드립니다ㅠㅜ

문제 발생: npm run start:dev 시 위와 같은 에러 발생Error: connect ECONNREFUSED ::1:6379 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1615:16) { errno: -4078, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 6379 }  문제 원인:Redis 연결 실패 → 애플리케이션이 Redis 서버(포트 6379)에 연결하려 했지만 거부됨.ECONNREFUSED 오류는 Redis가 실행되지 않거나, 접근할 수 없는 상태일 때 발생. 문제 해결:Redis 기본 설정은 IPv6 (::1)을 사용함.IPv4(127.0.0.1)로 강제 변경해 해결localhost가 아닌 127.0.0.1로 변경// .env 기존 코드 REDIS_URL=redis://localhost:6379 // .env 변경 코드 REDIS_URL=redis://127.0.0.1:6379 위 에러 만나고 애쓴 부분 공유합니다. 혹시 잘못된 해결 방법이라면 알려주시면 감사하겠습니다!

window.scrollTo({ top: 0, behavior: "smooth" }); 제 화면은 왜 부드럽게 스크롤 이동이 안되는걸까요? behavior 빠졌을 때와 차이가 없어보여요.. 사용 브라우저는 크롬입니다

해당 강좌 default.tsx에서 기본 페이지로 사용시킬때 default.tsx를 처리해두고 빈페이지를 구성하는 형태를 사용하는 예제를 따라서 진행해보았는데요. 여기서 궁금한점이 page.tsx를 @modal에 하나더 유지시키고 return null 처리를 하는 컴포넌트를 두어도 똑같이 동작은 되는데, default.tsx를 좀 더 권장하는 이유가 있을까요?

아래가 제가 이해한 내용인데 맞을까요?요청 메모화ssr 요청 사이클 내에서만 페치 결과를 캐싱하여 중복 요청 방지 (한 서버 요청 사이클 끝나면 초기화)예를들어 Home컴포넌트와 자식 컴포넌트인 Header 컴포넌트에서 렌더링 시에 동일한 요청을 날렸다면 Home컴포넌트의 요청이 캐싱되고 Header 컴포넌트의 요청은 캐싱된 값 사용데이터 캐시한 ssr 요청 사이클 내 뿐만 아니라 서버에 전역적으로 유지되는 캐시요청 메모화와 다르게 서버 요청 끝나도 초기화되지 않고 지속됨즉, 여러 클라이언트 요청 간에도 유지됨A가 먼저 페이지 요청 → 백엔드에 요청 후 넥스트 서버에 데이터 캐싱B가 같은 페이지 요청 → 백엔드 요청 없이 넥스트 서버 캐시에서 데이터 반환결론즉, 요청 메모화는 렌더링 최적화, 데이터 캐시는 네트워크 요청 절약을 위한 것

프로젝트를 설치하고 npm run dev로 실행하니 > section02@0.1.0 dev> next dev이 두 줄 나오고 바로 종료되는데 뭐때문에 그런걸까요?

  import BoardCommentWriteUI from "./boardCommentWrite.presenter"; import { ChangeEvent, useState } from "react"; import { useMutation } from "@apollo/client"; import { CREATE_BOARD_COMMENT, UPDATE_BOARD_COMMENT, } from "./boardCommentWrite.queries"; import { useRouter } from "next/router"; import { FETCH_BOARD_COMMENTS } from "../list/boardCommentList.queries"; import { IMutation, IMutationCreateBoardCommentArgs, IMutationUpdateBoardCommentArgs, } from "../../../../commons/types/generated/types"; import { IBoardCommentWriteProps } from "./boardCommentWrite.types"; export default function BoardComment(props: IBoardCommentWriteProps) { const [createBoardComment] = useMutation< Pick<IMutation, "createBoardComment">, IMutationCreateBoardCommentArgs >(CREATE_BOARD_COMMENT); const [updateBoardComment] = useMutation< Pick<IMutation, "updateBoardComment">, IMutationUpdateBoardCommentArgs >(UPDATE_BOARD_COMMENT); const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [comment, setComment] = useState(""); const [star, setStar] = useState(0); const router = useRouter(); const handleChangeWriter = (event: ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); }; const handleChangePassword = (event: ChangeEvent<HTMLInputElement>) => { setPassword(event.target.value); }; const handleChangeComment = (event: ChangeEvent<HTMLTextAreaElement>) => { setComment(event.target.value); }; const updateComment = () => { alert("수정하기 입니다."); }; const onClickSubmitComment = async () => { try { if (typeof router.query.boardId !== "string") { alert("시스템에 문제가 있습니다."); return; } const result = await createBoardComment({ variables: { createBoardCommentInput: { writer, password, contents: comment, rating: star, }, boardId: router.query.boardId, }, refetchQueries: [ { query: FETCH_BOARD_COMMENTS, variables: { boardId: router.query.boardId }, }, ], }); } catch (error) { if (error instanceof Error) { alert(error.message); } } setWriter(""); setComment(""); setPassword(""); setStar(0); }; return ( <BoardCommentWriteUI handleChangeWriter={handleChangeWriter} handleChangePassword={handleChangePassword} handleChangeComment={handleChangeComment} onClickSubmitComment={onClickSubmitComment} updateComment={updateComment} setStar={setStar} writer={writer} comment={comment} password={password} el={props.el} /> ); } boardCommentWriter.container.tsx 에서 updateComment 바인딩이 안된것인지함수가 작동을 안하는 것인지updateComment의 "수정하기 입니다. " 알림창이 안뜹니다.수정/삭제 버튼 onClick 내부에서 해봐도 태그 바깥에서 삼항연산자를 써보아도 적용이.. 안됩니다. onClickSubmitComment 함수는 제대로 작동하는데 말이죠 ㅠㅠ 도저히 왜 안되는지 모르겠어요import * as S from "../../board/commons/style/style"; import * as Own from "./boardCommentWrite.styles"; import { IBoardCommentWriteProps } from "./boardCommentWrite.types"; export default function BoardCommentWriteUI(props: IBoardCommentWriteProps) { console.log(props.el); return ( <S.BoardWrapper> <S.Row> <Own.Writer placeholder="작성자" onChange={props.handleChangeWriter} value={props.editComment ? props.el?.writer : props.writer} readOnly={props.editComment} /> <Own.Password placeholder="비밀번호" onChange={props.handleChangePassword} value={props.password} /> <Own.RankWrapper> <Own.RateComment value={props.editComment && props.el.rating} onChange={props.setStar} /> </Own.RankWrapper> </S.Row> <Own.Comment onChange={props.handleChangeComment} placeholder="댓글을 입력해주세요." value={props.editComment ? props.el.contents : props.comment} /> <Own.BottomComments> <S.Row> <p>0</p> <div>/</div> <p>100</p> </S.Row> {/* <Own.SubmitButton onClick={ props.editComment ? props.updateComment : props.onClickSubmitComment } > {props.editComment ? "수정하기" : "등록하기"} </Own.SubmitButton> */} {props.editComment ? ( <Own.SubmitButton onClick={props.updateComment}> 수정하기 </Own.SubmitButton> ) : ( <Own.SubmitButton onClick={props.onClickSubmitComment}> 등록하기 </Own.SubmitButton> )} </Own.BottomComments> </S.BoardWrapper> ); }   

Next.js에서 서버 컴포넌트는 서버에서 실행되기 때문에, useEffect 없이 컴포넌트 내부에서 직접 fetch 요청을 보낼 수 있는 것으로 알고 있습니다.또한, 서버 액션은 백엔드 없이 Next.js 풀스택 환경에서 DB에 직접 접근할 때 주로 사용하는 것으로 이해하고 있습니다.그렇다면, 별도로 백엔드가 존재하는 경우에도 서버 액션을 사용할 필요가 있나요? 그리고 실제로 현업에서도 백엔드가 따로 있을 경우에 서버액션을 사용하나요?감사합니다!

안녕하세요 ~수업 듣기 시작하고 싸이월드 만들기 1탄에서 피그마가 나오는데 예제자료를 보면서 할수 있는 피그마 링크가 어디에 있는지요 ?

next는 자동적으로 캐시 저장기능이 있고 next에서도 DB 데이터가 필요한 페이지에서 직접 불러와서 사용하는 것을 권장한다 라고 말씀해주셨는데요 그러면 next는 보통 zustand, recoli, redux와 같은 상태관리 라이브러리를 사용하지 않는 것을 추천하시나요?아니면 사용하는 것을 추천하시나요??

 useEffect(() => {   if (inView) {     hasNextPage &&fetchNextPage();   } }, [inView, hasNextPage, fetchNextPage]);이렇게 useEffect를 작성하셨는데 fetchNextPage를 useEffect의 의존성배열에 넣는 이유가 궁금합니다

안녕하세요! 덕분에 nextjs에 대해 깊에 알아가고 있습니다.제목처럼 page 컴포넌트에 'use client'를 명시하고 빌드 해도 해당 페이지에 대한 rsc_payload가 생성되어서 .next 빌드 파일을 살펴 보았습니다.페이지를 클라이언트 컴포넌트로 작성하던 서버 컴포넌트로 작성하던 .next 빌드 파일 server, static/chunk/app 폴더에 모두 page.js 파일이 생성되는 것을 확인했습니다.1. server 폴더에 있는 page.js는 해당 페이지에 필요한 번들 파일에 대한 내용인 거고, static 폴더에 있는 page.js는 해당 페이지에 그려질 내용에 대한 파일인 건가요??2. 그래서 page컴포넌트를 클라이언트 컴포넌트로 만들어도 페이지에서 사용할 번들 파일의 주소를 알아야 하기 때문에 rsc_payload를 만들어서 내려주는 건가요??

레이아웃은 네비게이션을 해도 상태를 유지하고 렌더링을 하지 않는다라고 이해했습니다.그런데, 오른쪽 레이아웃을 만들면서 패러렐 라우트라던지 template를 쓰지 않고 (비록 컴포넌트를 분리하긴 했으나) 서버에서 데이터를 뿌려주는 미래를 상상하고 쭉 코드를 짜고 계시는 모습을 보면서,레이아웃이 서버 데이터는 변경사항을 화면에 반영해주는 것처럼 이해가 되었습니다.뒷부분은 수강하지 않았습니다. 제가 잘못 이해 중인가요? 

14분 부터 css 전체선택자 box-sizing 이 border-box 라서 padding 을 하게되면 a 태그의 크기가 줄어들어야 하는 것 아닌가요? 왜 padding을 통해 크기를 키운다고 말씀하시나요?