봉보로봉봉

param이 undefined일 수도 있으니까 타입스크립트가 안된다고 한다... 한 번만 봐주라... 네가 봐주면 안 될까..? 🥲 const param: string | undefined ... const param = useParams().id; ... axios.get('../data/feeds.json').then((res) => { // param에 빨간줄 setFeedData(res.data.feeds[param - 1]); setHeart(res.data.feeds[param - 1].is_liked || false); setSave(res.data.feeds[param - 1].is_marked || false); }); ... The left-hand side of an arithmeti..

ref를 선언하고 넣어줬더니 ref에서 빨간줄이 떴다. 왜 또.... 😞 ... const slideRef = useRef(); ... {imgUrl.map((el) => ( {el.title} ))} ... Type 'MutableRefObject' is not assignable to type 'LegacyRef | undefined'. 이유 useRef의 초기값으로 null을 주지 않아서이므로 초기값을 주면 된다! 제네릭에 타입을 안정해줘도 에러는 사라지지만 작업하다가 빨간 줄이 생길 수도 있으니 타입을 지정하는걸 추천한다. ... const slideRef = useRef(null); // 또는 //const slideRef = useRef(null); ... {imgUrl.map((el) => ..

잘 쓰던 closest를 쓰려고 했는데 안써졌다... const handleDockMenu = (e: React.MouseEvent) => { const target = e.target; const newDockState = [...dockState].map((state) => // closest에 빨간줄 target.closest(`#${state.id}`) ? { id: state.id, selected: true } : { id: state.id, selected: false } ); setDockState(newDockState); }; Property 'closest' does not exist on type 'EventTarget'. 이유 이벤트타겟에 없다고 하니 e.target에 Elemen..

스타일드 컴포넌트에 제네릭으로 Props도 정해줬는데 빨간줄이 떴다... 왜...? // bgColor -> No overload matches this call. const BandAd = ({ text, color }: BandAdProps) => { return {text}; }; ... const Container = styled.div` ... ` No overload matches this call. 이유 이 자리에 undefined가 들어 올 수 도 있는데 내가 string만 정해줘서 그런 것이었다. 메세지를 자세히 보니 중간에 Type 'undefined' is not assignable to type 'string'. 라고 하고 있었다. // 에러 export interface Style..

카카오 로그인을 JS SDK를 사용해서 구현하는데 작동은 잘 하는데 자꾸 빨간줄이 떠있다.... 제발... 그만해....... 타입스크립트.. 화를 멈춰.....🤯🤯🤯🤯🤯🤯🤯🤯🤯 제발!!!!!!!!!! Cannot find name 'Kakao'. 이유 없다고 했으니 타입을 정해주면 된다. .d.ts 파일로 해결하는 방법도 있는 것 같은데 아직은 익숙치 않아서 파일 안에서 선언을 해줬다. const { Kakao } = window as any; 참고

타입을 정해주지 않은 자바스크립트로만 이루어진 npm 패키지를 사용하려고 하면 타입스크립트가 에러를 띄운다. Cannot find module XXX or its corresponding type declarations. 그럴 때 에러를 해결하는 방법이 있다. DefinitelyTyped 여러 사람들이 기여한 npm 패키지들의 소스코드를 보고 타입을 선언해둔 레포이다. https://github.com/DefinitelyTyped/DefinitelyTyped GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions. The repository for high quality Type..

tsconfig는 타입스크립트 파일을 자바스크립트 파일로 컴파일할 때 속성들을 설정해주는 파일이다. 매우 많은 옵션이 있지만 여러 강의에서 소개하는 옵션들과 vite로 생성한 프로젝트에 있는 옵션들에 대해 찾아봤다. 터미널에서 tsc --옵션을 해서 타입스크립트 파일을 컴파일할 수 있다. --help 명령어에 대한 도움말을 볼 수 있다. --init config를 만드는 명령어. 하지만 직접 파일을 생성해도 된다. compilerOptions : Object allowJs : boolean 기본적으로 타입스크립트에서는 js파일을 허용하지 않는다. 보통 학습할 때 js에서 ts로 많이 넘어오는데 js파일을 순차적으로 변경한다고 하면 모든 js파일을 ts파일로 바꿀때까지 배포가 불가능하다. 파일의 개수가 엄..

state를 이용해서 스타일링을 다르게 주고 싶어서 스타일드 컴포넌트에 props를 넘겨 줬다. const BirthdayCake = () => { const [btnSize, setBtnSize] = useState(false); const [candleFlame, setCandleFlame] = useState(true); const [flameUrl, setFlameUrl] = useState('images/flame1.png'); useEffect(() => { if (!candleFlame) { setBtnSize(false); setFlameUrl(''); return; } const btnSizeTime = setInterval(() => { setBtnSize((prev) => !prev)..