오열매의 코딩 공간

interface와 type은 TypeScript에서 타입을 정의하는 두 가지 방법입니다. 둘 다 객체, 함수, 클래스 등을 포함한 모든 타입을 정의할 수 있습니다. 그러나 두 방법은 몇 가지 차이점이 있습니다. interface는 주로 객체의 구조를 정의할 때 사용되고, type은 주로 타입(alias)을 정의할 때 사용됩니다. interface는 확장(extends)이 가능하지만, type은 불가능합니다. interface는 선언 합침(declaration merging)이 가능합니다. 즉, 같은 이름의 인터페이스를 여러 번 선언할 수 있고, TypeScript는 이를 자동으로 합쳐줍니다. type은 합칠 수 없습니다. interface는 구조가 비슷한 다른 인터페이스와 함께 사용될 때 유용합니다. ..

예제를 통해 살펴본다. (예제: React와 Typescript 이용 / react-beautiful-dnd 이용) ... function App() { const [toDos, setToDos] = useRecoilState(toDoState); const onDragEnd = (args) => { // args 의 타입 미지정 에러 console.log(args); }; return ( ... args의 타입을 알아야 한다. 하지만, onDragEnd에 대해 아는 정보가 없다. 아래와 같이 코드를 수정한다. ... function App() { const [toDos, setToDos] = useRecoilState(toDoState); const onDragEnd = (args) => { // ar..

1. Outlet Outlet은 정의한 Router에서 특정 path에 해당하는 경로에 children이 있을 때, 해당 컴포넌트를 렌더링하도록 해주는 컴포넌트이다. 반드시 부모 컴포넌트 내에서 정의해줘야 한다. 그래야 해당 컴포넌트의 자식 컴포넌트와 연결이 가능하기 때문이다. * Router.tsx (일부) { path: "/users/:userId", element: , children: [ { path: "followers", element: , }, ], }, # 앞에 "/" 를 붙이면 절대경로(맨 처음부터 시작), 붙이지 않으면 부모 path에서부터 시작하는 상대경로이다. * User.tsx (일부 ... Followers 컴포넌트의 부모 컴포넌트) See Followers! Link 컴포넌트를..

- 설치: npm install react query - api 관련 함수(fetcher 함수) 들은 따로 파일로 분리하는 것이 좋다. ~ api.ts - fetcher함수는 json data의 Promise 를 return 해야 한다. (정확히 json data는 아니지만) - const { 로딩여부, 데이터 } = useQuery(query key, fetcher 함수) ... 로딩중 또는 로딩이 끝나면 react query가 알려준다. ... 로딩이 끝난 데이터를 담아서 주기도 한다. - React query가 데이터를 캐시에 저장해두기 때문에, 로딩하고 화면을 전환한 뒤에 다시 돌아가도 로딩을 하지 않는다. - React query 에 있는 devtools를 import 해오면, 캐시에 있는 qu..