사실 프로젝트가 마무리 되었는데, 트러블 슈팅을 할 시간이 없었다. 또한 뭔가 공부를 제대로 할 시간도 없이 바쁘게 페이지와 Component만 만들었던 시간이여가지고,,지금에서라도 제대로 정리를 하고자 한다.
그냥 요새 자주 듣는 노래 썸네일로 하기
그런데 이 페이지에서는 내가 가장 크게 겪었던 TroubleShooting이 아니라, 간단한 TS 경험을 다룰 것 같다. (사실 크게 있지도 않았음,,) 조금 더 공부가 필요했던 것은 나중에 기술 예정.
- axios를 통해 API명세와 함께 조회할 때, form/data와 Application/json을 구분해야한다.
API 명세서를 예시로 이야기를 들어보면 되겠다. 사실 이 1번은 기초적인 상식이긴 하지만, 의식하지 않으면 까먹어버리는 경향이 있게 된다. (실제로도 그랬음, 사진이 필요한 API였는데, 의식하지 않고 있다가, Applicatioin/json으로 받았었음)
-
Form-data
-
Application/json
이렇게 친절한 백엔드분들을 만나면, 알아서 잘 분류해주기 때문에, 놓치는거 없이 꼼꼼히 확인 가능하다.
- TypeScript를 미리미리 작성하는 습관을 들여야한다.
이것은 예시는 없지만 내가 메모해놓았던 것 중 하나이다. 사실 아직까지고 TS와 친하지 않기 때문에 와닿지는 않음. 자주 쓰는건 Interface를 만들어서 코드의 중복을 방지해야하지만, 계속해서 자기 자리에 복붙 중..
2번을 써놨던 이유는, 습관 + 공부 + String이 들어갈 자리에 계속해서 숫자를 넣고 있었기 때문이었다...
- IntrinsicAttributes 오류해결 방법
리액트와 TypeScript에 대한 이해도가 부족할 때, 반복해서 발생했던 오류 중 하나이다. 사실, 작동에는 이상이 없지만, Build시에는 해결해주어야 하는 부분이다.
이 오류는 React 컴포넌트에 props를 전달할 때 TypeScript가 예상하는 타입과 실제 전달되는 props의 타입이 일치하지 않을 때 발생할 수 있다. 나같은 경우에는 props 하는 Component에 아무런 Type을 작성해두지 않았기 때문에 발생했다. 그렇기 때문에 Props로 내린 요소에 대한 Type들은 해당 Component에서 지정해두는 습관이 필요하다.
물론 나는 단순하게, 거의 대부분을 Interface로 처리했다.
이렇게 보니까 그냥, React, TS 1일차들도 겪을 수 있는 정말 사소한 오류지만, 그래도 기억해놓고 기록하면 자산이기에, 기록한다. 다음은 React-Query 를 사용하면서 느꼈던 것을,,, 공부하고 props-Drilling까지 총 3개의 포스팅을 진행하면 될 것이라고 생각한다. 다음에 봐요~
