개발자
기획자가 html파일로만 리액트를 실행 시키는 방법이 있나요? 기존 html css js의 경우 파일 공유 후 html로만 실행해서 결과를 보여주었습니다. 리액트의 경우 어떻게 해야지 기획자가 html파일로만 실행되는 결과를 볼 수 있을까요?
답변 2
익명
작성자
2024년 03월 29일
빌드 폴더에 있는 index.html을 브라우저로 실행해도 흰색 화면만 나옵니다.
포크코딩
별빛상단 단주 • 2024년 03월 29일
그러면 빌드 파일에 어떤 파일들이 있는지 알려주시면 해결책 드릴 수 있을듯 합니다!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 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 ``` 위 명령을 실행하면 로컬에서 빌드된 리액트 앱을 볼 수 있게 됩니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!