73. Next.JS의 캐싱 전략 4가지 74. 데이터 캐시 - 1 (이론) 74. 데이터 캐시 - 1 (이론) 강의가 누락된거같아요73. Next.JS의 캐싱 전략 4가지와 같은 강의가 재생됩니다.

카카오 데브톡 응답에 따르면 프론트/백엔드 분할 책임 방식이 지양한다고 합니다.오히려 백에서 로그인 구현을 일임하는 것을 권장합니다.https://devtalk.kakao.com/t/oauth/136448 해당 블로그에서도 책임을 프론트와 백엔드가 나누어 가지는 방식이 잘못되었다고 합니다.https://cafe.naver.com/xxxjjhhh/296 카카오 로그인 REST API에서도 백에서 인가 코드를 받습니다.https://developers.kakao.com/docs/ko/kakaologin/rest-api#before-you-begin-process 어떤 방식이 맞는지 헷갈립니다.

저는 npm i lucide-react로 아이콘을 사용하고 있는데 미션에 제공하는거랑 버전도 다르고 아이콘도 다른데 제가 따로 다른 명령어로 설치하고 있는걸까요?

맨 위가 강의에 나오는 기본 구조밑에 코드가 제 코드 구조입니다.버전이 달라서 그런가요?

폴더가 어떻게 밀렸는지 10-6에는 그 전 강의 내용이 있어서 라우트 핸들러에서 캐싱처리 하는 내용의 백엔드 코드와 프론트 코드가 없어서 실습이 불가능합니다 ..🥲 확인 부탁드립니다 .. !

강의에서 이해하기 쉽게 그림으로 설명해주시는데 예제코드에 따로 그림이 첨부되어있진 않던데 혹시 그림은 따로 제공이 안될까요? 그리고 중간 중간 편집이 어색하게 되어서 중복 대사가 있다보니 오히려 더 헷갈리게 되더라고요강의 03-03 "클라이언트 컴포넌트에서 서버 컴포넌트 렌더링 하기 -1"에서 6분 18초 가량부터 시작해서 대사가"페이지 컴포넌트에서 데이터 패치 컴포넌트로 props를 전달하는 건 가능하지만 그리고 페이지 컴포넌트에서 데이터 패치 컴포넌트로 props로 데이터를 전달하는 건 가능하지만 클라이언트 래퍼 컴포넌트에서 데이터 패치 컴포넌트로 props로 데이터를 전달하는 건 불가능한 그런 구조가 되게 되는 겁니다"이러다보니 오히려 헷갈리게 되더라고요 이런 부분은 확실히 편집되면 좋겠습니다.이미지도 오히려 설명이 달라서 "페이지 컴포넌트에서 클라이언트 래퍼 컴포넌트로 dataFetch를 props로 전달이 가능하고, 페이지 컴포넌트에서 데이터 패치 컴포넌트로도 props 전달이 가능하지만 클라이언트 래퍼 컴포넌트에서 데이터 패치 컴포넌트로 props를 전달하는건 불가능한 구조가 되게 되는겁니다"와 같이 수정이 좀 필요해보입니다.

강의와 다르게 지금은 default 프리셋이 바뀌어서 질문드립니다 default의 경우 expire값이 never던데 그러면 캐시가 만료되지 않고 revalidate값에 따라 주기적으로 갱신된다고 이해하면 될까요?

말씀해주신 대로 브라우저의 쿠키 탭에서 데이터를 입력하니, 서버를 재실행했을 때 쿠키가 날라가서 올바르게 테스트를 할 수 없었습니다. Claude 로 확인해보니 headers.set('Set-Cookie', ...) 코드 작성 후 테스트 환경에서 직접 URI 를 입력하여 실행하여 쿠키를 심어보라고 해서 그렇게 했더니 쿠키가 잘 심어집니다! /* src/app/api/test-cookie/route.ts */ // localhost:3000/app/api/test-cookie 로 들어가 직접 쿠키를 입력해야 정상 작동 export async function GET() { const response = new Response('ok'); response.headers.set('Set-Cookie', 'name=kim; HttpOnly; Path=/; Max-Age=3600'); return response; }

초대 링크가 유효하지 않아서 확인 한번 다시 부탁드립니다~

잘 따라가다 이상하게 여기서 막혀버리네요

revalidatePath("/about", "page") 로 설정을 하고 테스트를 하다 보면 /about 페이지에서 재검증 버튼을 누르면 AboutLayout의 데이터 패칭 결과와 AboutPage의 데이터 패칭 결과가 함께 바뀌는 것과, /about/detail 페이지에서 재검증 버튼을 누르면 아무런 변화도 없는 이유가 revalidatePath의 첫 번째 인자로 설정된 "/about" 이 아닌 /about/detail 페이지에 접속해 있기 때문이라는 것까지는 이해했습니다.하지만 detail 페이지에서 재검증을 누르고 about 페이지로 이동하면 즉시 AboutPage의 결과는 변하는데 AboutLayout의 결과는 변하지 않는데 이유가 뭔가요?

혼자서도 해보고 '레이아웃 분리하기 - 풀이' 강의를 보고 똑같이 해도 (with-layout) 그룹에 생성한 Layout(MainLayout)은 아래와 같이 MainLayout 하위에 MainLayout이 또 있는 것처럼 뜨는데 이건 정상적인 건가요?(auth) 그룹에 생성한 Layout(AuthLayout)은 아래와 같이 AuthLayout이 하나만 있어서 어떤 게 정상인지, 원래 이런 건지 알고 싶습니다.프로젝트 폴더 구조는 다음과 같습니다: 

