Chunho’s DevLife

Orval 라이브러리는 Restful Codegen 라이브러리로, React app, React-query, Svelte-query, Vue-query, React app with swr, nx fastify react, angular app 등 다양한 라이브러리에서 endPoint별 Codegen 기능을 제공한다. 나는 React-Query 기반 Code generator가 필요해서 열심히 구글링을 하던 중 가장 강력하고 안정적으로 보이는 Orval이라는 라이브러리를 발견했다. https://orval.dev/ orval orval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI ..

NextJS & Typescript 환경에서 애플 로그인을 연결하며, 몇 가지 문제와 마주했다. 우선 첫 번째로 react-apple-login 라이브러리를 사용했는데, 연결은 잘 됐지만 의존성 문제가 발생하여 배포가 안 되는 이슈가 있었다. 따라서 다른 라이브러리를 찾아봤다. 두 번째로 react-apple-signin-auth라는 라이브러리가 있어 사용해봤다. 해당 라이브러리는 타입스크립트를 사용하는 부분에서 문제가 있어 사용하지 못했다.  결국 라이브러리를 사용하지 않고 애플 공식 홈페이지에 있는 개발자 문서를 보며 react에 맞춰 적용하기로 결정했다.. Typescript를 사용하며, 기존에 없는 window객체의 값에 접근하려 했을 때 Window & typeof globalThis 에러가..

useQeury & Typescript 사용 시request가 반환하는 Promise의 타입을 정확히 명시해 주어도 useQuery Hook이 반환하는 데이터 타입에 undefined가 포함되어있는 이슈가 있다면 isSuccess를 활용하여 해결할 수 있습니다. React-Query의 useQuery Hook을 Typescript와 함께 사용할 때 useQuery Hook이 반환하는 데이터 타입에 기존에 정의한 타입과 함께 undefined가 포함되어있는 이슈가 있었다. 받아온 데이터를 하위 컴포넌트의 props로 전달해주는 과정에서 전달하는 데이터의 타입이 undefined 일 수 있고, 하위 컴포넌트에서 선언한 받아오는 props의 타입과 일치하지 않아 에러가 발생했다. 데이터는 비동기적으로 내려오고..

로그인 기능을 구현하기 위해 다음과 같은 로직을 적용했다. 1. Id, Password를 입력받고 로그인 시 state에 있는 Id와 Password를 첨부하여 API에 POST 요청을 보낸다. 2. accessToken, refreshToken을 받아온다. 3. status가 200이면 Redux에 accessToken을 dispatch하고 localStorage에 refreshToken을 넣은 후 메인 페이지로 이동한다. 4. 만료 시간 1분 전에 localStorage에 저장되어 있는 refreshToken을 사용하여 accessToken을 refresh해준 뒤 dispatch한다. 5. 메인 페이지 컴포넌트가 랜더링 됐을 때 useEffect 또는Componentdidmount 함수를 사용하여 R..

페이지를 이동할 때 props를 가지고 이동하고 싶을 때가 있다. 이 때 react-router-dom v6의 Nevigate를 사용하면 된다. const [clicked, setClicked] = useState(false) const state = {user: 'lee', error: null} const handleClicked = () => { setClicked(true) } return ( { handleClicked() }} > {' '} 블로그 {clicked && } ) } export default BlogSection 위와 같이 state 안에 props를 담아서 라우팅을 할 수 있다. const {state} = useLocation() 이후 해당 페이지에서 useLocation을 ..

const Container = styled.div` @media screen and (min-width: 768px) { width: 100%; height: 1801.23px; overflow-y: auto; overflow-x: hidden; } @media screen and (max-width: 767px) { } ` 위와 같이 css를 작성해주면 해당 영역보다 내용이 길어질 경우 계속해서 스크롤을 줄 수 있다.

The Hook import { useState } from 'react' // See: https://usehooks-ts.com/react-hook/use-event-listener import { useEventListener } from '../useEventListener' // See: https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect' interface WindowSize { width: number height: number } function useWindowSize(): WindowSize { c..

{aboutContents.map((content, index) => ( ))} js를 사용할때와 마찬가지로 위와 같이 map을 사용해서 props로 객체를 전달하는 도중 IntrinsicAttributes error 가 발생하였다. props를 전달받는 하위 컴포넌트는 function AboutPart(item: AboutContentType) { const {id, title, content} = item​ 위와 같은 방식으로 item의 타입을 지정해줬다. 객체 자체를 props로 전달받을 때는 function AboutPart({item}: {item: AboutContentType}) { const {id, title, content} = item 위와 같이 타입을 지정하여 해결할 수 있었다.