개요서버 상태 관리 라이브러리라는 것만 인지하고 사용했던 Tanstack Query에 대해 자세히 정리해보려고 한다.프로젝트를 진행하면서 외부 API로부터 데이터를 불러올 때 Tanstack Query를 자주 사용했었다.하지만 매번 “이건 이렇게 쓰는 거구나” 수준에서 그쳤고, 이 라이브러리를 왜 사용하는지, 어떤 개념에 기반해 작동하는지에 대한 본질적인 이해는 부족했던 것 같다. 그래서 이번 글에서는 Tanstack Query가 등장하게 된 배경과 핵심 개념을 정리해 보았다. Tanstack Query를 사용하기 이전의 데이터 패칭 방식React에서 서버 데이터를 불러올 때, 일반적으로는 다음과 같은 방식으로 작성한다: const [data, setData] = useState(null);useEff..

HTTP 헤더는 무엇일까?HTTP 요청/응답에 대한 추가적인 정보를 담는 요소HTTP 메시지의 구조를 이해하고 있다면, 헤더가 어떤 위치에서 어떤 역할을 하는지 쉽게 떠올릴 수 있을 것이다.HTTP 헤더는 클라이언트와 서버가 데이터 형식, 인증 정보, 전송 방식 등 다양한 정보를 교환하는 수단으로 사용된다. HTTP 헤더의 4가지 종류HTTP 헤더에는 총 4가지 종류가 있다.1. Request Header2. Response Header3. Entity Header (Representation)4. General Header1번 Request Header은 클라이언트 요청을 보낼 때 사용하는 헤더이다.2번 Response Header은 서버에서 응답을 할 때 사용하는 헤더이다.3번 Entity Head..

HTTP 메서드는 왜 필요할까?HTTP 메서드가 왜 필요한지 이해하려면,먼저 URI를 설계하는 방식을 살펴볼 필요가 있다. 예를 들어, 회원 정보 조회하는 기능응ㄹ 위한 URI를 설계한다고 가정해보자./membersURI 설계를 할 때 가장 중요한 기준은 '자원(Resource)' 중심으로 구성하는 것이다.해당 경우에서 자원은 '회원 정보'이기 때문에 memeber만 표현해도 충분하다. 그렇다면 회원 정보를 등록할 때는 어떻게 해야 할까?자원이 같다면 등록할 때도 같은 URI(/members)를 사용할 수 있어야 한다. 그러면 조회와 등록은 분명 다른 행위인데,같은 URI를 사용한다면 그 차이를 어떻게 구분할 수 있을까? 조회와 등록 등의 행위를 구분해 주는 것이 바로 HTTP 메서드이다. 자주 사용하..

HTTP란 무엇일까?HyperText Transfer Protocol웹에서 데이터를 주고받기 위해 만들어진 통신 규약 1990년대 초, 팀 버너스리가 월드 와이드 웹(www)을 제안하면서, 문서를 하이퍼링크로 서로 연결해서 보여주는 시스템이 등장했다.그런데 문서를 서로 주고 받을 때 '이런 형식으로 보낼게'라는 서로 간의 약속이 필요해졌다. 왜 HTTP가 필요했을까?사람들마다 다른 형식으로 요청을 보내면, 서버도 그때마다 다르게 응답을 보내줘야 된다.이런 혼란을 막기 위해 요청과 응답의 형식을 통일시키는 것이 필요했다. 그 결과로 만들어진 것이 HTTP이며,이 규약 덕분에 클라이언트와 서버가 정해진 형식으로 안정적으로 통신할 수 있게 됐다. 현재는 HTTP를 통해 거의 모든 형태의 데이터를 전송할 수 ..

개요프로그래밍 공부를 시작하면서 HTTP라는 용어를 굉장히 많이 들었다.대충 통신 규약이라는 것만 알고, HTTP가 정확히 무엇이고 왜 필요한지는 모르고 있었다.웹 개발을 하는데 프론트엔드 개발을 하든 백엔드 개발을 하든 HTTP는 필수적으로 알아야 된다는 이야기를 듣고,새로운 강의를 들으면서 공부를 하였다.습득한 내용을 차근차근 정리해보려고 한다. HTTP를 왜 알아야 할까?모든 웹 브라우저는 클라이언트-서버 구조로 요청과 응답을 주고 받는다.클라이언트와 서버 모두 HTTP를 통해 통신을 하기 때문에 HTTP에 대해 잘 알아야 된다. HTTP를 알게 되면 어떤 이점이 있을까?1. HTTP를 알게 되면 클라이언트-서버 간의 통신 원리를 이해할 수 있다.2. 네트워크 확인을 통해 오류를 해결할 수 있다...

React의 렌더링, 왜 알아야 할까?React를 배우다 보면 '렌더링'이라는 단어를 자주 접하게 된다.렌더링이란 도대체 무엇이고 왜 중요할까? React는 사용자의 행동이나 상태 변화에 따라 UI를 업데이트한다.이때 UI가 어떻게 바뀌는지를 결정하고 실제로 화면에 보여주는 과정을 `렌더링(Rendering)`이라고 한다.즉, React에서의 렌더링은 애플리케이션의 성능과 사용자 경험을 좌우하는 핵심 개념이다. 그렇기 때문에 우리는 React를 공부하면서 렌더링 과정을 깊숙이 이해할 필요가 있다.렌더링 과정을 이해하게 되면, 성능 최적화를 위해 어떤 부분을 건드려야 하는지 자연스럽게 알게 되기 때문이다. 그래서 이번 글에서는 React의 렌더링 과정은 구체적으로 어떻게 흘러가고, Virtual DOM이 ..