카카오테크캠퍼스 2기 | STEP2 | 7일차(24-07-02) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 7일차(24-07-02) 회고

📝 Git/Github 세팅

프로젝트 디렉토리로 이동

• 작업 환경에서 프로젝트 파일을 관리하는 위치이다. 이 위치는 프로젝트 파일을 한곳에서 접근하고 관리할 수 있는 곳이다.

C:\\Users\\User\\Desktop\\workspace

---

Git 저장소 클론

• 기존에 작업한 레퍼지토리도 있지만(https://github.com/sugoring/react-gift-react-foundation), 새로운 프로젝트에서 실행하는 방법을 익히고 싶어서 해당 레퍼지토리(https://github.com/kakao-tech-campus-2nd-step2/react-gift-ui-flow)를%EB%A5%BC) 클론했다.
• 네트워크 상태가 불안정하여 클론 속도가 느렸다.

git clone https://github.com/kakao-tech-campus-2nd-step2/react-gift-ui-flow.git

---

클론된 디렉토리로 이동

• 프로젝트 디렉토리로 이동하여 개발 작업을 해당 프로젝트 내에서 진행할 수 있도록 준비했다.

cd react-gift-ui-flow

---

업스트림 리모트 추가

• 원래 저장소의 업데이트를 받을 수 있도록 업스트림 리모트를 추가했다.
• URL을 잘못 입력해 오류가 발생했지만, 이를 수정하고 제대로 설정할 수 있었다.

git remote add upstream https://github.com/kakao-tech-campus-2nd-step2/react-gift-ui-flow.git

---

새로운 브랜치 생성

• 메인 브랜치를 feat-heoyunsu로 설정하고, 각 개발 단계를 step1, step2, step3로 구분하여 브랜치를 생성했다.
• 메인 브랜치 전환

git checkout -b feat-heoyunsu

 

• step1 브랜치 전환

git checkout -b step1

 

• step2 브랜치 전환

git checkout feat-heoyunsu
git branch -D step1
git remote add upstream https://github.com/kakao-tech-campus-2nd-step2/react-gift-ui-flow.git
git fetch upstream feat-heoyunsu
git rebase upstream/feat-heoyunsu
git checkout -b step2

 

📝 React Router

라우팅 작업

• 사용자가 입력한 URL을 분석하여 어떤 페이지를 보여줄지 결정하는 작업.
• 특정 URL 경로에 대해 어떤 컴포넌트를 보여줄지 설정하는 작업.
• 사용자가 페이지를 이동할 때 브라우저의 히스토리를 관리하는 작업.

---

설치

• react-router-dom 설치는 간단했다.
• 설치 후 설정하고 활용하려면 공식 문서를 숙지하는 것이 필요했다.

 

📝 create-browser-router 사용

index.tsx - RouterProvider 적용

• index.tsx 파일은 애플리케이션의 진입점이다.
• RouterProvider를 통해 라우터를 제공하여, 전체 애플리케이션에 라우팅 기능이 적용된다.

import '@/styles'; // 스타일 파일

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';

import router from '@/Router'; // 라우터 설정 파일

// 애플리케이션의 루트 엘리먼트를 생성하고 라우터를 적용
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <RouterProvider router={router} /> {/* 라우터를 애플리케이션에 제공 */}
  </React.StrictMode>,
);

---

App.tsx - 최상위 컴포넌트 설정

• App 컴포넌트는 전체 레이아웃을 관리한다.
• Header와 Footer는 모든 페이지에 공통으로 들어가고, Outlet을 통해 URL에 따라 변경되는 부분을 표시한다.

import { Outlet } from 'react-router-dom';

import Footer from '@/components/Footer'; // 푸터 컴포넌트
import Header from '@/components/Header'; // 헤더 컴포넌트

// App 컴포넌트: 공통 레이아웃 설정
const App = () => {
  return (
    <div>
      <Header /> {/* 헤더는 항상 표시 */}
      <Outlet /> {/* URL에 따라 변경되는 부분 */}
      <Footer /> {/* 푸터는 항상 표시 */}
    </div>
  );
};

export default App;

---

Router.tsx 파일 생성

• 라우터 설정을 정의한다.
• 각 경로에 대해 어떤 컴포넌트를 렌더링할지 설정한다.
• 애플리케이션의 라우팅 로직을 한 곳에서 관리할 수 있다.

import { createBrowserRouter } from 'react-router-dom';

import App from '@/App'; // 전체 레이아웃을 담당하는 최상위 컴포넌트
import LoginPage from '@/pages/LoginPage'; // 로그인 페이지
import MainPage from '@/pages/MainPage'; // 메인 페이지
import MyAccountPage from '@/pages/MyAccountPage'; // 내 계정 페이지
import ThemePage from '@/pages/ThemePage'; // 테마 페이지

// 라우터 설정
const router = createBrowserRouter([
  {
    path: '/', // 기본 경로
    element: <App />, // 기본 경로로 들어오면 App 컴포넌트 렌더링
    children: [
      {
        path: '/', // 기본 경로
        element: <MainPage />, // MainPage 컴포넌트 렌더링
      },
      {
        path: 'theme/:themeKey', // /theme/:themeKey 경로
        element: <ThemePage />, // ThemePage 컴포넌트 렌더링
      },
      {
        path: 'login', // /login 경로
        element: <LoginPage />, // LoginPage 컴포넌트 렌더링
      },
      {
        path: 'my-account', // /my-account 경로
        element: <MyAccountPage />, // MyAccountPage 컴포넌트 렌더링
      },
    ],
  },
]);

export default router;

 

📝 Daily Scrum 이후

• 공통 컴포넌트 생성: 헤더(Header)와 푸터(Footer) 구현
• 페이지별 기본 구조 생성: 각 페이지의 기본 레이아웃 구현

 

😋 Today 회고

• react-router와 react-router-dom의 차이점에 대해 더 알아볼 필요성을 느꼈다. JavaScript로 라우터를 사용해 본 경험은 있지만, TypeScript로 작업하니 헷갈리는 부분이 많았다. 타입 지정과 관련된 문제를 해결하는 데 시간이 걸렸다.
• 브랜치를 feat-이름, step1, step2로 나누는 것과 feat-이름이름, feat-step1, feat-step2로 나누는 것 중 어떤 방식이 더 좋을지 고민해 보았다. 최종적으로는 각 스텝별로 step1, step2로 기능을 만든 다음, feat-이름 브랜치로 제출하는 방식을 선택했지만, 이 부분에 대해서는 멘토님의 의견도 들어보고 싶다.

 

➡️ 참고 링크

https://reactrouter.com/en/main/routers/create-browser-router

createBrowserRouter v6.24.1 | React Router

https://velog.io/@qoalstn44/TIL-v0rejv3m

TypeScript React router dom

https://velog.io/@kandy1002/React-Router-Dom-%EA%B0%9C%EB%85%90%EC%9E%A1%EA%B8%B0

React-Router-Dom 개념잡기

https://velog.io/@yejinleee/react-router-v6-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95-%EC%A0%95%EB%A6%AC

react-router (v6) 사용 방법 정리