목록전체 글 (45)
훈돌라
Zustand Zustand는 React 애플리케이션을 위한 작고, 빠르고, 확장 가능한 상태 관리 라이브러리입니다. "Zustand"는 독일어로 "상태"를 의미하며, React 애플리케이션의 상태를 관리하는 데 초점을 맞추고 있습니다. 간단하고 유연한 API를 제공하여 전역 상태를 관리하는 데 용이하며, 최소한의 설정으로 강력한 기능을 제공합니다. Zustand의 주요 특징 간단한 사용법: Zustand는 직관적인 API를 통해 쉽게 상태를 정의하고 사용할 수 있다.작은 크기: Zustand는 가벼워서 애플리케이션의 성능에 거의 영향을 미치지 않는다.불변성 유지: Zustand는 상태를 불변하게 관리하여 React의 재렌더링을 효율적으로 처리한다.미들웨어 지원: 로깅, 퍼시스턴스 등 다양한 미들웨어를 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bnxtdg/btsIcFliuTa/zhKE7IzLC9XqoglzhV0vk0/img.png)
CountriesApi.tsapi 호출import axios from "axios";export const CountriesApi = async () => { try { const response = await axios.get("https://restcountries.com/v3.1/all"); return response.data; } catch (error) { console.error("컨트리 못 불러옴", error); throw error; }}; try 블록 내에서 axios.get 메서드를 사용하여 https://restcountries.com/v3.1/all 로 GET 요청을 보낸다.이 요청이 성공하면, 응답 데이터 (response.data)를 반환한다.요청..
타입스크립트(TypeScript) 는 마이크로소프트가 개발하고 유지하는 오픈 소스 프로그래밍 언어이자 자바스크립트의 상위 집합으로, 자바스크립트 코드에 타입 시스템을 추가하여 코드의 가독성, 유지보수성, 그리고 오류 검출 능력을 향상시킵니다. 정적 타입 지정 let num: number = 5;let name: string = "John"; 타입스크립트는 컴파일 타임에 변수, 함수, 객체 등의 타입을 지정할 수 있다.이를 통해 런타임 오류를 미리 잡아낼 수 있다.타입 추론let num = 5; // 타입을 명시하지 않아도 number로 추론 타입스크립트는 코드의 맥락을 이해하고 타입을 자동으로 추론한다.인터페이스와 타입 엘리어스interface Person { name: string; ag..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/uAZjg/btsH82nuaBA/3sCRO9tKkkwUsv51prjxq0/img.png)
TanStack Query TanStack Query는 이전에 React Query로 알려진 라이브러리로, React 애플리케이션에서 서버 상태 관리를 효과적으로 처리하는 데 사용됩니다. 서버 상태 관리:TanStack Query는 서버 상태(서버에서 가져온 데이터를 클라이언트에 캐시하는 것)를 관리하는 데 최적화되어 있습니다.일관되고 성능 좋은 방식으로 서버 상태를 가져오고, 캐시하고, 동기화하며, 업데이트할 수 있는 도구를 제공합니다.주요 기능:캐싱: 서버에서 가져온 데이터를 자동으로 캐시하여 성능을 향상시키고 불필요한 요청을 줄입니다.동기화: 백그라운드 리패칭 및 데이터 무효화를 처리하여 서버와 클라이언트 간의 데이터를 동기화합니다.에러 처리: 내장된 에러 처리 지원으로 에러를 처리하고 표시하는 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/MTV9I/btsH6RzIChO/beHWTdtWqoWUdMlGrHpII1/img.png)
메인페이지 게시글 작성 crud 마이페이지 today' menu설문조사를 이용해 음식을 추천해주고, 레시피를 등록, 공유할 수 있는 사이트 supabase 를 이용해 로그인, 회원가입 기능 및 DB 를 관리했다. 전반적으로 기존에 사용하던 라우터가 아닌 새로운 라우터 버젼을 사용해서 낯설지만 새로운 경험이 됬고,리액트 쿼리를 실제로 적용해 볼 수 있는 좋은 기회였다.기획 단계에서 페이지 구조를 잘 설계하고 시작한다면 나중에 고생을 덜(?) 할 수 있다는걸 알게됬다.. 저번 프로젝트 때도 그렇고, 이번 프로젝트 때도 그렇고 기획 단계가 정말 정신없긴 하지만 신경을 많이 써야되는 것 같다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/elTlrG/btsH6xttTKg/H7bOWjxu1Hxjk21B4LeaKK/img.png)
supabase /table/ recipes / thumbnail 에 들어갈 이미지를 public url 로 변환 완료 (기존은 base64) //레시피 추가 메서드 async postRecipe(recipe, file, userId, nickname) { let thumbnailUrl = ''; // 기본적으로 빈 문자열 또는 기본 이미지 URL로 설정 // 파일이 있는 경우에만 이미지 업로드 시도 if (file) { // 스토리지에 이미지 저장 const { data: uploadData, error: uploadError } = await supabase.storage .from('images') .upload(`recipeimages..