Jieunny의 블로그

📌 목표는 타입스크립트에 익숙해지기 js 프로젝트를 바로 바꿀 자신은 없으므로 새 프로젝트 만들어서 붙여넣기 해가면서 하나하나 바꿔보기로 결정 리팩토링이라고 할 수 있나..🥹 ✏️ interface, type 활용해서 데이터 타입 지정하기 ✏️ Props, 매개변수 타입 지정하기 ✏️ styled-components에 타입스크립트 적용하기 ✏️ redux에 타입스크립트 적용하기 깃허브 : https://github.com/jieuny0314/Portfolio-TS 배포 : https://jieuny0314.github.io/Portfolio-TS/ 📌 가장 어려웠던 것 제일 힘들었던 건 useRef 쓸때마다 에러 났던 거.. 타입 설정해주는 거나 props넘겨주는 건 한두번 하다보니 익숙해져서 크게 어렵..

1. useDispatch, useSelector는 따로 hook 만들어서 사용하기 // hook.ts import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"; import { AppDispatch, RootState } from "./store"; export const useAppDispatch: () => AppDispatch = useDispatch; export const useAppSelector: TypedUseSelectorHook = useSelector; 2. createAction 타입 설정하기(set 함수 매개변수 타입설정) const setNaviValue = createAction("naviValu..

📌 useRef로 선언한 객체를 props로 전달했을 때, 받아올 때는 대체 어떤 타입으로 받아야 하는가? 구글링 2시간, 하라는대로 다해봤는데도 답을 못찾았는데 밑에 블로그 참고해서 해결했다🥹 📚 https://velog.io/@dongkyun/TS-useRef%EC%9D%98-%EC%97%AC%EB%9F%AC%EA%B0%80%EC%A7%80-%ED%83%80%EC%9E%85 💡 타입스크립트는 ref가 어떤건지 알지 못하므로 ref객체로 먼저 좁혀줘야햔다. aboutMeRef: RefObject;

1. 타입 만들어서 사용하기 - 타입을 만드는 두 가지 방법 - Type, Interface - 세세하게 쪼개서 만들수록 유용하다 let data = { name = '계피;, category: '햄스터', address: { city : 'gyeonggi-do', detail : 'uijeongbu', zipCode: 1234435, }, favorite : [{name: 'sunflower seeds', category:'seed', price: 1000}], } export type Pet = { name: string; category; string; address: Address; favorite: Favorite[] } export type Address = { city: string; det..

💡 기본 CRUD랑 똑같은데 타입만 선언해주면 된다! 💡 onClick이나 onChange 타입을 모를 땐 마우스 올리면 친절하게 알려준다! 📌 CRUD 함수 📌 App 컴포넌트

📌 프로젝트 생성 npx create-react-app 프로젝트명 --template typescript App.tsx로 파일이 생성되면 성공! 📌 간단한 Counter 만들기 💡 useState를 사용할 때는 알아서 타입을 유추해주기 때문에 생략해도 상관없지만, 상태가 null일 수도 있고 아닐 수도 있을 때는 사용해주는 게 좋다. 📌 Form 형식 구현하기 💡 e 타입을 모를 땐 onChange 같이 props에 마우스를 올리면 알 수 있다. 📌 Redux + TypeScript로 Counter 구현하기 1. redux 설치 npm install redux react-redux @types/react-redux 💡 @types : 라이브러리에 타입스크립트 지원을 할 수 있도록 추가된 써드파티 라이브러..