Map.tsx에서 //Map.tsx if (onLoad) { onLoad(map); } 이 구문은 왜 쓰인걸까요?? MapSection.tsx 에서 Map을 부르는 부분을 봐도 // MapSection.tsx import Map from "./Map"; const MapSection = () => { return ( <Map onLoad={() => { console.log("load!"); }} /> ); }; export default MapSection; 별다른 기능을 하는 것 같지는 않아서요. onLoad를 정의하고 있는 Map.tsx의 Props에서도 type Props = { mapId?: string; initialCenter?: Coordinates; initialZoom?: number; onLoad?: (map: NaverMap) => void; }; 변수로 NaverMap을 받기만 하고 별다른 기능은 하는 것 같지가 않은데, 혹시 onLoad가 어떤 기능을 하고있는지 알려주실 수 있을까요?? ++ 추가로, const map = new window.naver.maps.Map(mapId, mapOptions); 이렇게 했을 때, 어떻게 <div id={mapId} style={{ width: "100%", height: "100%" }} /> 이 태그에 Map이 들어가는지 궁금합니다!
NoSSR도 useEffect와 같이 실행되는 건가요? 선생님 안녕하세요. 좋은강의 너무 잘 듣고있습니다. 감사합니다. 윈도우 크기를 변경했을 때, width의 값이 같이 변경되는게 신기해서 질문드립니다. useEffect안의 math.random()의 값이 변경되는 타이밍에 window의 width값도 같이 변경되더라구요. 제 생각에는, 랜덤값이야 useEffect안에서 setData를 통해 계속 바꿔주고 있으니 변경되는게 맞다고 생각했지만, window값은 처음 값을 받아오면 새로고침을 해주기 전까지는 값이 변경되지 않을줄 알았거든요. 그런데 랜덤값이 변경될 때 값이 같이 변경되더라구요. 그래서 혹시 이게 dynamic이 useEffect와 같은 역할을 한다면, window크기를 변경할 때마다 width의 값이 바로바로 바껴야 할 텐데, 그건 또 아니고 랜덤값이 바뀔때 같이 바뀌니까, 이게 어떤식으로 실행되는건지 알고싶어서 질문드립니다. import { NextPage } from "next"; import dynamic from "next/dynamic"; import { useEffect, useState } from "react"; // import NoSSR from "@/components/section1/NoSSR"; const NoSSR = dynamic(() => import("@/components/section1/NoSSR"), { ssr: false, }); const Example: NextPage = () => { const [data, setData] = useState(0); useEffect(() => { const delayInSeconds = 10; new Promise<number>((resolve) => setTimeout(() => resolve(Math.random()), delayInSeconds * 1000) ).then((result) => setData(result)); console.log("NoSSR : ", NoSSR); }); return ( <main> <h1>Client - Side data fetching</h1> <p>값 : {data}</p> <NoSSR /> </main> ); }; export default Example; 위 코드는 강의 보면서 따라치고, 궁금해서 로그를 찍어본 코드입니다. 딜레이를 10초로 주고, 그 안에서 윈도우 크기를 계속 바꿔봤는데, 윈도우 크기를 바꾼다고 해서 바로바로 변경되는 게 아니라, 10초가 지나고 랜덤값이 바뀔 때, 같이 바뀝니다.
강의의 useTransition을 사용한 부분에서 input 태그의 value를 deferedFilter로 설정하고 handleChange 내의 setFilter를 제거해도 문제가 없나요? 아니면 input에서 다루는 value와 Words를 렌더링하기 위한 filter value를 따로 관리해야 하나요? 이렇게 해도 문제가 없는지 궁금합니다!
안녕하세요 typescript 설치과정에서 말씀주신대로 다 따라했는데 안되네요 ㅜㅜ 제가 따라한 부분은 일단 node_modules 지우고, yarn.lock 파일 지우고 말씀주신대로 17.0.2 버전으로 변경다했습니다. 그리고 난후에 tsconfig.json 빈파일로 만들고 yarn install 후 yarn dev 하면 다음과 같이 yarn add --dev @types/react 명령어 입력하라고 나오는데 어떻게 해야할지 모르겠네요.. ㅜㅜ package.json.lcok 파일도 지워봤는데 똑같습니다 tsconfig.json파일을 지우면 괜찮은데 tsconfig.json만 빈파일로 만들면 에러가 나오네요
수정 버튼을 클릭하면 기존 값의 작성자와 내용이 작성되어 있는데 별점도 똑같이 유지 시키고 싶어서 다음과 같이 작성 했습니다. <S.Star onChange={props.setStar} value={props.star !== 0 ? props.star : props.el?.rating ?? 0} /> 별점을 선택하고 댓글 등록하기 클릭하면 함수를 통해 setStar(0) 초기화도 해주었고 수정 아이콘을 클릭했을 때 기존 등록한 별점도 유지되게 했는데 수정하기 버튼을 클릭하면 별점이 0으로 수정이 됩니다. 여기서 어느 부분을 건들어야 할지 모르겠어요.
안녕하세요! 현재 리액트 초반부 강의 수강중에 있습니다. 포트폴리오 코딩중에 있는데 css in js 에서 일반적인 css에서 처럼 전체선택자 *를 사용하여 box-sizing: border-box; 로 하고싶은데 검색하봐도 방법이 나오지 않습니다.. css in js 에서 전체선택자는 어떤식으로 사용할 수 있을까요? MDN 처럼 css in js 관련 아카이브가 따로 있을까요?
theme 적용시, 강사님께서 말씀해주신 것처럼 작업 폴더에 .streamlit 폴더를 만들고, 그 안에 config.toml 파일을 만들어 테마 적용을 했지만, 아래의 문구가 발생하며, 태마가 적용이 되지 않습니다. The page that you have requested does not seem to exist. Running the app's main page. 어떤 이유 인지 알려주세요.
