TodoItem, 구조 분해 할당 시 사용하지 않는 변수는 어떻게 처리하나요?

안녕하세요 이정환입니다.결론부터 말씀드리자면 Props로부터 id 변수를 아예 구조분해 할당하지 않는게 가장 깔끔합니다.매개변수는 순서를 반드시 지켜야 하지만, 객체의 경우 순서를 무조건 지킬 필요는 없기에 그렇습니다 😀

CommentItem에 props를 전달하지만 받지 않는데 TypeScript 에러가 안 나는 이유가 궁금합니다

안녕하세요 호기쿤님 이정환입니다.이 현상은 props가 객체 형태로 전달되기 때문에 발생하는 동작입니다. TypeScript에서 객체 타입은 기본적으로 초과(추가적인) 프로퍼티를 허용하는 방식으로 동작합니다. 즉, 컴포넌트가 명시적으로 사용하지 않는 props가 전달되더라도, 타입 에러 없이 그대로 허용됩니다. 예를 들어 아래 코드에서 Props 타입에는 content만 정의되어 있지만 author, createdAt 같은 추가적인 프로퍼티를 함께 전달해도 에러가 발생하지 않습니다.type Props = { content: string; }; function printContent(props: Props) { console.log(props.content); } printContent({ content: "안녕하세요", author: "정환", createdAt: "2025-01-01", });TypeScript는 이 객체가 content: string을 포함하고 있는지만 검사하고, 그 외의 프로퍼티는 타입 검사 대상에서 제외합니다.

35강. 모듈 보강은 라이브러리 파일을 직접 편집해야 하나요?

안녕하세요 김성일님 이정환입니다.우선 라이브러리 파일은 직접 편집하시면 안됩니다. npm install로 다시 설치하거나 버전을 업데이트 할 경우 편집된 내용이 모두 사라지기 때문입니다.모듈 보강은 말씀하신대로 별도의 파일을 생성하신 다음 인터페이스를 중복 선언해 선언 머징을 이용하는 방식으로 이루어집니다.

Day10 미션 안내 이미지

안녕하세요 Lucy님 수정해 두었습니다 감사합니다.

인터페이스 문법이 있는데 타입 별칭 문법은 왜 있나요?

안녕하세요 김성일님 이정환입니다.다른 Q&A를 보고 납득하셨다니 다행입니다! 그런데 다른 분들도 이 질문을 보고 동일한 궁금함을 가지실 수 있을 것 같아서혹시 납득이 잘 되신 해당 Q&A 게시글 링크를 답글로 남겨주실 수 있을까요?

수업질문 12.15)Edit 페이지구현하고 useEffect 관련

안녕하세요 강정빈님 이정환입니다.해당 경고 메세지는 ESLint(코드 정적 분석 도구)가 제공하는 것으로 기능 동작에는 아무런 지장을 주지 않으니 무시하셔도 괜찮습니다.해당 메세지가 발생하는 이유는 useEffect 내에서 setState 메서드를 호출하게 될 경우 아래와 같은 상황에 무한 루프를 발생시킬 수 있기 때문인데요useEffect(()=>{ setState(state + 1); }, [state])우리 강의에서는 위 예제코드처럼 무한 루프를 발생시키는 useEffect를 작성하지 않으므로 무시하고 지나가셔도 괜찮습니다. 다만 이 오류 메세지가 거슬리신다면 eslint.config.js 파일에 다음 rules를 추가하시면 됩니다. "react-hooks/set-state-in-effect": "off",

강의 들으면서 궁금한 부분 질문드립니다.

