2024.02.11 TIL

리액트 디버깅 도구(React Developer Tools)

• 이미지가 안보이거나 출력이 안되는 등 에러가 발생했을 때, 원인을 찾기 위해서는 일일이 확인해봐야한다
• 브라우저로 확인한다면, React 코드는 화면에서 Html 코드로 변환되기 때문에, 어떤 부분이 잘못된건지 확인하기 힘들다
• React Developer Tools을 이용하면 React 코드에서 디버깅해볼 수 있다

기능

• Components Tab에서는 컴포넌트 중 하나를 선택하면 현재 프로퍼티와 상태를 검사하고 편집할 수 있다
• Profiler Tab에서는 성능 정보를 기록할 수 있다

리액트 배포

• 서버에 리액트를 그대로 배포하지 않는다
• 큰 리소스를 그대로 배포하는 것은 적합하지 않기 때문에, 압축하여 용량을 줄일 것이다

명령어

npm run build // build 폴더 생성
npm install -g serve
npx serve -s build