inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

[그랩마켓] React로 웹 개발하기 - 1

메인 페이지가 안 뜹니다..

해결된 질문

808

Terry

작성한 질문수 14

1

강의 그대로 따라했는데도 브라우저에 메인 페이지가 안 뜨는데 어떤 부분을 수정해야 할까요?

+) MainPage 옆에 () 넣었는데도 안 뜨더라구요.. 괄호 넣기 전 캡처본입니다.

express 머신러닝 배워볼래요? nodejs react react-native HTML/CSS javascript tensorflow

답변 11

2

Sunn

App.js 파일에서 두번째 줄  "./main" 부분을  "./main/index.js"로 변경하시면 될 것 같아요!

1

그랩

앗 문제 확인은 npm start라는 명령어를 실행한 후 http://localhost:3000 주소에서 확인하실 수 있습니다!

react는 실제로 짠 코드들을 프로그램 실행 뒤 마지막에 index.html로 합칩니다. 그래서 그냥 클릭한다고 보이지 않습니다ㅠ

1

그랩

Terry님이 보내주신 프로젝트를 실행해봤고 에러를 찾았습니다.

React 컴포넌트에서 최상단에 import React from 'react'를 적어주니 문제가 해결됐습니다👍🏼

확인해보시고 안되시면 댓글 남겨주세요!

[변경사항]

src/main/index.js

import React from 'react'

function MainPage() {
return <p>메인 페이지</p>;
}

export default MainPage;

src/App.js

import React from 'react'
import "./App.css";
import MainPageComponent from "./main/index.js";

function App() {
return <MainPageComponent />;
}

export default App;

1

그랩

음 이부분은 프로젝트 내부에 파일들이 꼬인 것 같습니다.

혹시 github에 소스코드가 있다면 올려주시고, 아니면 압축해서 올려주실 수 있을까요?

(새롭게 create-react-app 으로 프로젝트를 만드시는 것도 좋습니다)

감사합니다.

1

Terry

본문에서 말했듯이 () 소괄호 넣어도 빈 화면만 나옵니다.. 캡처는 괄호 붙이기 전에 찍은겁니다.

1

그랩

다시 확인해보니 첫번째 사진에 function MainPage  { 로 되어있는 부분에 ()가 빠졌네요!!

함수 선언할 때 기본적으로 소괄호()를 붙여주셔야 합니다 (인자를 넣기도 하고요)  

1

Terry

이렇게 뜨는데 어떤 오류일까요....? :(

1

그랩

로그를 확인해봐야 알 것 같습니다!

개발자도구에서 Consone 창을 보시면 왜 컴포넌트가 안보이는 지 확인하실 수 있을 거예요. 
확인해보시고 계속 안되시면 다시 답글남겨주세요.

감사합니다.

0

Terry

세상에 드디어 보입니다...!!! ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 어쩌면 npm start를 몰라서 계속 인덱스에서 확인하느라 아무것도 안 떴을 수도 있네요ㅜㅜ 제가 많이 번거롭게 했는데 친절하게 답변해주셔서 감사합니다...

0

Terry

안녕하세요 !! 알려주신대로 수정했는데도 보이지 않아서 다시 댓글 드립니다...^__ㅠ

public 폴더에 있는 인덱스 html을 눌러 확인하는 것이 맞나요...? 이 html에 '메인 페이지'가 안 뜨네요..ㅠ

0

Terry

grab-market-web을 지우고 그대로 다시 만들어봤는데도 메인 페이지가 뜨지 않네요...ㅠ_ㅜ

메인 페이지가 떠야할 창이 public폴더에 있는 index를 눌렀을 때 나오는 창이 맞나요?

여전히 빈 화면만 뜹니다..ㅜ

제 폴더를 그대로 압축해서 지메일로 보냈습니다 확인 부탁드려요...

[해결]그랩님 답변 주세요.

0

160

2

그랩님의 답변을 기다립니다/102강 전반적인 에러

0

140

2

[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.

0

122

2

[재질문][그랩님 답변 부탁드립니다]101강

0

135

2

[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문

0

96

2

Ngrok 설치 후 forwarding Url 에러

0

129

2

[그랩님께,Ngrok 악성코드 인식 해결방법]질문 드립니다.

0

215

2

Ngrok 설치 후 forwarding Url로 연결 불가

0

133

1

그랩님,[꼭] 답변 부탁드립니다.

0

64

1

[꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다.

0

148

1

6강/7강 수업

0

49

1

그랩님, 상품 상세 페이지 에러와 의문점 질문드립니다.

0

98

2

그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.

0

133

2

[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

88

1

Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?

0

126

2

일반적인 css 꾸미기에서 width와 height의 값?

0

87

2

Windows에서의 업로드 후 홈화면 상품이미지 오류 해결방법

0

191

1

그랩마켓 웹화면 구현하기 -2 질문입니다.

0

118

1

react에 반영이 되지 않습니다.

0

234

1

터미널 npm install -g create-react-app 작성 후 오류

0

418

1

create-react-app my app 실행 시 에러

0

351

2

포스트맨 질문

0

97

1

<꼭 답변 부탁 드립니다>그랩선생님, [컴포넌트 사용하기] 강의에서 질문 있습니다.

0

258

2

그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.

0

472

2