React의 렌더링, 왜 알아야 할까?React를 배우다 보면 '렌더링'이라는 단어를 자주 접하게 된다.렌더링이란 도대체 무엇이고 왜 중요할까? React는 사용자의 행동이나 상태 변화에 따라 UI를 업데이트한다.이때 UI가 어떻게 바뀌는지를 결정하고 실제로 화면에 보여주는 과정을 `렌더링(Rendering)`이라고 한다.즉, React에서의 렌더링은 애플리케이션의 성능과 사용자 경험을 좌우하는 핵심 개념이다. 그렇기 때문에 우리는 React를 공부하면서 렌더링 과정을 깊숙이 이해할 필요가 있다.렌더링 과정을 이해하게 되면, 성능 최적화를 위해 어떤 부분을 건드려야 하는지 자연스럽게 알게 되기 때문이다. 그래서 이번 글에서는 React의 렌더링 과정은 구체적으로 어떻게 흘러가고, Virtual DOM이 ..

개요오늘 Tanstack Query로 리팩토링하는 타임어택을 하다가 오류를 하나 해결하지 못하고 제출했었다.동기분에게 도움을 요청했었는데 바로 문제를 찾아주셨다👍🏻 문제는 `useQuery`에서 queryKey를 설정하는 곳에서 발생했었다.queryKey의 역할을 명확하게 이해하고 있지 못하는 것 같아 queryKey에 대해 글을 정리해보려고 한다.  queryKey는 무엇일까?queryKey를 기반으로 쿼리 캐싱을 관리함 queryKey의 특징· queryKey는 반드시 배열 안에 있어야 한다.· query에 대한 추가적인 정보가 필요하면 해당 내용을 string key 뒤에 넣어주면 된다.⭐️ 같은 queryKey를 가진 요청은 동일한 데이터를 공유한다.  내가 겪은 문제 상황과 원인💻 기존의 ..

개요저번 프로젝트에서 북마크 기능을 구현해본 경험이 있었다.하지만 그때는 마감시간에 급박하게 짜느라 코드를 깔끔하게 작성하지 못했다.또한, 구현했던 내용을 정리하지 못해 잘 기억도 나지 않았다.이번에는 잊지 않기 위해 북마크 기능에 대한 내용을 정리해보려고 한다. 북마크 기능 구현 환경 및 순서아웃소싱 프로젝트에서는 BaaS(Backend as a Service)인 supabase와 Tanstack Query를 사용했다.프론트엔드에만 집중하기 위하여 supabase를 이용하였고, 서버 상태를 관리하기 위하여 Tanstack Query를 선택하였다. 🚩 북마크 기능 구현의 순서1. supabase에 bookmarks 테이블 만들기2. bookmarks 테이블에서 사용자가 북마크한 데이터 가져오기3. 북마..

Optimistic Updates란?UX를 개선하기 위해 실제 서버 응답을 기다리지 않고 UI를 먼저 업데이트하는 기법서버 응답이 성공하면 UI를 그대로 유지하고, 실패하면 이전 UI로 돌아간다. Optimistic Updates는 좋아요 버튼, 북마크 버튼, 장바구니 담기 등에서 많이 사용한다.예를 들어, 사용자가 좋아요 버튼을 눌렀는데 바로 바뀌지 않고 3-4초 있다가 바뀌면 좋지 못한 사용성을 제공하게 된다.   문제 상황테스트 결과를 공개로 전환하는 버튼과 테스트 결과를 삭제하는 버튼을 눌렀을 때,약간의 로딩 시간이 발생한 뒤에 원하는 동작이 발생하였다.gif의 속도를 기본으로 설정해 두었다. 공개하기 버튼을 눌렀을 때 느리게 비공개하기로 바뀌는 것이 보이는가?삭제 버튼을 누를 때도 테스트 결과가..

카카오톡 공유하기 기능 구현 순서1. 카카오 Developers 설정하기2. 앱 키 확인하기3. index.html에 Javascript SDK 파일 넣기4. 카카오톡 공유 버튼을 눌렀을 때 동작하는 이벤트 리스너 가져오기5. 카카오톡 공유 버튼 컴포넌트 만들기   세부 내용1️⃣ 카카오 Developers 설정하기 Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 카카오톡 공유하기 기능 구현에 앞서 거쳐야하는 과정이 있다.기능을 구현하기 위한 API Key가 필요하기 때문에 카카오 developers에서 애플리케이션을 생성해야 한다.내 애플리케이션 ..

json-server간단하게 데이터 베이스와 API 서버를 생성해주는 패키지 💻 json-server 설치 코드yarn add json-server 💻 json-server 실행 코드백엔드 서버이기 때문에 따로 실행을 해줘야 한다.yarn json-server db.json --port 포트번호 💻 json-server 기본 주소http://localhost:포트번호 json-server 사용 방법1️⃣ json-server 패키지를 설치한다.yarn add json-server 2️⃣ root 경로에 db.json 파일을 생성한다.// db.json 예시 코드{ "posts": [ { "id": 1, "title": "json-server에 대해 알아보자"..