멋사 프론트엔드 회고록 4주차

26 정통·2026년 4월 27일

멋사 회고록

멋사 과제 시리즈

목록 보기

3/4

근 3주만에 재개하는 회고록!
원래는 조금더 이번 과제를 일찍 시작해서 퀄리티좀 빵빵하게 하고 싶었지만
예상외로 시험 끝나고 약한 몸살과 귀차니즘이 덮쳐서

이번에는 뼈대만 만든느낌이긴 하지만, 중요한건 다 했으니 괜찮다.
~~아마도~~

이번 주차 과제

폴더 구조 정리하기 및 라우터 세팅
인트로 페이지(Home.jsx) 만들기, 경로는 / 로 들어왔을 때
페이지 왔다 갔다 연결하기
{선택사항} 공통 헤더 부분 만들기

1. 폴더 구조 정리하기 및 라우터 세팅

이번 단계는 그다지 어렵지 않다.
폴더구조를 꽤나 보편적이고 보기 쉬운 구조로 설정하고 만들면 해결되는 일이다.
src 라는 기본적으로 있느 폴더 안에 components, pages, styles 폴더를 생성후

컴포넌트 폴더에는 말그대로 구성요소. 선택 과제인 공통헤더로 보여질 파일 등이 들어가고
페이지엔 Home,Profile 등이 웹 페이지들
스타일엔 css 파일들이 들어간다.

요렇게

1-1. 라우터 설치

app.js에 이동한뒤
오늘도 어김없이 vscode의 터미널 창을 연 다음
npm install react-router-dom
을 입력한다.

그럼 맨 윗줄에
import { BrowserRouter, Routes, Route } from 'react-router-dom';
이 생긴다.

이러면 라우터 설치가 끝나긴 하는데 조금더 몇가지 앞서 말하자면

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Profile from './pages/Profile';
import Self from './pages/Self';
import Common_Header from "./components/Header"

/*
만약 공통 헤더를 넣을것이라면 
import Common_Header from "./components/Header"
와
<Common_Header />
처럼 호출하는 이름이 같아야 함
<Routes> 안쪽: 주소가 바뀔 때마다 그 주소에 맞는 컴포넌트 하나만 골라서 보여주는 곳

<Routes> 바깥쪽: 주소가 아무리 바뀌어도 리액트가 갈아끼우지 않고 그대로 유지하는 영역
*/


function App() {
  return (
  
  <BrowserRouter>
    <Common_Header /> 
    <h1>App.js 영역</h1>

      <Routes>
        {/* 기본 경로로 들어오면 Home 다른 함수에서 홈 호출하려면 / 만 써야 됨*/}
        <Route path="/" element={<Home />} />

        <Route path="/Profile" element={<Profile />} />
        <Route path="/Self" element={<Self />} />

        
          
      </Routes>
  </BrowserRouter>

  );
}

export default App;

주석 같은거 달때 이번 주차 예제 복붙하거나 ai로 팩트체크 한게있긴 한데

지금 살펴볼것은
import ~ from~ 이라는 제일 상단쪽 줄이다.

가령
import Home from './pages/Home';
이라는 것은

import 바로 뒤의 Home 이라는 건 Home이라는 다른 파일에서 export default Home;으로 내보낸 것을 받아오는것이다.

어디서?
바로 './pages/Home' 이라는 곳에서, 개인적으로 상대경로 복습할 겸 써보자면.
같은 검색깊이에 있는 pages라는 폴더에서 Home.jsx를 찾게 하는것이다.
편하게도 jsx 까지 안써도 파일 확장자까지는 자동으로 처리해준다.

그다음.
아까 라우터를 받아오며 BrowserRouter, Routes, Route 태그를 받아왔다

<BrowserRouter>
    <h1>App.js 영역</h1>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Profile" element={<Profile />} />
        <Route path="/Self" element={<Self />} />
      </Routes>
  </BrowserRouter>

브라우저 라우터 태그 안에 라우트와 공통 헤더를 넣을수있다.

이미지가 안그려진다면
요런 느낌

App.js 영역
이란 글자 밑에
내가 Home 파일에 써둔 내용이 나온다

(조금 글자 내용이 다른건 과거 사진이라 그렇다)

<Routes>에는
<Route path="/" element={<Home />} />
같이 넣을 구 있는데 여기서 루트 패스의 / 는 기본주소로써
npm start를 치면 바로뜨는 그 창이다.
(http://localhost:3000/) 여기 주소

그 뒤의 element는 Home이라는 파일내용(컴포넌트)을 보여주겠다~ 란 의미
~~솔직히 나중에 Route path와 element는 기억할 것 같은데 쓰는 방식이 조금 헷갈릴 것 같긴하다~~

2. 인트로 페이지(Home.jsx) 만들기

만약 여기까지 라우트 관련한게 잘 이해 갔다면 이 뒤로는 일사천리기 때문에 그다지 걱정 안해도 된다. 다만! Navigate 내용이 새로 있다.

import React from 'react';
import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();
  return (
    <div>
      <h2>웹페이지 홈구역에 오신걸 환영합니다!</h2>
        <button onClick={() => navigate("/Profile")}>블로그 페이지로 이동</button>
        <button onClick={() => navigate("/Self")}>내 소개 보러 가기</button>
        
    </div>
  );
}

