React + Firebase 프로젝트 실전 디버깅: 트위터 클론 앱에서 발생한 문제들과 해결 과정

🚨 1. 오류 해결: 근본 원인을 찾아서

문제 1: Function addDoc() called with invalid data. Unsupported field value: undefined

가장 치명적인 문제였습니다. 사용자가 트윗을 작성할 때마다 Firebase에서 이 오류가 발생했습니다.

 

javascript

// 오류가 발생한 코드
const Home = ( userObj ) => {  // ❌ 잘못된 props 구조
    // ...
    return (
        <NweetFactory userObj={userObj} />
    );
};

원인 분석: React에서 props를 받을 때 구조 분해 할당(destructuring)을 제대로 하지 않아서 userObj가 undefined가 되었습니다. 이로 인해 creatorId: userObj.uid에서 undefined가 전달되어 Firebase 문서 생성에 실패했습니다.

해결 과정:

 

javascript

// 수정된 코드
const Home = ({ userObj }) => {  // ✅ 올바른 구조 분해 할당
    // ...
    return (
        <NweetFactory userObj={userObj} />
    );
};

개발 지식:

• Props 전달 패턴: React에서 ({ prop }) vs (props) vs ( prop )의 차이점을 명확히 이해해야 합니다.
• TypeScript 도입 고려: 이런 문제는 TypeScript를 사용하면 컴파일 타임에 잡을 수 있습니다.

문제 2: React Router의 props 전달 메커니즘

 

javascript

// Router.js에서 올바른 props 전달 확인
<Route exact path="/">
    <div style={{ /* styles */ }}>
        <Home userObj={userObj} />  // ✅ 정상적으로 전달됨
    </div>
</Route>

학습 포인트: React Router v5에서는 컴포넌트를 렌더링할 때 props 전달 방식에 주의해야 합니다. component prop보다는 children으로 직접 전달하는 방식이 더 명확합니다.

문제 3: 안전한 객체 접근 패턴

 

javascript

// NweetFactory.js에서 추가한 안전장치
const onSubmit = async (event) => {
    event.preventDefault();
    
    // userObj가 없으면 트윗 작성을 막습니다
    if (!userObj || !userObj.uid) {
        console.error("User not logged in");
        return;
    }
    
    const nweetObj = {
        text: nweet,
        createdAt: Date.now(),
        creatorId: userObj.uid,  // 이제 안전함
        attachmentUrl
    }
    // ...
};

개발 지식:

• 방어적 프로그래밍: 항상 객체나 값이 존재하는지 확인 후 사용
• Early Return 패턴: 조건을 만족하지 않을 때 빠르게 함수를 종료
• Optional Chaining 활용: userObj?.uid 같은 문법으로 더 안전하게 접근