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 ..

학부시절 처음 React로 프로젝트를 진행할 때 디자인 패턴에 대해 정확하게 인지하지 못하고 있었다. 그 때 당시 잡았던 구조와 작성했던 코드를 다시 보면 딱히 디자인 패턴이라고 할 만한 부분이 없었지만 굳이 정하자면 MVC 패턴에 가까웠던 것 같다... 서버 상태 관리 또한 이루어지지 않고 있던 상태였다. MVC 패턴의 경우 프로젝트의 규모가 커지거나 복잡해질수록 컨트롤러가 비대해진다는 문제가 있었다. 이후 어느정도 여러가지 부분들에 대한 개념이 잡힌 후 Redux, Context API를 사용하여 전역 상태 관리와 서버 상태 관리를 하며, Flux 패턴을 사용하여 당시의 프로젝트들을 진행했다. Action -> Dispathcer -> store -> view 위와 같이 단방향으로 데이터가 흘러갔기에..

비회원 장바구니 기능 구현 중 비동기 처리 관련하여 Issue가 있었다. 기존에는 회원만 장바구니 추가, 장바구니 조회가 가능하여 API 호출 시 Session 정보가 없으면 401을 응답했다. 내가 생각한 비회원 장바구니 기능 로직은 다음과 같다. 1. 로그인이 되어있지 않은 상태에서 장바구니에 상품 추가 시 localStorage를 사용한다. (새로고침 시 데이터를 유지하기 위함) 2. 로그인이 되어있지 않은 상태에서 장바구니 페이지로 접근 시, localStorage에 있는 데이터를 사용한다. (결제 시에는 로그인 필요.) 3. 비회원 장바구니에 상품이 있는 상태에서 로그인 시, localStorage에서 상품 데이터를 가져와 API에 POST해준다. 이후 localStorage 데이터를 clear..

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