React

한때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 한다. 웹에 그치지 않고 영역을 확장하여 서버 사이드, 모바일, 데스크톱 애플리케이션 등 다양한 영역에서

이번 포스팅에서는 어플리케이션에서 빼놓을 수 없는 기능인 로그인과 로그아웃을 구현하기에 앞서 Authentication(인증)이라는 것에 대해 정리하고 넘어가보려한다.🧐

Redux에 대해 알아보자🧐

React를 사용할 때 부드러운 페이지 전환을 가능하게 해주는 라이브러리인 react-router-dom에 대해 정리해보자.🧐

리액트 앱 내부에서 HTTP 요청을 간편하게 보낼 수 있게 도와주는 라이브러리인 Tanstack Query에 대해 알아보도록 하자. 🧐

Tanstack Query를 이용한 캐시 처리 방법에 대해 알아보도록 하자. 🧐

리액트 쿼리에 대해 공부하다 보니 useQuery가 인수로 받는 것들과 반환하는 객체에 어떤 데이터가 들어있는지 제대로 정리하고 넘어가야겠다는 생각이 들어 이번 포스팅을 작성하게 되었다.🧐

리액트 쿼리로 데이터를 가져오는 것 뿐만 아니라 데이터를 전송하고 수집하는 것 또한 가능하다. 하지만 useQuery는 데이터를 가져올 때만 사용하고, 데이터를 전송하고 POST 요청을 전송하려면 useMutation을 사용한다. 좀 더 정확하게는 POST 요청을 전송

서버에 데이터가 업데이트된 후 새 데이터를 즉시 가져와야 할 때. 예를 들어 사용자가 어떤 폼을 제출하면 자동으로 화면에 보여지는 데이터가 최신으로 업데이트 되면 좋을 것이다. 하지만 추가적인 설정을 해주지 않으면 리액트 쿼리는 이전에 가져온 데이터의 캐시가 만료되지

사용자가 서버에 데이터를 전송할 경우, 서버가 업데이트를 확인하기 전에 UI의 변경 사항을 즉시 반영한다면 사용자 경험이 훨씬 향상 될 것이다. 이때 Optimistic Updating(낙관적 업데이트)라는 기술을 사용할 수 있다. Optimistic Updatin

리액트는 UI를 구성하는 기본 단위로 컴포넌트를 사용한다. 컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 이번 포스팅에서는 두 컴포넌트 유형에 대해 정리해보자. 1. 함수형 컴포넌트 (Function Component) > JavaScript 함수를

React Hook은 컴포넌트에서 상태 관리, 사이드 이펙트(부수 효과) 처리, 참조 관리 등 다양한 기능을 간단하고 효율적으로 구현할 수 있게 해주는 도구다.Hook이 등장하기 전에는 클래스 컴포넌트를 사용해야만 상태와 라이프사이클 관련 기능을 구현할 수 있었다. 하

대표적인 폼 태그 엘리먼트로는 <input/> , <textarea/> , <select/> 가 있다.이들은 사용자 입력을 기반으로 자신의 state를 관리하고 업데이트하며, 각각의 value Attribute를 통해 값에 접근할 수 있다.즉, 사용자가

React는 2단계를 거쳐 화면에 UI를 렌더링 한다.Render Phase: 컴포넌트를 계산하고 업데이트 사항을 파악하는 단계Commit Phase: 변경사항을 실제 DOM에 반영하는 단계위 두가지 Phase에 대해 자세히 알아보자리액트가 변화된 상태나 props에

아래 내용은 우아한테크:  [10분 테코톡] 마루의 리액트 컴포넌트 LIFECYCLE 영상을 참고한 글입니다. 유익한 내용 발표해주신 마루 님께 감사를 표하며, 영상을 통해 학습한 내용을 아래에 정리해 보았습니다. 📌 리액트의 렌더링 > 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정 (컴포넌트 호출) React는 2단계를 거쳐 화면에 UI를 ...

React 애플리케이션을 개발할 때 여러 페이지를 관리해야 하는 상황이 발생합니다. 이때 사용하는 것이 라우팅(Routing)인데, React에서는 react-router-dom 라이브러리를 통해 라우팅을 구현할 수 있습니다. 특히, createBrowserRouter