개발자

리액트 빌드 후 index.html 파일로 실행 방법이 있나요?

2024년 03월 29일조회 179

기획자가 html파일로만 리액트를 실행 시키는 방법이 있나요? 기존 html css js의 경우 파일 공유 후 html로만 실행해서 결과를 보여주었습니다. 리액트의 경우 어떻게 해야지 기획자가 html파일로만 실행되는 결과를 볼 수 있을까요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

포크코딩님의 프로필 사진

빌드 파일에 있는 html 파일을 브라우저로 열어보시면 됩니다.

profile picture

익명

작성자

2024년 03월 29일

빌드 폴더에 있는 index.html을 브라우저로 실행해도 흰색 화면만 나옵니다.

포크코딩님의 프로필 사진

포크코딩

별빛상단 단주2024년 03월 29일

그러면 빌드 파일에 어떤 파일들이 있는지 알려주시면 해결책 드릴 수 있을듯 합니다!

남 재민님의 프로필 사진

빌드하시면 됩니다만, 흰색화면이 표시되는 경우에는 소스코드내에 browser routing 같이 url로 페이지이동을 해야할때, 빌드된 html파일을 실행하면 url의 끝부분이 .html이 되기때문에 페이지가 제대로 표시되지 않을 수 있습니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 03월 29일

리액트 앱을 빌드하면 생성되는 'build' 폴더 안에 있는 index.html 파일은 실제로 standalone으로 실행할 수 없습니다. 이것은 React와 같은 현대적인 프론트엔드 프레임워크의 특성 때문입니다. React 앱은 html, css, 자바스크립트 뿐만 아니라 여러가지 의존성과 모듈들을 가지고 있기 때문에 단독으로 실행되기 어렵습니다. 따라서, 웹 서버를 통해 해당 파일들을 호스팅해야 합니다. 이는 로컬에서 간단한 http 서버를 구동하거나 AWS S3, Firebase Hosting 등과 같은 클라우드 베이스의 정적 사이트 호스팅 서비스를 사용하여 이루어집니다. 개발자가 'npm run build' 명령어를 입력하면 React 앱이 빌드되고, 이 결과물은 보통 'build' 디렉토리에 저장됩니다. 이 'build' 디렉토리를 웹 서버에 배포하면 기획자도 URL을 통해 접속하여 결과를 볼 수 있습니다. 따라서 기획자에게 직접 HTML 파일을 주는 대신, 배포된 URL을 제공하는 것이 일반적입니다. 만약 로컬에서 확인하고 싶다면, 간단한 http 서버를 구동하는 방법도 있습니다. Node.js를 사용할 수 있는 환경이라면 `http-server`와 같은 패키지를 이용해 localhost에서 간단히 웹 서버를 구동할 수 있습니다. ```shell # http-server 패키지 설치 npm install -g http-server # build 디렉토리로 이동 cd build # 서버 시작 http-server ``` 위 명령을 실행하면 로컬에서 빌드된 리액트 앱을 볼 수 있게 됩니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!