React 19 버전에서 새로운 린트 규칙으로 setState() 호출하기가 신경쓰입니다.

안녕하세요 codingbear님 이정환입니다.이 경고는 useEffect 안에서 setState를 직접 호출할 때 나타나는 React의 새로운 lint 경고입니다. 작동은 정상적으로 되지만, 성능 이슈나 무한 렌더링을 유발할 가능성이 있어서 경고를 띄워주는 거죠.만약 경고 메세지를 제거하고 싶으시다면 eslint.config.js 파일에 다음 rules를 추가하시면 됩니다. "react-hooks/set-state-in-effect": "off",이 경고는 비교적 최근에 추가된 규칙이라, 강의를 촬영할 당시에는 없었거나 덜 엄격했을 수 있습니다.

select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com

안녕하세요 리트님 이정환입니다.아래 Codingbear님이 잘 설명해주신대로 javascript 선택을 추천드립니다!

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년 말에 쿠폰 교체해야 된다는걸 깜빡했습니다 ... ㅠㅠ즉시 교체해 두었습니다! 다시 확인 부탁드립니다 😃