[VibeCoding] 05. 에러 빨리 쉽게 해결하기

자, 오늘은 드디어 DB 세팅을 할 겁니다.

라고 말했지만, 사실 오늘 주제는 그게 아닙니다.

 

요즘 세상에 누가 DB를 직접 세팅함?

제 역할은 "기도", "욕하기" 입니다.

 

프로그래밍하다 보면 그런 순간 있죠. “분명 이렇게 말했는데…” → 전혀 다른 코드가 나와 있음

“아니… 그게 아닌데…” → 근데 또 그럴듯하게 돌아감 -> 여기서 그냥 넘어가면 나중에 더 힘들어져요.

저는 꽤 자주 겪습니다.

 

그래서 저는 “누가 뭘 망치든 내가 복구할 수 있게” 시스템을 짭니다.

사람도 못 믿고 AI도 못 믿고 과거의 나도 못 믿습니다.

---

1. DB 세팅할 때 error_log 테이블을 무조건 만들어 둡니다

저희 형들이 틀릴 수 있습니다.

나중에 서버가 터질 때 저희 형들에게 욕 하지말고 로그를 보여줍니다.

CREATE TABLE `error_logs` (
  `idx` int NOT NULL AUTO_INCREMENT,
  `subject` varchar(255) NOT NULL,
  `request_url` varchar(45) NOT NULL,
  `payload` json NOT NULL,
  `message` text NOT NULL,
  `create_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`idx`)
) ENGINE=InnoDB AUTO_INCREMENT=111 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='에러 로그'

 

서버 쪽 비지니스 로직 catch에서 insert 박아두세요.

---

2. IDE에서 DB 구조를 직접 읽을 수 있게 만들어 둡니다

DDL 맞나요? 아.무.튼 저희 형들이 읽을 수 있게 합니다.

"scripts": {
        "start": "node ./bin/www",
        "lint": "eslint .",
        "lint:fix": "eslint . --fix",
        "format": "prettier --write \"**/*.{js,json,md}\"",
        "db:schema": "mysqldump -u root -p --no-data {님들 디비명} > schema.sql"
    },

---

3. 프론트에서 API 호출 로그를 반드시 남깁니다

저는 보통 이런 식으로 합니다.

import axios from 'axios';
import { BASE_URL } from '@env';
import { Platform } from 'react-native';
import { useMember } from '@/stores/member';

const api = axios.create({
  baseURL: BASE_URL,
  timeout: 10000,
  withCredentials: true,
  headers: { 'Content-Type': 'application/json' },
});

api.interceptors.request.use(
  requestConfig => {
    const { member } = useMember.getState();
    if (member?.accessToken) {
      requestConfig.headers.Authorization = `Bearer ${member.accessToken}`;
    }
    requestConfig.withCredentials = true;
    return requestConfig;
  },
  error => Promise.reject(error),
);

api.interceptors.response.use(
  response => {
    if (__DEV__) {
      const method = response.config.method?.toUpperCase() ?? 'METHOD';
      const url = (response.config.baseURL ?? '') + (response.config.url ?? '');
      const icons = ['✨', '🫧', '🌈', '⭐️', '🌹', '🐱'];
      const randomIcon = icons[Math.floor(Math.random() * icons.length)];
      console.log(`[${Platform.OS.toUpperCase()}]`, method, url, randomIcon);
      console.log(response.data);
      console.log('--------------------------------------------------');
    }
    return response;
  },

  err => {
    const error = {
      status: err.response ? err.response.status : null,
      data: err.response ? err.response.data : null,
      message: err.message,
    };
    // 401 에러 시 로그아웃 (단, FCM 토큰 삭제 요청은 제외 - 무한루프 방지)
    const url = err.config?.url ?? '';
    if (error.status === 401 && !url.includes('/fcm/')) {
      const { logoutMember } = useMember.getState();
      logoutMember();
    }
    return Promise.reject(error);
  },
);

export default api;

 

 

이렇게 해두면, 어디서 터졌는지, 어떤 API였는지, 그 시점의 DB 구조가 어땠는지

이 세 가지를 저희 형들한테 바로 던져줄 수 있습니다.

 

그리고 경험상 이게 중요합니다.

“설명”하면 → 해석이 들어갑니다. “로그 + 구조 + 상황”을 주면 → 바로 디버깅 들어갑니다.

저 세 개랑 “내가 뭐 하다가 터졌는지” 이거 하나만 추가해주면 대부분 생각보다 엄청 빨리 해결됩니다.