frontend3 [NextJS] SWR - 프로젝트에 네트워크 상태관리 적용해보기 개요 요즘 콘서트 일정 플랫폼 서비스를 NextJS로 개발하면서 SWR을 적용해보고있다. NextJS랑 SWR 모두 Versel에서 개발을 하였고, 호환성이 좋다고 들어서 네트워크 상태관리를 리액트쿼리가 아닌 SWR을 적용해서 개발을 진행하고 있지만 실제로 SWR이 어떤값을 반환하고 어떤식으로 동작하는지는 잘 모른채로 개발하고 있었다. 오늘은 SWR이 무엇이고 어떻게 사용하는지 구체적인 사용법을 알아보자. Optimistic UI란? Optimistic UI란 특정 요청이 성공 할 것이란 가정을 하고 먼저 그 요청의 결과를 보여주는 방식의 UI이다. 이번에 진행하고 있는 프로젝트에서 예를 들어보자. 예시 - 북마크 1. 사용자가 북마크 아이콘(빈하트)을 누른다. 2. 서버에 북마크 등록 요청을 보낸다. .. front/NextJS 2023. 7. 4. 더보기 ›› [React] 리액트 라우터(React Router) 사용법 OutLet, Param 리액트 라우터란? 리액트 라우터는 리액트에서 SPA(Single Page Application)을 구현하기 위한 라이브러리입니다. SPA는 페이지 전환이 일어나도 화면이 새롭게 로드되지 않고, 동적으로 화면을 갱신합니다. 쉽게 말씀드리면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라 생각할 수 있습니다. 리액트 라우터는 리액트에서 브라우저의 URL과 컴포넌트를 매핑시켜주는 역활을 합니다. 이를 통해 브라우저의 URL에 따라서 보여줄 컴포넌트가 변경됩니다. 사용법을 알아보기 전에 리액트 라우터를 사용하면 어떤 기능을 구현할 수 있는지 간단하게 정리해 보겠습니다. URL에 따른 다른 페이지를 보여주기 브라우저의 뒤로 가기, 앞으로 가기 버튼을 사용하여 라우터 이력 관리하기 URL.. front/React 2023. 3. 31. 더보기 ›› [React] Todo-App을 만들어보자 (1) 한가지 기술을 사용하더라도 그 기술이 어떤식으로 동작하는지 알고 조금 더 깊이있는 지식을 습득하는 것이 이번 프로젝트의 목표이다. 리액트를 Todo-App 만들기 목표 1. jsx문법 연습하기 2. 리액트 상태관리 기술 연습하기 (여러가지 리액트 Hook 사용해보기) 3. tailwind 사용해보기 4. 컴포넌트의 구조를 어떻게 잡아야 추 후 리팩토링이나 유지보수가 편할지 생각하면서 구현해보기 구현계획 1. Todo CRUD 구현하기 2. 다크모드 구현하기 3. 반응형으로 구현하기 4. localStroage에 저장하여 새로고침하거나 창을 새로 열어도 데이터 유지하기 (백엔드 연동 전까지) 5. 가능하다면 외부API와 연동시켜보기 6. 프론트 기능을 완성하면 백엔드와 연동시키기 프로젝트 구조 프로젝트 구.. front/React 2023. 3. 28. 더보기 ›› 반응형 이전 1 다음
