deprecated 되는 걸로 알고있고안써줘도 되는 것 같은데 리액트랑 타입스크립트 버전업에 따른 결과인가요?

인터페이스 즉 타입만 모아두는경우 확장자를 .d.ts로 하게 되면 declare 파일이 되어 타입들 을 일일이 import 하지 않아도 된다고 알고 있습니다.제로초님은 단순 ts 파일로 생성하여 타입을 일일이 import 하여 사용하시던데 혹시 이유가 있을까요?

안녕하세요, Notification 예제를 풀다가 질문이 생겨 질문드립니다. 다른 수강생분께서 올려주신 질문에 대한 답을 읽고 제 코드가 잘못된거 같아서 질문드립니다!소플님께서 설명해주신 것에 따르면, 1번과 2번이 mount가 되면, 재랜더링이 일어나면서 1번이 update가 된다. 또한 1, 2번이 mount된 시점에 3번이 마운트가 되면 1, 2번이 재랜더링이 일어나면서 update하며, 1, 2, 3번이 모두 마운트 된 이후에는 재랜더링이 아닌 unmount가 실행되는 순서라고 봤습니다.하지만 제 코드의 로그를 보면 이 순서가 아닙니다, 혹시 mount-update-unmount의 실행되는 순서가 임의로 바뀔수가 있는지 아니면 단순히 제 코드의 문제인건지 궁금합니다.또한 else{} 구문에 배열을 초기화 시켜주는 코드를 넣으면 Notification3번은 실행되지도 않은채 배열이 초기화 되어버립니다. 이건 왜 그런건지 궁금합니다.

3-7) 캐시 최적화를 듣고 있습니다. npm run serve가 동작하지 않네요. npm run buildnpm run serve의 순서로 실행했습니다.에러 코드는 아래와 같습니다.> lecture-3@0.1.0 serve> node ./server/server.jsnode:events:490 throw er; // Unhandled 'error' event ^Error: listen EADDRINUSE: address already in use :::5000 at Server.setupListenHandle [as _listen2] (node:net:1774:16) at listenInCluster (node:net:1822:12) at Server.listen (node:net:1910:7) at Function.listen (/Users/stellamax/Desktop/study/optimizing/node_modules/express/lib/application.js:618:24) at Object.<anonymous> (/Users/stellamax/Desktop/study/optimizing/server/server.js:20:5) at Module._compile (node:internal/modules/cjs/loader:1275:14) at Module._extensions..js (node:internal/modules/cjs/loader:1329:10) at Module.load (node:internal/modules/cjs/loader:1133:32) at Module._load (node:internal/modules/cjs/loader:972:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)Emitted 'error' event on Server instance at: at emitErrorNT (node:net:1801:8) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) { code: 'EADDRINUSE', errno: -48, syscall: 'listen', address: '::', port: 5000}클론 받은 코드는 아래와 같습니다.const express = require('express') const app = express() const port = 5000 const path = require('path') const header = { setHeaders: (res, path) => { res.setHeader('Cache-Control', 'private, no-cache, no-store, must-revalidate') res.setHeader('Expires', '-1') res.setHeader('Pragma', 'no-cache') }, } app.use(express.static(path.join(__dirname, '../build'), header)) app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '../build/index.html')) }) app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))  

강사님 안녕하세요 혹시 쿼리문좀 백엔드에서 잘못되는거 같은데한번 봐주시면 안될까요...아무리 _id로 할려고해도 같은 유저가 질문하게 되면 컨텐츠로도 확인해야해서요 ㅠㅠ 강사님 댓글이라도 대댓글 이거에 관한 힌트라도 얻을수있게 남겨주시면 감사하겠습니다..아무리해도 쿼리문에서 필요한게 없으니 어떻게 해야할지를 모르겠습니다...

git agent 설치 확인을 위해 다음과 같이 명령어를 터미널에서 입력했는데, 오류가 뜨네요.. 어떻게 해결할 수 있을까요..

