useQuery 기본 사용법useQuery는 TanStack Query의 핵심 훅 중 하나로 서버 데이터를 가져오고, 캐싱하고, 동기화 및 업데이트하는 전체 라이프 사이클을 캡슐화해준다.useQuery의 파라미터const result = useQuery({ queryKey, // required queryFn, // required // ...options ex) staleTime, gcTime, enabled, select, ...});인자로는 하나의 객체를 받으며, queryKey와 queryFn 두 필드는 필수이다.queryKey: 데이터 고유 식별자queryKey는 서버 데이터의 고유 주소 라벨이라고 생각하면 된다. 배열 형태로 작성하며, TanStack Query는 이를 다음 세 가지..

들어가며웹 애플리케이션에서 서버 데이터를 패칭하고, 캐싱하고, 업데이트하는 과정은 개발이 복잡하고, 오류 발생 가능성이 높은 부분 중 하나이다. 오늘은 이 작업들을 매우 간편하게 만들어주는 라이브러리인 TanStack Query에 대해 공부해보겠다.나는 첫 프로젝트부터 TanStack Query를 사용해왔지만, 솔직히 제대로 이해하고 쓰진 않았던 것 같다. 처음 도입하게 된 이유는 useEffect + fetch + setIsLoading + setIsError를 내가 직접 작성할 필요가 없어서 편할 것 같았기 때문이었다. 여태까지 어찌저찌 써오긴 했지만, 뭔가 도구에 대한 제대로 된 이해없이 막 쓰고 있다는 생각이 들었다. queryKey를 설계하는 방법도 잘 모르고, 캐시 전략에 대한 개념도 부족했다..

서버에서 데이터를 가져오고, 캐싱하고, 업데이트하는 부분은 개발 과정이 복잡하고 오류 발생 가능성이 높은 부분 중 하나이다.서버 상태란?서버 상태란 서버에 저장된 데이터로 프론트엔드에서 api호출을 통해 백엔드로부터 받아오는 데이터들을 의미한다. 서버 상태는 관리하기 까다로운 몇 가지 특징을 가진다.비동기식: 즉시 처리되지 않으며, 네트워크 요청을 기다려야 한다.공유 및 지속: 여러 클라이언트가 공유하며 앱이 종료되어도 유지된다.동기화 오류 가능성: 서버의 데이터는 클라이언트와 관계없이 변경될 수 있고, 현재 클라이언트가 보는 로컬 복사본이 오래된 상태일 수 있다.캐싱의 어려움: 데이터를 다시 가져올 시점, 캐시된 데이터를 사용할 시점, 캐시를 무효화할 시점을 결정하는 게 어렵다.서버 상태는 useSta..

이제는 알아야겠다! CSR과 SSR의 차이점과 장단점 (SPA, MPA, SSG, Universal Rendering 까지)1. SPA와 MPA의 차이점SPASPA는 Single Page Application의 약자로 하나의 페이지로 구성된 웹 어플리케이션 을 말한다.헤더, 사이드바와 같은 공통 영역은 유지되면서 필요한 부분만 동적으로 갱신되는 애플리케이션들이다.MPAMPA는 Multi Page Application의 약자로, 탭을 이동할 때마다 서버로부터 새로운 HTML을 받아와 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식이다.MPA는 매번 새로운 HTML을 서버로부터 받아오기 때문에 페이지 전환시마다 화면 깜빡임이 존재한다는 단점이 있다.따라서 AJAX가 등장한 이후부터 원하는 부분만..

프로젝트를 진행하다 보니, 폴더 구조가 비효율적이라는 생각이 들었습니다. 점점 많은 파일과 폴더를 생성하다보니 찾고자 하는 파일 혹은 연관된 코드의 위치를 바로바로 못찾는 상황이었습니다. 이에 따라 2차 애자일을 시작하면서 아예 셋팅을 다시 하고 개발에 들어가기로 팀원분과 협의를 하게 되었습니다. 우선, FSD 구조에 대해서 살펴보기 전에, 먼저 프론트엔드에서의 폴더 구조가 어떻게 변화해 왔고 왜 변화해왔는지를 예제와 함께 자세하게 설명하고 있는 `Teo`님의 양질의 글을 읽었습니다. FSD가 나오게 된 배경을 이해하는데에 매우 도움이 되었습니다.[폴더구조의 변화로 이해하는 프론트엔드 멘탈모델 변천사]FSD란?FSD는 Feature Slice Desingn의 줄임말로 애플리케이션의 기능과 목적에 따라 파..

프론트엔드 개발자 모집 공고를 보면 자격 요건 또는 우대사항에 TypeScript 학습 경험을 적어둔 경우가 많다. 그래서 일단 이번에 진행하는 프로젝트에서는 JavaScript말고 TypeScript를 한 번 써보기로 했다. TypeScript를 공부해보기 전에 TypeScript에 대해 좀 더 자세하게 알아보고 공부하는게 더 의미있을 것 같아서 정리해봤다. 여러분의 두뇌로 타입 추론을 하지 말고, 여러분보다 똑똑한 컴파일러가 판단하도록 합시다. 타입 스크립트란?‘TypeScript’는2012년 마이크로소프트가 개발한 언어로 JavaScript 에 정적 타입 문법과 객체 지향적 기능(인터페이스, 제네)을 추가한 ‘프로그래밍 언어’이다.티오비는 타입스크립트를 2024년의 유망한 언어로 꼽았다. TypeS..

classListclassList는 DOM 요소의 class 속성을 쉽게 다룰 수 있는 객체이다. 클래스 값의 추가, 제거, 확인 등을 다룰 수 있는 유용한 여러 메서드와 속성을 가지고 있다.구문element.classList;classList의 주요 메서드add()classList.add()는 DOM 요소에 주어진 클래스 속성 값을 추가하는 메서드이다.구문element.classList.add(className1);// 여러 개의 클래스 값을 한 번에 추가할 수도 있다.element.classList.add(className1, className2);element.classList.add(className1, className2, /*...,*/ classNameN);remove()classList.r..

속성 접근 및 변경 방법. 점 표기법DOM 객체의 프로퍼티에 접근하거나 설정할 때 점 표기법을 사용한다. 이를 통해 속성을 읽고, 수정할 수 있다.이 방법은 JavaScript 객체의 프로퍼티를 직접 조작하는 방법으로, 요소의 현재 상태를 반영하게 된다.구문예제const banner = document.querySelector('#banner');// 1. 점 표기법banner.src = 'new_image.jpg';getAttribute()getAttribute() 메서드는 Element의 메서드로, 해당 Element요소에서 속성 값을 가져오는 함수이다.구문element.getAttribute(name);주어진 요소에 속성이 존재하면 그 속성의 값을 문자열로 반환한다. 존재하지 않으면 null을 반환..

텍스트 변경하기HTML 요소의 텍스트를 변경하는 방법을 알아보자.innerTexttextContentinnerTextinnerText는 Element의 속성으로, element 내에서 사용자에게 보여지는 text 값들을 가져오거나 설정할 수 있다. 이 때 해당 요소뿐만 아니라 해당 요소의 자식들 안의 텍스트도 같이 갖고 온다.구문/* 가져오기 */const renderedText = htmlElement.innerText;/* 설정하기 */htmlElement.innerText = string;textContenttextContent는 Node의 속성으로, 사용자에게 보여지는 text값만 읽어오는 innetText와는 달리 나 태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 읽어온다.구문/*..

1. 문제 쪼개서 분석하기- 동작 단위로 쪼개ㅓ 분석하는 습관을 들일 것 2. 제약 사항을 파악하고, 테스트 케이스를 추가하기- 제약 사항을 정리해 둔 뒤 이를 고려해서 테스트 케이스를 추가하는 연습을 할 것 -> 어떤 알고리즘을 적용할지 고민할 떄 유용하고, 코드 구현 과정에서 예외를 거를 때 도움이 됨 3. 입력값을 분석하기- 알고리즘의 시간 복잡도는 입력값에 의해 결정되는 경우가 대다수 -> 입력값의 크기를 확인하면 제한시간 내에 문제를 풀 수 있는 알고리즘과 그렇지 않은 알고리즘을 미리 걸러낼 수 있음. 4. 핵심 키워드 파악하기- 문제의 핵심 키워드를 빨리 파악해야 문제를 빨리 해석할 수 있음. 핵심 키워드가 특정 알고리즘을 암시하는 경우가 많음ex) 최적의 해 -> 너비 우선 탐색 알고리즘을 ..

이제 앞에서 배운 HTML, CSS, JavaScript를 결합해야 한다.DOM이란>DOM은 HTML과 XML 문서를 구조화하여 프로그래밍적으로 접근하고 조작할 수 있도록 만든 문서 객체 모델이다.웹 페이지의 각 요소는 JavaScript 객체로 표현되는데, DOM은 이 웹 페이지를 구성하는 JavaScript 객체들의 집합이다. 이를 변경하면 페이지에 즉시 반영된다.📌 DOM의 핵심 역할HTML 문서를 JS에서 조작할 수 있도록 변환웹 페이지의 구조, 스타일, 콘텐츠를 JS를 통해 동적으로 변경 가능DOM 요소 선택 메서드DOM에서 요소를 선택하기 위해 사용하는 다양한 메서드가 있다.getElementByIdgetElementById 메서드에 문자열을 전달하면 해당 문자열과 일치하는 ID 속성을 가진..

이제 앞에서 배운 HTML, CSS, JavaScript를 결합해야 한다.DOM의 정의DOM은 문서 객체 모델을 의미하며, 웹 페이지를 구성하는 JavaScript 객체들의 집합이다. 예를 들어 HTML 요소 중 태그를 모델링하는 JavaScript 객체가 존재하는 것이다. 태그를 나타내는 JS 객체를 변경하면 페이지에 변경 사항이 반영되게 된다. 문서 객체 모델은 JS에서 엡페이지 콘텐츠로 접근하는 통로이다.문서 객체의 메서드들Selecting요소 선택을 도와주는 메서드들을 공부해보자.getElementByIdgetElementById 메서드에 문자열을 전달하면 일치하는 ID를 가진 요소를 찾아 나타낸다. 없으면 null을 반환한다.getElementsByTagName태그 이름을 전달하면, 한 번에..