• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

npm start 후 빈화면

23.03.09 16:54 작성 조회수 1.42k

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

 

npm start 후 작성한 코드가 실행되지 않고 빈화면 띄는데 어떻게 해야할까요?

구글링 해본 결과 package.json 파일에 "homepage="." 추가하면된다고하는데,,,

(제가 참고한 블로그입니다.

리액트 빌드 결과 빈화면만 보일때 - 상대경로 설정하기 (tistory.com)

)

일단 index.html 파일에 있는 내용 첨부해드립니다.. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

 

 

course-thumbnail

처음 만난 리액트(React)

Hooks의 개념과 useState, useEffect

강의실 바로가기

답변 1

답변을 작성해보세요.

0

Inje Lee (소플)님의 프로필

Inje Lee (소플)

지식공유자

2023.03.09

안녕하세요, 소플입니다.

혹시 npm start를 하신 이후에 브라우저에서 localhost:3000으로 접속하신게 맞을까요?

index.html 파일을 직접 여시면 안되고, localhost:3000으로 접속하셔야 합니다.

한 번 확인해보시기 바랍니다!

감사합니다.

이 글과 비슷한 Q&A