export default Home;

이건 실제로 내가 쓴 이번 주차의 Home.jsx에 있는 내용인데

조금 분석을 해보자
음..우선
1.useNavigate 란 것을'react-router-dom'에서 가져왔다.

이후로 밑에 const navigate = useNavigate(); 로 설정해서
useNavigate()를 다 칠 필요 없이 navigate라는 변수에 할당해서 사용하게 만들었다.(줄여쓰기 쯤으로 생각해도 무리없다.)
맨 끝에 export default Home;을 함으로써 Home이라는 이름으로 파일내용을 내보내 App.js 에서 import Home from './pages/Home';을 통해 수신할 수 있게 만들었다.

2-1. navigate 관련

지금
<button onClick={() => navigate("/Profile")}>블로그 페이지로 이동</button>
와 같이 버튼 태그 안에 넣어서 onClick 즉,클릭할시

그 안에 있는 함수인 navigate가 동작해서 Profile 이라는 주소로 이동해 아까 App.js에 쓴것
<Route path="/Profile" element={<Profile />} />
처럼 그 주소에 지정된 Profile.jsx 파일 내용(컴포넌트)을 보여주는 것이다.

아 혹시 조금 이상한 점이 보일수도 있는데 주소명이 Profile인데 왜 블로그 페이지로 이동이 적혀있냐면 이게 복붙을 잘못해서 그렇다.
주로 작업 시작시 잠결에 한게 문제.

그래서 진짜 프로필은 Self.jsx라는 파일 안에 있다.

사진을 보여주자면 주소명과 제목이 조금 꼬여있다.
~~제목은 진짜 어떻게하다 저렇게 수정까지 하고 꼬였는지 기억이 안남~~

2-2. navigate 팁

만약에 만약에. 페이지 이동 기능까지 만들고 페이지를 이동후. 복귀 시 오류가 뜬다면

복귀하려는 컴포넌트에 있는 리턴위에
const navigate = useNavigate();가 안적혀있는 걸수도 있다.

그리고 만약에 만약에 웹페이지 이동했는데 아무것도 안뜨고 백색화면이다.
그럼 내용은 잘썼는데 그 내용을 return()안에 안넣었거나, 이동 주소가 잘못된 것일수도 있다.

이 때 추가적인 팁은 아까 공용헤더를 잠시 언급한것 처럼 이게 내용이 그냥 안뜨는건지, 아니면 모종의 사유로 모든 글자가 안뜨는 것인지 알기 위해

에를 들어 App.js에

<BrowserRouter>
    <h1>App.js 영역</h1>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Profile" element={<Profile />} />
        <Route path="/Self" element={<Self />} />
      </Routes>
  </BrowserRouter>

처럼
<Routes>위에 모든 웹페이지에서

<h1>App.js 영역</h1>

처럼 공통으로 보여질 내용을 간단히 써서 어디서 오류가 나는지 시각적으로 체크해보자.

3. 페이지 왔다 갔다 연결하기

이건 쉽다.

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

를 먼저 모든페이지 상단에 적어준뒤

아까 만든 버튼 태그

<button onClick={() => navigate("(이동할 path명)")}>(버튼에 뜨는 텍스트 내용)</button>

이런 형식으로 버튼을 모든 페이지에 시각적으로 적절한 위치(이게 제일 중점) 에 넣어주면 된다.

아. navigate를 썼으니 나 같은 경우엔 함수 안쪽 리턴문 바깥에다가
const navigate = useNavigate();를 추가적으로 적어줘야 한다.

function Home() {
  const navigate = useNavigate(); //여기 삽입함
  return (
    <div>
      <h2>웹페이지 홈구역에 오신걸 환영합니다!</h2>
        <button onClick={() => navigate("/Profile")}>블로그 페이지로 이동</button>
        <button onClick={() => navigate("/Self")}>내 소개 보러 가기</button>
        
    </div>
  );
}

삽입 위치 헷갈리면 참고

4. {선택사항} 공통 헤더 부분 만들기

이건 조금 쉬울수도 있고 헷갈릴수도 있는데.
우선 컴포넌트 파일에 Header.jsx 파일을 만들고

이런 내용

import React from 'react';

function Common_Header() {
  return (
    <header style={{ padding: '20px', background: '#eee' }}>
      <h2>헤더 영역</h2>
    </header>
  );
}

export default Common_Header;

이후 App.js에서
import Common_Header from "./components/Header"
로 불러와준다.

function App() {
  return (
  
  <BrowserRouter>
    <Common_Header /> {/*여기 넣음!*/}
    <h1>App.js 영역</h1>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Profile" element={<Profile />} />
        <Route path="/Self" element={<Self />} />

        
          
      </Routes>
  </BrowserRouter>