webpack설정하면서 hot reloader에 대한 모듈설치부터 설정까지 나오는데요...저는 1.8버전을 설치했습니다.강의는 아무래도 좀 오래된 버전이구요..그러다 보니 현재 1.7이나 1.8버전에서의 설치할 모듈부터 설정까지 조금씩 달라진것 같습니다.1.8버전에 대한 hot reloader 설정관련한 내용좀 알수있을까요? 검색해봐도 잘 안나오고 쉽지 않네요 .감사합니다.

const onRightClickTd = useCallback( (e) => { e.preventDefault(); if (halted) { return; } console.log(`Right click on cell [${rowIndex}, ${cellIndex}]`); switch (tableData[rowIndex][cellIndex]) { case CODE.NORMAL: case CODE.MINE: dispatch({ type: FLAG_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.FLAG_MINE: case CODE.FLAG: dispatch({ type: QUESTION_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.QUESTION_MINE: case CODE.QUESTION: dispatch({ type: NORMALIZE_CELL, row: rowIndex, cell: cellIndex }); return; default: return; } }, [tableData[rowIndex][cellIndex], halted] ); return ( <td style={getTdStyle(tableData[rowIndex][cellIndex])} onClick={onClickTd} onContextMenu={onRightClickTd} > {getTdText(tableData[rowIndex][cellIndex])} </td> ); }; export const TableContext = createContext({ tableData: [], halted: true, dispatch: () => {}, }); const initialState = { tableData: [], timer: 0, result: "", halted: true, };강의에서 나온대로 적용하여 수업을 듣고 있는데, onRightClickTd가 작동을 하지 않습니다.콘솔에는 누를때마다 찍히는데, 오른쪽 마우스 이벤트 자체를 인식을 못하는 것 같습니다. 혹시몰라 Td.jsx 컴포넌트 코드를 다 올립니다! 어떤 문제 때문에 작동을 안하는걸까요?import React, { useCallback, useContext } from "react"; import { CLICK_MINE, CODE, FLAG_CELL, NORMALIZE_CELL, OPEN_CELL, QUESTION_CELL, TableContext, } from "./MineSearch"; const getTdStyle = (code) => { switch (code) { case CODE.NORMAL: case CODE.MINE: return { background: "#444", }; case CODE.CLICKED_MINE: case CODE.OPENED: return { background: "white", }; case CODE.QUESTION_MINE: case CODE.QUESTION: return { background: "yellow", }; case CODE.FLAG_MINE: case CODE.FLAG: return { background: "red", }; default: return { background: "white", }; } }; const getTdText = (code) => { switch (code) { case CODE.NORMAL: return ""; case CODE.MINE: return "X"; case CODE.CLICKED_MINE: return "꽝"; case CODE.FLAG_MINE: case CODE.FLAG: return "!"; case CODE.QUESTION_MINE: case CODE.QUESTION: return "?"; default: return ""; } }; const Td = ({ rowIndex, cellIndex }) => { const { tableData, dispatch, halted } = useContext(TableContext); const onClickTd = useCallback(() => { if (halted) { return; } console.log(`Right click on cell [${rowIndex}, ${cellIndex}]`); switch (tableData[rowIndex][cellIndex]) { case CODE.OPENED: case CODE.FLAG_MINE: case CODE.FLAG: case CODE.QUESTION_MINE: case CODE.QUESTION: return; case CODE.NORMAL: dispatch({ type: OPEN_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.MINE: dispatch({ type: CLICK_MINE, row: rowIndex, cell: cellIndex }); return; } }, [tableData[rowIndex][cellIndex], halted]); const onRightClickTd = useCallback( (e) => { e.preventDefault(); if (halted) { return; } console.log(`Right click on cell [${rowIndex}, ${cellIndex}]`); switch (tableData[rowIndex][cellIndex]) { case CODE.NORMAL: case CODE.MINE: dispatch({ type: FLAG_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.FLAG_MINE: case CODE.FLAG: dispatch({ type: QUESTION_CELL, row: rowIndex, cell: cellIndex }); return; case CODE.QUESTION_MINE: case CODE.QUESTION: dispatch({ type: NORMALIZE_CELL, row: rowIndex, cell: cellIndex }); return; default: return; } }, [tableData[rowIndex][cellIndex], halted] ); return ( <td style={getTdStyle(tableData[rowIndex][cellIndex])} onClick={onClickTd} onContextMenu={onRightClickTd} > {getTdText(tableData[rowIndex][cellIndex])} </td> ); }; export default Td;

'특정 아이템의 수량이 변경되었을 때 값이 재계산되어 올바르게 업데이트 된다' 테스트 실행시 변경점이 있는 price를 '$4,045.00'과 같이 직접 입력하셨는데요. 이 부분을 formatPrice(809*4) 이런식으로 하면 formatPrice에 변경점이 생겼을 때도 테스트가 깨지지 않고 검증할 수 있고, 작성하기 더 쉬워보인다고 생각하는데요. 혹시 그렇게 하지 않은 이유가 따로 있을까요 ? (독립성을 보장한다던가..) 아래의 '특정 아이템의 수량이 1000개로 변경될 경우 "최대 999개 까지 가능합니다!"라고 경고 문구가 노출된다' 테스트의 cartValidationMessages.MAX_INPUT_VALUE 값도 마찬가지입니다 !!

안녕하세요 ㅎㅎ강의 너무 잘 듣고있습니다.use client 사용하는 이유에 대해서 잘 모르겠어서 질문을 드립니다 .ㅎㅎ설명을 들었을때 server slide rendering 이지만 server side 기능을 하는것이 아니라 client side 로 넘어온다? 로 이해를 했는데 ,그렇다면 굳이 저 위의 지시어 use client 를 사용해야할때가 있을까 ?? 생각을 했습니다 ㅎㅎ

강의 내에서 mockData를 id: 3 까지 만들고, useRef 초기값을 3으로 주었는데, 이렇게되면 onCreat가 처음으로 호출됐을 때 최초 생성된 일기가 id를 3으로 가지게되고(후위증감연산자로 그 다음 생성된 일기부터 id가 4로 생성됨), 이미 만들어져있는 3번일기랑 id값이 같아지게 됩니다. 그래서 최조 생성된 일기를 onUpdate해주었을때 수정내용으로 바뀐 최초 생성된 일기, 수정내용으로 바뀐 3번일기 이렇게 똑같은 내용으로 2개가 생기는 상황이 발생합니다. 따라서 useRef 초기값을 4로 주는게 맞지않나 문의드립니다.

tailwind.config.ts 를 변경하려고 하는데 변경이 되지 않습니다.다른 파일들도 수정하려고 보니까 수정이 안되네요ㅠㅠㅠ이렇게해서 생성을 진행했구요.잘은 모르겠지만 npx create-next-app . 로 설치를 진행했는데 권한 에러가 발생하더라구요npm error code EACCES그래서 sudo 를 앞에 붙여서 진행을 했습니다. 혹시 이 문제일까요 ?

안녕하세요 저번 개츠비 강의 너무 맘에 들어서 후속 강의도 거의 나오자마자 지른 수강생입니다!열심히 따라하면서 강의 진행하던 와중에 "게시글 렌더링 커스터마이징하기(2)" 강의 안 코드 블럭 메타데이터 파싱 기능 개발하기 파트에서 CODE_METADATA_REGEX 부분 정규표현식에 대해서 질문드립니다본문에 const CODE_METADATA_REGEX = /^language::(\\w+)/이런 식으로 정규표현식이 작성되어서 따라 진행했는데 자꾸 정규표현식을 인식 못하는거 같아/^language::(\w+)/위와 같이 문법을 고쳐 사용했는데 오타인가 여쭤봅니다

리액트랑 부트 연결하는 방법 axios까지 코드입력했는데 cmd라던지 연동하는 방법은 안알려주시나요?

상위로부터 값을 가져올때 name="velopert"라고하다가number={5} 이렇게 중괄호는 뭔가요? 갑자기 설명도 없이 ㅠㅠ

codepen.io에서 Add External Scripts/Pens 에서 react로 검색해서 https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/cjs/react.production.min.js이거랑 https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/cjs/react-dom.production.min.js이렇게 두가지가 나오고 save and close도 아니고 close만 있구요 close만 해도 상태는 유 지되는건지 모르겠네요 ..그래서인지 몰라도 코드넣고 실행해보면 에러납니다.class CodeLab extends React.Component { render() { return ( <div>CodeLab</div> ); }}class App extends React.Component { render() { return ( <CodeLab /> ); }}ReactDOM.render(<App />, document.getElementById('root'))Uncaught ReferenceError: React is not defined 에러나고 그래서 강좌에 없는import React from 'react' 넣고 나면 Uncaught ReferenceError: require is not defined 이 에러가 납니다. 도무지 진행이 안되네요 ㅠUncaught ReferenceError: React is not definedUncaught ReferenceError: React is not defined

const response = await axios.get(`http://localhost:4000/products/${id}`);로 호출할때 클라이언트에서는 별다른 에러 메시지가 나오지 않으나npm run dev로 실행한 서버 터미널에서는 GET /products/backendManager.js.map 500 in 9ms ⨯ AxiosError: Request failed with status code 404 GET /products/react_devtools_backend_compact.js.map 500 in 16ms이라는 에러가 나옵니다.이 파일들을 호출하는 이유가 무엇인가요..?

안녕하세요. 몇가지 의문이 있어 질문 드립니다.올바른 테스트 작성 규칙에서 내부 구현에 대한 테스트, 단순한 UI렌더링 관련 테스트는 하지 않는것이 좋다고 하셨는데,className prop이 css class에 적용되는지, placeholder설정, focus 시 border 스타일이 변경되는지 테스트하는건 단순히 UI와 관련된 테스트가 아닌가요?getByPlaceholder API는 만약 구현코드에서 placeholder 내용이 달라지면 테스트 코드도 모두 수정해야 하는데 종속성이 있다고 볼 수 있지 않나요?아직 테스트가 익숙하지 않아 그런지 이런 부분이 많이 헷갈립니다ㅜㅜ

혹시 초급버전의 유료버전이 있던에 이 강좌랑 무슨 차이가 있나요?배우는 범위가 다른건지요??

안녕하세요 . drawer.tsx에 있는 DrawerClose를 사용하면 useState를 통해 상태관리를 안해줘도 되지않나 싶어서 여쭤봅니다.Header쪽에 <DrawerClose><Logo/></DrawerClose>이렇게 감싸주면 drawer가 열렸을때 x버튼을 누르면 똑같이 동작하더라고요.혹시 useState를 사용하신 이유가 있을까요?

문제)의존성 설치 후 npm run dev를 기동하면$ npm run dev> test-example-shopping-mall@0.0.0 dev> concurrently --kill-others 'npm run dev:server' 'npm run dev:ui'[0] ''npm'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α׷�, �Ǵ�[0] ��ġ ������ �ƴմϴ�.[1] 'run'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α׷�, �Ǵ�[1] ��ġ ������ �ƴմϴ�.[2] ���� �̸�, ���͸� �̸� �Ǵ� ���� ���̺� ������ �߸��Ǿ����ϴ�.[3] ''npm'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α׷�, �Ǵ�[3] ��ġ ������ �ƴմϴ�.[4] 'run'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α׷�, �Ǵ�[4] ��ġ ������ �ƴմϴ�.[4] run exited with code 1--> Sending SIGTERM to other processes..[3] 'npm exited with code 1--> Sending SIGTERM to other processes..--> Sending SIGTERM to other processes..[1] run exited with code 1--> Sending SIGTERM to other processes..[0] 'npm exited with code 1--> Sending SIGTERM to other processes..[5] ���� �̸�, ���͸� �̸� �Ǵ� ���� ���̺� ������ �߸��Ǿ����ϴ�.[5] dev:ui' exited with code 1이런 콘솔이 찍히며 테스트 서버가 실행되지 않습니다.인코딩이 깨져서 뭐가 문젠지 추적을 못하겠어요ㅠㅠnode 버전은 강의와 동일하게 19.9.0으로 맞춰두었습니다.+) 인코딩이 깨지는 문제는 vscode터미널 말고 다른 커맨드창을 이용하니 해결 되었습니다.> test-example-shopping-mall@0.0.0 dev > concurrently --kill-others 'npm run dev:server' 'npm run dev:ui' [0] ''npm' is not recognized as an internal or external command, [0] operable program or batch file. [1] 'run' is not recognized as an internal or external command, [1] operable program or batch file. [2] The filename, directory name, or volume label syntax is incorrect. [3] ''npm' is not recognized as an internal or external command, [3] operable program or batch file. [4] 'run' is not recognized as an internal or external command, [4] operable program or batch file. [4] run exited with code 1 --> Sending SIGTERM to other processes.. [3] 'npm exited with code 1 --> Sending SIGTERM to other processes.. [2] dev:server' exited with code 1 --> Sending SIGTERM to other processes.. [1] run exited with code 1 --> Sending SIGTERM to other processes.. [0] 'npm exited with code 1 --> Sending SIGTERM to other processes.. [5] The filename, directory name, or volume label syntax is incorrect. [5] dev:ui' exited with code 1그런데 여전히 실행이 안됩니다ㅜㅜnpm을 못찾는거 같은데 환경변수에 따로 등록을 해야하나요? npm -v하면 버전은 잘 나오는데 원인을 모르겠습니다...현재 환경변수와 버전정보 추가합니다.+) package.json스크립트에서 작은 따옴표를 큰 따옴표로 수정해서 최종적으로 해결되었습니다... 허무하네용ㅋㅋㅋ ㅠ

Aborting installation.Unexpected error. Please report it as a bug: Error: EACCES: permission denied, open '/Users/jeonginn/Library/Preferences/create-next-app-nodejs/config.json.tmp-982595282012e022'    at openSync (node:fs:581:18)    at attempt (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:43165)    at Object.writeFileSync (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:38664)    at Conf._write (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:74912)    at set store [as store] (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:73358)    at Conf.set (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:8:71962)    at run (/Users/jeonginn/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:74:51291)    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {  errno: -13,  code: 'EACCES',  syscall: 'open',  path: '/Users/jeonginn/Library/Preferences/create-next-app-nodejs/config.json.tmp-982595282012e022'}설치할 때 터미널에서 이런 메세지가 나오네요 ㅠㅠ 권한 문제인거 같아서 구글링 계속 해보면서 해봤는데 안되서 글 남깁니다 ㅠㅠ 

안녕하세요 재남님 강의 너무 잘듣고 있습니다이번 강의 듣고 생각이 드는게 저는 지금까지 모달을 만들때 각각의 모달을 완성본으로 만들고 모달을 부르는 트리거버튼이나 그,런것에 상태를 주고 상태의 변경에따라 그 아래에 그리는 방식으로 모달을 구현했습니다이번강의도 보면 비슷하긴한데 모달을 만드는곳에서 모든것을 만드는것이 아니라 모달이라는(컴파운드 패턴..? 사실 이건 처음봐서 혼란스럽네요...ㅎㅎ)컴포넌트에서 기본 적인 css와 칠드런등을 만들어놓고 모달에서는 이것들을 가져와서 완성본 모달을 만드는것으로 이해를 했습니다 제가 궁금한것은실무에서는 보통 이렇게 만드는지 궁금합니다이렇게 만드는것의 장점이 있을까요?(찾아보니 재사용성이 좋다고 하는데 이부분이 크게 와닿지가 않네요..)

https://github.com/ZeroCho/next-app-router-z/blob/master/lecture/src/app/(afterLogin)/layout.tsx제로초님 강의를 다 듣고 코드를 살펴보던 중 의문이 있어 질문 드립니다.해당 코드를 보면lecture/src/app/(afterLogin)/layout.tsx파일에서거의 최고 부모컴포넌트인 <RQProvider>가 "use client"를 사용하여 클라이언트 컴포넌트가 되는것으로 알고있는데이렇게 한다면 그 하위 컴포넌트들은 전부 클라이언트 컴포넌트가되는게 아닌가요?어떻게 서버컴포넌트를 사용할 수 있는건지 궁금합니다.

안녕하세요 선생님완강하고 채팅을 구현해보려고 합니다.그런데 강의와 깃헙을 보면soket으로 보내는 내용,쿼리에 데이터 추가하는 내용은 있는데소켓으로 보낸 내용이 백엔드에 저장되는 부분이 보이질 않더라구요,클라이언트에서 소켓으로 데이터를 보내면 그걸 받고 백엔드에서 저장해주는 로직이 따로 있는걸까요?

npx create-react-app mall 명령어 입력시 해당 오류가 발생합니다. log의 내용은 다음과 같습니다.0 verbose cli C:\Program Files\nodejs\node.exe C:\Users\USER\AppData\Roaming\nvm\v10.16.3\node_modules\npm\bin\npm-cli.js1 info using npm@10.7.02 info using node@v20.15.03 silly config:load:file:C:\Users\USER\AppData\Roaming\nvm\v10.16.3\node_modules\npm\npmrc4 silly config:load:file:C:\Users\USER\reactAPI_workSpace\.npmrc5 silly config:load:file:C:\Users\USER\.npmrc6 silly config:load:file:C:\Users\USER\AppData\Roaming\npm\etc\npmrc7 verbose title npm exec create-react-app mall8 verbose argv "exec" "--" "create-react-app" "mall"9 verbose logfile logs-max:10 dir:C:\Users\USER\AppData\Local\npm-cache\_logs\2024-07-01T07_49_17_781Z-10 verbose logfile C:\Users\USER\AppData\Local\npm-cache\_logs\2024-07-01T07_49_17_781Z-debug-0.log11 verbose stack TypeError: LRUCache is not a constructor11 verbose stack at Object.<anonymous> (C:\Users\USER\AppData\Roaming\nvm\v10.16.3\node_modules\npm\node_modules\cacache\lib\memoization.js:5:18)11 verbose stack at Module._compile (node:internal/modules/cjs/loader:1358:14)11 verbose stack at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)11 verbose stack at Module.load (node:internal/modules/cjs/loader:1208:32)11 verbose stack at Module._load (node:internal/modules/cjs/loader:1024:12)11 verbose stack at Module.require (node:internal/modules/cjs/loader:1233:19)11 verbose stack at require (node:internal/modules/helpers:179:18)11 verbose stack at Object.<anonymous> (C:\Users\USER\AppData\Roaming\nvm\v10.16.3\node_modules\npm\node_modules\cacache\lib\get.js:8:14)11 verbose stack at Module._compile (node:internal/modules/cjs/loader:1358:14)11 verbose stack at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)12 verbose cwd C:\Users\USER\reactAPI_workSpace13 verbose Windows_NT 10.0.1904514 verbose node v20.15.015 verbose npm v10.7.016 error LRUCache is not a constructor17 verbose exit 118 verbose code 119 error A complete log of this run can be found in: C:\Users\USER\AppData\Local\npm-cache\_logs\2024-07-01T07_49_17_781Z-debug-0.lognode 와 npm 버전은 이렇게 깔려있습니다. 재설치 해도 여전히 오류가 발생합니다 ㅜㅠ 어떻게 해결해야 할까요?