[React] 차근차근 Todo List 만들기 with Typescript- (1) 프로젝트 생성

 

 

TODO LIST 만들어보기 React with Typescript (리액트 + 타입스크립트) (1)

☞  프로젝트 만들기

참고 영상 : https://www.youtube.com/watch?v=ODvirqIC09A

 

프로젝트 만들기 - CRA (create-react-app) 이용

yarn create react-app [프로젝트 명] --typescript

or

npx create-react-app [프로젝트 명] --template typescript

yarn start or npm start 를 하면 아래와 같은 초기 페이지를 볼 수 있다.

 

 

☞ 기본적인 페이지를 없애고 새로운 페이지를 만들어보자

 

rm App.css App.test.tsx index.css logo.svg serviceWorker.ts

하고,

 

☞ App.tsx 파일을 아래 예시와 같이 바꿔주고,

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

↓

import React from 'react';

function App() {
  return (
   <div>Hello World</div>
  );
}

export default App;

☞ index.tsx 파일도 아래 예시와 같이 바꿔주자

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

↓

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
	document.getElementById('root')
);

☞ 자 이제 아래와 같이 가장 백지 상태의 깨끗한 웹페이지를 보일 수 있다.

 

 

참고 : https://create-react-app.dev/docs/adding-typescript/

Create React App · Set up a modern web app by running one command.

궁금하신 것이 있으시면 바로 댓글 달아주세요!!

 

 

~