Docker + React 실시간 반영 환경 설정법 (윈도우 WSL2 완벽 대응)

인트로: React 개발, 조금 더 편하고 빠르게 하고 싶다면

React 앱 만들 때, 코드 하나 고치고 브라우저에서 바로바로 확인하고 싶은 거… 저만 그런 거 아니죠? 매번 build하고 기다리는 거, 진짜 지치잖아요. 특히 Docker 쓰는 환경이면 더더욱.

제가 해보니까, Docker에서도 코드를 고치자마자 바로 반영되게 할 수 있더라고요. 진짜 신세계였어요. 오늘은 그 방법을 진짜 사람 말처럼, 어렵지 않게 알려드릴게요. 중간중간 저만의 삽질도 얘기할게요.😅

 

---

 

왜 실시간 반영이 그렇게 중요한가요?

 

왜 실시간 반영이 그렇게 중요한가요?

솔직히 말하면, React 작업할 때 파일 저장하고 바로 결과 안 보이면 답답해서 짜증 나요. 리듬이 딱 끊겨버리는 느낌? 저는 특히 디자인 만질 때 저장 → 리로드 → 다시 저장... 이 루틴에 엄청 민감한 편이라서요.

Docker에 live-reload 붙이면 진짜 인생 바뀝니다:

• 수정하면 곧바로 브라우저에 반영!
• 컨테이너 다시 만들 필요 없어요
• 딴짓할 필요 없이 작업에만 몰입 가능!

 

---

 

Step 1: 실행 중인 frontend 컨테이너 끄기

일단 기존에 돌고 있던 frontend 컨테이너는 꺼야겠죠. 저는 그냥 터미널에서 Control + C 눌렀어요.

이게 가능한 이유는 예전에 실행할 때 -it 붙였기 때문이죠. 인터랙티브 모드로 돌리면 이렇게 편하게 제어 가능해요.

이렇게 하면 frontend는 사라지고, backend랑 MongoDB 컨테이너만 남아요. 뭔가 깔끔해진 느낌!

 

---

 

Step 2: 코드가 실시간으로 반영되게 컨테이너 다시 실행하기

저는 처음엔 src 폴더 전체 복사해서 이미지 만들었는데... 수정할 때마다 다시 빌드하고, 그것도 느리니까 너무 스트레스였거든요.

그래서 bind mount라는 걸 써봤어요. 간단하게 말하면 로컬 파일을 컨테이너에 실시간 연결하는 거예요.

docker run -v /Users/me/my-app/frontend/src:/app/src my-react-image

 

이렇게 하니까 로컬에서 App.js 고치면 바로 컨테이너 안에서도 반영돼요. 그리고 브라우저에서도 실시간으로 바뀌고요. 완전 감동... 🥹

 

---

 

Step 3: 굳이 nodemon 안 써도 돼요

 

Step 3: 굳이 nodemon 안 써도 돼요

예전에는 nodemon 설치하고 막 설정 바꾸고 했는데, 사실 대부분의 React 프로젝트는 그런 거 필요 없어요.

create-react-app 같은 걸로 만든 프로젝트면 이미 dev server가 알아서 감지하고 리빌드해줘요. 그냥 저장만 하면 됩니다.

저는 테스트로 CourseGoals라는 컴포넌트에:

<h2>Your Goals</h2>

 

딱 한 줄 추가했는데도 바로 반응하더라고요. 괜히 설정 건드리지 마세요. 이미 잘 돼 있어요.

 

---

 

Step 4: Windows에서 WSL2 쓰는 분들 주목!

처음에 저도 여기서 멘붕 왔거든요. 다 했는데 파일 바꿔도 안 바뀌는 거예요. 알고 보니 Windows 파일 시스템 문제더라고요.

Docker가 WSL2에서 Windows 쪽 디렉토리 파일 변경은 잘 감지 못해요.

 

해결책은?

WSL2의 Linux 쪽 디렉토리로 프로젝트를 옮기세요. 예를 들어 /home/yourname/projects/myapp 이런 데서 작업하면 파일 변경 잘 인식돼요.

가이드 보면서 따라하면 어렵지 않아요. 저도 처음엔 겁났는데 생각보다 금방 적응했어요.

 

---

 

Step 5: Docker 빌드 속도, 조금만 신경 쓰면 확 줄어들어요

 

Step 5: Docker 빌드 속도, 조금만 신경 쓰면 확 줄어들어요

처음엔 몰랐는데, Docker가 빌드할 때 내 로컬 node_modules 폴더까지 죄다 복사하는 바람에 시간이 엄청 오래 걸리더라고요.

근데 이건 필요 없잖아요? 컨테이너 안에서 npm install 하면 되는데, 왜 굳이 또 복사하죠? 😅

그래서 .dockerignore에 이렇게 적었어요:

node_modules
.git
Dockerfile

 

그리고 다시 빌드:

docker build -t goals-react .

 

속도 차이 체감 확 돼요. 진짜입니다.

 

---

 

마무리: Docker + React, 이렇게 하면 스트레스 확 줄어요

이제 저는:

• 실시간 코드 반영되니까 작업이 훨씬 빠르고
• Docker 빌드도 쾌적하고
• Windows 이슈도 해결됐고요

처음엔 어렵고 복잡하게만 느껴졌는데, 해보니까 생각보다 간단하고, 효과는 확실했어요.

여러분도 한번 해보세요. 진짜 개발할 맛 납니다. 브라우저에서 바로 반응하면, 진짜 코딩이 재밌어져요.