[PHOBUM] 0320 회고록

2025-03-21 4 분 소요

[PHOBUM] 2025-03-20 회고록

1. 오늘의 진행 상황

오늘은 온보딩을 완료하고 일반 로그인 기능을 구현하는 작업을 진행했습니다. 처음에는 POST 요청을 보내면 응답이 없고 404 오류가 발생했으나, Postman으로 요청을 보내본 후 백엔드 구성을 확인했습니다. 백엔드에서 express와 authRoute를 사용하고 있어 auth를 경로에 추가하니 응답이 정상적으로 돌아왔습니다.

문제점 및 해결 과정

1. Input 컴포넌트 값 업데이트 문제

문제: Input 컴포넌트에서 입력값이 제대로 업데이트되지 않음. formData 상태에 값이 반영되지 않는 문제 발생.

해결

handleInputChange

함수에서 상태 업데이트를 올바르게 구현하여 해결.

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, field: keyof PatchAuthLogin) => {
    setFormData(prev => ({
        ...prev,
        [field]: e.target.value
    }));
};

2. 닉네임 중복 체크 상태 관리

문제: 닉네임 중복 체크 후 UI 상태가 적절하게 반영되지 않음.

해결

nicknameError

와

nicknameAvailable

상태값을 활용하여 UI 상태를 조건부로 처리하도록 수정.

const handleNicknameCheck = async () => {
    try {
        const response = await axios.post("/auth/check-nickname", { nickname: formData.nickname });
        if (response.data.isAvailable) {
            setNicknameError("사용가능한 닉네임이에요");
            setNicknameAvailable(true);
        } else {
            setNicknameError("이미 존재하는 닉네임입니다.");
            setNicknameAvailable(false);
        }
    } catch (error) {
        setNicknameError("중복 확인 중 오류가 발생했습니다.");
        setNicknameAvailable(false);
    }
};

3. 로그인 폼 상태 관리

문제: 로그인 폼의 입력값이 상태에 제대로 반영되지 않음. 중복된 handleInputChange 함수가 존재함.

해결: 중복 코드를 제거하고 상태 업데이트 로직을 단순화.

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, field: keyof PatchAuthLogin) => {
    console.log('Input Change:', field, e.target.value);
    setFormData(prev => ({
        ...prev,
        [field]: e.target.value
    }));
};

배운 점

React 상태 관리의 중요성: 상태 업데이트가 정확하게 반영되도록 관리하는 것이 중요.
디버깅을 위한 로깅: console.log를 사용하여 데이터 흐름을 추적하고 문제를 해결할 수 있음.
UI 상태 관리: 사용자 피드백을 즉시 반영할 수 있는 UI 상태 관리를 중요하게 생각함.

향후 개선점

에러 처리 로직 강화: 더 나은 에러 처리 및 예외 상황 관리.
상태 관리 로직 모듈화: 복잡한 상태 관리 로직을 모듈화하여 유지보수성을 높임.
폼 유효성 검사 강화: 사용자 입력에 대한 유효성 검사를 강화하여 신뢰성 있는 데이터를 수집.

2. 카카오 소셜 로그인 및 온보딩 흐름 개선

문제 발생

소셜 로그인 후 온보딩 처리: 카카오 소셜 로그인 후 아이디 입력 없이 닉네임부터 입력하게 해야 하는 부분이 있었습니다. 기존에는 소셜 로그인 시 일반 회원가입 흐름으로 가기 때문에 이메일을 요구했지만, 이메일이 없는 소셜 로그인은 실패했습니다.

해결 방안

isSocialLogin 상태 추가: 소셜 로그인 여부를 체크하기 위해 isSocialLogin 상태를 추가하고, URL 파라미터로 소셜 로그인 구분 (?social=kakao)을 받았습니다.
소셜 로그인 시 초기 스텝 변경: 소셜 로그인일 경우 초기 스텝을 STEPS.NICKNAME으로 설정하고, 이메일/비밀번호 입력 단계를 건너뛰도록 handleNextStep 함수 및 렌더링 로직을 수정했습니다.
백엔드 엔드포인트 수정: 소셜 로그인 후 일반 회원가입이 아니라 소셜 로그인 회원가입을 위한 엔드포인트(/kakao/signup)를 추가했습니다.

발생한 오류 및 해결

