[혼자 공부하는 바이브 코딩 with 클로드 코드] 4주차

4주차는 클로드 코드를 사용해서 투두앱과 간단한 게임 앱을 만드는 걸 해봤다. 클로드 코드는 터미널에서 작업해야되서 아직 적응이 잘 안된다. 투두 같은 경우는 현재 내 개인 포트폴리오로 사용하려고 만들고 있는게 있어서 그걸 더 개선하는 방법으로 사용해봤다. 사실 프론트 부분은 클로드 웹에서 만든거라서 개선사항이 없을 줄 알았는데 수정해야 될 부분이 너무 많이 나왔다..ㅠㅠ 프론트 어려워...

 

그래서 클로드 코드에 가서 수정할 수 있도록 체크리스트를 만들어서 달라고 했다니 아래처럼 리스트를 줬다. 

🛠️ React 프로젝트 개선 체크리스트

📁 프로젝트: Productivity App (Todo + Pomodoro)

---

🔴 높은 우선순위 (보안/기능 문제)

1. Protected Route 추가

• [ ] ProtectedRoute.jsx 컴포넌트 생성
• [ ] 로그인 안 한 사용자가 /todo 접근 시 로그인 페이지로 리다이렉트
• [ ] App.jsx에서 TodoPage를 ProtectedRoute로 감싸기

// components/ProtectedRoute.jsx
import { Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { selectIsAuthenticated } from '../store/authSlice';

export function ProtectedRoute({ children }) {
  const isAuthenticated = useSelector(selectIsAuthenticated);
  return isAuthenticated ? children : <Navigate to="/" replace />;
}

2. handleToggleTodo 서버 동기화

• [ ] 체크박스 토글 시 백엔드 API 호출 추가
• [ ] 낙관적 업데이트(Optimistic Update) 적용
• [ ] 에러 시 롤백 처리

const handleToggleTodo = async (id) => {
  const todo = todos.find(t => t.id === id);
  const previousTodos = [...todos];
  
  // 낙관적 업데이트
  setTodos(todos.map(t => 
    t.id === id ? { ...t, completed: !t.completed } : t
  ));
  
  try {
    await axiosInstance.patch(`/todos/${id}`, { 
      completed: !todo.completed 
    });
  } catch (error) {
    // 에러 시 롤백
    setTodos(previousTodos);
    alert('변경 실패');
  }
};

3. 401 에러 시 자동 로그아웃

• [ ] axios.js에서 401 에러 시 logout 디스패치
• [ ] 로그인 페이지로 리다이렉트

// api/axios.js 수정
import { logout } from '../store/authSlice';

if (error.response?.status === 401) {
  store.dispatch(logout());
  window.location.href = '/';
}

---

🟡 중간 우선순위 (코드 품질)

4. TodoPage 컴포넌트 분리

• [ ] components/PomodoroTimer.jsx 분리
• [ ] components/PomodoroModal.jsx 분리
• [ ] components/TodoList.jsx 분리
• [ ] components/TodoItem.jsx 분리
• [ ] components/AddTodoModal.jsx 분리
• [ ] 커스텀 훅으로 로직 분리: hooks/usePomodoro.js

목표: TodoPage.jsx를 528줄 → 100줄 이하로

5. 로딩/에러 상태 관리

• [ ] API 호출 시 로딩 상태 추가
• [ ] 로딩 스피너 컴포넌트 생성
• [ ] 에러 발생 시 사용자 친화적 에러 메시지 표시
• [ ] 빈 상태(Empty State) UI 개선

const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);

const fetchTodos = async () => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await axiosInstance.get('/todos');
    setTodos(response.data);
  } catch (err) {
    setError('할 일 목록을 불러오는데 실패했습니다.');
  } finally {
    setIsLoading(false);
  }
};

6. useEffect 의존성 문제 해결

• [ ] handlePomodoroComplete를 useCallback으로 감싸기
• [ ] useEffect 의존성 배열 정리
• [ ] ESLint exhaustive-deps 경고 해결

const handlePomodoroComplete = useCallback(async () => {
  // 기존 로직
}, [selectedTodo, pomodoroMode]);

useEffect(() => {
  // ...
}, [isRunning, pomodoroTime, pomodoroMode, handlePomodoroComplete]);

7. DOM 직접 접근 제거

