004

003

002

001

인터넷 사용 시 기기마다 화면 크기가 상이함. 컴퓨터는 화면이 크고 휴대폰은 작음. 반응형 디자인은 이러한 다양한 기기 환경에 맞춰 화면 레이아웃이 자동으로 변하는 디자인을 의미함. ◼ 필요성 유저 편의성: 사용자는 항상 쾌적한 환경을 원함. 휴대폰 사용 시 글씨가

Tailwind CSS는 디자인 시스템을 직접 구축할 수 있도록 도와주는 CSS 프레임워크. 가볍고 사용이 간단한 프레임워크이며, 유틸리티 퍼스트(Utility-First) 방식을 사용함. 빠르고 쉽게 스타일을 적용할 수 있는 다양한 클래스를 제공함. ◼ 등장배경 C

◼ API 문서 서버 API URL https://api.example.com 회원가입 아이디, 비밀번호, 닉네임으로 DB에 회원정보를 저장. Request Method: POST URL PATH: /register Body (JSON): JSON {

◼ 인증과 인가 인증(Authentication) 서비스를 이용하려는 사용자가 등록된 회원인지 확인하는 절차. 일반적으로 로그인 과정. 인가(Authorization) 인증이 완료된 사용자가 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차. 로그인 이후,

◼ Throttling이란? Throttling은 짧은 시간 간격으로 연속 발생한 이벤트를 일정 시간 단위(delay)로 제한하는 기법. 지정한 시간 동안 처음 또는 마지막 이벤트만 실행 가능. 주로 무한스크롤, 스크롤 이벤트, 버튼 연속 클릭 방지 등에 사용. 이벤

Zustand는 상태관리 본연의 기능에 집중한 라이브러리. 복잡성을 줄이고, 간단하고 직관적인 상태관리 기능 제공. 단순화된 Flux 패턴 기반의 small, fast, scalable 상태관리 솔루션이며 Hooks 기반의 간편한 API 제공. ◼ 등장배경 상태관리의

◼ Query Cancellation 다운로드 UI가 있거나 UX를 저해하는 불필요한 네트워크 요청을 제거할 때 사용. 대용량 fetching을 중간에 취소하거나, 사용하지 않는 컴포넌트에서 fetching이 진행 중이면 자동으로 취소해 불필요한 네트워크 비용을 절감함

TanStack Query는 서버 상태 관리를 위한 라이브러리. 서버 상태란 서버와의 통신을 통해 받아오는 데이터 의미. 클라이언트 상태와 달리 다음과 같은 관리 필요. Fetching(패칭) : 서버에서 데이터를 가져옴. Caching(캐싱) : 가져온 데이터를

TanStack Query는 서버 상태 관리 라이브러리. 데이터 패칭, 캐싱, 동기화, 무효화 등의 기능을 제공. 비동기 로직을 간결하게 작성할 수 있어 유지보수성을 높일 수 있음. ◼ 등장배경 비동기 로직의 복잡성 해결 필요 기존의 useEffect, useStat

◼ Custom Instance의 개념과 필요성 Custom Instance의 필요성 지금까지는 아래와 같이 데이터를 통신함. const data = await axios.get("http://localhost:4000/"); 별도의 설정 없이 기본 Axios 그대로

axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트. 즉, http를 이용해 서버와 통신할 때 사용하는 패키지. ◼ 설치 npm install axios ◼ 설정 db.json 설정 프로젝트 root 경로에 db.json 파일 생성 후

json-server는 간단한 DB와 API 서버 생성 패키지. 백엔드에서 실제 DB와 API Server가 구축되기 전까지, 프론트엔드 개발에 임시로 사용할 mock data 생성 목적으로 사용. json-server 사용 시 BE(Backend) 작업을 기다리지 않

HTTP 메서드는 클라이언트가 서버에게 요청의 성격을 알리는 데 사용. REST API는 이러한 HTTP 메서드를 사용해 CRUD 작업 수행 가능. ◼ GET 서버에 데이터 요청 시 사용. 요청 데이터는 URL에 포함되어 전송. 주로 데이터 조회에 사용. REST

HTTP(HyperText Transfer Protocol)는 웹에서 데이터를 주고받기 위한 프로토콜(데이터 통신을 원활하게 하기 위한 통신 규약) 클라이언트와 서버 간의 요청과 응답을 정의. ◼ 개념 HTTP는 클라이언트-서버 모델을 기반으로 동작. 클라이언트가 요

◼ BaaS 웹과 모바일 앱 개발을 쉽고 빠르게 할 수 있도록 도와주는 클라우드 기반 백엔드 서비스. BaaS를 사용하면 복잡한 백엔드 시스템을 직접 관리하지 않아도 됨. 그 결과 프론트엔드 개발에 더 집중 가능함. 웹 애플리케이션의 필수 구성 요소 웹 애플리케이션은

◼ Dynamic Route Dynamic Route는 동적 라우팅이라고도 부르며 path에 유동적인 값을 포함해 특정 페이지로 이동하도록 구현하는 방식임.