전체 글

cva with 타입스크립트?포켓몬 도감 비스무리한 개인과제 프로젝트를 하면서,cva 라이브러리를 사용 중에 타입지정에 매우 애를 먹었습니다.원래 이렇게 쓰는건가 싶습니다...? 더 공부해봐야겠습니다 ㅠㅠ아래의 예는 포켓몬의 타입 18개에만 해당하는 것이라 문제가 덜하지만속성인지 뭔지는 게임의 세대가 변화될때마다 추가되어서 뭐 몇개인지도 모르겠어요. 이것을 다 리터럴 타입으로 지정하자니 너무 힘들고 해서 mapped type 을 사용하긴 했는데되는건지 뭔지 모르겠습니다? 관련 내용을 정리합니다.cva chip 컴포넌트 만들기포켓몬의 18가지 타입에 맞는 Chip 컴포넌트를 만들기 위해 기존의 chipVariants 객체에 포켓몬 타입별 색상을 추가합니다.각각의 타입에 적절한 배경색, 테두리색, 텍스트 색..

이번엔 tanstack query 의 공식문서 중 Advanced Server Rendering 항목을 공부하였습니다.아래 내용을 정리합니다. 이번 포스팅 내용이 app router 에 해당합니다.Advanced Server Rendering이 가이드에서는 스트리밍, 서버 컴포넌트 및 Next.js 앱 라우터와 함께 React 쿼리를 사용하는 모든 것을 배울 수 있습니다. 이 가이드에 앞서 서버 렌더링 및 하이드레이션 가이드를 읽어보시는 것이 좋으며, 이 가이드에서는 SSR과 함께 React Query를 사용하기 위한 기본 사항을 설명하고 성능 및 요청 워터폴과 프리페칭 및 라우터 통합에 대해서도 유용한 배경 지식을 담고 있습니다. 시작하기 전에 SSR 가이드에 설명된 초기데이터 접근 방식은 서버 컴포넌..

이번엔 tanstack query 의 공식문서 중 Server Rendering & Hydration 항목을 공부하였습니다.아래 내용을 정리합니다. 중요! 이번 포스팅 내용은 페이지 라우터 버전입니다. 앱 라우터 버전은 다음 포스팅에 있습니다 Server Rendering & Hydration이 가이드에서는 서버 렌더링에 React 쿼리를 사용하는 방법을 알아봅니다.배경 지식은 프리페칭 및 라우터 통합 가이드를 참조하세요. 그 전에 성능 및 request waterfall 가이드도 확인해 보세요.스트리밍, 서버 컴포넌트 및 새로운 Next.js 앱 라우터와 같은 고급 서버 렌더링 패턴에 대해서는 고급 서버 렌더링 가이드를 참조하세요.서버 렌더링 & React 쿼리그렇다면 서버 렌더링이란 무엇일까요?이 가..

tanstack query 의 공식문서 중 Prefetching & Router Integration 항목을 공부하였습니다.아래 내용을 정리합니다. Prefetching & Router Integration특정 데이터가 필요할 것으로 예상되는 경우 미리 가져오기를 사용하여 캐시를 해당 데이터로 미리 채우면 더 빠른 환경을 제공할 수 있습니다.몇 가지 다른 프리페칭 패턴이 있습니다:이벤트 핸들러에서컴포넌트에서라우터 통합을 통해서버 렌더링 중(라우터 통합의 또 다른 형태)이 가이드에서는 처음 세 가지를 살펴보고, 네 번째는 서버 렌더링 및 수화 가이드와 고급 서버 렌더링 가이드에서 자세히 다룰 것입니다. 프리페칭의 구체적인 용도 중 하나는 요청 워터폴을 피하는 것인데, 이에 대한 자세한 배경과 설명은 성능 ..

Structural TypingTypeScript에서 타입을 축약해도 작동하는 이유는 TypeScript의 구조적 타이핑(structural typing) 덕분입니다. TypeScript는 객체의 실제 형태(shape)를 기반으로 타입을 확인합니다. 즉, 필요한 속성만 지정해도, 해당 속성들이 존재하면 타입이 유효하다고 판단합니다.축약한 타입이 작동하는 이유부분 타입 매칭: TypeScript는 객체가 정의된 타입을 충족하는지 확인할 때, 필요한 속성만 일치하면 타입이 맞다고 판단합니다. 축약된 타입 정의에서도 필요한 속성만 일치하면 타입이 유효하다고 판단합니다.유연한 타입 시스템: TypeScript는 유연하게 타입을 해석하므로, 특정 속성만 필요한 경우 전체 타입을 정의하지 않아도 됩니다.예제 설명축..

튜터님께서 타입을 검사할 때 너무나도 유용한 코드를 알려주셨습니다.이 코드는 미리 정의된 타입 디스크립터와 동적으로 정의된(통신의 결과 등)객체의 타입을 검증하려는 목적을 가지고 있습니다. 타입스크립트에 대한 이해가 더욱 깊어진 것 같습니다!!전체 코드, 주석 참고!// 다른 형태를 가진 객체를 아래의 로직을 활용해 검사해 보려면,// 1) 이 인터페이스를 검사할 객체와 같게 바꾸고interface MyObject { value: number;}type TypeDescriptor = { [P in keyof T]: string;};function checkType(obj: any, typeDescriptor: TypeDescriptor): boolean { for (const key in..

createObjectUrl파일을 다룰때, 이미지 파일등의 미리보기를 띄우거나 할 경우에 유용하게 사용할 수 있다고 합니다!이 간단한걸 몰라서 막 base64로 바꾸고 했었습니다 ㅠ.ㅜ사용법은 매우 간단합니다. 그냥 URL.createObjectUrl(file) 입니다.. function handleFileInput(event) { const file = event.target.files[0]; const url = URL.createObjectURL(file); // URL을 사용하여 파일을 미리 보기 document.getElementById('preview').src = url; } // HTML // // 간단하지만 몰랐던 것! 정리..

이번 개인과제에서는 250개의 배열을 리턴하는 api 를 사용해야 했습니다.그런데 이것을 한번에 화면에 렌더링 하자니 무언가 마음에 들지 않아서react-intersection-observer 를 사용해보고 싶어졌습니다.1 ) 전체 배열을 부분 배열화 하여 2차원 배열 생성이를 위해서 250 길이의 배열을 20개씩 나누기로 했습니다.그래서 이를 수행하는 간단한 util 함수를 작성하였습니다.// util 함수function makeChunkArray(array: T[], chunkSize: number): T[][] { const chunks = []; for (let i = 0; i { const fetchCountries: FetchCountries = async () => { ..

네이버 지도 관련 마지막입니다.네이버 지도 api 에서 정보창을 만들 때 기본적으로 문자열만 받는데,이부분을 리액트 컴포넌트로 할 수 없을까 고민하다가 나온 결론입니다.React.createRoot, React.render 조합function SetInfoWindowContent( type, searchedValue, htmlAddresses, infoWindow, place = null, navigate = null, marker = null, user = null, contracts = []) { // 임시 컨테이너 생성 const container = document.createElement('div'); container.style...

리팩토링은 미래의 나에게.. ㅋㅋ참고용으로만 올려야겠습니다.네이버지도 with React - Step by Step 2initGeocoder.jsfunction initGeocoder( infoWindow, map, searchInputRef, searchButtonRef, marker, setSelectedGeoData, setSelectButtonDom, user) {map.addListener('click', (e) => { searchCoordinateToAddress( infoWindow, map, e.coord, setSelectButtonDom, setSelectedGeoDa..