[React] 기초 App.tsx > npm start

원래 처음 리액트 다운로드 받으면

App.tsx 파일에 (타임스크립트버전) 이렇게 뜹니다.

 

App.tsx

import React from 'react';
import './App.css'; // 필요하면 유지, 불필요하면 삭제 가능
import Board from './components/Board'; // Board 컴포넌트를 임포트

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My Board!</h1>
      </header>
      <main>
        <Board /> {/* Board 컴포넌트를 사용하여 게시판 표시 */}
      </main>
    </div>
  );
}

export default App;

 

 

이랬던 코드를 이제 my-board를 사용할 수 있도록 변경해야합니다.

 

import React from 'react';
import './App.css'; // 필요하면 유지, 불필요하면 삭제 가능
import Board from './components/Board'; // Board 컴포넌트를 임포트

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My Board!</h1>
      </header>
      <main>
        <Board /> {/* Board 컴포넌트를 사용하여 게시판 표시 */}
      </main>
    </div>
  );
}

export default App;

 

 

 

• Board 컴포넌트를 임포트해서 <main> 요소 안에 포함시켰습니다.
• App-header는 필요에 따라 수정할 수 있습니다. 예를 들어, 환영 메시지 등을 넣을 수 있습니다.
• main 태그는 주로 본문 콘텐츠를 감싸는 데 사용합니다.

이제 npm start 명령어를 사용하여 애플리케이션을 실행하면, Board 컴포넌트가 메인 화면에 표시될 것입니다.

 

 

npm start 명령어는 VS Code의 터미널(배쉬, PowerShell, CMD 등)에서 실행할 수 있습니다. VS Code에서 명령어를 실행하는 방법은 다음과 같습니다:

VS Code에서 npm start 실행 방법

1. VS Code에서 터미널 열기
   • 단축키: Ctrl + `` (Backtick, 물결표 바로 아래) (Windows/Linux) 또는 Cmd + `` (Mac)
   • 상단 메뉴에서 Terminal → New Terminal 선택
2. 터미널에서 프로젝트 디렉토리로 이동
   • npm start 명령어는 package.json 파일이 있는 루트 디렉토리에서 실행해야 합니다.

 

패키지 제이슨이 있는 루트 폴더로 이동을 하여서 npm start 를 쳐보겠습니다.

 

ls

ls를 딱 쳐보면 현제 경로에 package json이 있는지를 봅니다!!!

 

있으면 여기구나 하고 npm start 하시면 되죠

 

npm start 하자마자 저렇게 창이 딱 떠서... 정말 신기했습니다.