오늘은 지난 포스트에서 설명했듯 useQuery와 useMutation에 대해 작성해 볼 것이다. Queries쿼리는 고유 키와 연결된 비동기 데이터 소스에 대한 선언적 의존이다. 쿼리는 서버에서 데이터를 가져오기 위해 Promise 기반 메서드(예: GET 및 POST)를 사용한다. 데이터를 수정하는 메서드에는 Mutations를 사용하는 것이 좋다. 서버에서 데이터를 가져올 때 -> useQuery 데이터를 수정할 때 -> useMutaion useQuery 사용법 queryKey : 쿼리의 고유 키 , 캐시를 관리하기 위한 키 값으로 배열 형태로 사용 queryFn : promise 를 반환하는 함수 import { useQuery } from '@tanstack/react-query'funct..
분류 전체보기
오늘 포스트는 Tanstack Query 공식문서를 읽고 Tanstack Query에 대한 개념과 사용방법에 대해 작성해 볼 것이다. 공식문서에 대한 포스트는 양이 많아질 것으로 예상되어 여러 포스트로 작성될 예정이다 ! TanStack Query란?(React Query)TanStack Query( 이전에는 React Query)는 웹 애플리케이션의 데이터 패칭 라이브러리로, 서버 상태를 쉽게 패칭, 캐싱, 동기화 및 업데이트할 수 있도록 해준다. 한마디로 강력한 비동기 상태관리 툴. 공식문서에서는 기존에 존재하는 다른 상태 관리 라이브러리(redux, zustand, recoil..)는 클라이언트 상태를 다루기에는 좋지만, 비동기나 서버 상태를 다루기에는 적합하지 않다고 설명되어 있다. ..
구르미월드를 마무리하고 잠깐의 휴식기간을 가지던 중 백엔드 친구로부터 새 프로젝트 제안을 받게 되었다 ! 초기 아이디어는 모두 정한 상태였고 프론트엔드로 개발에만 참여하면 되는 상황이었기 때문에 흔쾌히 프로젝트에 참여하기로 하였다 !! 바쁘게 살아야 느슨해지지 않을 것 같아서 이번 프로젝트 또한 열심히 참여해야겠다고 다짐했다 ! 프로젝트 소개 안녕하세요, 우리 프로젝트는 음악 커뮤니티를 만드는 것을 목표로 하고 있어요. 이 커뮤니티는 리스너들이 음악 앨범에 대한 평가와 코멘트를 남길 수 있는 기능을 제공할 거예요. 이렇게 모은 데이터를 기반으로 통계 대시보드를 제공하여 사용자들이 음악을 더 깊이 있게 탐험하고 공유할 수 있도록 할 거에요. 또한, 커뮤니티 활동을 촉진하기 위해 사용자들의 활동에 대한 수..
오랜만에 프로그래머스로 문제를 풀어보았다!! 요즘 알고리즘 스터디를 하면서 노션에 정리했었는데 이 문제는 스터디에서 다룬 문제가 아니므로 블로그에 작성해보겠다! https://school.programmers.co.kr/learn/courses/30/lessons/250137 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr(문제가 너무 길어 링크로 첨부합니다!) function solution(bandage, health, attacks) { let answer = 0; let attackMap = new Map(attacks); let..
프론트엔드에 대해 공부하면서 단순히 언어에 대한 공부를 해왔었다. javascript 를 어떻게 쓰는게 유용할지 , HTML 을 시멘틱하게 작성하려면 어떻게 해야하는지 , 반응형으로 CSS 적용하기 등 ... 항상 vscode 에서 코드를 실행하고 확장프로그램인 Live server 를 이용해서 크롬으로 바로 결과를 확인하고 "음 .. ! 만족스러운 결과다 "하고 넘어갔었는데 갑자기 브라우저에서 어떻게 내 코드가 변환되어 화면으로 나타나는지에 대한 궁금증이 생겨버렸다 .. !!! 그래서 오늘 포스트는 브라우저의 렌더링 원리에 대해 작성해보고자 한다. 프론트엔드 개발자라면 꼭 알고 있어야할 지식중에 하나라고 생각한다 👍 브라우저 렌더링이란 ? HTML, CSS 및 JavaScript와 같은 웹 페이지의 요..
드디어 약 2달동안 진행했던 '구르미 월드' 개발을 끝마쳤다 .. ! 계획은 약 1달 반 동안 진행하려고 했지만 개발을 하면서 점점 욕심이 생기고 기능들을 추가하고 수정하느라 시간이 좀 더 걸렸던 것 같다. 물론 프로젝트에만 매진한 것도 아니기도 했고 다른 것도 하면서 진행하느라 좀 더 늦춰진 거 같긴하다 . 사실 취업준비를 하면서 지금 새 프로젝트를 시작하는게 맞을까 ? 하는 고민도 있었지만 하길 잘했다 느꼈다. 리액트를 주로 사용하긴 하는데 시간이 지나면 기본적인 것도 헷갈리고 헤맸던 부분도 있었는데 이번 프로젝트를 통해 리액트에 대한 기반을 다질 수 있었고 백엔드와 원할하게 소통하는 방법을 익힐 수 있었다. 바로 전 프로젝트에서는 백엔드 분들과 협업할 때 백엔드 분들이 사용하시는 용어들을 이해하지 ..
문제점 : 배포를 했는데 다크모드가 자동으로 적용 되어 CSS 가 깨져서 나온다. ex) 하얀색 배경 폼 -> 검정색 배경 폼으로 변경 , 폰트 컬러를 지정해주지 않은 글 -> 하얀색으로 변경 등 저번 프로젝트와 이번 프로젝트를 진행하면서 로컬 환경에서는 문제가 없었지만 배포를 하고 테스트를 하는 과정에서 웹 이용자가 다크모드를 사용할 때 자동적으로 글씨 색상이나 폼 배경 색깔이 변경되는 문제점을 겪었다. 해결은 간단하게 할 수 있었다. index.css 파일 :root 에서 color-scheme 부분이 light dark 로 설정되어 있는데 light only 로 바꿔주면 된다. :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, san..
처음 리액트 공부를 시작했을 땐 CRA (Create React App) 으로 리액트 개발 환경을 구성했었다 ! 나름 사용하기도 편리하고 가장 먼저 접하게 된 방법이었기에 줄곳 CRA 로 리액트를 시작하였지만 처음 초기 셋팅 때 생각보다 시간이 좀 많이 걸리기도 하고 배포하는 과정에서 CRA 보다 다른 방법을 사용하는 것이 좋다는 말을 듣게 되어 다른 방법이 없을까 모색하던 중 Vite 로 리액트 환경을 구성할 수 있다는 것을 알게 되었다 !! 그래서 오늘은 Vite로 리액트 환경을 구성하는 방법에 대해 적어보고자한다. Vite 란 ? Vue.js 및 React 프로젝트를 위한 빠르고 간단한 빌드 도구. Vite는 모던 브라우저에서 웹 애플리케이션을 더 빠르게 실행하기 위해 개발됨. Vite의 특징 빠른..
한 배 탄거다 프로젝트 이름 : 구르미 월드 프로젝트 기간 : 12/19 ~ 1/31 팀원 : 프론트 1 , 백엔드 1 (총 2명) 팀명 : 한 배 탄거다 프로젝트 소개 : (친구의 성과 내 성을 붙여 팀명을 지었다.. 너무 마음에 든다 .. 한 배 탄거다 .. ! ) 오래간만에 프로젝트를 하나 시작하게 되었다. 졸업을 앞 둔 백엔드 친구와 통화를 하던 중 방학 때 할 것도 없는데 프로젝트 하나 해보자 ! 제안을 받았고 나도 현재 코딩테스트 준비 말고는 딱히 공부 중인 것이 없어서 흔쾌히 제안을 승낙했다. 요즘 날씨가 부쩍 추워져서 매트와 함께 살던 나는 새로운 프로젝트를 할 생각에 들뜬 마음으로 이불을 걷어내고 즉시 카페로 달려나와 아이디어 회의를 하게 되었다. 아이디어 회의에서는 첫 번째로 유용한 기..
