(제보) 쿠키를 브라우저 개발 환경에서 직접 삽입했을 때 나오지 않는 현상

안녕하세요 😀코드적인 처리를 통해서 직접 심으셔도결과는 같습니다.잘되시는 방법으로 진행하시면 되겠습니다.감사합니다!

discord 초대장 갱신이 필요한거같습니다.

안녕하세요. 제가 최초 공유드린 링크가 7일 제한이 있다는 것을 몇 일전에 알게 되어서모든 강의에 새로운 링크를 다시 올려 둔 상태입니다.https://discord.gg/2ByaMfUumy위 링크로도 접속이 불가능하실까요?확인 부탁드리겠습니다.감사합니다!

디스코드 채널 초대 링크

안녕하세요!디스코드 운영은 처음이라서 초대 링크가 7일 유효기간이 있는 것을 몰랐네요 ㅠ다시 생성해서 공유드립니다.https://discord.gg/2ByaMfUumy감사합니다!

revalidatePath 질문 있습니다.

안녕하세요.이 내용을 이해하려면 먼저 몇 가지 배경 지식이 필요합니다.우선 revalidatePath()는 데이터를 즉시 무효화하는 함수가 아닙니다. 해당 경로는 다음 방문 시점에 재검증되도록 설정하는 함수입니다.다만, 서버 액션(Server Action) 안에서 revalidatePath()를 호출하면, 서버 액션이 내부적으로 router.refresh()와 유사한 동작을 수행하기 때문에 같은 페이지에 머물러 있어도 데이터가 즉시 변경된 것처럼 보일 수 있습니다. 이 점을 먼저 이해하는 것이 중요합니다.revalidatePath 함수는 두 개의 매개변수를 받습니다.첫 번째는 경로(path)이고, 두 번째는 무효화 타입(type)입니다.두 번째 매개변수가 "layout"인 경우, 첫 번째 매개변수로 전달한 경로에서 사용 중인 layout.tsx를 사용하는 모든 경로가 함께 무효화됩니다. 따라서 해당 레이아웃을 공유하는 페이지들의 데이터가 일괄적으로 갱신됩니다.반면, 두 번째 매개변수가 "page"인 경우에는 첫 번째 매개변수에 해당하는 경로의 page.tsx와 그 페이지가 사용하는 layout.tsx가 무효화 대상이 됩니다.예를 들어, /about 경로에서 revalidatePath("/about", "page")를 호출하면 /about/page.tsx와 해당 페이지가 사용하는 /about/layout.tsx가 무효화됩니다. 서버 액션에서 호출한 경우에는 즉시 반영된 것처럼 보이게 됩니다.하지만 /about/detail 경로에서 revalidatePath("/about", "page")를 호출하면 상황이 달라집니다. 현재 위치한 경로와 첫 번째 인자로 전달한 경로가 다르기 때문에, 즉시 무효화가 일어나지 않고 다음에 /about을 방문할 때 재검증이 수행됩니다. 따라서 /about/detail에서는 변화가 보이지 않지만, 이후 /about으로 이동하면 /about/page.tsx의 데이터가 새로 갱신됩니다.여기서 한 가지 더 이해해야 할 부분은 라우터 캐시(router cache)입니다./about/page.tsx와 /about/detail/page.tsx는 모두 공통으로 /about/layout.tsx를 사용합니다. 이 레이아웃 파일은 기본적으로 라우터 캐시에 의해 재사용됩니다. 즉, 한 번 렌더링되면 특별한 경우(예: router.refresh() 호출)가 아니면 다시 렌더링되지 않습니다.따라서 /about 경로에서 무효화를 수행하면 서버 액션이 router.refresh()와 같은 효과를 내므로 about/layout.tsx도 함께 재렌더링됩니다.그러나 /about/detail에서 /about 경로를 무효화한 경우에는 즉시 아무 일도 일어나지 않다가, 이후 /about으로 이동하면 그때 재검증이 이루어집니다. 다만 이때도 layout.tsx는 라우터 캐시에 의해 재사용되기 때문에 값이 바로 변경되지 않을 수 있습니다.하지만 브라우저를 새로고침하면 라우터 캐시가 초기화되므로, 그 시점에는 about/layout.tsx 역시 함께 무효화되어 데이터가 갱신되는 것을 확인할 수 있습니다.이처럼 revalidatePath의 동작은 서버 액션 여부, 현재 경로, 무효화 타입, 그리고 라우터 캐시의 동작 방식에 따라 다르게 보일 수 있습니다.더 궁금한 점이 있다면 언제든지 질문해주세요.

수업자료

안녕하세요!해당 예제 코드는 [섹션 4. 컴포넌트와 Props] - [29. 수업 예제 코드 다운로드 및 참고하는 법] 에서 확인 및 자료 다운로드 가능합니다!잘 안되시면 말씀해주세요!감사합니다.(사진)

MainLayout이 중첩되어 뜨는 문제

