react devtool이 enable 않됩니다.

Question

노땅 개발자 입니다. 백엔드만 하다가 이번에 프런트 학습 중입니다. 감사합니다. 질문은 말씀하신 대로 React devtools 을 설치했습니다. 그리고 소스는 제로님 깃에서 react18을 zip으로 받아서 압축 풀고 vscode에서 압축 푼 폴더 오픈해서 파일 수정하고 있습니다. 수정하고 나서 파일 실행은 현재 구구단 아래 like-button-jsx.html을 크롬에서 끌어당겨서 실행중 입니다. 그롬 url 보면 file:///C:/Users/CHY/react_project/react-webgame-react18/1.%EA%B5%AC%EA%B5%AC%EB%8B%A8/like-button-jsx.html 이렇게 url 표시됩니다. 강의영상을 보면 제로님 개발툴에는 node-modules 폴더가 있던데 혹시 깃파일 앞축 풀고 1~8 개임폴더별 노드 설치해야 하는것인지요? 그래서 그런 것인지 *.html 파일이 실행은 되는데 react devtool이 enable 되지 않고..."This is a restricted browser page. React devtools cannot access this page." 메시지가 출력됩니다. 동영상은 자세히 보면 제로님 실행 하실 때 url에 localhost ...라고 나오던데 어떻게 실행하면 되는지요?

제로초(조현영) · Answer

네 일단 node_modules 폴더는 package.json이 있는 경로에 전부 생성해주셔야 합니다(npm i 명령어로 생성하세요) html을 로컬호스트로 실행하려면 나중에 webpack-dev-server 들어갈 때 하실 수 있습니다. 그 전에는 vs code의 live server라는 플러그인으로 가능합니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. nanyahoo님, React 개발 도구(React DevTools)가 활성화되지 않는 문제에 대해 구체적으로 설명해 주셔서 감사합니다. 이와 관련하여, HTML 파일을 직접 브라우저로 실행(사용하신 방법처럼 파일 경로를 통해 열기)할 경우, React DevTools가 정상 작동하지 않는 상황을 설명하는 유사한 질문과 답변을 안내드리겠습니다. React devtools 확장프로그램 적용이 안 됩니다. - React Developer Tools가 활성화되지 않는 문제를 다루고 있으며, 개발자 도구의 활성화 문제와 관련된 해결 방안을 제공합니다. 최종적으로는 시스템 재부팅으로 문제가 해결되었다는 답변을 찾을 수 있습니다. React devtools 확장프로그램 적용이 안 됩니다. React dev tool 설치 후 선생님처럼 안뜨시는분들 보세용 - 해당 게시물에서는 React Developer Tools 활성화에 관한 추가적인 설정 방법을 제공합니다. 파일 URL에 대한 액세스 권한이 필요하다는 점을 강조하고 있으며, 이 정보가 nanyahoo님의 경우에도 도움이 될 수 있습니다. React dev tool 설치 후 선생님처럼 안뜨시는분들 보세용 주의해야 할 점은, localhost 를 통해 파일을 실행하는 방법에 대해 관심이 있다고 언급하셨습니다. 이는 개발 서버를 시작하는 것과 관련이 있으며, 예를 들어, Node.js와 함께 웹팩 개발 서버(webpack-dev-server)나 Create React App 등을 사용해서 로컬 개발 서버를 실행할 수 있습니다. 이를 통해 http://localhost:[포트번호] 형식의 URL로 접근할 때 개발 도구가 정상적으로 작동합니다. 구체적으로, 깃허브에서 프로젝트를 클론하거나 압축을 풀었다면, 해당 프로젝트 폴더 내에서 터미널을 열고 다음을 실행해 보세요. 필요한 모듈 설치: npm install 개발 서버 실행: 대부분의 프로젝트에서는 npm start 또는 npm run dev 로 로컬 개발 서버를 시작할 수 있습니다. 적용해보시고, 만약 추가적인 도움이 필요하시면 질문을 남겨주세요. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.