Trouble Shooting
-
[JavaScript] Error: Multipart: Boundary not found(feat. Fetch API)Trouble Shooting 2023. 7. 1. 12:16
1. 에러 발생 이미지 파일 전송을 위해 fetch() 메서드를 활용하여 다음의 코드를 작성했습니다. const formData = new FormData(); formData.append('file', imageState.imageFile); formData.append('name', imageState.imageName); await fetch('/api/image', { method: 'POST', body: formData, headers: { 'Content-type': 'multipart/form-data', }, }).then((res) => res.json()); 코드 작성 후 이미지 파일 전송 테스트를 하던 중 아래와 같은 에러가 발생했습니다. Error: Multipart: Bounda..
-
[TypeScript] Type 'string[] | undefined' must have a '[Symbol.iterator]()' method that returns an iterator.Trouble Shooting 2023. 4. 24. 23:14
1. 에러 발생 Query string을 핸들링하기 위해 spread 연산자를 활용하여 함수를 작성하던 중 아래와 같은 에러가 발생했습니다. 에러 내용 Type 'string[] | undefined' must have a '[Symbol.iterator]()' method that returns an iterator. // 에러 발생 코드 const handleFilterSelected = (type: string, id: string) => { const anotherType = type === 'note' ? 'brand' : 'note'; const prevFilterList = searchParams.get(type)?.split('|'); const newFilterList = prevFilt..
-
[TypeScript] 'error' is of type 'unknown'.(TypeScript 에러 처리하기)Trouble Shooting 2023. 1. 11. 22:46
1. 에러 발생 Axios 라이브러리를 이용하여 이메일 중복 검사를 위한 API 요청 함수의 에러 처리를 위한 코드를 작성하던 중 아래와 같은 에러가 발생했습니다. 에러 내용 'error' is of type 'unknown'. // 에러 발생 코드 const emailAuthentication = async (email: string) => { try { return await axiosInstance.post('/api/v1/users/exists-email', { email, }); } catch (error) { console.log(error.response.status); // 에러 발생 } }; 이는 TypeScript의 catch절의 error 변수의 type이 unknown type으로 ..
-
[TypeScript] Element implicitly has an 'any' type because expression of type 'string' can't be used to index type "...".Trouble Shooting 2022. 12. 12. 21:55
1. 에러 발생 카드 컴포넌트에 조건에 맞는 이미지를 적용하기 위해 조건에 맞는 이미지의 key 값(string 타입)을 return하는 함수를 생성했습니다. 함수를 통해 얻은 key 값으로 이미지의 경로가 저장되어 있는 CardsImg 객체에 대괄호 표기법으로 접근하여 태그의 src 속성에 적용하려 하였으나, 다음과 같은 에러가 발생했습니다. 에러 내용 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type "...". No index signature with a parameter of type 'string' was found on type "...". ts(7053) // ..
-
[React] Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?Trouble Shooting 2022. 10. 6. 10:43
1. 에러 발생 회원가입, 로그인 기능을 구현하기 위해 input 태그에 value를 입력받고, 필요한 경우 입력된 value에 대해 유효성 검사를 실시하고, 유효하지 않은 value가 입력되었을 시 에러 메시지를 출력하는 과정이 필요했습니다. 기능 구현 방법에 대해 고민하던 중 비제어 컴포넌트 방식으로 구현되어 있어 사용자의 입력에 따른 렌더링 횟수를 줄일 수 있는 React Hook Form을 사용하기로 결정했습니다. 각 페이지에 여러개의 input 태그가 존재했고, 구현해야 하는 각각의 input 태그의 형태와 기능이 유사했기 때문에 이를 재사용 컴포넌트로 만들고자 했습니다. // Input.tsx; Warning 메시지 발생 코드 const Input = ({ label, type = 'text'..
-
[TypeScript] No overload matches this call.Trouble Shooting 2022. 9. 23. 00:37
1. 에러 발생 프로젝트를 진행하며 styled-components로 component를 생성하던 중 임의의 Props를 만들어 전달하려 하자 "No overload matches this call." 에러가 발생했습니다. // 에러 발생 코드 interface InputProps extends InputHTMLAttributes { text: string; width?: string; height?: string; } const Input = ({ text, ...props }: InputProps) => { return ; }; export default Input; const InputBox = styled.input` width: ${(props) => props.width ?? "500px"};..