eslint 플러그인 설정

안녕하세요 김태훈님 이정환입니다.금일 살펴보니 아래 그림처럼 프로젝트 생성 과정에서 OxLint를 사용할지, ESLint를 사용할지 묻는 항목이 추가 되었더라구요! 아마 이 과정에서 OxLint를 선택해 강의와 다른 점이 발생하게 된 것 같습니다. 미리 파악하지 못한 점 사과드립니다 🙇‍♂️(사진)OxLint 대신에 ESLint를 사용해 강의를 수강하시는 것을 추천드립니다. 강의에도 자동 메세지 기능을 통해 ESLint를 선택하시도록 안내를 추가 해 두겠습니다.

onSettled 질문드립니다.

안녕하세요 나마스테님 이정환입니다우선 말씀하신대로 onSettled 에서 invalidateQueries를 호출하므로 데이터의 용량이 커지면 부하가 발생하는 것은 맞습니다. 그러나 이는 낙관적 업데이트에서 필수적인 사항입니다.낙관적 업데이트는 서버의 응답을 기다리지 않고 "아마 이렇게 수정되었을 것이다" 혹은 "요청이 무조건 성공했을 것이다" 라고 예상해 캐시 데이터를 미리 바꿔놓습니다. 그러나 캐시 데이터가 실제 서버의 데이터와 100% 일치할 것이라고 보장할수는 없기에 onSettled 에서 실제 서버의 데이터로 교체하기 위해 캐시를 무효화 시켜주고 있는 것 입니다. 이 방식은 Tanstack Query의 공식 문서 예제에도 소개되어 있으며 실무에서도 실제로 자주 사용되는 패턴입니다. 다만 정말 데이터가 커서 부담이 된다면 실무에서는 다음과 같이 해결하기도 합니다.프론트엔드에서 요청 발생시 일단 onMutate로 낙관적 업데이트백엔드가 API Response로 결과로 생성된 데이터를 함께 반환프론트엔드 측에서는 성공 실패 여부에 따라 다음과 같이 동작onSuccess시 백엔드가 반환한 데이터로 캐시를 맞춤 (setQueryData)onError시 기존의 캐시 데이터로 원복 (요청 이전으로)위와 같이 설정하면 리스트 전체를 다시 불러오지 않고도 서버의 데이터와 캐시 데이터를 일치시킬 수 있습니다. 다만 구현의 복잡함이 뒤따르고 또 다른 클라이언트의 요청으로 인한 변경 사항은 반영되지 않기 때문에 상황에 따라 적절히 선택해야 할 것 같습니다.

수업 200% 완강했습니다. 추가로 요청 드립니다.

안녕하세요 Shin Kaku님 이정환입니다.우선 완강을 축하드리며 제 강의를 선택해주셔서 진심으로 감사드립니다 🙇‍♂️마침 내년 상반기에 출시할 강의로 바이브코딩 앱 개발편을 고려하고 있었습니다! 아마 올해 12월 즈음 현재 준비중인 강의 (Claude Code or Codex로 AI Brain 만들기) 이후에 곧바로 제작에 착수할 것 같습니다. 조금만 기다려주시면 감사하겠습니다! 열심히 만들어볼게요 🫡

감정일기장 다이어리 필터 적용할때 컨텍스트를 Home에서 가져오는 특별한 이유가 궁금합니다.

안녕하세요 ereum999님 이정환입니다.Home에서 받아와야 하는 이유는, 월별로 데이터를 필터링 해 DiaryList 컴포넌트에게 Props로 전달하기 위함입니다. DiaryList 컴포넌트에는 아래와 같은 getMonthlyData 함수가 없기에 상위 컴포넌트인 Home 컴포넌트에서 받아와 필터링을 거친 후 Props로 전달해준다고 이해하시면 됩니다.(사진)

generateStaticParams() 응용 질문 드립니다.

안녕하세요 하루세번펭수님 이정환입니다.네 올바른 방식이며 자주 사용됩니다. 본 챕터에서는 간단한 사용법을 안내해드리기 위해 이런 방식을 사용하지 않았지만, 강의 후반부에서는 결국 요런 방식으로 전환하게 됩니다.

스테이징 파일들 커밋 시 오류 메시지

안녕하세요 enghks님 이정환입니다.강의중 Git 설치 과정에 안내된 아래의 과정을 진행하시지 않은 것 같습니다. 아래의 안내에 따라 user.name과 user.email을 등록하시면 정상적으로 작동할 것 같습니다 😀혹시 안되시면 다시 질문주세요!(사진)

61강(Context API)에서 TodoStateContext 질문

안녕하세요 @V님 이정환입니다.앗 그러네요! TodoList 컴포넌트가 분리된 상황이 아니기에 TodoStateContext가 하위 컴포넌트에서 참조되는 상황은 아닙니다. 그러나 DispatchContext를 별도로 분리하고 향후 TodoList 컴포넌트가 분리될 경우까지 고려해 설계된 구조라고 이해해주시면 감사하겠습니다 😃

ReturnType에서 any와 never 사용의 차이가 있나요?

안녕하세요 멍멍님 이정환입니다.우선 말씀하신대로 아래의 타입에서 결과 타입이 never로 향하는 분기는 일어나지 않습니다. 따라서 any로 설정해도 무관합니다. 절대 발생할 수 없는 분기이기에 never 타입을 설정하는게 저도 의미상 올바르다고 생각하는데 내부적인 구현은 any로 되어 있더라구요 ... 정확한 원인은 저도 잘 모르지만 아마 아무 타입이나 넣어둬도 괜찮으니 any를 넣어둔게 아닐까 추측됩니다. type ReturnType any> = T extends (...args: any) => infer R ? R : never;

reject로 전달되는 값(거부 이유)의 타입과 타입 가드

안녕하세요 박준형님 이정환입니다.아래 AI 인턴의 답변대로 any 타입 역시 타입 좁히기로 정제가 가능합니다. 타입가드를 통한 타입 좁히기는 unknown에만 가능한것이 아닌 number 타입을 10 넘버 리터럴 타입으로 좁히는 등으로 모든 타입에 가능합니다.

node 실행 오류

안녕하세요 정민수님 이정환입니다권한 관련 오류로 보이네요! 금방 해결하실 수 있으니 아래의 안내대로 진행해주세요 😀우선 터미널(파워쉘)을 관리자 권한으로 실행해 주세요(사진)그런 다음 아래의 명령어를 터미널에 입력해주세요// 현재 실행 정책 확인하기 Get-ExecutionPolicy위 명령어는 현재 PC의 실행 정책을 확인 하는 명령어로 Restricted 또는 RemoteSigned 라는 결과를 출력합니다.만약 다음 그림처럼 Restricted 라는 결과가 출력될 경우 스크립트 파일을 읽어 실행할 수 없기에 문제가 발생할 수 있습니다.(사진)이럴 경우 다음 명령어를 입력해 권한 설정을 Restricted가 아닌 RemoteSigned로 바꿔주셔야 합니다.// 실행 정책을 RemoteSigned로 변경하기 Set-ExecutionPolicy RemoteSigned