⏰ [Ver1] 30분 개발 및 회고 - 시맨틱태그, react-router-dom

✌🏻 회고

프로젝트를 혼자 진행한다는 건 생각보다 쉽지 않다.

인강을 듣고 블로그에 정리하거나, 알고리즘 문제를 푸는 것보다 훨씬 더 어렵게 느껴진다.

팀 단위 프로젝트는 일정도 있고, 역할 분담도 명확해서 어느 정도 체계를 갖추게 된다.

하지만 개인 프로젝트는 시작부터 방향 설정까지 전부 혼자 결정해야 하기 때문에

조금만 방심하면 금방 나태해지는 느낌이다.

개발자라면 앞으로 평생 학습하고 코드를 작성하며, 끊임없이 무언가를 만들어내야 한다.

그래서 나는 현실적으로 지킬 수 있는 목표를 세우기로 했다.

하루 30분, 프로젝트를 진행하고 짧게라도 회고를 남긴다.

작지만 꾸준히 실천할 수 있는 루틴을 만들어보려 한다.

우선 내 GitHub 레포지토리에 What2Wear라는 프로젝트가 하나 있다.

날짜와 지역을 입력하면 날씨 정보를 받아와, AI에게 옷 추천을 받는 서비스다.

(사실… 그냥 API 연동 연습 겸 만든 거라 아직은 뭐가 없다.)

하지만 이 레포부터 시작하려고 한다.

매일 30분, 프로젝트를 진행하고 회고를 남긴다.

그리고 새로운 기능을 하나씩 추가해가며, 프로젝트의 몸집을 천천히 불려볼 계획이다.

그런데 기능을 확장하려면 단순한 기능 몇 개로는 부족하다.

조금 더 넓은 ‘세계관?’?을 가져야 한다고 생각했고,

오늘은 사이드바를 만들어 페이지를 분리하는 구조를 도입하기로 했다.

딱 인스타그램처럼, 메뉴를 누르면 다른 화면이 자연스럽게 뜨는 그런 느낌.

(요즘 “폭싹 속았수다”에 빠져서 숏츠를 너무 많이 보고 있다.

도파민 중독...

귀 파는 영상, 블랙헤드 뽑는 영상은 솔직히 많이 보진 않았는데…

이상하게 알고리즘이 계속 던져준다...)

어쨌든 오늘의 목표는 인스타그램처럼 사이드바를 통해 화면이 전환되는 구조,

그러니까 CSR(Client Side Rendering) 방식으로 페이지가 자연스럽게 바뀌는 구조를 구현하는 것이다.

부분 렌더링? 라우팅을 통한 컴포넌트 교체? 뭐 그런 거.

벌써 5분이 지났다.

생각만 하다 시간 다 보내지 말고, 빠르게 작업에 들어가자.

작업을 시작하려는데, 문득 이런 의문이 들었다.

“Header 컴포넌트는 어디서 import하는 게 맞을까?”

App.jsx에서 공통으로 import해서 전체에 항상 보여주게 할까?
아니면 각 페이지 컴포넌트에서 개별적으로 불러와야 할까?

이건 프로젝트 구조, 규모, 그리고 라우팅 방식에 따라 달라질 수 있다.

하지만 대부분의 리액트 앱에서는 보통 App.jsx 또는 Layout.jsx에서 import해서 사용하는 것이 일반적이다.

그 이유는 단순하다.

헤더는 모든 페이지에서 공통으로 보여야 하는 컴포넌트이기 때문이고,
그렇기 때문에 각 페이지마다 중복해서 import하는 건 비효율적이고, 유지보수에도 좋지 않다.

대부분은 공통 레이아웃 컴포넌트에 Header, Sidebar 같은 요소를 포함시킨 다음,

그 아래에 <Outlet />이나 <Routes>로 라우팅되는 페이지를 구성하는 방식으로 구현한다.

사실 너무 당연한 방식이다.

중복을 줄이고, 공통 구조를 한 곳에서 관리한다.

근데 최근에 어디선가 페이지 컴포넌트에서 Header를 직접 import해서 쓰는 코드를 본 적이 있다.

그걸 보고 잠깐 의문이 생겼다.

“어? 이렇게 해도 되나…? 오히려 이게 더 유연한 방식인가?” 하고...(진짜임)

결국 내 결론은 이렇다:

“의도적으로 한정된 페이지에만 Header를 보이게 하려는 경우라면 페이지별로 import할 수도 있겠지만,

대부분의 경우는 App 또는 Layout 컴포넌트에서 공통으로 불러오는 게 맞다.”

오늘 30분 프로젝트를 하며 다시 정리해보면 좋겠다고 느낀 주제 두 가지가 있다.

📚 정리

시맨틱 태그(Sementic HTML)

의미(semantic)를 가진 HTML 태그로,

태그 자체만으로 이 영역이 어떤 역할을 하는지 명확하게 표현하는 태그

