TanStack Query를 공부한 후 남긴 기록을 담은 포스팅직접 기록한 내용을 GPT를 활용하여 마크다운으로 변환했다!1. TanStack Query 리액트 쿼리(React Query): 서버 상태 관리를 쉽게 하도록 도와주는 라이브러리서버 상태(Server State): 원본이 서버에 있고, 클라이언트가 복사본을 잠깐 빌려와서 보고 있는 모든 비동기 처리 데이터💡 주요 기능API 호출 시 로딩, 에러, 성공 상태 자동 트래킹 (isPending, error, data)API 응답 데이터 캐싱 및 재사용데이터베이스(DB) 데이터와 UI 데이터의 동기화 및 업데이트2. 데이터 조회: useQuery (Read)📌 기본 규칙queryKey는 반드시 배열 형태queryFn은 반드시 Promise를 반환..

Next.js를 다루게 되면서 일반 리액트의 렌더링 방식과는 다른 Next.js의 렌더링 방식에 대해 접하게 되었다.오늘은 웹 페이지의 네 가지 렌더링 방식에 대해 알아보려 한다! 📌 Next.js에서의 렌더링기본적으로 Next.js는 모든 페이지를 프리렌더링한다.특히 빌드 시점에 생성되는 SSG와 요청 시점에 생성되는 SSR을 지원한다.Next는 각 페이지별로 사용할 프리렌더링 방식을 선택할 수 있게 해 준다는 엄청난 장점이 있다.따라서 용도에 맞게 다른 렌더링 방식을 선택할 수 있다!*프리렌더링 - 빌드 시점에 HTML을 미리 만들어 두거나, 요청 시 HTML을 생성해 두는 것 📌 네 가지 렌더링 방식다음의 네 방식은 모두 page router 버전의 공식 명칭으로, app router에서는 다른..

일반 JavaScript에서 React로 넘어가면서 느낀 두드러진 점 중 하나는 React엔 Component란 개념이 있다는 것이다.오늘은 그 컴포넌트에 대해 알아보려 한다!📌 Component컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, js의 함수와 동일한 목적을 수행하지만 독립적으로 작용하며 JSX를 반환한다.*JSX - JavaScript 안에서 HTML처럼 보이게 쓴 문법이다.HTML 요소를 반환하는 함수로 볼 수 있다.컴포넌트는 일종의 부품과 같다. 하나의 부품이 용도가 동일하다면 이곳저곳에 재사용될 수 있는 것처럼 컴포넌트 또한 그러하다.이처럼 컴포넌트는 여러 요소에 재사용되는 것을 핵심으로 한다.컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 부분으로 나누고 각 부분을 개별적으..

프로그래밍에서 시맨틱은 코드 조각의 의미를 나타냅니다."이 HTML element가 가진 목적이나 역할은 무엇일까?" 다음의 두 코드는 화면상으로 동일하게 보입니다. 안녕하세요?안녕하세요? 하지만 두 코드를 같다고 말할 수 있을까요?그 답은 "아니"입니다!두 코드를 동일한 것처럼 보이지만, 사실 HTML에 스타일을 적용하여 입히는 것은 CSS의 역할이며두 코드의 "의미"는 다릅니다.하나는 최상위 제목을 의미하고 다른 하나는 그것이 아니라는 것이죠!📌Semantic Tag란?Semantic Tag는 의미를 지닌 태그를 의미합니다! Semantic 은 "의미론적인"이란 뜻의 형용사입니다.개발자가 각 태그를 보고 해당 요소가 어떤 의미를 담았고, 어떤 역할을 하는지 쉽게 파악할 수 있도록 돕습니다. 그 외엔..

📌 Cascade란?CSS 작성중에 하나의 HTML 요소에 대해 서로 다른 스타일 규칙이 동시에 적용되는 상황이 발생할 때, 브라우저는 정해진 알고리즘에 따라 어떤 스타일을 최종적으로 적용할지 결정한다.이 결정 과정이 바로 캐스케이드(Cascade)이다.🌊 작은 폭포나 계단식으로 떨어지는 물 을 일컫는다.✔ CSS는 바로 Cascading Style Sheet의 약어이다. 사이트의 복잡성이 증가함에 따라 스타일시트의 수가 증가하여,스타일시트의 소스 순서가 더 중요하고 복잡해진다.다양한 스타일 후보군중에서 내가 의도하는 방향으로 스타일을 적용하기 위해선 어떤 규칙으로 확정되는지 알 필요가 있다. 규칙은 다음과 같다! 📌 Cascading브라우저는 스타일 충돌이 발생하면 다음의 단계를 거쳐 모든 요소의..