React Query의 Prefetch란?

특정 데이터가 필요하다는 것을 알고 있는 경우 또는 예측할 수 있는 경우 prefetching를 통해, 미리 해당 데이터로 캐시를 채워 더 빠른 유저 경험을 제공할 수 있습니다. 몇 가지 `Prefetch` 패턴이 존재합니다. 이벤트 핸들러에서 컴포넌트에서 Router Integration을 통해서 서버 렌더링 동안 이번 글에서는 4번은 제외하고 설명을 하도록 하겠습니다! 너무 길어질 수도 있고, 공식문서에서도 3번까지도 설명하고 있기 때문입니다 `Prefetching`을 왜 쓸까요? 바로 Request Waterfall을 방지하기 위함, 더 빨리 데이터 요청을 하기 위함입니다. `prefetchQuery / prefetchInfiniteQuery` 메서드 별도의 구성없이, `staleTime`은 `qu..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 2. 19.
• textsms

졸업 작품 프로젝트 주제 선정까지의 고뇌

고민의 연속 졸업 작품을 뭐할지에 대해 계속된 고민을 했었습니다. 저는 애초에 이번 졸업작품에 대해서는 팀을 꾸릴 생각이 전혀 없었습니다. 여러 이유가 있지만 팀으로 꾸리다보면 제가 하고 싶은 주제를 하는데 있어서 제약사항이 많기 때문입니다. 그리고 학생들끼리 모여서 프로젝트를 하다보면 배우는 점이 거의 없었습니다. 이러한 경험에 의거해서 여럿이서 하는 프로젝트에 대한 경험은 잘하는 분들과 하고 싶었습니다. (물론 잘하시는 분들이 절 원하진 않겠지만요...😢) 몇 일 동안 조금씩 고민을 해보고, 교수님과 이야기를 나눈 결과, 3가지 정도로 압축되어졌었습니다. R3F를 사용하여 웹 상에서 3D를 구현하는 서비스 최적화와 관련된 지표들을 분석 좋은 아이디어를 웹 서비스로 구현 첫번째는 제가 예전부터 봐두던 ..

• format_list_bulleted 프로젝트들/졸업작품
• · 2024. 2. 17.
• textsms

JS에서의 함수형 프로그래밍 초석 다지기

자바스크립트에서의 함수 이해하기 자바스크립트를 다루면서 객체지향적인 코드를 몇 번 짜봤으나 함수형 프로그래밍에 대해서는 깊이 생각하지 않았었던 것 같습니다. 때문에, 이를 공부하면서 생겼던 의문들을 해결하고자 글을 쓰게 되었습니다. 프로그래밍에서 평가는 코드가 계산(Evaluation)되어 값을 만드는 것입니다. JS를 사용해본 개발자라면 "JS에서의 함수는 일급 객체다"라는 말을 많이들 들어봤을 겁니다. 그렇다면 일급이란 무엇을 의미하는 걸까요? 일급이란 값으로 다룰 수 있고, 변수에 담을 수 있고, 함수의 인자로 사용될 수 있고, 함수의 결과로 사용될 수 있는 것을 의미합니다. 각각에 대한 예시를 살펴보도록 합시다. // 함수를 변수에 담을 수 있습니다. const add5 = a => a + 5; ..

• format_list_bulleted 프로그래밍 방법론/함수형 프로그래밍
• · 2024. 2. 15.
• textsms

쏙쏙 들어오는 함수형 코딩 Chapter 03

액션과 계산, 데이터의 차이를 알기 장보기 과정을 통해서 액션과 계산, 데이터를 구분지어 봅시다. 일단 장보기 과정은 다음과 같이 리스트화할 수 있습니다. 냉장고 확인하기 운전해서 상점으로 가기 필요한 것 구입하기 운전해서 집으로 오기 하나씩 곱씹어보며 구분지어 보도록 하겠습니다. 냉장고 확인하기는 시점에 따라 냉장고를 확인하는 시점에 따라 냉장고에 있는 제품이 다르기 때문에 액션입니다. 이때, 냉장고에 있는 제품들은 데이터라고 할 수 있습니다. 운전해서 상점으로 가기는 몇 번 운전해서 상점으로 갔는지에 따라 소비된 연료량이 다릅니다. 즉, 외부에 영향을 주는 행동이므로 액션입니다. 이 때, 상점 위치나 가는 경로 자체는 데이터라고 볼 수 있습니다. 구입하는 것도 액션입니다. 브로콜리를 사려고 했는데, ..

• format_list_bulleted 프로그래밍 방법론/함수형 프로그래밍
• · 2024. 2. 15.
• textsms

쏙쏙 들어오는 함수형 코딩 Chapter 01 & 02 요약

Chapter 01 함수형 프로그래밍(FP)이란? 1. 수학 함수를 사용하고 부수 효과(Side effect)를 피하는 것이 특징인 프로그래밍 패러다임 2. 부수 효과없이 순수 함수만 사용하는 프로그래밍 스타일 부수 효과 함수가 리턴값 이외에 하는 모든 일을 말합니다. 대부분의 함수형 프로그래머는 부수효과를 가능한 사용하지 않으려고 합니다. 하지만 부수효과는 소프트웨어를 사용하는 근본적인 이유이므로 피해야만 하는 것은 아니죠. 프론트엔드 개발자가 자주 사용하는 `console.log()` 또한 부수효과 입니다. 순수함수 인자에만 의존하고 부수 효과가 없는 함수를 말합니다. 인자에만 의존한다 = 같은 인자를 넣으면 항상 같은 결과를 반환한다 실용적인 측면에서 함수형 프로그래밍 정의의 문제점 앞에서 언급했던..

• format_list_bulleted 프로그래밍 방법론/함수형 프로그래밍
• · 2024. 2. 13.
• textsms

Next.js 13의 App Routing 방식을 이해해보자 (with RSC)

저는 Next.js를 공부하기 전까지는 SSR 방식으로 React를 동작시키는 프레임워크인 줄만 알았었습니다. 그러나 공부하면 할수록, 이는 매우 큰 오해였음을 깨닫게 되었습니다. 조금씩 그 베일을 벗겨가는 와중에 좋은 영상을 보게 되었고 이에 대한 정리를 하고자 합니다. [영상 링크]를 첨부해두었습니다. CSR / SSR 변천사 Next.js는 기본적으로 React를 기반으로 만든 프레임워크이며, 완전한 SPA는 아니고, PESPA(Progressively Enhanced Single Page App)라고 생각하면 될 것 같습니다. 최초 1회에 한해, HTML을 받고, 새로고침을 하는 등의 인터랙션이 있기 전까지는 HTML을 계속 활용합니다. 먼저 CSR로 동작하는 일반적인 상황에서의 React의 렌..

• format_list_bulleted 프론트엔드 개발/Next.js
• · 2024. 2. 10.
• textsms