예전에는 <div>, <span>만 써서 모든 레이아웃을 구성했지만,

HTML5부터는 구조적 의미를 명확하게 전달하기 위해 시맨틱 태그가 도입

시맨틱 태그를 사용하는 이유

목적	설명
의미 있는 구조 제공	태그만 보고도 콘텐츠의 역할을 알 수 있음
검색 엔진 최적화 (SEO)	검색 엔진이 페이지 구조를 더 잘 파악함
접근성 향상	스크린 리더가 콘텐츠의 구조를 정확히 인식
유지보수 용이	코드 가독성이 좋아지고 협업에 유리함

대표적인 시맨틱 태그

태그	역할 및 의미	예시
<header>	페이지나 섹션의 머리말	로고, 네비게이션 메뉴 등
<nav>	사이트 내 주요 탐색 링크 영역	사이드바, 상단 메뉴 등
<main>	본문의 핵심 콘텐츠 영역	중복 없이 한 페이지에 한 번만 사용
<section>	주제별 구획	뉴스 목록, 서비스 소개 등
<article>	독립적인 콘텐츠 묶음	블로그 글, 게시글 등
<aside>	보조 콘텐츠	광고, 추천 글, 사이드 콘텐츠
<footer>	꼬리말 영역	연락처, 저작권, 사이트 정보 등

예시

<body>
  <header>
    <h1>로고</h1>
    <nav>
      <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/about">소개</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>오늘의 뉴스</h2>
      <article>
        <h3>뉴스 제목</h3>
        <p>뉴스 본문...</p>
      </article>
    </section>

    <aside>
      <h3>광고</h3>
    </aside>
  </main>

  <footer>
    <p>© 2025 나의 웹서비스</p>
  </footer>
</body>

<main>은 페이지당 한 번만 사용해야 함
<article>은 독립적으로 사용 가능한 콘텐츠일 때 사용 (댓글은 X, 블로그 글은 O)
<section>은 제목(<h2>, <h3>)이 있어야 자연스러움
시맨틱 태그 안에 <div>를 함께 써도 됨 → 구조 잡는 용도

정리

시맨틱 태그는 HTML에 구조와 의미를 부여하는 태그이며, SEO, 접근성, 유지보수 측면에서 꼭 알아야 할 핵심 요소

react-router-dom

리액트에서 페이지 전환, 주소(URL)에 따른 컴포넌트 전환을 가능하게 해주는 라이브러리

즉, 리액트 앱에서 라우팅(Routing)을 담당하는 핵심 도구

필요 이유

리액트는 기본적으로 SPA(Single Page Application)

한 번만 HTML을 로딩하고, 페이지가 바뀌는 것처럼 보이지만 실제로는 컴포넌트만 바뀜.

이걸 가능하게 해주는 게 바로 react-router-dom

사용자가 URL을 바꾸면
그에 맞는 컴포넌트를 보여주도록 처리해주는 라이브러리

기본 사용 구조 (React Router v6 기준)

1. 최상단에서 <BrowserRouter>로 감싸기

// main.jsx or main.tsx
import { BrowserRouter } from 'react-router-dom';
import App from './App';

<BrowserRouter>
  <App />
</BrowserRouter>

( 오늘 프로젝트하면서 이걸 까먹는 바람에 한동안 빈 화면만 나왔다… )

2. App.jsx에서 라우팅 정의하기

// App.jsx
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

3. Link 컴포넌트로 이동하기 (새로고침 없이)

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

<Link to="/">홈</Link>
<Link to="/about">소개</Link>

핵심 개념

구성요소	설명
<BrowserRouter>	라우팅 기능을 사용하는 모든 컴포넌트를 감싸는 루트
<Routes>	여러 Route를 감싸는 컨테이너
<Route path="..." element={...} />	URL에 따라 보여줄 컴포넌트 정의
<Link to="...">	페이지 새로고침 없이 이동
useNavigate()	JS 코드에서 경로 이동
<Outlet>	자식 Route가 렌더링될 위치 지정 (Nested Routing)

정리

react-router-dom은 SPA 환경에서 라우팅을 구현하는 필수 라이브러리이고, 페이지 전환을 위해 <Routes>, <Route>, <Link> 등을 적절히 조합해서 사용

'📂 Project > [30분] 1일 30분 개발 및 회고' 카테고리의 다른 글

⏰ [Ver2] 30분? 개발 및 회고 - 와이어프레임 초안 작성 (0)	2025.04.27
⏰ [Ver2] 30분 개발 및 회고 - 프로젝트 기획 방향 (0)	2025.04.24
⏰ [Ver1] 30분 개발 및 회고 - 조건부 렌더링 (0)	2025.04.09
⏰ [Ver1] 30분 개발 및 회고 - Firebase, Supabase (0)	2025.04.03
⏰ [Ver1] 30분 개발 및 회고 - FlexBox (0)	2025.04.02