인프런 커뮤니티 질문&답변

 안녕하세요 강사님. chapter03을 할때도 있던 문제와 더불어, chapter04를 진행할때도 문제가 생겨 질문드립니다.
제가 궁금한 내용은

1. port 3000번이 이미 사용중이라는 메세지가 뜨는이유(초반에 create ~~명령어를 사용해 my-app 폴더를 만들어 cd my-app , npm start를 쓸땐 port 3000번에 강의영상과 같은 화면이 잘 나왔습니다.) 이것 때문에 실행할때마다 포트번호가 3001, 3002, ... 3010 이런식으로 계속 증가합니다

2. chapter3를 실행할땐 나오지 않던 에러페이지가 chapter4를 실행할때 나오는 이유입니다.(2번문제는 해결해서 에러는 확인해서 처리했습니다. 리턴할때 괄호를 붙이고 써서 나온 에러같아서 수정해보니 되더군요)

우선 아래는 Clock.jsx파일입니다.

import React from "react";

function Clock(props){
  return(
    <div>
      <h1>안녕, 리액트!</h1>
      <h2>현재 시간: {new Date().toLocaleDateString()}</h2>
    </div>
  );
}

export default Clock;

그리고 index.js파일입니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Library from './chapter_03/Library';
import Clock from './chapter_04/Clock';

const root = ReactDOM.createRoot(document.getElementById('root'));
setInterval(()=>{
  root.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>
  );
}, 1000)


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

이를 새 터미널을 활용해 실행시켜보면 다음과 같이 뜨는데요,

여기서 y를 눌러 실행을 해보면 아래와 같이 에러가 뜹니다.
에러가 나는 이유와 해결방안이 궁금합니다 감사합니다.