안녕하세요.개발자 도구를 직접 열어 트리 구조까지 확인해보셨다니 정말 인상적입니다.우선 궁금해하신 부분에 대해 먼저 답변드리면, 리액트 개발자 도구에 표시되는 단순한 라벨링 차이일 뿐 실제로 컴포넌트가 두 번 실행되는 것은 아니므로 걱정하지 않으셔도 됩니다.조금 더 설명드리자면, DevTools는 우리가 작성한 컴포넌트만 보여주는 것이 아니라 Next.js가 내부적으로 라우팅을 위해 감싸는 래퍼 컴포넌트들까지 함께 표시합니다./ 경로의 경우 (with-layout)이 Header와 Footer를 포함한 레이아웃이기 때문에, Next.js 내부 래퍼와 실제 레이아웃이 함께 보이면서 WithLayout이 두 번 나타나는 것처럼 보일 수 있습니다.반면 /login의 AuthLayout은 children을 그대로 전달하는 비교적 단순한 구조이기 때문에, 트리에서는 AuthLayout 한 번과 OuterLayoutRouter(Next.js 내부 래퍼) 형태로 표시됩니다.따라서 이는 화면이 실제로 두 번 렌더링되는 문제가 아니라 DevTools의 표시 방식 차이에서 비롯된 현상입니다.추가로 만약 (auth)/layout.tsx 파일도 단순하게 children만 렌더링하는 게 아니라 다른 태그를 추가해보면 똑같이 중첩된 것처럼 보인답니다 😀(예를들면 아래처럼..)export default function AuthLayout({ children, }: Readonly) { return ( ddd {children} ); }

FormEvent가 deprecated 되었다고 합니다.

안녕하세요!해당 영상은 촬영 시점이 비교적 최근임에도 불구하고, 그 사이(26.1.26일)에 FormEvent가 deprecated 처리되었네요… 😂deprecated된 이유는 인프런 AI 인턴이 남긴 설명과 동일하니, 해당 내용을 참고해주시면 좋을 것 같습니다.앞으로는 아래와 같이 사용해주시면 됩니다.SubmitEvent감사합니다

쿠키와 헤더

안녕하세요.프런트에서도 쿠키와 헤더를 읽어야 하는 작업이 자주 발생합니다.이번 질문 같은 경우는 인프런 AI 인턴이 굉장히 답변을 잘해주었습니다.따라서 인프런 AI 인턴이 답변을 남긴 것을 보면 도움이 될 것 같습니다 😀그래도 이해가 안가시는 게 있으면 추가 문의 남겨주세요!감사합니다.

구지 react를 사용하는 이유가 그럼 있는가?

안녕하세요. 말씀하신 고민, 저도 처음 배울 때 똑같이 했던 생각이라 충분히 공감해요.Next.js는 React 기반 프레임워크인데, 기본 React에는 없는 기능들을 꽤 많이 들고 옵니다. SSR(서버 사이드 렌더링), SSG(정적 생성), 파일 기반 라우팅, API 라우트, 서버/클라이언트 컴포넌트 구분 같은 것들이요. use client 하나로 필요한 부분만 클라이언트에서 돌아가게 할 수 있으니, 사실상 두 방식을 골라 쓸 수 있다는 게 확실히 매력적이긴 합니다.그러다 보니 "그냥 Next.js 쓰면 무조건 이득 아냐?"라는 생각이 드는 게 당연합니다. 실제로도 많은 서비스에서 Next.js는 꽤 강력한 선택지고요.근데 항상 그렇진 않아요. Next.js는 단순한 라이브러리가 아니라 프레임워크라서, 신경 써야 할 게 은근히 많거든요. 서버/클라이언트 컴포넌트 개념부터 시작해서, 데이터 패칭 방식, 캐싱 전략, 서버 환경까지요. 순수 React보다 구조가 복잡해질 수 있습니다.그리고 모든 프로젝트에 SSR이 필요한 건 아닙니다. 로그인 후에만 쓰는 어드민 페이지나 내부 시스템, SEO가 딱히 중요하지 않은 대시보드 같은 경우엔 굳이 SSR이 필요 없어요. 이런 경우엔 그냥 React로 만든 SPA가 훨씬 단순하고 관리하기도 편합니다.배포 얘기도 빼놓을 수 없는데요. 순수 React는 정적 파일로 빌드해서 CDN에 올리면 끝이지만, Next.js에서 서버 기능을 쓰려면 Node.js 서버 환경이나 이를 지원하는 플랫폼이 필요합니다. 요즘은 배포 환경이 많이 좋아지긴 했지만, 프로젝트 성격에 따라 단순한 게 더 맞을 수도 있어요.결국 Next.js의 진짜 강점은 서버와 클라이언트의 경계를 하나의 프로젝트 안에서 유연하게 조합할 수 있다는 점입니다. SEO가 중요한 페이지는 서버에서 렌더링하고, 인터랙션이 많은 부분은 클라이언트 컴포넌트로 빼는 식으로요. 이런 유연성이 실제로 필요하다면 Next.js는 충분히 좋은 선택입니다.정리하면, 기능 면에서는 Next.js가 분명히 이점이 많지만, 프로젝트 목적이나 규모, 팀 상황, 배포 환경 같은 것들을 같이 봐야 해요. 지금 학습 중이라면 React 기본 개념을 먼저 제대로 잡은 다음 Next.js로 넘어가는 게 훨씬 수월하고, 이해도 깊어집니다.

터보백이 안보입니다

안녕하세요.영상을 촬영한 시점이 16.0.1 버전이었을 때인데, 16.1 버전부터 터보팩이 기본 설치가 되는 것으로 변경되었습니다. 그래서 지금은 안보이는 게 맞습니다. 무조건 사용하는 게 좋기때문에 별도로 신경쓰지 않으셔도 되겠습니다!감사합니다 🙏