컨테이너 생성하기

현재 우리 앱은 콘텐츠를 렌더링하는 단일 컴포넌트로 구성되어 있습니다. 노트 작성 앱을 만들기 위해, 노트를 로드/수정/생성할 수 있는 여러 페이지를 만들어야 합니다. 이를 위해 앱의 외부 “크롬”(또는 UI)을 컴포넌트 안에 넣고, 모든 최상위 컴포넌트를 그 안에서 렌더링할 것입니다. 우리는 다양한 페이지를 나타내는 최상위 컴포넌트를 컨테이너라고 부릅니다.

네비게이션 바 추가하기

애플리케이션의 외부 크롬을 만들기 위해 먼저 네비게이션 바를 추가해 보겠습니다. Navbar React-Bootstrap 컴포넌트를 사용할 것입니다.

src/App.tsx 파일 내부의 코드를 지우고 다음 코드로 대체하세요.

import Navbar from "react-bootstrap/Navbar";
import "./App.css";

function App() {
  return (
    <div className="App container py-3">
      <Navbar collapseOnSelect bg="light" expand="md" className="mb-3 px-3">
        <Navbar.Brand className="fw-bold text-muted">Scratch</Navbar.Brand>
        <Navbar.Toggle />
      </Navbar>
    </div>
  );
}

export default App;

여기서 몇 가지 작업을 수행하고 있습니다:

1. div.container를 사용해 Bootstrap으로 고정 너비 컨테이너를 생성합니다.
2. Bootstrap 간격 유틸리티 클래스 (예: mb-# 및 py-#)를 사용해 하단 마진(mb)과 수직 패딩(py)을 추가합니다. 이는 비례적인 간격 단위를 사용해 UI에 조화로운 느낌을 줍니다.

템플릿에 포함된 스타일을 지워보겠습니다.

src/App.css 파일 내부의 모든 코드를 지우고 다음 코드로 대체하세요:

.App {
}

현재는 추가할 스타일이 없지만, 나중에 추가할 수 있도록 이 파일을 남겨둡니다.

또한 사용하지 않는 템플릿 파일을 제거해 보겠습니다.

packages/frontend/ 디렉토리에서 다음 명령어를 실행하세요.

$ rm -r public/vite.svg src/assets/

홈 컨테이너 추가하기

이제 애플리케이션의 외부 구조를 준비했으니, 앱의 홈페이지를 위한 컨테이너를 추가해 보겠습니다. 이 컨테이너는 / 라우트에 응답할 것입니다.

packages/frontend/ 디렉토리에서 다음 명령어를 실행하여 src/containers/ 디렉토리를 생성하세요.

$ mkdir src/containers/

여기에는 모든 최상위 컴포넌트를 저장할 것입니다. 이 컴포넌트들은 라우트에 응답하고 API에 요청을 보낼 것입니다. 이 튜토리얼에서는 이들을 _컨테이너_라고 부를 것입니다.

새로운 컨테이너를 생성하고 src/containers/Home.tsx에 다음 내용을 추가하세요.

import "./Home.css";

export default function Home() {
  return (
    <div className="Home">
      <div className="lander">
        <h1>Scratch</h1>
        <p className="text-muted">간단한 노트 앱</p>
      </div>
    </div>
  );
}

이 코드는 사용자가 현재 로그인하지 않은 상태일 때 홈페이지를 렌더링합니다.

이제 이 페이지를 스타일링하기 위해 몇 줄을 추가해 보겠습니다.

src/containers/Home.css에 다음 내용을 추가하세요.

.Home .lander {
  padding: 80px 0;
  text-align: center;
}

.Home .lander h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
}

라우트 설정하기

이제 컨테이너가 / 라우트에 응답할 수 있도록 라우트를 설정해 보겠습니다.

src/Routes.tsx 파일을 생성하고 다음 내용을 추가합니다.

import { Route, Routes } from "react-router-dom";
import Home from "./containers/Home.tsx";

export default function Links() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  );
}

이 컴포넌트는 React-Router의 Routes 컴포넌트를 사용하여 정의된 라우트 중 첫 번째로 일치하는 라우트를 렌더링합니다. 현재는 단일 라우트만 존재하며, / 경로를 찾아 일치할 경우 Home 컴포넌트를 렌더링합니다. 또한 / 라우트와 정확히 일치하도록 exact 프로퍼티를 사용합니다. 이는 / 경로가 /로 시작하는 모든 라우트와도 일치할 수 있기 때문입니다.

라우트 렌더링하기

이제 라우트를 App 컴포넌트에 렌더링해 보겠습니다.

src/App.tsx 파일의 헤더에 다음 코드를 추가하세요.

import Routes from "./Routes.tsx";

그리고 src/App.tsx 파일 내부의 Navbar 컴포넌트 아래에 다음 코드를 추가하세요.

<Routes />

이제 src/App.tsx 파일의 App 함수 컴포넌트는 다음과 같이 보일 것입니다.

function App() {
  return (
    <div className="App container py-3">
      <Navbar collapseOnSelect bg="light" expand="md" className="mb-3 px-3">
        <Navbar.Brand className="fw-bold text-muted">Scratch</Navbar.Brand>
        <Navbar.Toggle />
      </Navbar>
      <Routes />
    </div>
  );
}

이렇게 하면 앱에서 다른 라우트로 이동할 때, 네비게이션 바 아래 부분이 해당 라우트에 맞게 변경됩니다.

마지막으로 브라우저로 이동하면 앱의 새로운 홈페이지가 표시될 것입니다.

다음으로 네비게이션 바에 로그인과 회원가입 링크를 추가해 보겠습니다.