• [ ] document.getElementById 제거
• [ ] useRef 또는 상태(state)로 변경

// Before
const select = document.getElementById('todo-select');
handleStartPomodoroFromCenter(select.value);

// After
const [selectedTodoId, setSelectedTodoId] = useState('');

<select 
  value={selectedTodoId} 
  onChange={(e) => setSelectedTodoId(e.target.value)}
>

---

🟢 낮은 우선순위 (일관성/정리)

8. 아이콘 라이브러리 통일

• [ ] 이모지 vs lucide-react 중 하나 선택
• [ ] LoginPage 아이콘 수정 (현재: 이모지)
• [ ] SignupPage와 통일

9. console.log 제거

• [ ] TodoPage.jsx 349줄: console.log('Todo:', todo) 제거
• [ ] TodoPage.jsx 215줄: console.log('🚀 Calling backend:...') 제거
• [ ] TodoPage.jsx 258줄: console.log('⏰ Timer complete!...') 제거
• [ ] 배포 전 모든 console.log 정리

10. Deprecated API 교체

• [ ] onKeyPress → onKeyDown으로 변경
  • LoginPage.jsx (91줄, 107줄)
  • SignupPage.jsx (89줄, 105줄, 120줄)

// Before
onKeyPress={handleKeyPress}

// After  
onKeyDown={(e) => e.key === 'Enter' && handleLogin()}

11. Header 컴포넌트 완성

• [ ] 비어있는 Header.jsx 구현 또는 삭제
• [ ] 필요시 공통 네비게이션 추가

12. alert() → 토스트 메시지로 변경

• [ ] react-toastify 또는 커스텀 토스트 적용
• [ ] 사용자 경험 개선

---

🔧 추가 권장사항

폴더 구조 개선

src/
├── api/
│   └── axios.js
├── components/
│   ├── common/
│   │   ├── Button.jsx
│   │   ├── Input.jsx
│   │   ├── Modal.jsx
│   │   └── LoadingSpinner.jsx
│   ├── todo/
│   │   ├── TodoList.jsx
│   │   ├── TodoItem.jsx
│   │   └── AddTodoModal.jsx
│   └── pomodoro/
│       ├── PomodoroTimer.jsx
│       └── PomodoroModal.jsx
├── hooks/
│   ├── usePomodoro.js
│   └── useTodos.js
├── pages/
│   ├── LoginPage.jsx
│   ├── SignupPage.jsx
│   └── TodoPage.jsx
├── store/
│   ├── store.js
│   └── authSlice.js
└── utils/
    └── formatTime.js

TypeScript 도입 고려

• [ ] 타입 안정성 확보
• [ ] 자동완성 및 리팩토링 편의성

테스트 추가

• [ ] Jest + React Testing Library 설정
• [ ] 주요 컴포넌트 단위 테스트
• [ ] API 호출 모킹 테스트

---

📋 진행 상황

항목상태완료일

Protected Route	⬜	-
서버 동기화	⬜	-
자동 로그아웃	⬜	-
컴포넌트 분리	⬜	-
로딩 상태	⬜	-
useEffect 수정	⬜	-
DOM 접근 제거	⬜	-
아이콘 통일	⬜	-
console.log 제거	⬜	-
onKeyPress 교체	⬜	-
Header 완성	⬜	-
토스트 메시지	⬜	-

---

 

 

디자인 정도 수정하려고 했는데 문제가 많아 보여서 vscode에서 프로젝트를 열고 클로드 코드를 터미널에 키고 1번부터 수정해갔다. 클로드 웹에서 클로드 코드에서 체크리스트 1번을 수정할 수 있도록 명령어를 달라고 했고 

 

 

아래 구체적인 프롬프트를 넣어봤다. 

 

 

이렇게 변경할 때마다 어떤걸 수정했는지 보여주고 

 

 

수정된 부분을 반영할 건지 물어본다. 괜찮은거 같아서 yes 누름 ㅎㅎ 

 

알려준 수정사항을 다 반영하고 싶었지만 은근 시간이 걸려서 우선 높은 우선순위만 반영했다. 도메인도 샀고 Azure에서 배포하는 거 연습 해보고 지금 만든 투두앱 배포까지 일일 1커밋 하면서 얼른 포폴 만들어야지.

 

현재까지 만들어진 투두앱 프론트 화면