좌충우돌 기록

UI만 만들고 해놓다가 어느 순간 ‘이걸 URL로 나눠줘야 하는 거 아닌가?’ 하는 (당연히 해야하는) 생각이 들었다. 과정을 조금 기록해본다.

 

라우팅 구현하기

React에서는 react-router-dom을 쓴다.

// App.js
import { Routes, Route, Navigate } from 'react-router-dom';

<Routes>
  <Route path="/" element={<Navigate to="/admin/dashboard" replace />} />
  <Route path="/admin" element={<BrailleAdminDashboard />}>
    <Route path="dashboard" element={<DashboardTab />} />
    <Route path="users" element={<UserManagementTab />} />
    <Route path="devices" element={<DeviceManagementTab />} />
    <Route path="realtime" element={<RealtimeBrailleTab />} />
  </Route>
</Routes>

 

 

조금씩 구조를 정리하고 컴포넌트 파일들을 옮겨다니던 중, 다음과 같은 에러가 쏟아지기 시작했다.

bash
ERROR in ./src/features/admin/components/LanguageTab.jsx
Module not found: Error: Can't resolve '../../../context/AuthContext'

 

상대 경로가 복잡해져서 어디서부터 시작해야 할지 헷갈렸던 것인가 싶다.

아직 경로 별칭 설정을 적용하지 않았는데, 앞으로 적용해볼 예정.

 

프로젝트 구조 정리

혼란 속에서 구조를 다시 정리했다..

src/
├── components/          # 공통 컴포넌트
├── features/           # 기능별 모듈
│   └── admin/
│       ├── components/
│       └── hooks/
├── context/            # 전역 상태
├── constants/          # 상수

 

다음 정리사항

 

일단 백엔드 API와 연결을 잘해야할 것 같고,

AI에게 코드 리뷰를 맡겨봤더니 이런 제안들을 해주었다:

shared/ 디렉토리 고려	context/, constants/, types/ 등을 하나로 묶어서 shared/에 넣으면 더 명확함
pages/ 디렉토리 분리	라우트에 대응되는 컴포넌트를 pages/로 따로 관리하면 좋음
services/ 디렉토리 추가	API 로직이 생긴다면 services/로 분리하고, api/는 mock용으로만 사용

 

위내용 공부해보면서 좀 더 잘 적용해봐겠고,

사실 하루하루 지나가면서, 그리고 AI에게 물어보며 찾아보며 경험해보니
아키텍처에 대한 이해가 얼마나 중요한지, 그리고 실제 개발 지식들이 얼마나 중요한지 점점 더 체감하게 됐다.
또 AI에게 어떻게 지시를 내리는 것이 좋은지도 해보고, 엎고, 또 해보고, 반복하면서 조금씩 알아가는 중이다.

단순히 기능만 구현하는 걸 넘어서서 잘 설계된 구조가 있어야 유지보수도 쉽고 확장도 용이하다는 것을 깨닫고 있다.

지금 약간 역량이상의 것들을 하고있나 생각도되는데, 일단 해야되는 만큼 열심히 해볼것이고, 
앞으로도 이런 경험을 쌓아가며 더 탄탄하고 효율적인 코드를 스스로 만들 수 있도록 작은 스텝들을 계속 밟아 나가야겠다.