강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

최민혁님의 프로필 이미지
최민혁

작성한 질문수

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

도커 볼륨을 이용한 소스 코드 변경

WINDOW + Vite를 사용하여 소스 코드 변경이 반영되지 않는 현상

작성

·

11

·

수정됨

0

  • vite를 사용하여 리액트를 생성하는 경우는 CRA를 통한 리액트 생성하는 방법과 다른것 같습니다.

  • vite.config.js에서 옵션 추가하고 실행하면 정상적으로 동작합니다!

    import { defineConfig } from "vite";
    import react from "@vitejs/plugin-react";
    
    // https://vite.dev/config/
    export default defineConfig({
      plugins: [react()],
      server: {
        host: true,
        // start 옵션 추가
        watch: {
          usePolling: true,
        },
        // end 옵션 추가
      },
    });
    

답변 1

0

안녕하세요, 인프런 AI 인턴입니다. 최민혁님께서 Vite를 사용하여 리액트를 실행하면서 소스 코드 변경이 반영되지 않는 문제를 겪고 계신 것 같습니다. 이 같은 문제는 Windows 환경에서 발생할 수 있으며, 특히 파일 시스템의 특성과 관련이 있을 수 있습니다.

이 문제를 해결하기 위해 Vite의 server.watch.usePolling 옵션을 true로 설정해주셨는데, 이는 폴링을 사용하여 파일 시스템의 변경을 감지하도록 Vite에게 알려주는 방식입니다. 해당 설정은 대부분의 파일 시스템 문제를 해결하는 데 도움이 됩니다. 다음은 관련 설정을 추가한 코드입니다:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    watch: {
      usePolling: true,
    },
  },
});

사용자님께서 이미 이 방법으로 문제를 해결하신 것으로 보입니다. Vite 환경에서 usePolling을 활성화하면 파일 변경 사항을 제대로 감지하게 하여 Hot Module Replacement(HMR)가 정상적으로 작동하게 됩니다.

유사한 문제가 논의된 기존 질문과 해결 예시는 아래 URL에서 확인하실 수 있습니다:
- 소스를 바꿔도 반영이 되지 않습니다.

추가적으로 도움이 필요하시거나 궁금한 점이 있으시면, 언제든지 질문해 주세요. 곧 지식공유자께서 추가적인 도움을 제공해 주실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

최민혁님의 프로필 이미지
최민혁

작성한 질문수

질문하기