🏠기존에 오라클로 홈서버를 만들었었다. 요기AWS로 환경을 변경하면서 MySQL로 마이그레이션을 하게 돼서 MySQL로 홈서버를 구축했다. 처음에는 오라클 환경처럼 공유기 포트포워딩으로 MySQL의 3306 포트를 외부에 공개하려 했지만이번에는 Tailscale이란 신세계를 접하게 되어 Tailscale을 사용해 구축했다. 💭Tailscale을 이용하면 인터넷 상에 포트를 공개하지 않고 팀원만 안전하게 접속할 수 있다.팀원은 내 컴퓨터의 공인 IP나 공유기 내부 IP로 접속하지 않고 Tailscale이 발급한 100.x.x.x 형태의 전용 IP로 MySQL에 접속한다.Tailscale을 사용하면 공인 IP가 변경되어도 영향을 받지 않기 때문에 IP가 변경될 걱정을 하지 않아도 된다! MySQL 외부..
React에서 API를 다루다 보면 데이터를 조회하는 것만큼 데이터를 생성하거나 수정하고 삭제하는 작업도 자주 발생한다.TanStack Query에서는 데이터를 조회할 때 useQuery를 사용하고 서버의 데이터를 변경할 때 useMutation을 사용한다.처음 useMutation을 접했을 때는 단순히 POST나 PUT 요청을 보내는 함수 정도로 생각했는데실제로 사용해 보니 요청 상태 관리부터 성공/실패 처리, 기존 Query 캐시 갱신까지 함께 처리할 수 있어 꽤 편리하다고 느꼈다.이번 글에서는 useMutation의 기본적인 사용법과 실제 프로젝트에서 자주 사용하는 패턴을 정리해보려고 한다.useMutation이란?useQuery와 useMutation의 차이를 간단하게 정리하면 다음과 같다.🟠 ..
🔐리액트 프로젝트를 하다 보면 반드시 마주치는 문제가 있는데바로 로그인 상태에 따른 라우팅 처리다.나도 이번에 로그인 플로우를 구현하면서 로그인 인증이 성공 상태(200 코드)인데도 메인 페이지로 이동이 안 되는 상황을 겪었고 그 과정에서 로그인/비로그인 라우팅 구조를 한 번 제대로 정리하게 됐다. 문제 상황처음엔 이런 구조였다./** * fileName : useCheckAuth * description : 로그인 상태 확인 후 필요 시 토큰 갱신 및 페이지 이동을 결정하는 커스텀 훅 */export const useCheckAuth = () => { const { data, isLoading, isError, refetch } = useAuthQuery(); // 로그인 상태 확인 ....
🏠사이드 플젝을 오라클 홈서버를 구축해 공용DB로 이용하고자 도전해봤다.여러 블로그를 참고했는데 나는 한끝 다르게 성공... 왜 다른거지이 글을 바탕으로 진행했다.기본 게이트웨이 주소가 접속 안 되는걸 시작으로분명 구축에 성공했는데 ORA-17410 에러가 뜨면서 데이터베이스 접촉 자체가 안 됐었다.해결 방법을 순차적으로 정리해본다... 1. 포트포워딩먼저 공유기 관리자 페이지에 접속해 포트포워딩을 해줘야한다.포트포워딩을 해주기 위해선cmd에 ipconfg 를 입력해 내 IPv4 주소와 기본 게이트웨이 주소가 필요하다.기본 게이트웨이 주소를 브라우저 주소창에 입력하면 관리자 페이지로 이동된다. 근데 나는 IPv4 주소가 보통 사람들과 달랐다!!!게이트웨이 주소로 접속도 안 됨 우리집은 KT 공유기를 ..
🐻요즘 프론트엔드 프로젝트에서 Zustand + TanStack Query가 자연스럽게 같이 등장한다.처음에는 둘 다 상태 관리처럼 보여서 이거 둘 중 하나만 쓰면 되는 거 아닌가? 싶었는데 역할이 완전히 다르다.이번 글에서는 실제 로그인 플로우를 구현하면서 느낀 차이를 정리해본다. 1. Zustand는 무엇인가?Zustand는 전역 상태 관리 라이브러리다.Redux보다 훨씬 간단하고, 보일러플레이트도 거의 없다.프론트 내부 상태를 저장하는 곳으로,예를 들면 로그인 모달 열림 여부, 다크모드 상태, 사이드바 열림/닫힘, 사용자가 선택한 탭 이런 것들을 저장한다. 사용예import { create } from 'zustand'export const useStore = create((set) => ({ ..
📚사이드 프로젝트를 새로 시작했다.기존에 세팅은 되었던 프로젝트라, Vite + React(JavaScript) 프로젝트에 TypeScript를 추가하면서 겪었던 과정과 필요한 설정을 정리해보았다.1. TypeScript 설치먼저 프로젝트에 TypeScript와 React 타입을 설치한다.npm install -D typescript @types/react @types/react-dom설치가 완료되면 TypeScript 설정 파일을 생성한다.npx tsc --init그러면 프로젝트 루트에 tsconfig.json 파일이 생성된다. 2. tsconfig.json 설정기본 생성된 tsconfig.json을 Vite 환경에 맞게 일부 수정했다.{ "compilerOptions": { "target":..