안녕하세요. 해당 오류는 말씀하신 것처럼 useEffect 내부에서 조건 없이 동기적으로 setState 를 호출할 경우, 컴포넌트가 마운트되자마자 불필요한 리렌더링이 연쇄적으로 발생하기 때문 입니다. 따라서 동기적으로 setState 를 호출하지 않도록 처리하면 됩니다. 가장 간단한 우회 방법으로는 window.setTimeout(() => {}, 0) 과 같은 패턴을 사용해 비동기적으로 상태를 변경하는 방법이 있습니다. 다만 위 코드에서는 fetch 자체가 이미 비동기적으로 동작하기 때문에, 별도로 setTimeout 을 사용할 필요는 없습니다. 초기 isLoading 상태를 true 로 설정한 뒤, fetch 가 완료되었을 때 상태를 변경하는 방식 으로 처리할 수 있습니다. const [isLoading, setIsLoading] = useState(true); useEffect(() => { fetch("http://localhost:3000/posts") .then((response) => { return response.json(); }) .then((data) => setPosts(data)) .finally(() => { setIsLoading(false); }); }, []); 이렇게 하면 컴포넌트가 처음 렌더링될 때는 isLoading 이 true 이고, fetch 가 완료된 이후 false 로 변경되므로 불필요한 동기적 상태 변경을 피할 수 있습니다. 추가로 궁금한 점이 있으시면 언제든지 다시 질문해주세요. 감사합니다.
안녕하세요. 인프런 AI 인턴의 답변이 정확하네요. 이번 프로젝트 같은 경우 기본 체크박스 모양을 사용하지 않기 때문에 커스터마이징 과정을 통해서 변환한 것이라고 이해하시면 됩니다. 전체적인 답변은 인프런 AI 인턴 참고하시면 될 것 같습니다. 추가로 궁금하시면 다시 문의해주세요!
안녕하세요. 인프런 AI 인턴이 답변한 것처럼 위 에러는 DNS에서 몽고 DB의 SRV 레코드를 찾지 못할 때 발생합니다. 강의 내용을 참고하셔서 놓친 부분이 없는지 다시 한 번 확인해주시면 감사하겠습니다. 만약 그래도 잘 안되면 sucoding@naver.com으로 몽고 디비 접속 정보를 잠시 남겨주시면 직접 접속하여 확인해드리겠습니다. 감사합니다.
