루루의 우당탕탕 개발 스토리 루루의 우당탕탕 개발 스토리

API 콜은 네트워크 비용을 지불한다. 의도치 않게 불필요한 API 콜은 서버의 부하도 증가시켜 필요한 응답의 시간을 증가시킨다. 비용 지불 관점 외에도 앱의 응답 속도가 저하되어 UX도 악화될 수 있다. swr은 기본적으로 hook 내에서 마운트 되거나 focus되면 API를 실행시킨다.사실 컴포넌트를 마운트한 이후에 필요에 따라서만 업데이트 해도 좋다. 자주 변하지 않는 값의 경우 앱을 킨 후, 한번만 사용하여 캐싱된 값만 사용할 수도 있고어떤 화면은 포커싱될 때마다 일정 주기마다 업데이트 되길 기대할 수 있다. 즉, 마운트될 때마다 실행될 필요가 있는지, 포커싱될 때마다 실행될 필요가 있는지를 검토해주면 좋다.  SWR은 revalidatieOnMount와 revalidatieOnFocus 옵션을 ..

앱 내에 당겨서 새로고침 기능을 구현해야될 일이 생겼다. 보통 당겨서 새로고침 기능은 상위 컴포넌트에서 UI로 노출될 일이 많다. 그러나 상위에서 모든 함수를 다 선언해서 하위로 props drilling을 해버리면 재렌더도 많아지고 부하가 커진다.  그렇기때문에 구현할 수 있는 여러 방법들이 있다. 1. 상위에서 함수 구현체 정의해놓고, 하위에서 함수 set하여 상위에서 실행시키기이 방법은 어쩔 수 없이 구현체를 모두 props drilling을 하고, 리렌더 방지를 위해 ref로 감싸서 하위 컴포넌트에서 업데이트 함수를 set하는 방법이다. 이 방법의 장점은 상위 컴포넌트에서는 하위 컴포넌트에서 정해준 함수만 실행시키면 된다. type UpdateFunc = (() => void) | undefine..

https://swr.vercel.app/ko/docs/getting-starteduseSWR을 사용해서 데이터를 패칭하다보면 isLoading, isValidating이라는 걸 마주할 수 있다.이를 활용하여 UI를 훨씬 더 센스있게 구현할 수 있다. (상황에 맞는 로딩 스켈레톤 적용할 수 있음)이걸 이해하기 전에 SWR의 state machine 주기를 이해할 필요가 있다.  SWR은 아래 상황에 따라 isLoading과 isValidating은 여러 의미를 가진다.  1) 변하는 key가 없을 때 변하는 key가 없다면 isLoading은 첫 로드를 의미하며, isValidating은 mutate를 시킬 때만 true/false가 변환된다.이를 UI로 활용해보면, 첫 로드는 isLoading으로 is..

여러 API 결과를 바탕으로 데이터를 표현해야할 때가 있다.  내가 작업하는 앱의 경우, 여러 투자 자산 상품들을 보여주고 그에 맞는 총 투자액과 총 투자 이익을 보여주어야 했다. API로 데이터를 나타내는 방법은 여러가지가 있겠지만, SWR을 활용하여 나타내는 방법을 알아보겠다.import useSWR from 'swr' function Profile () { const { data, error, isLoading } = useSWR('/api/user/123', fetcher) if (error) return failed to load if (isLoading) return loading... // 데이터 렌더링 return hello {data.name}!}  아래는 SWR을 활용한 기..

1. next.js가 SSR을 수행하는 방식 웹서버에서 html+css+js를 다운받아 렌딩할 때 두 가지 방식이 있다. CSR과 SSR. 이 둘의 차이는 이전 포스팅에서 확인할 수 있다. https://lulu-developmentlog.tistory.com/187 nextJS 왜 쓰는가 NextJS에 대한 설명을 구글에서 가져오면 아래와 같다. nextJs는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 lulu-developmentlog.tistory.com next.js는 기본적으로 SSR를 기반으로 한다. 하지만 SSR은 처음 및 초기 로딩속도는 빠르지만 페이지를 넘길 때마다 중복되는 데이터를 서버측에서..

여러 Next.js 프로젝트를 보다보면 흔하게 getInitialProps, getStaticPath, getStaticProps, getServerSideProps들을 마주하곤 한다. 이들의 역할을 쉽게 생각하면 React의 useEffect의 역할을 생각하면 쉽다. React의 useEffect의 경우 렌더링 전 사전에 data를 fetching하기 위해 사용된다. next에서도 이같은 기능을 getInitialProps, getStaticPath, getStaticProps, getServerSideProps를 통해 제공한다. 각각의 종류를 하나하나 자세히 살펴보자. 1. getInitialProps 이름에서 쉽게 유추할 수 있 듯, getInitialProps는 서버에서 실행되어 data를 미리 ..

yarn create next-app --typescript를 통해 next.js 기본설정을 마치다보면 자동으로 _app.tsx, _document.tsx가 설치되어있는 모습을 볼 수 있다. 이 두가지는 next.js에 어떤 역할을 주는지 알아보자! 1. _app.tsx 기본적으로 Next.js에서는 App의 구성 요소를 사용하여 모든 페이지를 초기화한다. 따라서 App.tsx를 만들어 기본 App 구성 요소를 덮어 쓸 수 있다. 즉, 모든 페이지에서 공통으로 필요한 처리를 여기에서 작성하여 쓰면 된다. 이를테면 - 페이지 간 공통 레이아웃 - 전역 State (Store,React-query 설정 등) - 글로벌 CSS - 각 Route Provider - 상태관리 library의 Provider, R..

우선, ref는 React에서 DOM에 직접 접근하기 위해 사용한다. 사용방법은 우선 useRef hook을 선언하여 ref 객체를 생성한 다음 원하는 Element의 ref 값을 넘기면 된다. import { useRef } from 'react'; export default fuction App() { const inputRef = useRef(null); const focusHandler = () => { inputRef.current.disabled = false; inputRef.current.focus(); }; const resetHandler = () => { inputRef.current.disabled = true; inputRef.current.value = ""; }; return ..