개발 20년차, 원론적으로 제대로 구조를 배워보고 싶어 영상강의를 듣는데, 정말 오랜만에 제대로 된 강의를 듣는것 같군요. 정말 강의 퀄리티 좋습니다.  잡설이 길었는데~~다름이 아니라, 현재 강이 백엔드API 서버를 NEST.JS 프레임웍을 이용해서 개발하신것 같은데, 다음번 강의는 NEST.JS 어떤 지요? 기다리겠습니다. ㅎ

6:08에 랜더링 이후에 작업을 하기 위해서 after 라는 훅이 추가되었다구 해주시는데 기본적으로 훅 네이밍은 use~~로 시작하는게 권장사항이라고 알고있어서용물론 훅도 그냥 함수긴한데 개념적인 차이가 조금 있다고 생각해서 질문 드립니다!

onclick이벤트 처리는 SCR이라 상단에 'use client";라고 정의해줘야 하는게 아닌지요? 자동으로 CSR로 처리되나요?

Vercel signup이 안되요,, 계속 제 깃허브 계정은 추가 인증이 필요하다며 registration@vercel.com에 문의를 하라고 하네요,,, 이럴땐 진행을 어찌해야할까요,,,

말그대로 입니다.거의 마지막 강의에서 vercel 프론트엔드 앱에 들어가서 function의 리전을 서울이 아니라 도쿄로 바꾸고 배포했는데, 네트워크탭에 book/[id] 페이지의 문서의 X-Vercel-id는 icn1::~이 찍힙니다.다만 index 페이지의 문서는 icn1::iad1::~~ 으로 찍히는데 그 이유가 무엇일까요? (리전은 도쿄로 하고 배포했습니다.) 또 icn은 인천의 약자인가요?

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다.💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다.강의보고 todolist할때 컴포넌트 분리 안했던 것 같은데...dropbox (선택수강)UI구축에 보면 supabase-todo-list vscode에 컴포넌트폴더에 ui컴포넌트 들이 있네요... 혹시 추가 작업을 하셨던 것일까요??

안녕하세요 강사님. 양질의 강의 잘 듣고 있습니다. 다름이 아니라 클라이언트 컴포넌트와 서버 컴포넌트 개념 설명에서, "상호작용(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에 직접 접근할 때 주로 사용하는 것으로 이해하고 있습니다.그렇다면, 별도로 백엔드가 존재하는 경우에도 서버 액션을 사용할 필요가 있나요? 그리고 실제로 현업에서도 백엔드가 따로 있을 경우에 서버액션을 사용하나요?감사합니다!