todo 리스트 세팅(typescript)

TODO LIST 만들어보기 React with Typescript (리액트 + 타입스크립트) (1)
☞ 프로젝트 만들기
참고 영상 : https://www.youtube.com/watch?v=ODvirqIC09A

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

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

yarn start or npm start 를 통해 실행해보자

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 (

); }

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>

</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(
,
document.getElementById('root')
);

-가장 백지 상태의 깨끗한 웹페이지를 보일 수 있다.