TIL 20211117 [항해99 63일차]

오류. 프로필 수정페이지에서 스택, 관심사 검색부분 변경없이 작성 했을 경우 작성완료 후 프로필 화면에 데이터가 보이지 않음

• 오류가 난 이유
  스택, 관심사 변경없이 작성했을 경우 서버에 formdata로 담아서 보낼 값이 stackTag, hobbyTag여야 하는데 변경했을때 리덕스에 저장되는 값을 가져온 stack, hobby가 보내져서 아무 변경 없이 작성했을 경우 빈값으로 서버에 보내져서 데이터가 보이지 않았다.

• 해결방안

    // 서버에서 보내준 태그 값
    const stackTag = userInfo.hashTagsString
     ?.split('_')[0]
     ?.split('@')
     .slice(1, 2);
    const hobbyTag = userInfo.hashTagsString
     ?.split('_')[1]
     ?.split('@')
     .slice(1, 4);
   
   // 리덕스에 저장된 태그 값
    const stack = useSelector((state) => state.cards.stack);
    const hobby = useSelector((state) => state.cards.hobby);
  
    ...생략...
    
    const formData = new FormData();
    formData.append('userName', userName);
    
    if (stack.length !== 0 && hobby.length !== 0) {
      formData.append('hashTagsStr', stack + ',' + hobby);
    } else if (stack.length === 0 && hobby.length !== 0) {
      formData.append('hashTagsStr', stackTag + ',' + hobby);
    } else if (stack.length !== 0 && hobby.length === 0) {
      formData.append('hashTagsStr', stack + ',' + hobbyTag);
    } else {
      formData.append('hashTagsStr', stackTag + ',' + hobbyTag);
    }

    formData.append('field', category);
    
    if (fileData) {
      formData.append('profile', fileData);
    }
    console.log('formData', formData);

    dispatch(editCardProfileDB(formData));
    
    localStorage.removeItem('nick');
    localStorage.removeItem('category');
  };

formData에 넣어서 스택과 관심사를 보낼때 stack.length와 hobby.length로 구분해서 조건문을 만들었다. 그래서 length가 0일 경우는 태그 변화가 없는 거기 때문에 원래 값인 서버에서 보내준 태그 값 stackTag, hobbyTag를 formData에 담아서 보냈다. length가 0이 아닐 경우 태그 값에 변화가 있기 때문에 변화된 값은 바로 리덕스에 저장되어 있어 리덕스에 저장된 값 stack과 hobby를 formData에 담아서 보냈다.

---

오늘 정리한 걸 보면 별거 아닌거 같은데 사실 오늘 하루종일 저 부분을 어떻게 처리해야하나 고민을 많이했다... 조건문도 처음에는 stack.length !== 0 하나만 주고 처리했는데 관심사에서 오류가 나서 뒤늦게 hobby.length !== 0도 추가했는데 생각해보니 스택만 변경하고 관심사는 변경없거나 스택이 변경없고 관심사는 변경있거나의 경우의 수도 있어서 if else if문으로 수정해서 처리했다. 이 방법 말고 더 좋은 방법이 있는지도 생각해봐야겠다..😂