반응형
문제 발생 시점
리액트 초반 수업 중 App.js 내용을 변경 후 저장 해도 웹서버에서 UI가 변경되지 않는 문제가 발생했다.
문제 발생 경위
에러메세지가 발생하게 된 경위를 기록하였다.
1) 서비스를 위한 배포본 어플리케이션을 만들기 위해 build 폴더를 생성하였다.
실행 과정 : 비주얼 스튜디오 - 리액트 앱 - 터미널에 명령어 입력 -빌드 명령 실행
- npm run build
2) 빌드 폴더에 있는 index.html을 서비스하는 웹서버를 실행시키는 명령어를 입력하였다.
- npx serve -s build
3) 결과물인 'localhost:3000' 를 ctrl + 우클릭하여 웹서버에 접속하였다.
4) 컴포넌트를 생성하고 실습하기 위해서 REACT-APP의 src-App.js의 내용 수정 및 저장하였다.
5) 새로고침하여도 수정한 내용이 전혀 반영되지 않고, 초기 화면만 표시되고있다.
문제 해결 방법
문제 해결 방법에는 여러가지가 있지만 필자는 첫 번째 방법으로 간단히 해결 하였다.
1. 서버 재시작
터미널의 개발 서버를 중지하고 다시 시작한다.
1) 비주얼 스튜디오를 종료 후 다시 실행시킨다.
2) 터미널에 시작 명령어를 입력한다.
- npm start
2. 캐시 문제
브라우저 캐시로 인해 변경 사항이 반영되지 않을 수 있다. 브라우저의 캐시를 지우거나, 개발자 도구(F12)에서 "캐시 비활성화" 옵션을 사용해 본다.
반응형
