사전렌더링과 데이터페칭 수업 질문

안녕하세요 이정환입니다.우선 한입 Next.js 강의를 들으시는 대부분의 수강생 분들께서는 이미 리액트로 최소 1~2개의 개인 프로젝트를 진행해보신 경험이 있으시리라 예상했기에 이와같이 안내드리고 있습니다.그러나! 프로젝트 경험이 없으신 분들께서도 수강하시는데에는 아무런 문제가 생기지 않을 수 있도록 "복습" 이라는 키워드와 함께 리액트에서의 데이터 페칭 방법도 아주 자세히 안내해드리고 있으니, 해당 내용을 참고하시면 본 강의의 수강에는 전혀 문제 없으실겁니다. 생각해보니 한입 리액트 수강 이후 즉시 한입 Next.js를 수강하시는 분들께는 그렇게 느껴지실 수 있겠군요 ... 😓 이 부분은 한입 리액트 강의에 데이터 페칭 관련된 내용을 추가하는 식으로 개선해보도록 하겠습니다 감사합니다.

콜백함수-호출 시 인수 값을 안 넣어도 되는건지 궁금합

안녕하세요 zip님 이정환입니다. 결과적으로 아래 코드처럼, 두번째 인수로 전달되는 콜백함수에 매개변수 idx를 선언하지 않으면 오류가 발생합니다.function repeat(count, callback) { for (idx = 0; idx 오류가 발생하는 이유는 너무나 명확합니다. 콜백함수 내부에서는 idx라는 변수에 접근할 수 없기 때문입니다. idx 변수는 repeat 함수 본문에 선언되어 있고, 콜백함수에는 인수로 전달되고 있으므로 이를 이용하시려면 아래와 같이 콜백함수에 idx라는 매개변수를 선언해주셔야 합니다.repeat(4, (idx) => { console.log(idx * 4); }); PS. 죄송하지만 질문을 정확히 이해했는지 잘 모르겠습니다 ㅠㅠ 혹시 헷갈리는 부분이 있으시다면 조금 더 구체적으로 추가 질문 주시면 답변드리겠습니다.

컴파일 실패 원인은?

안녕하세요 진진님 이정환입니다.오류 메세지를 읽어보시면params 라는 Props의 타입 정의가 잘못되었다고 나와 있습니다.이런 오류가 발생하는 이유는 우리 강의의 3.2) 페이지 라우팅 설정하기 의 6분 21초 경에 설명 드리고 있듯이 Next.js 15.1 버전부터는 searchParams와 params의 타입이 모두 Promise로 래핑되어 제공되기 때문입니다. (자세한 내용은 앞서 언급해드린 챕터를 참고하세요!)이에 해당 내용을 참고하셔서 코드 상에 serachParams와 params의 타입을 모두 Promise로 변경하시면 되겠습니다!

마지막 프로젝트 수정 코드 - 커밋

안녕하세요 진진님 이정환입니다.구체적으로 어떤 챕터의 코드가 커밋이 안되어 있다고 말씀해주신 걸까요? 페이지 라우터 버전의 한입 로그 프로젝트 코드를 말씀하신건지, 앱 라우터 버전의 한입 로그 프로젝트 코드를 말씀하신 건지 알려주시면 확인해보겠습니다.가능하다면 챕터명으로 말씀해주시면 더 빠르고 정확하게 확인이 가능할 것 같습니다.

함수- return으로 결과값 반환

안녕하세요 zip님 이정환입니다.네 맞습니다. getArea(40, 200000)의 결과는 area 변수의 값이 됩니다. 그러나 무조건 변수에 담아서 출력하실 필요는 없습니다. console.log(getArea(20, 30)) 처럼 getArea 함수 호출 결과를 즉시 콘솔에 출력하도록 설정하는 것 또한 가능합니다.

섹션 6 퀴즈 > 5번 문항 dynamic 옵션 값 오타

안녕하세요 이정환입니다.엇 그렇네요! 제보 감사합니다.다만 본 퀴즈는 제가 제작한 것이 아닌 인프런 측에서 AI로 자동 생성하는 것으로, 제게는 모니터링이나 수정의 권한이 없습니다 🥲인프런측에 조심스럽게 정정 요청 드려보겠습니다 :)

Promise 의 reject 관련 오류

안녕하세요 이정환입니다.결론부터 말씀드리면 예제와 동일하게 동작하고 있습니다 😀질문에 첨부해주신 아래의 사진을 살펴보면 기대하신대로 else 문이 정상적으로 잘 실행되어 reject가 실행되는걸 보실 수 있습니다.그러나 이때 reject는 비동기 작업을 오류로 처리하는 메서드인 만큼 예외를 발생시킵니다. 따라서 지금처럼 디버거에서 동작을 확인하시면 말씀하신 것 처럼 오류 발생이 감지됩니다.(사진) 또 터미널에서는 UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). 오류가 발생한다고 하셨는데요 이는 reject 메서드가 호출되어 발생하는 오류로 의도된 오류입니다.오류 메세지의 마지막 부분을 읽어보시면 rejecting a promise which was not handled with .catch(). 라고 하여 Promise에서 reject가 호출되어서 본 오류가 발생했음을 안내해주고 있기도 합니다. 우리 강의에서는 브라우저 디버거와 VSCode 터미널이 아닌 브라우저 콘솔을 통해 본 예제의 결과를 확인하고 있습니다. 강의를 자세히 살펴보시면 아래 그림처럼 브라우저 콘솔에도 동일한 오류 메세지가 발생하고 있는걸 보실 수 있습니다.(사진) 강의의 예제와 동일한 결과를 확인하시려면, 강의와 동일하게 브라우저의 디버거가 아닌 console 탭을 통해 결과를 확인하셔야 합니다.

@types/node와 devdependencies

안녕하세요 이정환입니다.네 실제 배포를 위해 개발되는 프로젝트라면 말씀하신대로 -dev 옵션을 주어 devDependencies로 저장하는게 더 좋은 방법입니다. 참고로 강의에서는 -dev 옵션에 대한 추가적인 설명으로 인해 메인 흐름이 방해받을까 생략했습니다 😀

데코레이터강의는 없나요?

안녕하세요 duddnd님 이정환입니다.데코레이터는 아직 실험적인 기능으로 프론트엔드 진영에서는 활발히 사용되고 있지 않아 본 강의에서는 제외하게 되었습니다 🥲

7.6 챕터에서 클라이언트 컴포넌트로 바꾼 이유가 궁금합니다.

안녕하세요 김민규님 이정환입니다.결론부터 말씀드리면 useActionState는 클라이언트 컴포넌트에서만 쓸 수 있고, 서버 컴포넌트에서는 직접적으로 사용할 수 없습니다.useActionState가 반환하는 상태(State)는 클라이언트의 동작에 따라(버튼을 클릭함 등...) 달라져야 합니다. 따라서 클라이언트 컴포넌트에서만 사용 가능하며 서버 컴포넌트에서는 정상적으로 작동하지 않습니다.간단히 정리하자면 서버 컴포넌트는 초기 렌더링(접속 요청시에 초기 HTML을 생성하는 일)만을 담당하기에, 사용자의 동작에 따라 값이 달라지는 대부분의 React Hooks(useEffect, useState, useActionState)는 정상적으로 동작하지 않습니다.