bkdragon's log

제목에 나온 3가지 라이브러리를 함께 사용하면서 얻은 경험을 공유해보려고 한다. 각각의 라이브러리의 설치법이나 사용법에 대해서는 깊게 설명하지 않을 것을 미리 알린다. Modal창 안에 react-daum-postcode 넣기 import { Modal } from 'antd'; // 모달 컴포넌트 불러오기 import DaumPostcodeEmbed from 'react-daum-postcode'; // 주소 입력 컴포넌트 불러오기 ... const [isModalOpen, setIsModalOpen] = useState(false); // 모달을 열지 판단할 상태값 ... return ( ... {isModalOpen && } ... ) 이때 컴포넌트의 네이밍을 예쁘게 바꾸고 싶으면 아래와 같이 할 ..

타입을 정의할 때 입력에 따라서 다르게 정의할 수 있을까? 당연히 가능하다. 대부분의 프로그래밍 언어처럼 타입스크립트에서도 if문의 역할을 하는 기능이 있다. 바로 Conditional types이다. T extends U ? X : Y T타입이 적어도 U타입이라면 X타입 아니라면 Y타입이 된다. 이 개념을 사용한 타입챌린지 문제를 보자. https://github.com/type-challenges/type-challenges/blob/main/questions/00268-easy-if/README.ko.md GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collecti..

Next.js로 개발하던 중 다음과 같은 에러를 만났다. `Text Content does not match server-rendered HTML' 이 에러를 파헤쳐보려 한다. 공식문서에서는 이 에러를 React Hydration Error라고 정의하고 발생한 이유에 대해 다음과 같이 설명한다. While rendering your application, there was a difference between the React tree that was pre-rendered (SSR/SSG) and the React tree that rendered during the first render in the Browser. The first render is called Hydration which is a..

타입챌린지 Chainable Options 문제를 풀어보자. 단순한 문제 풀이로만 글을 쓰고 싶지 않은데, 이 문제는 답을 이해하는 것도 꽤나 어려웠다. 고민하면서 얻은 노하우와 같이 설명해보겠다. 아래는 문제의 링크이다. https://github.com/type-challenges/type-challenges/blob/main/questions/00012-medium-chainable-options/README.ko.md GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judg..

나는 새로운 장소나 익숙하지 않은 장소를 가기 전에 늘 지도 앱을 켜서 가는 길을 확인하곤 한다. 이렇게 하면 가는데 걸리는 시간을 알 수 있고, 가야할 길을 파악할 수 있다. 그러다 익숙해진 길을 이제 지도 없이도 다니고 새로운 길도 찾아보곤 한다. 내가 가보지 못한 길에 예쁜 풍경이 놓여 있을 수도, 정말 맛있는 가게가 있을 수도 있으니까. 효율에서 질로. 나는 이러한 과정을 내 삶에도 적용하기로 했다. 정보를 파악하고 계획을 짜는 생각하는 시간과 계획에 맞춰 움직이는 실행하는 시간 이 두가지 과정을 분리하여 내 삶의 효율을 높이고, 익숙해진 일에 새로운 방식과 접근을 도입해서 시야를 확장해 나아가 내 삶의 질을 높일 것이다.

리액트 쿼리의 select 옵션을 사용해봅시다! 아래는 공식문서의 설명이다. This option can be used to transform or select a part of the data returned by the query function. "이 옵션은 쿼리 함수에서 반환된 데이터의 일부를 변환하거나 선택하는 데 사용할 수 있습니다." 즉 useQuery 훅이 반환하는 데이터에서 특정 부분만 선택할 수 있도록 해주는 옵션이다. 필요한 데이터만을 선택한다는 점이 graphql과 비슷하다. 실제 적용한 코드를 봐보자. const { data, isLoading } = useQuery("user", fetchUser, { select: data => ({ id: data.id, name: data...

타입챌린지 Deep Readonly를 풀고 든 생각을 정리해보려 한다. 아래는 문제의 링크이다. https://github.com/type-challenges/type-challenges/blob/main/questions/00009-medium-deep-readonly/README.ko.md GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type..

https://velog.io/@teo/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-MV-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94 프론트엔드에서 MV* 아키텍쳐란 무엇인가요? MVC, MVVM, MVI 아키텍쳐가 어쩌고 저쩌고... 소프트웨어를 공부하다 보면 한번쯤은 MV__로 시작되는 아키텍쳐라는 용어를 들어본적이 있을 겁니다. 실제로 프로그래밍을 할 때에는 중요하지 않아보 velog.io 프로젝트를 진행하며 자연스럽게 코드의 구조에 대해 고민하기 시작했고, 위 글을 읽고 많은 인사이트를 얻고 그걸 토대로 내 생..

최근에 프로젝트에 적용할 목적으로 리액트 쿼리에 대해 공부했었다. 리액트 쿼리는 데이터 fetching, caching, sever state 동기화 및 업데이트의 도움을 주는 라이브러리이다. 간단하게 사용법과 주가 되는 개념들만 공부하고 사용하다가 공식문서를 살펴보던 중 알게된 개념에 대해 글을 써보려고 한다. refetchOnMount는 useQuery 훅의 option으로 줄 수 있는 값이다. 공식 문서의 내용을 보면 다음과 같다. refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always") Optional Defaults to true If set to true, the query will refetch on mount i..

what the ? 제목의 문장은 아래의 문제를 풀면서 만나게 되었다. https://github.com/type-challenges/type-challenges/blob/main/questions/00008-medium-readonly-2/README.ko.md GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with ..