401 Unauthorized 에러: 소셜 로그인 시 Authorization 헤더 누락 문제로 401 에러가 발생했습니다. 이를 해결하기 위해 config 객체를 생성하고, 소셜 로그인 시에만 Authorization 헤더를 추가하여 요청을 보냈습니다.
```
const config = {
    headers: {
        'Authorization': `Bearer ${token}`,
    },
};
axios.post('/kakao/signup', data, config);
```

회원가입 및 로그인 구분

회원가입 및 기존 사용자 구분: 신규 사용자인지 기존 사용자인지 구분하기 위해 isNewUser 플래그를 백엔드에서 추가하고, 신규 사용자는 온보딩 페이지로 리다이렉트하고 기존 사용자는 로그인 성공 페이지로 리다이렉트하도록 구현했습니다.

검증 및 추가 사항

이미 존재하는 회원인지 확인: 소셜 로그인 시 이미 존재하는 회원을 확인하여, 존재하면 메인 페이지로, 없으면 온보딩 페이지로 리다이렉트되도록 구현했습니다.
API 구조화: API 호출을 효율적으로 관리하기 위해 src/api 폴더를 생성하고, auth 관련 API들을 모듈화하여 관리했습니다.

3. API 구조 개선 및 성능 최적화

API 관리 구조화

API 관련 파일들을 구조화하여 src/api 아래에 auth와 endpoints 폴더를 추가하고, 각 API 함수들을 auth.ts에 작성했습니다.

429 Rate Limit 에러 방지

카카오 API 호출 시 너무 많은 요청으로 인해 429 오류가 발생하여, 이를 해결하기 위해 재시도 로직을 추가하고, axios-retry를 사용하여 요청을 자동으로 재시도하도록 했습니다.

const axiosRetry = require('axios-retry');
axiosRetry(axios, { 
    retries: 3,
    retryDelay: (retryCount) => retryCount * 2000,
    retryCondition: (error) => error.response?.status === 429,
});

성능 개선 포인트

API 요청 최적화: 중복된 API 호출을 제거하고, 가능하면 캐싱을 도입할 필요성이 있음.
에러 처리 체계화: 각종 에러에 대해 명확한 에러 코드와 메시지를 제공하고, 프론트엔드에서 적절히 처리할 수 있도록 개선.

4. 향후 계획 및 개선사항

보안 및 코드 품질 개선

토큰 관리 고도화: 토큰 만료 및 갱신 로직을 개선하고, 토큰 회수 메커니즘을 도입하여 보안을 강화합니다.
에러 처리 개선: 상황별로 상세한 에러 코드 및 사용자 친화적인 메시지를 제공하여 에러 발생 시 더 명확한 처리가 가능하도록 합니다.
성능 최적화: 불필요한 API 호출을 최소화하고, 캐싱을 통해 성능을 개선할 예정입니다.

사용자 경험 향상

로딩 상태 표시: 데이터 로딩 중 사용자에게 피드백을 제공하는 로딩 상태 표시를 추가할 계획입니다.
에러 메시지 개선: 에러 발생 시 사용자에게 보다 친절한 메시지를 전달하고, 토스트 메시지 등을 통해 빠르게 피드백을 제공할 수 있도록 개선합니다.

코드 리팩토링 및 테스트 강화

코드 리팩토링: 중복 코드를 제거하고, API 응답 타입을 정의하여 코드의 재사용성을 높입니다.
테스트 강화: 토큰 발급 및 소셜 로그인 통합 테스트를 추가하여 시스템 안정성을 높입니다.

핵심 배운 점

모듈화와 확장성: API와 상태 관리 로직을 모듈화하여 유지보수성이 높아졌습니다.
에러 처리의 중요성: 예외 상황에 대한 처리와 사용자 피드백을 제공하는 것이 중요하다는 점을 배웠습니다.
보안 강화: 토큰 관리와 사용자 데이터 보호의 중요성을 다시 한 번 느꼈습니다.

향후 계획

보안 강화: 토큰 갱신 메커니즘을 구현하고, CSRF 방어 로직을 추가할 예정입니다.
사용자 경험 개선: 로딩 상태 및 에러 메시지 개선을 통해 사용자 경험을 더욱 향상시킬 계획입니다.

Twitter Facebook LinkedIn

EonBox