진짜 슬프다
1주일 전에 로그인 마무리 과정까지 미리 작성해놨는데 날아감 내 글 내놔 대체 어디 간 거야 ....
황급히 복기해서 써보는 글이다 아주 허접할 듯 하다 🥹
로그인 UI까지 완성했고 이제는 백엔드와의 연결을 남겨둔 상태
첫 번째로 axiosInstance 만들기
import axios from 'axios';
const axiosInstance = axios.create({
baseURL: 'http://실제 백엔드 주소',
headers: {
'Content-Type': 'application/json',
},
});
export default axiosInstance;API 모듈 분리: auth.js
import axiosInstance from './axiosInstance'; // axiosInstance.js 파일에서 axios 인스턴스를 import
export const login = async (loginId, password) => {
try {
const response = await axiosInstance.post('백엔드 경로', {
loginId,
password
});
return response.data; // 서버에서 받은 데이터 반환
} catch (error) {
throw error.response?.data || error; // 에러 처리
}
}
두 번째: LoginForm.jsx 파일에 유효성 검사 코드 추가
if (isEmpty(loginId) || isEmpty(password)) {
alert('회원정보를 모두 입력해주세요.');
return;
}
try {
const result = await login(loginId, password);
console.log('로그인 성공', result);
// 토큰 저장 (예: localStorage)
localStorage.setItem('accessToken', result.accessToken);
localStorage.setItem('refreshToken', result.refreshToken);
// 페이지 이동
window.location.href = '/main';
} catch (err) {
console.error('Error:', err); // 에러 메시지 출력
if (err.response) {
alert(err.response.data || '로그인에 실패했습니다.');
} else {
alert('서버 연결에 실패했습니다.');
}
}까지 완성해놓은 상태로 어제 API 연결을 진행했다.
회원가입을 담당한 프론트와 머지 후 발생한 충돌을 가까스로 정리하고 드디어 백엔드와의 연결을 진행했는데...!
역시나 한 번에 되진 않았다.
가장 큰 문제는 계속해서 "서버 연결에 실패했습니다" 팝업이 뜨는 것
! 콘솔 로그에는 404 에러가 뜨기 시작했다.
밈으로만 쓰던 404 에러를 직접 보게 되다니 웃겼음
이 팝업이 계속해서 떴는데 첫 번째 이유로는
실제 백엔드 API 경로를 작성하지 않아서였다.
백엔드 실제 경로를 작성한 뒤에 해결되는가 싶었더니 동일한 팝업이 뜨기 시작했고, 콘솔 로그를 확인해보니 400 에러가 뜨기 시작했다.
우선 문법 오류라고 하니 맞는지는 모르겠지만 함수에서 보내는 데이터에 문제가 있다고 판단하였고, 백엔드와 이야기를 해보았는데
유저 ID의 변수명이 상이했던 것이다.
- 프론트:
ID- 백:
userID
이를 알게되고 프론트에서 ID를 사용한 변수를 모두 userID로 변경하게 되니.....!!! 해결된 듯 싶었으나 500 에러가 발생했다.
그래서 저는 쉬고 백엔드가 조금 더 고생했어요
화질이 좀 눈물나지만 연결 성공한 거 자랑하고 갈게요
내일 있을 중간 발표 때도 동일한 얘기를 할 것 같지만 개인 기록용으로 여기도 첨부 ✏️
어찌됐든 로그인 연결은 끝났다!
이제 게시판 같은 굵직한 애들이 남아있으니 남은 한 달은 얘네 완성 시키기에 몰두해보아야겠다 💪
느낀 점
이번 과정에서 느낀 점은 간단하다.
개발 전 과정이 참 중요하구나... 사실 로그인 하면서 발생한 이슈들 모두 사전에 정의되고 정리됐다면 굳이? 싶은 이슈들인 것 같다.
API 경로 공유, 변수명 통일 이런 거 다 미리 진행해야 되는 거잖아!!! 하지만.. 아는 게 없는 초보들은 어쩔 수 없다 하핫
어찌됐든 직접 맞으면서 배우는 개발 나쁘지 않다고 생각한다
다음에는 말하고 생각했나요?가 아니라 생각하고 말했나요? 느낌으로 할 수 있겠지!
