react 19 및 ESLint (exlint-plugin-react-compiler 또는 최신 react-hooks 규칙)에서 새로 추가된 규칙으로 발생하는 문제가 있습니다. useEffect(() => { setIsLoading(true); fetch("http://localhost:3000/posts") .then((reponse) => { return reponse.json(); }) .then((data) => setPosts(data)) .finally(() => { setIsLoading(true); }); }, []); useEffect 내부에서 조건 없이 동기적으로 setState를 호출하면 컴포넌트가 마운트되자마자 불필요한 리렌더링 연쇄가 일어나기 때문에 위와 같은 코드 작성을 금지한다고 하는데, 최신 문법에 맞는 방법은 어떻게 작성하면 좋을지 궁금합니다
몽고 DB 접속 중인데요 강의내용 같이 mongodb+srv://admin:qwe123!!@cluster0.ic4ilij.mongodb.net/react_blog?retryWrites=true&w=majority&appName=Cluster0 하고 Connection whit Conection String "Connect"를 누르면 Unable to connect: querySrv ENOTFOUND mongodb. tcp.cluster0.ic4ilij.mongodb.net 라는 메시지와 함께 접속이 안되고 있습니다. 원인과 해결 방안을 여쭤 봅니다. -- 감사합니다.
제공되는 react_ code.zip 중에 .. D:\su\code\SECTION11\11-02 D:\su\code\SECTION11\11-03 안에 소스가 없네요. 당연히 제가 작성하면 되겠지만... 참조하는 차원에서.. ㅡㅡ;; 소스를 얻을 수 있을까요? 다른 폴더안에는 소스가 제공되고 있는데 말이줘 ..
if (previewImage) { const formData = new FormData(); formData.append("file", previewImage); formData.append("upload_preset", "react_blog"); // formData.append("api_key", "688125195814112"); // formData.append("api_secret", "S2HFi155abf2HkDpkcgArvWP5HE"); // formData.append("public_id", "87f7932d-354d-4a7f-8f39-5dbf751f1c46"); const { data } = await axios.post( "https://api.cloudinary.com/v1_1/dptshe37e/image/upload", { formData }, ); console.log(data); https://api.cloudinary.com/v1_1/dptshe37e/image/upload { "error": { "message": "Upload preset must be specified when using unsigned upload" } } 일단 강의가 정말 훌륭합니다. 잘 듣고 있고 정말이지 많은 도움이 되고 있습니다. 게시글 등록하기 -4 강을 듣고 있는데 파일 업로드 부분에서 좀 막히네요. 요청 시 오류가 나는데요. 여러가지 방향으로 시도해 봤는데 잘 안되네요. 강의 촬영 시점하고 cloudnary 가 개편되었는데 특별하게 다른 점은 없어 보입니다. 일단 업로드 부분은 보류하고 다음 강의 들어야겠네요. 한번 살펴 봐 주시면 감사하겠습니다.
import { useId } from "react"; type CheckboxProps = Omit<React.ComponentPropsWithoutRef<"input">, "type"> & { type?: "checkbox"; parentClassName: string; }; export default function Checkbox(props: CheckboxProps) { const uuid = useId(); const { parentClassName, children, ...rest } = props; return ( <> <div className={parentClassName}> <input id={uuid} {...rest} /> <label htmlFor={uuid}>{children}</label> </div> </> ); } useEffect(() => { const randomText = Array.from( { length: 100 }, (_, index) => `Todo Item #${index + 1}`, ); randomText.forEach((text) => addTodo(text)); }, []); 대량 데이터 생성 후 테스트를 하는데 중복 키값이 생성되었는데요. uuid 부분인 것 같은데. 노트북 장비 사양 때문에 그런건지요? installHook.js:1 Encountered two children with the same key, 1770775434402 . Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
