onMouseEnter 관련 문의 드립니다

안녕하세요 망나뇽님 이정환입니다.크롬에서만 onMouseEnter가 마우스를 올렸을 때 동작하지 않는 문제는, 크롬 브라우저의 확장 프로그램이 마우스 이벤트를 차단하고 있을 가능성이 높습니다. 광고 차단기나 기타 확장 프로그램들이 특정 이벤트를 간섭하는 경우가 종종 있거든요.해결 방법은 간단합니다! 크롬을 시크릿 모드(Ctrl + Shift + N)로 열어서 테스트해보세요. 시크릿 모드에서는 확장 프로그램이 기본적으로 비활성화되기 때문에, 이게 원인이라면 정상적으로 동작할 겁니다. 시크릿 모드에서 잘 된다면 확장 프로그램을 하나씩 비활성화해보시면서 어떤 확장이 문제인지 찾아보시면 됩니다!

서로소 유니언 타입이 discriminated union과 동의어 인가요?

안녕하세요 lv 3. 초보자님 이정환입니다.네 같은 개념입니다. 강의에서 소개한 "서로소 유니온 타입"은 영어로는 discriminated union 또는 tagged union이라고 불리는 개념을 한국어로 표현한 거예요."서로소"라는 표현은 수학의 서로소 집합(disjoint sets)에서 따온 건데, 각 멤버 타입이 서로 겹치지 않는다는 의미를 담고 있습니다. 결국 같은 개념인데 이름만 다른 거라서, 영어 자료에서 discriminated union이 나오면 "아 서로소 유니온 타입이구나!" 하고 이해하시면 됩니다!

배열의 렌더링 관련 질문 드립니다.

안녕하세요 망나뇽님 이정환입니다.React에서 {[1,2,3]}을 렌더링하면 "123"으로 나오는 건, React가 배열을 만나면 각 요소를 하나씩 꺼내서 개별적으로 렌더링하기 때문입니다. 즉 {[1,2,3]}은 {1}{2}{3}과 동일하게 처리되는 거예요.그런데 실제로 이런 패턴이 주로 사용되지는 않습니다. 배열은 보통 map 메서드를 활용해 별도의 컴포넌트나 HTML 요소로 렌더링 되기 때문에(나중에 배웁니다), 지금은 "아 배열을 JSX에 넣으면 이렇게 되는구나" 정도로만 알고 넘어가시면 충분합니다!

4.6 id를 string으로 바꾸니까 오류가 나요

안녕하세요 강이님 이정환입니다.올려주신 스크린샷을 보니 TodoItem 컴포넌트에 todo 객체를 스프레드로 전달하는 부분에서 타입 에러가 발생하고 있네요.이 오류는 id를 string으로 바꾸셨지만, TodoItem 컴포넌트의 props 타입 정의에서는 아직 id가 number로 되어있을 때 발생합니다. id의 타입을 변경하실 때는 해당 타입을 사용하는 모든 곳을 함께 수정해주셔야 하거든요.확인해보셔야 할 부분은 다음과 같습니다:- TodoItem 컴포넌트의 props 타입 (id가 string으로 되어있는지)- Todo 타입 정의 (id가 string으로 되어있는지)- useMutation 등에서 id를 사용하는 부분혹시 그래도 해결이 안 되시면, 확실한 오류의 원인을 파악하기 위해 전체 코드를 확인해봐야 합니다. 전체 프로젝트를 구글드라이브 혹은 깃허브를 통해 링크 형태로 전달해주세요

조건부타입소개 중 함수오버로딩 활용 시 인수의타입과 함수의 반환값의 타입이 깨지는 문제

안녕하세요 히수님 이정환입니다.우선 말씀하신대로 removeSpaces 함수에 number 타입의 인수를 전달하는 경우 반환값으로는 undefined가 리턴됩니다. 잘못 생각하신 부분은 없어요!다만 이게 "타입이 깨진다"거나 "타입 안전하지 않다"고 보기는 어렵습니다. 왜냐하면 number를 넣었을 때 반환 타입이 undefined로 추론되는 것 자체가 조건부 타입이 의도한대로 정확히 동작하고 있는 거거든요. number extends string은 거짓이니까 undefined가 나오는 게 맞는 거죠. (실제로 undefined 값이 반환되기도 하니까요)제네릭에 별도의 제약을 걸지 않은 건, 조건부 타입 자체가 어떤 타입이 들어오든 그에 맞는 반환 타입을 유연하게 결정해주는 역할을 하기 때문입니다. 즉 string이 오면 string, 그 외에는 undefined — 이렇게 알아서 분기해주는 게 조건부 타입의 목적이에요.물론 실무에서 이 함수를 더 엄격하게 만들고 싶다면 function removeSpaces(text: T) 처럼 제네릭에 제약을 추가할 수도 있습니다. 하지만 강의에서는 조건부 타입의 동작 원리를 설명하는 데 초점을 맞추고 있기 때문에, 제네릭 제약까지는 다루지 않은 것이니 참고해주세요!

