inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

처음 만난 리액트(React)

npm start 후 빈화면

1909

gayoun0417

작성한 질문수 1

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>

 

 

HTML/CSS javascript react

답변 1

0

Inje Lee (소플)

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

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

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

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

감사합니다.

강의가 삭제되었다고 합니다

0

106

1

이거 왜 존재하지 않는다고 뜨는건가요

0

133

1

존재하지 않는 수업이라고 떠요

0

183

1

안드로이드 에뮬레이터 오류

0

100

1

교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.

0

126

1

prevIsConfiromed 질문

1

141

2

chapter14 잘이해가 되지않습니다..

1

135

2

2025년 3월 리액트버전

1

202

2

npm 설치 오류

1

175

1

chapter_07 콘솔로그 질문드려요~!

1

128

2

안녕하세요 미니블로그 실습 질문드립니다.

1

178

3

에러가 떠요

1

219

3

Chapter6 질문 드립니다

1

209

2

실습 코드 있을까요?

1

206

2

상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.

1

233

2

npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다

0

308

3

이름과 코멘트 줄바꿈이 안 됩니다.

0

140

1

버튼이 안 뜹니다

0

303

2

npx create-react-app my-app

1

470

2

jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.

1

376

3

Chapter_05 터미널, 리액트 에러

0

193

2

npx create-react-app my-app 명령어 반응없음

1

432

3

import 코드 에러

1

214

1

백틱

1

121

1