반응형
AutoSume 프로젝트는 자기소개서를 빠르게 작성하고 관리할 수 있는 개인용 웹 애플리케이션이다.
이번 글에서는 Vite 기반으로 React + TypeScript + Tailwind CSS 개발 환경을 구성하고, React Router로 기본 라우팅 구조를 잡는 것까지 진행한 과정을 정리한다.
🧱 사용 기술 스택 개요
| 기술 | 설명 |
| Vite | 빠른 빌드 속도를 제공하는 차세대 프론트엔드 빌드 도구이다. |
| React | 컴포넌트 기반 UI 라이브러리로, 사용자 인터페이스를 효율적으로 구성할 수 있다. |
| TypeScript | 자바스크립트에 타입 시스템을 추가한 언어로, 안정적인 코드 작성에 도움을 준다. |
| Tailwind CSS | 유틸리티 기반의 CSS 프레임워크로, 클래스 조합으로 빠르게 UI를 구성할 수 있다. |
| React Router | SPA(Single Page Application)에서 페이지 간 이동을 처리해주는 라우팅 라이브러리이다. |
1️⃣ Vite + React + TypeScript 프로젝트 초기화
npm create vite@latest frontend --template react-ts
cd frontend
npm install
- vite는 React, Vue, Svelte 등의 프로젝트를 빠르게 생성할 수 있게 도와주는 CLI를 제공한다.
- --template react-ts 옵션을 통해 TypeScript가 적용된 React 프로젝트 템플릿을 불러온다.
- npm install을 통해 필요한 의존성 패키지를 설치한다.
💡 Vite는 Webpack보다 훨씬 빠른 개발 환경을 제공하며, HMR(Hot Module Replacement)이 매우 빠르다.
2️⃣ Tailwind CSS 설치 및 설정
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
- tailwindcss는 유틸리티 클래스 기반의 CSS 프레임워크이다.
- postcss, autoprefixer는 Tailwind가 내부적으로 스타일을 처리하는 데 사용하는 플러그인이다.
- -p 옵션은 postcss.config.js 파일도 함께 생성해준다.
tailwind.config.js 설정 파일에서 아래와 같이 설정을 변경한다.
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"]
그리고 src/index.css 파일에 아래를 추가한다:
@tailwind base;
@tailwind components;
@tailwind utilities;
💡 Tailwind의 기본 스타일, 컴포넌트, 유틸리티를 프로젝트에 적용하기 위한 필수 선언이다.
3️⃣ 폴더 구조 설계
src/
├── components/ # Header, Footer 등 공통 UI 컴포넌트
├── pages/ # Home, Write, List 등 라우팅되는 페이지
├── layouts/ # MainLayout.tsx 등 레이아웃 템플릿
├── App.tsx # 라우팅 구조를 감싸는 App 컴포넌트
├── router.tsx # 라우터 설정 파일
├── main.tsx # 프로젝트의 진입점
💡 폴더를 분리하는 이유는 역할에 따라 파일을 관리하기 위함이다. 컴포넌트와 페이지, 레이아웃을 분리하면 유지보수와 확장성이 좋아진다.
4️⃣ 공통 UI 구성 (Header, Footer, Layout)
구성 요소
- components/Header.tsx: 상단 네비게이션 바
- components/Footer.tsx: 페이지 하단 정보
- layouts/MainLayout.tsx: Header + Footer를 포함한 공통 레이아웃 컴포넌트
// layouts/MainLayout.tsx
import Header from "../components/Header";
import Footer from "../components/Footer";
import { Outlet } from "react-router-dom";
export default function MainLayout() {
return (
<>
<Header />
<main className="p-4">
<Outlet />
</main>
<Footer />
</>
);
}
→ Outlet은 현재 경로에 맞는 페이지 컴포넌트를 렌더링하는 React Router의 기능이다.
공통 UI는 유지하면서 그 사이에 바뀌는 내용을 동적으로 처리할 수 있다.
5️⃣ React Router 설정
router.tsx 파일에서 아래와 같이 라우팅 구조를 정의한다.
import { createBrowserRouter } from "react-router-dom";
import MainLayout from "./layouts/MainLayout";
import Home from "./pages/Home";
import Write from "./pages/Write";
import List from "./pages/List";
import View from "./pages/View";
import Settings from "./pages/Settings";
import Export from "./pages/Export";
import MyPage from "./pages/MyPage";
const router = createBrowserRouter([
{
path: "/",
element: <MainLayout />,
children: [
{ path: "", element: <Home /> },
{ path: "write", element: <Write /> },
{ path: "list", element: <List /> },
{ path: "view/:id", element: <View /> },
{ path: "settings", element: <Settings /> },
{ path: "export", element: <Export /> },
{ path: "mypage", element: <MyPage /> },
],
},
]);
export default router;💡 createBrowserRouter()는 브라우저 URL 경로를 기반으로 페이지를 렌더링하는 라우터이다.
children 배열은 /를 기준으로 내부에서 서브 라우팅되는 페이지를 설정한다.
6️⃣ 라우터 적용 (main.tsx)
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import router from "./router";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);→ RouterProvider는 router.tsx에서 만든 라우터 설정을 앱 전체에 적용하는 컴포넌트이다.
7️⃣ 각 페이지 컴포넌트 구성
pages 폴더 내에 아래와 같은 파일들을 생성한다:
- Home.tsx
- Write.tsx
- List.tsx
- View.tsx
- Settings.tsx
- Export.tsx
- MyPage.tsx
예시: Home.tsx
export default function Home() {
return (
<div>
<h1 className="text-3xl font-bold mb-4">AutoSume에 오신 것을 환영합니다!</h1>
<p className="text-gray-700">자기소개서를 쉽고 빠르게 작성하고 관리할 수 있습니다.</p>
</div>
);
}
⚠️ 모든 페이지는 반드시 export default function 형태로 작성해야 한다.
그렇지 않으면 다음과 같은 에러가 발생한다:
Uncaught SyntaxError: The requested module '/src/pages/Export.tsx' does not provide an export named 'default'🔍 자주 마주치는 오류와 해결 방법
❌ 오류: 모듈 파일을 찾을 수 없음
Failed to resolve import "./router" from "src/main.tsx"
- 원인: 경로가 틀리거나 router.tsx 파일이 누락되었을 때 발생한다.
- 해결: 파일이 존재하는지 확인하고, import 경로를 정확하게 작성해야 한다.
❌ 오류: default export 누락
The requested module '/src/pages/Export.tsx' does not provide an export named 'default'
- 원인: 페이지 컴포넌트에 export default가 빠져 있을 때 발생한다.
- 해결: 아래처럼 default export 형식으로 작성해야 한다.
export default function Export() {
return <div>내보내기 화면</div>;
}✅ 마무리
이번 작업을 통해 React 프로젝트의 기본적인 구조를 세팅하고, 라우팅을 통해 여러 페이지를 구성할 수 있는 기반을 마련하였다.
Tailwind CSS를 이용해 빠르게 스타일링할 수 있고, 컴포넌트 구조를 나누면서 유지보수도 쉬운 방향으로 설계하였다.
이후에는 각 페이지에서 필요한 기능들 — 자기소개서 작성, 리스트화, 상세 보기, 내보내기 기능 등을 구체적으로 구현해나갈 예정이다.
반응형
댓글