2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.

안녕하세요 rumi du님 이정환입니다.결론부터 말씀드리면, 강의 코드가 틀린 건 아닙니다! console.log(refObj)는 실제로 오류를 발생시키지 않습니다.올려주신 에러 메세지를 보면, @workspace/explain 이라는 접두사와 함께 시작하는데요, 이처럼 @workspace/explain으로 시작하는 에러메세지는 VSCode의 코파일럿의 설명으로 실제 프로젝트 동작에는 아무런 영향을 주지 않습니다.아래와 같이 코파일럿을 사용하지 않는 환경에서의 제 코드는 아무런 오류도 발생하지 않는걸 보실 수 있습니다 😀(사진)그렇다면 Copilot이 이런 메세지를 왜 보여주냐! 이는 잠재적으로 문제가 될 수 있는 코드이기 때문입니다. 렌더링 중에 ref를 함수에 전달하면 그 함수가 ref의 값을 읽을 수도 있기 때문에, Copilot이 "혹시 이거 의도한 거 맞아?" 하고 알려주는 거죠.그런데 우리는 refObj를 콘솔에서 학습 목적으로 까보려는 것이기 때문에, 이런 경고는 무시해도 됩니다. 실제로 프로젝트를 실행해보시면 정상적으로 동작하는 걸 확인하실 수 있을 거예요!

TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?

안녕하세요 cadenzza님 이정환입니다.타입스크립트를 이용해 React.js가 아닌 Nest.js(Next.js 아닙니닷)나 Express.js 등의 기타 프레임워크를 사용하실 예정이라면 타입스크립트부터 수강하시는걸 추천드리고,그렇지 않고 React.js를 꾸준히 사용하실 예정이라면 React.js를 선 수강하시는걸 추천드립니다.

할인쿠폰 관련하여

안녕하세요 썹th님 이정환입니다.아이고! 죄송합니다 25년 말에 쿠폰 교체해야 된다는걸 깜빡했습니다 ... ㅠㅠ즉시 교체해 두었습니다! 다시 확인 부탁드립니다 😃

이미지 메모리 누수 관련 질문

안녕하세요 keeenco님 이정환입니다.너무 좋은 질문을 주셨네요! 답변드리겠습니다 😀 1) 실제로 메모리 누수가 발생하는지 확인하는 방법메모리 누수를 확인하시려면, 브라우저의 개발자 도구를 이용하셔야 합니다.보통 개발자 도구의 Memory 탭을 사용하는데요, 생각해보니 브라우저 MCP를 통해 AI가 테스트를 도와줄 수 있을지도 모르겠습니다 ..! 참고해보시면 좋을 아티클 하나 추천해드립니다.https://blog.eunsukim.me/posts/debugging-javascript-memory-leak-with-chrome-devtools 2) 학습 태도 관련 질문사실 메모리 누수 등의 최적화 관련 이슈는, 프로젝트 개발 도중 직접 경험해보지 못했다면 알아차리기 어렵습니다. 보통은 나만의 프로젝트를 만들어보다 "어 여기 왜이렇게 느리지!?" 라는 느낌을 받는 것 부터 출발하게 되거든요그래서 수동적인 태도로 잘못 학습하시고 있다는 마음보다는 내가 "아직 겪어보지 못한 문제가 많구나 더 많은 경험을 해 보자!" 라고 편하게 마음 가지시는걸 추천드립니다 😀AI에게 도움을 받을수도 있을 것 같아요! 컨텍스트가 초기화 된 별도의 세션에 프로젝트를 직접 실행해보며 여러 방면으로 검토해 달라고 부탁해보셔도 좋을 것 같습니다 (제가 자주 활용하는 방식이에요!)

56강 alertModalStore 구현 중 질문

안녕하세요 이정환입니다.~/src/store/alert-modal.ts 파일의 해당 단언을 지우신 다음,~/src/components/modal/alert-modal.tsx 파일을 확인해보시면아래 그림과 같이 store 내부의 State 프로퍼티들을 잘 추론하지 못하는 걸 확인하실 수 있습니다.(사진)이렇게 되는 이유는 State 타입이 유니온(Discriminated Union)으로 정의되어 있어서, isOpen이 false일 때(CloseState)에는 title, description 등의 프로퍼티가 아예 존재하지 않기 때문입니다. type State = CloseState | OpenState;그런데 combine과 devtools 미들웨어를 거치면서 이 유니온 구조가 제대로 보존되지 않아, isOpen을 기준으로 한 타입 좁히기가 정상적으로 동작하지 않게 됩니다. 쉽게 말해 isOpen이 true라면 State에 title, description 등의 프로퍼티가 존재한다고 추론되어야 하는데 그렇지 못하고 있는 상황입니다.따라서 as typeof store & State 단언문을 추가하여, 자동으로 추론된 Store 타입(typeof store)에 State 타입을 교집합으로 묶어준 것입니다.