안녕하세요 혜빈님 이정환입니다.순서대로 답변 드리겠습니다. 1) 무조건 이렇게 하실 필요는 없습니다. 말씀하신대로 프로젝트를 생성해 시작하셔도 됩니다. 대신 macOS 기준으로 프로젝트가 생성되는 경로가 Documents로 고정됩니다. 직접 해보시면 차이를 느끼실 수 있을겁니다. 2) 자바스크립트에서는 보통 불변하는 값을 담는 변수를 선언할 때 let 대신 const를 사용합니다. router 객체나 쿼리스트링 q 같은 값들은 불변하기에 let 대신 const를 이용하는게 좋습니다. 그러나 이는 어디까지나 컨벤션일 뿐 기능적인 오류까지 발생하지는 않습니다. 따라서 현재 발생하는 오류는 ESLint의 문법 검사 기능에서 발생하는 오류인 것 같습니다. 3) 구체적으로 어떤 에러를 말씀하시는건지 모르겠습니다 🥲 구체적으로 말씀해주시면 다시 답변드리겠습니다. 참고로 이처럼 대괄호를 두번 사용하는 경로 설정 방법인 옵셔널 캐치 올 세그먼트에 대해서는 해당 강의의 19분에 설명해드리고 있습니다. 4) 페이지 라우팅 설정을 위해서는 index.js 라는 이름의 파일을 생성해야 합니다. 페이지 라우팅 설정이 필요하지 않다면 안하셔도 됩니다.참고로 이 부분에 대해서는 아래 그림처럼 2.1 챕터 2분 15초 경에 설명해드리고 있습니다. 해당 챕터를 처음부터 다시 수강하시는걸 권장드립니다.(사진) 이어서 쿼리 파라미터를 받는 동적 URL인 경우에만 해당 쿼리 파라미터 이름을 대괄호에 적는것이냐 질문 주셨는데요 우선 말씀하시는게 쿼리 스트링인지, 혹은 URL 파라미터인지 정확히 구분할 필요가 있을 것 같습니다. 쿼리 스트링과 URL 파라미터의 차이를 잘 모르신다면 아래의 링크를 먼저 참고해주세요https://velog.io/@gth1123/%EC%BF%BC%EB%A6%AC-%EC%8A%A4%ED%8A%B8%EB%A7%81Query-string-URL-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0 URL 파라미터의 경우 아래 그림처럼 2.1 챕터의 4분 51초 경에 설명해드리고 있듯, 파일명에 대괄호를 통해 URL 파라미터의 이름을 명시해 주시면 됩니다. 예를 들어 [id].jsx라면 URL 파라미터를 id라는 이름으로 전달 받도록 설정하는 것이죠(사진) 이어서 다중 쿼리 파라미터 설정을 할 것을 대비해서 일반적으로 ... 설정을 하는지도 궁금하다고 질문주셨는데요. "일반적으로 ... 설정" 이 무엇을 말씀하시는건지 잘 모르겠습니다. 구체적으로 다시 질문주시면 답변드리겠습니다. 다중 URL 파라미터 역시 [id].jsx 와 같은 형식으로 대응 가능합니다. 5) 404 페이지를 이미지로 설정하고 싶으시다면 404 페이지 컴포넌트에 return (사진) 형태로 (사진) 태그를 렌더링 하시면 됩니다. 404 페이지 컴포넌트 또한 리액트 컴포넌트이기에 리액트에서 하시던 그대로 하시면 되겠습니다. 이미지를 보관하는 폴더는 public 폴더에 하셔도 되고 src 폴더 내에 하셔도 됩니다. 6) 네 맞습니다. 7) 작업 스타일은 사람에 따라 다를 것 같습니다. 저는 보통 직접 작성하는 편 입니다.

Header 컴포넌트 리렌더링 질문

안녕하세요 bit2580님 이정환입니다.결론부터 말씀드리자면 new Date 함수로 인해 컴포넌트가 리렌더링 되지는 않습니다. 컴포넌트의 리렌더링은 앞선 챕터에서 말씀드렸듯 다음 2가지 상황에서만 유발됩니다.자신이 관리하는 State가 업데이트 되었을 때부모 컴포넌트가 리렌더링 되었을 때

서버 배포 에러입니다.

안녕하세요 alswns1285님 이정환입니다.앗! Swagger는 서버리스 환경(Vercel 호스팅 배포 등)에서는 정상적으로 작동하지 않는 이슈가 있는 것 같더라구요 ... 🥲 로컬에서는 잘 접속되지만 배포시에는 접속이 어려운건 정상입니다.

10.3 TodoItem 부모 재랜더링

안녕하세요 flamewizkey님 이정환입니다.TodoItem의 체크박스를 클릭했을 때, TodoItem의 부모 컴포넌트들(TodoList, App 등)이 리렌더링 되는 현상은 버그가 아닌 자연스러운 현상입니다. 아래는 강의 화면 캡쳐인데요 아래 화면에서도 부모 컴포넌트들은 리렌더링 되고 있는것을 확인하실 수 있습니다.(사진)본 챕터의 핵심 포인트는 특정 TodoItem 컴포넌트의 체크박스가 클릭되었을 때, 다른 TodoItem 컴포넌트가 불 필요하게 리렌더링 되지 않도록 최적화 하는 작업입니다. 따라서 다른 TodoItem이 아닌 부모 컴포넌트의 리렌더링 여부는 핵심이 아닙니다. 참고로 부모 컴포넌트들이 렌더링 되는 이유는 간단합니다. TodoItem의 체크박스가 클릭이 되면 App 컴포넌트의 todos State 값에 변화가 발생하게 되고 이로 인해 App 컴포넌트가 리렌더링 되어 App 아래의 모든 컴포넌트가 리렌더링 되기 때문입니다.