-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
파일 저장? 관련 질문이 있습니다.
22.10.07 23:44 작성 조회수 149
1
안녕하세요 기효님!저는 백엔드 개발자인데 혼자 만들어보고 싶은 사이드 프로젝트가 있어서 기효님 강의를 듣고 대부분의 프론트 기능을 구현했습니다!! 강의 너무 알차고 유익했습니다.
한가지 질문이 있습니다.
어느 시점부터 새로 만든 파일들이 npm run serve를 통해서 작동을 하지 않습니다.
예를 들어 오늘 SnackBar 컴포넌트가 필요해 작성했고, 연동된 git 에도 푸쉬해서 올렸습니다. 하지만 npm run serve 를 통해 서버를 띄워서 작동을 시키면 snackBar컴포넌트를 포함한 최근에 추가한 파일들이 정상작동이 안 됩니다.
정상적인 작동이 되는 컴포넌트와 파일들은 터미널에서 cmd+s 를 눌러서 저장을 하면 터미널이 새로고침 되듯이 변경사항을 저장해 반영됩니다. 아래 첫 사진에서 cmd+s 를 누르면 터미널이 새로고침 되듯이 다시 run 하며 두번째 사진 화면으로 가집니다.
하지만 정상적인 작동이 되지 않는 컴포넌트들은 cmd+s 를 눌러도 전혀 반응이 없습니다. 즉, 첫번째 사진화면에서 터미널은 아무런 반응이 없습니다.
혹시 어떤 이유일지 기효님은 아실까요 ?? 이게 설정문제인지 뭔지 감도 잘 안옵니다 ㅠㅠ
답변을 작성해보세요.
1
코딩천국
질문자2022.10.12
안녕하세요. 기효님!
해당 문제가 해결이 되어서 과정을 남겨봅니다.
먼저 로컬에서는 다른 작업중인 플젝을 8080, 8081 포트를 줘서 구분을 위해서 8083으로 두었습니다 :)
문제의 원인은 작성한 컴포넌트를 다른 컴포넌트나 다른 파일에서 호출? 을 하지 않아서 발생한 문제였습니다.
제가 작성한 SnackBar 컴포넌트를 App.vue에서 불러주니 해결이 됐습니다.
<v-app id="app">
<snack-bar></snack-bar>
이후엔 npm run serve 를 통해 로컬에서 스낵바가 작동함을 확인했습니다.
마찬가지로 store를 모듈별로 나눈것도 작동하지 않고 있었는데요. 똑같이 다른 곳에서 호출해주니 작동을 하네요.
생각해보니 파일들이 다른 파일에서 import 해주지 않을땐 동작하지 않는건 당연한데, 파일들이 cmd+s 를 통한 터미널에서 새로고침도 안되니까 그 부분에 당황했던것 같습니다. 프론트를 잘 몰라서, vscode 에러 인가 생각도 들더라구요 ㅎㅎ
답변 감사합니다. 좋은 하루 보내세요 :)
0
장기효(캡틴판교)
지식공유자2022.10.09
안녕하세요, 일단 로컬 서버는 1개만 실행 시켜주셔야 할 것 같아요. 코드가 변경되었을 때 브라우저 화면을 새로고침 해주는 건 웹팩의 HMR 기능입니다. 자세한 내용은 아래 문서 참고해 보시구요.
https://joshua1988.github.io/webpack-guide/devtools/hot-module-replacement.html
HMR이 정상적으로 동작하지 않는 이유는 엠씨케이님 로컬 OS 환경 때문에 그럴 확률이 높습니다. 이건 증상이 너무 다양해서 도움을 드리기가 어려울 것 같아요.
답변 2