개발하는 너구리

문제점 axios로 통신하는 try{} catch(error) {} 구문에서 error의 타입을 지정하는 법 시도한점 error의 타입은 어떠한 타입이 들어올지 특정할수없기에, 찾아보니 많이들 any 타입을 설정하는걸 보았다. 그러나, 나는 axios로 통신하는 코드에서의 error이므로 AxiosError라는 객체라는 것을 알았고를 그것을 가져와 error의 타입으로 지정했다. import { AxiosError } from 'axios'; catch (error) { const axiosError = error as AxiosError; if (axiosError?.response?.data === '존재하지 않는 사용자입니다.') { toast.error('방송을 먼저 생성해주세요'); } }

문제점 프론트엔드 백엔드 서버간 api통신 시 url주소에 한글이 포함되어있을경우 시도한점 & 해결 리액트에서 한글 인코딩은 기본적으로 처리되며 별도의 설정이 필요하지 않는다. 리액트는 JS기반으로 동작하며 JS는 문자열을 유니코드로 처리하기때문이다. 따라서 한글을 포함한 모든 문자는 자동으로 인코딩되어 처리된다. 따라서 프론트엔드에서 백엔드 서버로 요청하는 URL에 한글이 포함되어 있다면 별도의 인코딩 처리는 필요하지않다. 구글링을 통해서 새롭게 얻게된 사실이다... 기존에는 URL에 한글이 포함되어있었다면 포함된 한글을 encodeURIComponent()메소드를 사용해 인코딩 해 백엔드 서버로 전송해왔고, 백엔드 서버에서 인코딩된 한글을 제대로 디코딩하는 과정이 있다면 그동안은 올바르게 서버통신이 ..

문제점 타입스크립트로 Portal을 생성하는 컴포넌트를 작성할때, children으로 들어오는 요소의 타입을 지정할때 어떠한 타입으로 지정해야하는지를 몰랐다. children으로 컴포넌트가 들어오게 되는데, 컴포넌트의 타입을 어떠한 변수를 지정해야하는지 검색해보기로 했다. 시도한점 import { createPortal } from 'react-dom'; type ModalPortalProps = { children: React.ReactNode; }; const ModalPortal = ({children}: ModalPortalProps): React.ReactPortal | null => { const modalRoot = document.getElementById('modal-root'); if ..

문제점 기존 JS으로만 작성한 리액트 프로젝트에 타입스크립트를 적용시켰다. styled-components 라이브러리가 적용되어 있었는데, TS를 적용시키니 에러가 발생해버렸다. package.json파일에 분명히 스타일컴포넌트가 작성되어있고 모듈도 설치되어있는데.. 에러가 왜 발생할까 이해를 할수 없었다. 시도한점 구글링 후 알게 된 사실 비록 해당 라이브러리는 설치해줬지만 해당 라이브러리의 타입을 TS가 알지 못하기 때문에 발생한 에러라고 한다. 그래서 TS에게 라이브러리에서 사용된 타입들을 '@types'라는 키워드를 덧붙여 다시한번 설치해줘야한다. npm install styled-components npm install @types/styled-components 위 명령어로 해당패키지에 대한 ..