캡스톤2

🌟 여행 기간을 시작일, 종료일 2개로 구성할 때 React 상태 관리: 배열 or 객체 → 둘 다 가능 보통은 객체 형태가 더 직관적이고 유지보수하기 좋음 🌟 객체 상태 관리 vs. 배열 상태 관리 |종류|구조|장점| |---|:---:|:---

함수를 인자로 받거나, 함수를 결과로 반환하는 함수함수가 다른 함수를 '데이터'처럼 다루는 것함수도 일종의 값이기 때문에, 다른 값처럼 매개변수로 전달하거나 리턴값으로 반환할 수 있음코드의 재사용성: 같은 패턴의 작업을 추상화하여 여러 곳에서 재사용할 수 있음코드의 가

🌟 useRef란? React에서 useRef는 두 가지 주요 목적으로 사용되는 훅(Hook)임 렌더링 사이에 값을 유지할 때 useState와 달리 값이 바뀌어도 컴포넌트를 다시 렌더링하지 않으면서, 값이 여러 번의 렌더링 사이에도 사라지지 않고 유지되도록

"선호" 버튼을 클릭했는지 여부를 판단하기 위해, 다음과 같이 boolean 타입으로 상태를 정의하였다.setIsClickedPreference 상태 업데이트 함수를 이용하여 isClickedPreference 상태를 업데이트하는 방법은 크게 두 가지가 있다.함수형 업

🌟 전역 상태 타입 정의 AI 설문 선택 응답에 관련된 상태를 관리하기 위해 전역 상태의 타입을 다음과 같이 정의하였다. 🌟 전역 상태 관리 Zustand를 이용하여 set 함수를 모두 다음과 같은 형식으로 정의하였다. 그 후에 다른 파일에서 다음과 같이 사용하

🌟 장바구니 목록 상태 조건 장바구니 목록 상태는 다음 두 가지 조건을 충족해야 한다. 위 페이지(장소 탐색 페이지)에서 새로고침을 하여도 장바구니 목록에 들어있는 요소가 유지되어야 함 장소 탐색 페이지에서 다른 페이지로 이동했다가, 다시 장소 탐색 페이지로 돌아

🌟 주요 내부 메서드 목록 Zustand에서 create()로 만든 store는 사실 다음과 같은 store 객체이다. 그리고 이 store에는 다음과 같은 메서드들이 있다. |메서드 이름|설명| |----|----| |getState()|현재 상태를 가져옴. 즉

zustand 예제를 보면, set() 함수를 정의하는 방법이 크게 두 가지로 나뉜다.방법 1: state 없이 바로 상태 업데이트 (정적 업데이트)방법 2: state를 통해 상태 업데이트 (동적 업데이트)이 둘의 차이점이 무엇인지 알아보자.개념상태를 고정된 값으로

현재 개발 중인 웹사이트에서 모달이 여러 페이지에 존재한다.메인 페이지: 도시(지역) 카드 모달장소 탐색 페이지 & 여행 계획 페이지: 장소 카드 모달마이페이지: 여행 계획 카드 모달따라서 모달을 열고 닫는 함수와 모달이 열려 있는지의 상태를 전역으로 관리해야 했다.그

🌟 상태 관리 라이브러리 비교 : Zustand vs. Redux 리액트 애플리케이션이 점점 커지면서 상태 관리(State Management)는 필수가 되었다. 대표적인 두 라이브러리 Zustand과 Redux는 같은 목적을 지니지만 사용성, 철학, 규모 면에서 매

🌟 zustand 구독 방식 비교: 구조 분해 할당 방식 vs. 선택적 구독 방식 Zustand는 리액트 앱에서 간단하면서도 성능 좋은 글로벌 상태 관리를 가능하게 해주는 라이브러리이다. 상태를 사용할 때는 주로 두 가지 방식 중 하나를 사용한다. 구조 분해 할당 방

🌟 zustand store에서 create(...)와 create(...)() zustand store를 정의하는 예제를 보면, create(...)처럼 괄호 하나만 사용하는 코드도 있고, create(...)()와 같이 괄호 두 개를 사용하는 코드도 있다. |구

🌟 ` 태그와 ` 태그의 차이점 지역 설명 모달에서 오른쪽 하단에 위치한 '숙소'와 '항공권' 버튼에 외부 사이트를 연결할 때, `` 태그를 사용하려고 했다. 그런데 외부 URL을 연결할 때는 ` 태그를 쓰는 게 안전하다고 해서, 태그와 ` 태그의 차이점에 대해서

🌟 위키피디아 요약 정보를 받아오는 API 함수 지역 정보는 위키피디아 API를 사용하기로 결정하였다. 위키백과에 지역 이름(예: '치앙마이')을 검색했을 때 제일 위쪽에 나오는 설명을 가져오는 함수를 만들어서 지역 모달에 뿌려주기로 하였다. Axios를 이용해 위

onMouseEnter와 onMouseLeave는 React(또는 순수 HTML/JavaScript의 DOM 이벤트 시스템)에서 마우스 포인터가 특정 요소에 진입하거나 벗어날 때 실행되는 이벤트 핸들러이다.두 이벤트는 주로 UI에 호버(hover) 효과를 주거나, 툴팁

🌟 도시 기본 정보 추출하기 메인 페이지의 도시 카드 모달에서 정적 데이터로 저장해 놓은 도시 기본 정보(항공, 시차, 비자, 여권 만료 조건, 전압)를 보여주기 위해서 타입을 정의하고 함수를 생성하였다. cityInfo.type.ts getCityInfo.ts

Vercel에서 React(특히 React Router를 사용하는 SPA)를 배포했을 때 특정 라우트에서 404 NOT_FOUND가 발생하는 경우가 있다.이 에러는 vercel.json 파일을 프로젝트 루트에 추가해서 리다이렉트 설정을 해주면 해결된다.React Rou

🌟 GitHub Organization의 레포지토리를 Vercel로 배포 팀 프로젝트를 위해 GitHub Organization에서 각자의 레포지토리(FE, BE, AI)를 만들어서 작업을 하게 되었다. 프론트엔드 레포지토리(FE)를 Vercel로 배포하려고 하니

🌟 Axios란? axios는 웹 개발에서 가장 널리 사용되는 HTTP 클라이언트 라이브러리 중 하나이다. 주로 브라우저와 서버 간 통신(REST API 호출)을 위해 사용된다. fetch와 비슷한 역할을 하지만, 더 편리한 기능과 인터셉터 등 고급 기능을 제공한다.

axios는 HTTP 메서드에 따라 데이터를 전달하는 방식이 조금씩 다르다. 앞으로 axios를 사용할 일이 많을 것 같아서, 메서드별 사용법을 완벽하게 정리해보기로 했다. 🌟 GET get 메서드는 HTTP GET 요청을 보내기 위한 함수이며, 서버에서 데이터를

Axios 에러와 일반 에러는 자바스크립트에서 네트워크 요청을 처리할 때 발생하는 에러 유형 중 두 가지이다.Axios를 사용할 때 각각 어떤 상황에서 발생하는지, 어떤 정보를 가지고 있는지, 어떻게 처리해야 하는지를 이해하는 것이 중요하다.개념자바스크립트에서 발생하는

메인 페이지에서 "미국"으로 나라 버튼이 선택되어 있는 상태에서, 여행지 검색창에 검색어를 입력하면,다음과 같이 나라 버튼이 자동으로 "전체" 선택으로 바뀌고, 해당 검색어를 포함한 지역 카드가 나열된다.메인 페이지의 검색 기능 구현 과정을 차근차근 정리해 보자.메인