[NWD Frontend boilerplate] Create public and src sub files with 'create-react-app'

2021. 5. 12. 23:28

꿈가게: To Do List - iOS

꿈가게: To Do List - Android

출처 : github.com/NetworkDefines/nwd-front-boilerplate

public 폴더 추가하기

create-react-app 을 사용하여 프로젝트를 생성하면 public 폴더 안에 자동적으로 favicon.ico (아이콘 파일) 과 index.html (홈 화면) 파일이 생성됩니다. 이 파일을 그대로 복사하여 사용합니다.

favicon.ico

리액트 기본 아이콘 파일입니다. 각각 프로젝트에 따라 로코 파일을 ico 파일로 만들어서 사용합니다. 이미지를 ico 파일로 변환시켜주는 무료 사이트들이 많이 있기 때문에, 로고 이미지를 제작한 후 해당 웹사이트에서 ico 파일을 제작할 수 있습니다.

index.html 파일

리액트 프로젝트의 도입부가 되는 HTML 파일입니다. 리액트는 SPA 프로젝트에 주로 사용하기 때문에, 다음과 같이 하나의 페이지 내에서 동작이 이루어지게 됩니다. id 값이 root 인 div 태그 안에서 모든 페이지가 렌더링 됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.tsx / App.tsx 파일 추가하기

마찬가지로 create-react-app 을 사용하면 생성되는 index.tsx 파일과 App.tsx 파일을 추가합니다.

App.tsx

모든 페이지를 보여주는 루트 컴포넌트 입니다.

import React from 'react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <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;

index.tsx

리액트 프로젝트의 도입부이며, index.html 에서 정의한 root 라는 id 속성값을 가지고 있는 div 태그 안에 App 컴포넌트를 렌더링 해줍니다.

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

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

저작자표시

'스터디 > 네트워크디파인즈' 카테고리의 다른 글

[NWD Frontend boilerplate] Refactor public/index.html (0)	2021.05.12
[NWD Frontend boilerplate] Install react, react-dom (0)	2021.05.12
[NWD Frontend boilerplate] Create package.json with 'yarn init -y' (0)	2021.04.22
[NWD Frontend boilerplate] Create .gitignore (0)	2021.04.21

블로그

프로필

카테고리

포스트