죄송합니다 또 궁금한게 생겨서 여쭈어봅니다 ai에게 물어봐도 항상 이게 진짜 맞는건지 의문이 생겨서 만약 프론트 쪽에서만 next js 에서 헤더랑 쿠키에 접근을 할 일이 그렇게 있을가 하는 의문이 생겨서 질문드립니다. 백엔드가 기본적인 확인을해서 처리를 하고 권한 이나 그런건 api호출을 하면 되지않을가라는 의문이 들어 질문 남깁니다

안녕하세요 수코딩님 갑자기 의문이 든 생각인데 next js 는 보면 프레임워크라서 여러 기능을 제공하고 편리하게 사용할수있는것같습니다 seo문제도 해결해주고 무엇보다 use client를 사용하면 클라이언트 컴포넌트로서 작동도 되고요 근데 그럼 의문이 드는게 둘다 가능하고 선택가능한 next를 쓰는게 무조건 이득이 아닌가 라는 생각이 들엇습니다. 그냥 서버사이드쪽만 서버사이드 좀하고 리액트가 필요한쪽은 클라이언트 사이드 렌더링으로 하면 되는 이야기인것같아서요

 안녕하세요 강사님,다름이 아니라 강의 들으면서 카카오 oauth 설정 및 테스트 중인데카카오 REST API 키에도 클라이언트 시크릿이 생긴 것 같습니다.구글처럼 yaml에 kakao.client.secret 키 넣어주고 요청 바디에 같이 보내니까 그제서야 액세스 토큰 및 프로필 정보 응답이 왔습니다.강의 촬영 당시와 현재의 카카오 developers UI 및 메뉴 구성이 많이 바뀌어서 제가 모종의 설정을 놓친건지, 아니면 새롭게 카카오 클라이언트 시크릿이 추가되어서 이제는 구글처럼 시크릿 키를 요청 바디에 넣고 보내는 게 맞는 방법이 된 건지 말씀 여쭤보고자 질문 드립니다.양질의 강의 항상 감사드립니다.  

FormEvent는 deprecated 되고 SubmitEvent를 사용하는 것으로 권장된다고 합니다.그런데 (e: SubmitEvent<HTMLFormElement>) 방식은 FormEvent가 제네릭을 지원하지 않아서 안 된다고 하고 (e: SubmitEventHandler<HTMLFormElement>) 처럼 시도해도 빨간줄이 자꾸 뜹니다.여기저기 알아보고 const handleSubmit: SubmitEventHandler<HTMLFormElement> = (e) => { ... } 로 하면 된다는데 이들의 차이점과 FormEvent를 사용할 때 처럼 사용하면 안 되는 이유가 궁금합니다.

지금 현재기준 터보백은 혹시 자동적용인가요? 뭔가 선택지에 안뜨는데 제가 이상한지 아님 따로 이유가 잇는지 궁금합니다

 프로젝트 생성 시 위와 같이 선택 하시면 됩니다. (Create TypeScript project 체크 박스 꼭 선택 하세요.)Create 버튼 클릭 하시면 화면 하단 터미널에 설치 옵션을 물어보는 화면이 보이게 됩니다.그런데, 강의 와는 다르게 터보팩 사용 여부는 물어보지 않아요. Next.js 13 이상 버전에는 터보팩이 이미 내장되어 있습니다. 이 부분은 무시하고 진행 하시면 됩니다. 설치 완료 후,package.json 파일에 아래와 같이 개발 스크립트 부분을 수정 하세요. --turbo 추가 하시면 됩니다."scripts": { "dev": "next dev --turbo", "build": "next build", "start": "next start", "lint": "eslint" }, 실행은 상단 우측 보시면 아래와 같은게 보이실 겁니다. client-side 와 server-side 가 있는데 server-side 선택 하셔서 실행 하시면 됩니다.(안보이면 웹스톰 재시작 하세요. 지금 단계 에서 client-side 는 선택 하지 마세요. 이 강의를 계속 들어 보시면 저 두가지가 무슨 의미 인지 알게 됩니다.)  터보팩 적용 하여 올바르게 실행 되면 아래와 같이 보일 겁니다.       

2. 소스 코드 다운로드 및 활용법강의 에서 소스 코드 다운로드를 할 수 있는 버튼 이나 링크가 존재 하지 않습니다.3. 커스텀 스니펫 등록하기강의는 다운로드 버튼이 잘 보입니다.

22. REST 방식 컨트롤러 만들기(2)에서포스트맨으로 글 등록 테스트 할 때 complete 필드가 없는 경우 Bad Request 400에러가 나는 걸 확인했습니다.  { "title": "Test title", "writer": "testuser", "complete": false, "dueDate": "2026-02-04" }위와같이 complete필드를 추가하니 잘 되었는데,  문제는 29강에서처럼 브라우저 화면에서 테스트 해보니 아래와같이 400에러가 발생합니다.여기도 마찬가지로 입력폼에서 complete필드가 없어서 그런것 같은데 강의에서는 등록이 잘 되는게 이해가 안되네요. 섹션4까지 완성된 코드를 다운받아서 실행해보았지만 위의 사진처럼 브라우저에서 등록 시 400에러가 발생합니다.