2차 프로젝트 - 트러블 슈팅 및 회고

 

기간은 길었지만 짧다고 느낀 2차 프로젝트가 오늘 제출을하며 끝이났다...
초반엔 시간이 많다고 생각했지만,
제출 날짜가 다가올수록 마음은 급해지고, 원하는 결과물은 나오지않았다
하지만 이대로 제출하기에는 1차때와 다르지않을거 같아서(로그인시 헤더부분을 변경하지 못하고 그대로 제출해버린것) 요번엔 잠을 줄이면서까지 끝까지 붙잡고 시도해봤다...
결국엔 계획하던 기능은 구현완료했다!!

그래서 나를 괴롭혔던 에러에대해 트러블 슈팅을 해보고자 한다.

 

//merberList.tsx
User
UserMembersList.tsx:24 
        
        
       GET http://localhost:8080/api/v1/api/v1/admin/members 404 (Not Found)
dispatchXhrRequest @ xhr.js:258
xhr @ xhr.js:49
dispatchRequest @ dispatchRequest.js:51
request @ Axios.js:146
wrap @ bind.js:5
fetchMembers @ UserMembersList.tsx:24
await in fetchMembers (async)
(anonymous) @ UserMembersList.tsx:37
commitHookEffectListMount @ react-dom.development.js:23150
invokePassiveEffectMountInDEV @ react-dom.development.js:25154
invokeEffectsInDev @ react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330
flushPassiveEffectsImpl @ react-dom.development.js:27056
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
UserMembersList.tsx:33 Error fetching members: AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

1차때도 코치님께서 코딩을하고나서 기능이 작동을안하면 에러,콘솔로그를 모두 해결해보라고 하셨다.
역시나 회원관리 정보들이 불러와지지 않아서 봤더니 이러한 오류가 발생했다.
처음엔  404를 보고 백에서부터 뭔가 문제가 생긴거같다고 생각은했지만, 감이 오지않았다.
계속 저 에러 메시지를 보면서 깨닳았다.
GET - PATH 주소가 잘못되었다는것을..

분명 코드를 작성할때는

PATH : api/v1/admin/members

이런식으로 작성해두었는데, 에러 메시지를 보니 저런식으로 두번 적혀있었다.
그 이유는 바로

