전체 글

이번엔 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..

팀플 주간이 끝났습니다!팀원분들의 노력 덕분에 무리없이 프로젝트를 완료 할 수 있었습니다. 아웃소싱 프로젝트(aka 외부 api 사용 프로젝트)에서 저희는 네이버 지도 api 를 활용하여운동 모임 사이트를 기획했고, 5일이라는 짧은 시간동안 요구사항을 대부분 구현했습니다.오늘은 그 중 제가 담당했던 네이버 지도 api 에 관한 사항을 정리하려고 합니다.네이버지도 with React - Step by Step 1네이버 지도 api script 동적 로드네이버 지도 api 를 이용하기 위해서는 https://openapi.map.naver.com/openapi/v3/maps.js 라는 스크립트를 로드해야 합니다index.html 에서 script 태그로 로드해도 되지만, 좀 더 동적인 방식을 고려하였습니다사..