터미널에 다음과 같은 경고가 뜹니다.warn - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works TypeError: Failed to fetch at webpack_require.hmrM (http://localhost:3000/_next/static/chunks/webpack.js?ts=1690436755699:1201:20)작성한 코드AppLayout.jsimport { Menu } from "antd"; import Link from "next/link"; import PropTypes from "prop-types"; import React from "react"; const items = [ { label: ( <Link href="/"> <a>홈</a> </Link> ), key: "home", }, { label: <Link href="/profile">프로필</Link>, key: "profile", }, { label: ( <Link href="/signup"> <a>회원가입</a> </Link> ), key: "signup", }, ]; function AppLayout({ children }) { return ( <div> <Menu mode="horizontal" items={items}></Menu> {children} </div> ); } AppLayout.propTypes = { children: PropTypes.node.isRequired, }; export default AppLayout; index.jsimport React from "react"; import AppLayout from "../components/AppLayout"; function Home() { return ( <AppLayout> <div>Hello, Next!</div> </AppLayout> ); } export default Home; Fast Refresh 관련 문서를 보고 새로 고침도 해보고, 캐시도 지워보고, 익명 함수를 기명 함수로 바꿔보았지만 소용이 없었습니다.npm run dev를 실행하고 localhost에 접속할 때마다 보입니다.웹페이지 우측 하단에 vercel mark 같은 것이 잠시 깜빡이는데 그 때에도 fast refresh 관련 warnning이 뜹니다.next.js 12 버전, antd 5버전을 사용 중이며 질문 시점에 강의는 Section1의 1강 수강 했습니다.

안녕하세요!다음과 같이 hook이 선언되기 전에 if조건문이 위치하여 오류가 발생하였습니다. useMutation은 조건문이 실행되기 전에 선언해주면 해결되었는데 useQuery는 router를 사용하기 때문에 조건문보다 먼저 선언이 될 수 없었습니다.그래서 조건문을 없애기 위해서 router.query.boardId 를 string타입으로 변환하여도 상관이 없나요?1차 오류 발생if (!router || typeof router.query.boardId !== "string") return <></>; const { data } = useQuery< Pick<IQuery, "fetchBoardComments">, IQueryFetchBoardCommentsArgs >(FETCH_BOARD_COMMENTS, { variables: { boardId: router.query.boardId }, }); const [deleteBoardComment] = useMutation< Pick<IMutation, "deleteBoardComment">, IMutationDeleteBoardCommentArgs >(DELETE_BOARD_COMMENT);//오류 원인 React Hook "useMutation" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? const { data } = useQuery<//string으로 변환 const { data } = useQuery< Pick<IQuery, "fetchBoardComments">, IQueryFetchBoardCommentsArgs>(FETCH_BOARD_COMMENTS, { variables: { boardId: String(router.query.boardId) }, });

보시는 것과 같이 첫번째 사진처럼 백틱을 넣으면두번째 사진과 같은 자동완성기능이 제기능을 못합니다. 이유와 해결방법이 있나요? 

저는 평소에 아래와 같이 ComponentPropsWithoutRef을 이용하여 children이나 스타일등을 props로 내려받아 사용하고 있엇는데 export interface Props { /** 북마크 여부 */ isBookmark: boolean; /** 클릭했을 때 호출할 함수 */ onClick: (event: React.MouseEvent<HTMLButtonElement>) => void; } export const Bookmark = (Props: Props & ComponentPropsWithoutRef<"button">) => { return ( <ButtonStyle {...Props}> <BookmarkIcon isBookmark={Props.isBookmark} /> </ButtonStyle> ); }; export default Bookmark; 강의에서는 아래와같이 FC<PropsWithChildren<Props>> 형식으로 받아 오던데 둘이 어떤 차이가 있을까요?interface Props { show: boolean; onCloseModal: () => void; style: CSSProperties; closeButton?: boolean; } const Menu: FC<PropsWithChildren<Props>> = ({ closeButton, style, show, children, onCloseModal }) => { const stopPropagation = useCallback<MouseEventHandler<HTMLDivElement>>((event) => { event.stopPropagation(); }, []); if (!show) { return null; } return ( <CreateMenu onClick={onCloseModal}> <div onClick={stopPropagation} style={style}> {closeButton && <CloseModalButton onClick={onCloseModal}>&times;</CloseModalButton>} {children} </div> </CreateMenu> ); };

(클릭한 버튼만 loading이 되게 해놓은 상태에서)서로 다른 두개의 팔로우 버튼을 빠르게(1초안에) 클릭했을때요청이 두번가는데 두번째거만 성공하는 이유는takeLatest를 사용해서 그런것이 맞나요?둘다 성공시키기 위해 takeEvery를 사용했는데그래도 될까요?function* watchFollow() { yield takeEvery(FOLLOW_REQUEST, follow); } function* watchUnfollow() { yield takeEvery(UNFOLLOW_REQUEST, unfollow); } 그리고 혹시 takeLatest를 써도 서버에 여러개의 요청이 가니까 서버에서 여러 요청을 모두 성공하게끔 처리가 될까요?

재설치를 해도 에러 메시지가 사라지지않네요 ㅠㅠ 저랑 같은 문제인가 싶어 https://www.inflearn.com/questions/872799/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%98%A4%EB%A5%98#259807해당글의 방법도 시도했지만 달라지지가 않네요 ㅠ

안녕하세요!! 컴포넌트를 잘 만드는 법 이런게 있을까요? 조금 난해합니다ㅜ 기준이 사람마다 다른건 알지만 하나라도 알고싶네요! - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

강의에선 일반 html/css를 사용하고 data-testid를 사용해 엘리먼트를 선택하는데styled-component를 사용한다면 어떤 방식으로 선택하고 테스트하는게 권장되는 방법일까요?

<!DOCTYPE html> <html lang="ko"> <head> <script src="./js/calculator.js"></script> <link rel="stylesheet" href="./calculator.css"> <title>D-Day</title> </head> <body> <h1>D-day</h1> <div id="d__day__container"> <div class="d__day__child__container"> <span id="days">0</span> <span>일</span> </div> <div class ="d__day__child__container"> <span id="hours">0</span> <span>시간</span> </div> <div class ="d__day__child__container"> <span id="min">0</span> <span>분</span> </div> <div class ="d__day__child__container"> <span id="sec">0</span> <span>초</span> </div> </div> <div id="target-selector"> <input id="year" type="text" placeholder="년도" class="day-caleander" size=5 maxlength="4"> <input id="month" type="text" placeholder="월" class="day-caleander" size=5 maxlength="2"> <input id="day" type="text" placeholder="일" class="day-caleander" size=5 maxlength="2"> </div> <div id="target__selector"> <button onclick="counterMake()" id="start__btn">카운트다운</button> </div> </body> </html>   const dateFormMaker = () => { const inputYear = document.getElementById("year").value; const inputMonth = document.getElementById("month").value; const inputDay = document.getElementById("day").value; const dateFormat = `${inputYear} - ${inputMonth} - ${inputDay}`; return dateFormat; } const counterMake = () => { const targetDateInput = dateFormMaker(); const nowDate = new Date() const targetDate = new Date(targetDateInput); const remaining = (targetDate-nowDate) / 1000; if(remaining <=0) { console.log("타이머가 종료되었습니다.") }else if (isNaN(remaining)) { "유효한 시간 형식이 아닙니다" } const reaminingDate = Math.floor(remaining /3600 /24); const remainingHours = Math.floor (remaining/3600) & 24; const remainingMin = Math.floor(remaining/60) % 60; const remainingSec = Math.floor(remaining) & 60; const dDayCounter = `남은 시간 : ${reaminingDate}일 ${remainingHours}시 ${remainingMin}분 ${remainingSec}초`; console.log(dDayCounter) return dDayCounter; } console 하나하나 찍어가며 파악한 결과 targetDate에서 NaN이 뜨는데, 아무리 봐도 이유를 모르겠습니다 ㅠㅠㅠinput 박스에 적은 값들도 잘 읽어오는데 갑자기 저기서 에러가 뜨니까 답답하네요 . 피드백 부탁드립니다.

강의를 보다 msw부분에서 에러가 발생합니다. 폴더구조는 이런식이고 handler와 server의 ts파일입니다.setupTests.ts파일입니다 App컴포넌트 입니다 문제의 테스트 코드입니다.강의에서 사용하신 대로 비슷하게 작성하고 에러가 발생할 부분도 제눈에는 보이진 않는데위와같은 에러가 발생하여 옵셔널 체이닝 을 사용하면이런 에러가 발생하네요.npm test가아닌 npm start로 실행시켜 봤을때에는 전혀 이상이 없는데 테스트를 실행시키면 에러가 발생합니다.서버설정부분이나 핸들러부분이 잘못돼었나 싶어서 찾아보았지만 그부분은 이상이 없는것같고app컴포넌트를 다른 방식으로 작성해도 계속에러가 발생합니다.어떤부분이 잘못된부분이고 어떤 해결방안이있을까요?

안녕하세요, 강의 영상을 토대로 .jsx 파일을 chapter_03 폴더에 생성했는데요 영상 속 코드 사진과 다르게 파일을 인식하지 못하는것 같습니다. 이건 어떻게 해결해야할까요?

useMutation section 에서 해당 소스를 작성하고 Graphql API 요청하기 버튼을 누르면 아래와 같이 오류 메세지가 나옵니다. 설치 오류인가 싶어 package.json 을 봐도 특별히 어떤 문제인지 확인되지 않습니다.

안녕하세요 강사님클로코딩 진행중 npm run dev 명령 시 정상적으로 런타임 되는데계속해서 아래 사진과 같이 각 entity가 초기화가 안됐다는 경고 창이 뜨는데 이건 어떻게 해결해야하는지 문의드립니다. 

apoll-cilent 관련된 질문입니다.질문1. 지금 강의에서는 api url이 한개만 있을 경우인데, 경로가 다 다른 경우는 어떻게 연결을 하나요??client를 여러개 만들어서 porivder에 담아줘야하나요??질문2. provider는 꼭 app.jsx를 감싸야하나요?? 아니면 내부 컴토넌트안에서 원하는 컴포넌트를 provider로 감싸도 동일하게 사용이 가능한가요??