const UserMembersList: React.FC = () => {
  const [members, setMembers] = useState<MemberData[]>([]);

  const fetchMembers = async () => {
    try {
      const config = await frontEndAuthMiddleware({
        method: "get",
        url: "/api/v1/admin/members",
      });

      const response = await axiosInstance.request(config);
      if (response.data && Array.isArray(response.data.data)) {
        setMembers(response.data.data);
      }
    } catch (error) {
      console.error('Error fetching members:', error);
    }
  };

  const handleDelete = async (memberId: string) => {
    try {
      const config = await frontEndAuthMiddleware({
        method: "post",
        url: `/admin/member/${memberId}`, // URL 수정
      });

      await axiosInstance.request(config);
      // 삭제후 회원목록 다시불러오기
      await fetchMembers();
    } catch (error) {
      console.error('Error deleting member:', error);
    }
  };

 

위의 코드가 내가 실제로 유저 목록을 불러오는 코드인데,
저기서 5번째줄 frontEndAuthMiddleware라는 컴포넌트가 문제였다.

실제로 마이페이지를 작성중인 팀원에게 재사용 컴포넌트를 건네 받아서 사용한건데 (어떠한 기능인지 설명은 받았지만 실제로 파일을 열어서 어떤 코드인지는 확인하지못함)
저기서 문제가 발생한거다.

frontEndAuthMiddleware를 뜯어보니

 

import axios, { AxiosRequestConfig } from 'axios';

const getJwtFromCookie = (): string | null => {
    const cookieArray = document.cookie.split(";")
    for (let cookie of cookieArray) {
        const [key, value] = cookie.split("=").map((c) => c.trim())
        if (key === "jwt") {
            return value
        }
    }
    return null
}

export const frontEndAuthMiddleware = async (config: AxiosRequestConfig) => {
  const jwt = getJwtFromCookie();
  
  if (jwt) {
    config.headers = {
      ...config.headers,
      'Authorization': `Bearer ${jwt}`
    };
  }

  return config;
};

그렇다.
애초에 저 컴포넌트에서 http://localhost:8080/api/v1 컴포넌트화해서 작성해둔것이였다(지금 코드에선 보이지않는다)

그래서 나는 그걸모른채 http://localhost:8080/api/v1 + /api/v1/admin/members 이렇게 이중으로 입력을 해버린 셈이 된것이다. 이걸 해결하니 members 목록들이 불러와졌다.

(해결)

 

++이것 외 에도 코드도 잘 작성했고 오류가없는데 404가 오류가 났던적이있다.
백서버를 구동할때, MongoDB ParshingError 가 발생했던적이있는데,

이것은 팀원과의 불통이 문제였다.
.env파일을 직접 만들고 MongoDB =Mongodb+srv://WebProjectDb 블라블라 우리의 mongoDB url을 적어주었더니 정상적으로 connected가 되면서 문제가 해결 됬던적이있다.

 

(팀원 과의 소통이 중요하다는것을 다시금 느꼈다. 이걸모른채로 혼자 해결해보겠다고 몇시간을 지체한 경험을 잊을수없다.
협업에서 중요한것은 소 통!)

 

 

유저관리 페이지를 만들고나니 욕심이생겼다.
CRUD의 기본인 삭제기능을 꼭 넣어보고싶었다.

const handleDelete = async (memberId: string) => {
      try {
        const config = await frontEndAuthMiddleware({
          method: "post",
          url: `/admin/member/${memberId}`, // URL 수정
        });
  
        await axiosInstance.request(config);
        // 삭제후 회원목록 다시불러오기
        await fetchMembers();
      } catch (error) {
        console.error('Error deleting member:', error);
      }
    };
    useEffect(() => {
    fetchMembers();
  }, []);

 

 

이런식으로 코드를 짰는데 
또 에러가발생했다...

UserMembersList.tsx:39 
 POST http://localhost:8080/api/v1/admin/member/658c5dc… 404 (Not Found)
handleDelete	@	UserMembersList.tsx:39
await in handleDelete (async)		
onClick	@	UserMembersList.tsx:72
Show 20 more frames
UserMembersList.tsx:43 Error deleting member: 
AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code
: 
"ERR_BAD_REQUEST"
config
: 
{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message
: 
"Request failed with status code 404"
name
: 
"AxiosError"
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
response
: 
{data: '<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta char…r/658c5dc9542e6b9d6c2ad336</pre>\n</body>\n</html>\n', status: 404, statusText: 'Not Found', headers: AxiosHeaders, config: {…}, …}
stack
: 
"AxiosError: Request failed with status code 404\n    at settle (http://localhost:3000/static/js/bundle.js:130914:12)\n    at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:129596:66)"
[[Prototype]]
: 
Error

이 에러는 정말 인터넷에 검색을 많이해보고, 혼자 해결하려고 많은 시간을 부었다...
하지만 해결은 안되고 자꾸 기능이 먹었다 안먹었다의 반복이였다.(삭제 기능은 먹지않았다.)

포기하려던 찰나에 팀원들이 음성채팅방에 있길래 도움을 요청하러 갔다...
백엔드 에서 아직 delete기능은 구현하지않았다는 정보를 입수했다....

또다시 협업에있어서는 소통이 무조건 중요하다는것을 알았다!!!!!!
자신감이 없어 혼자 해결해보이겠다는 나의 생각때문에 시간을 버린것이다!

 

오늘의 교훈 : 팀원과 무조건 소통을 하자!!!!!!!!

 

 

 

 

 

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

 

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

 

 #엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript