sohyeon kim

💡 Record : 객체의 key 와 value 값의 타입을 따로 지정하고 싶을 때 활용한다.interface PageInfo { title: string;}type Page = 'home' | 'about' | 'contact';const x: Record = { // key 에 Page 가, value 에 PageInfo 타입이 적용됐다. home = { title: 'home' }, about = { title: 'about' }, contact = { title: 'contact' },} 💡 Extract : Exclude 와 반대로 포함되어 있는 타입을 반환한다.type T0 = Extract;// 'a'type T1 = Extract void), Function>;// () => v..

💡 인터페이스와 타입 별칭의 차이점을 알아보자. 확장성 : interface 는 확장이 가능하지만, type 은 그렇지 않다.동일한 타입에 새로운 속성을 추가해야 하는 경우 인터페이스를 사용하자.반대로 의도치 않은 확장을 막기 위해 type 을 사용하는 경우도 있다.interface Hello{ name: string;}interface Hello{ age: number;} // 이제 Hello 는 name 과 age 를 둘 다 포함type Hello2{ name: stirng;}type Hello2{ age: number;} // 불가능  복잡한 타입 표현 : type은 유니언 및 인터섹션 타입을 정의할 수 있지만, interface는 불가하다.인터페이스는 주로 객체 형태의 타입을 정의하는데에..

💡 events 데이터 타입 에러 해결 supabase 에서 가져온 투두 리스트를 캘린더에 넣었더니 이런 에러가 떴다. fakeData 로는 안뜨더니?! // fakeData { title: '아침 먹기', start: '2024-03-17', end: '2024-03-17', }, //supabaseData { contents: string | null; created_at: string; end: string; file: string | null; likeCount: number | null; liked: boolean | null; nickname: string | null; start: string; title: string; todoId: string; }; 찾아보니 fullcalendar 에서..

💡 어김없이 나타나는 타입오류.. 아래글과 타입 이름만 다른.. database.types.ts title: string | null; start: string | null; end: string | null; supabase 에서 각 column 설정을 Allow Nullable 로 해두고, (초기값이었다.) 타입을 가져왔었는데 아래 같은 오류가 떴다. todos 데이터베이스여서 title, start, end 값은 꼭 필요하니 supabase 에서 null 허용 옵션은 해제하고 ts 파일에서 타입들도 string 으로 변경했다. 🙂

😦 Next.js 투두리스트 과제를 하다 생긴 에러.. 고쳐보자! 삭제 버튼 이벤트를 수정하다 타입 에러가 떴다. 똑같이 타입을 준 토글 이벤트는 잘 되는데 대체 왜?! 하다가 블로그를 찾아보니 어딘가에서 타입을 잘못 주었을 것이라고.. 해서 다시 코드를 보니! useMutation 에 타입을 안줘서였다.. 그럼 안 준 곳에 에러 표시해주지 😔 const deleteTodoMutation = useMutation({ mutationFn: async (id: string) => { 뮤테이션에도 타입을 지정해주니 에러가 사라졌다! 🔗 https://velog.io/@qhflrnfl4324/string-%ED%98%95%EC%8B%9D%EC%9D%98-%EC%9D%B8%EC%88%98%EB%8A%94-...-..

💡 타입 할당이 안된다는 error.. 해결.. deleteMutation.mutate(todo.id)} > delete 왜 그런가 보니.. id 타입을 옵셔널로 주고 있어서였다. const newTodo = { title, content, isDone: false, }; json 서버를 쓰고 있어서 투두를 생성할 때 id 값을 안써도 되니까 요렇게 썼었는데..! 🫠 그래서 id: string; 으로 바꿔주고, newTodo 에 id 값도 넣어줬다! npm install react-uuid yarn add react-uuid const newTodo = { id: uuid(), title, content, isDone: false, }; 🥲 메소드 타입 에러 TodoList.tsx const ongoin..

💡 Props 의 타입들을 정해보자. button.tsx import { ReactNode } from 'react'; import styles from './Button.module.css'; interface Props { className?: string; id?: string; children?: ReactNode; onClick: any; } export default function Button({ className = '', id, children, onClick, }: Props) { const classNames = `${styles.button} ${className}`; return ( {children} ); } ❗️ children: ReactNode ❗️ App.tsx input..

💡 js 에서 ts 로 변경할 때, html DOM 요소들의 타입을 설정하는 방법에 대해 알아보자. ✳️ DOM 노드 타입 설정 script.js const usernameInput = document.getElementById('username'); const submitButton = document.getElementById('submit'); usernameInput.focus(); submitButton.addEventListener('click', handleClick); function handleClick(e) { e.preventDefault(); const message = `${usernameInput.value}님 반갑습니다.`; alert(message); } script.ts t..

💡 타입스크립트로 CRA 폴더를 만들었다면 폴더 위치에서 npx create-react-app . --template typescript 폴더까지 새로 만든다면 npx create-react-app 원하는_폴더_이름 --template typescript 💡 자바스크립트로 만든 앱 TS 로 마이그레이션 한 시스템에서 다른 시스템으로 옮기는걸 Migration 이라고 한다! TS 로 앱을 생성하고 src 폴더 내에 아래 파일들을 제외하고 다 지운다! src/react-app-env.d.ts src/reportWebVitals.ts src/setupTests.ts 그리고 기존 JS 앱에서 src 내 파일들을 카피해온다. 마지막으로 확장자를 바꿔주자! jsx ➡️ tsx, js ➡️ ts

💡 typescript + react + vite 앱 만들어보자! ✚ 또 다른 명령어.. 새 폴더를 만들고 그 위치에서 npx create-vite-app . --template react-ts 폴더까지 새로 만든다면 npx create-vite-app 원하는_폴더_이름 --template react-ts npm install ✚ 원래는 이렇게 했었지만! npm create vite@latest yarn create vite npm 6.x npm create vite@latest [프로젝트 명] --template react-ts npm 7+, extra double-dash is needed: npm create vite@latest [프로젝트 명] --template react-ts 버전별로 입력하면..