분류 전체보기

React Query 캐시 초기화 후 다시 받아오기

자주 사용될 일은 없지만, 꼭 써먹어야하는 순간이 있기 때문에 기록용으로 남기는 게시물입니다. (react query, tanstack query) 웹 사이트에 사용된 ReactQuery의 모든 API 캐시를 날려버리고 다시 받아와야 하는 경우가 있었습니다. 버튼 클릭시 A 테이블을 사용한 API 수십개를 B 테이블을 사용한 API 로 교체해야하는 그런 경우였습니다. Local Storage 를 사용하여 값이 true 면 A API, false 면 B API 를 사용하도록 제어 하였는데 문제는 React Query의 응답값 캐시였습니다. 이 캐시를 몽땅 비워주고 다시 API 호출할 수 있도록 queryClient.invalidateQueries() 함수를 사용하였고, 옵션으로 refetchInactive..

4-5월 재충전의 시간 (걷기, 익명의 편지 모임)

 4-5월 재충전의 시간 오랜만에 휴가를 쓰고 여유가 생겨서 근황을 쓸 수 있게 되었습니다. 걷기 모임 이전 스토리에 이어서... 때는 4월 중순이었습니다. 그때 진짜 몸도 마음도 아프고 힘든 시기어서 그냥 다 내려놓고 좀 쉬고 싶고 싶었습니다. 그냥 아무 생각없이 걷고 싶었는데 우연히 걷기 모임을 발견해서 걸으러 나갔습니다. 이 모임의 좋았던 부분은 수요일 퇴근 후 널널한 시간에 만나서 진짜 그냥 걷기만 하다가 돌아간다는 것이었습니다. 뒷풀이가 없고, 술자리가 없고, (회차는 계속 있지만) 일회성 모임이기 때문에 모임 사람들과 관계 유지에 힘쓸 필요도 없고, 그냥 그날 하루 보내고 오면 된다는 것, 그런 부분들이 참 좋았습니다. 그러나 모든게 다 좋았던 것은 아닌데요. 그 모임이 이미 회차가 꽤 진..

나의 해방일지 줄거리, 감상평(스포주의)

소개 2022년 4월 9일 ~ 2022년 5월 29일 방영한 JTBC 드라마 입니다. 연출은 진지한 상황에서도 유쾌하고 유머러스한 연출을 잘 표현하시는 김석윤 PD님 극본은 또 오해영, 나의 아저씨 등을 집필한 박해영 작가님 살면서 마음이 정말로 편하고 좋았던 적이 얼마나 있었나? 항상 무언가 해야 한다는 생각에, 어떻게든 하루를 알차게 살아내야 한다는 강박에 시달리면서도, 몸은 움직여주지 않고, 상황은 뜻대로 돌아가지 않고... 지리한 나날들의 반복. 딱히 큰 문제가 있는 것도 아닌데 왜 행복하지 않을까? 그렇다고 문제가 없다는 말도 못 한다. 문제가 있는 것도 아니고, 문제가 없는 것도 아니고. 정확하게 말할 수 있는 한 가지는, 행복하지 않다는 것. 해방. 해갈. 희열. 그런 걸 느껴본 적이 있던가..

Apollo Subscription 으로 GraphQL 서버와 WebSocket 통신하기

구독 백엔드 데이터의 변경 사항에 대해 클라이언트에 실시간으로 알리는데 유용합니다. Query,Mutation 과 달리 지속적인 연결을 유지해야 하기 때문에 graphql-ws 라이브러리를 통해 WebSocket으로 통신합니다. 구독은 이럴 때 사용합니다. 이 경우가 아니라면 쿼리를 사용하여 간헐적 폴링을 하거나 필요한 순간에만 쿼리 하세요. 또한 구독은 외부 데이터의 변경 사항을 구독하는 것입니다. 로컬 클라이언트 캐시의 변경사항 구독에 사용할 수 없습니다! 큰 개체에 대한 작은 증분 변경 큰 덩어리 객체에서 필요한 개별 필드의 업데이트가 발생했을때 가져오는 경우를 뜻합니다. 대기 시간이 짧은 실시간 업데이트 예를 들면 채팅 앱에서 실시간 메시지를 주고 받는 경우 Apollo Client 에서 지원하는..

몸도 다치고 마음도 다치고... 좋은 일이 일어나면 그 다음은 나쁜일이 아니라 아주 나쁜일이 일어나는 요즘 근황

근황 엄청나게 오랜만에 개발 블로그 다운 게시물 하나 써놓고 뿌듯해하면서 또 아무도 궁금하지 않을 근황 쓰러 왔습니다. 최근에 정말 정말 많은 일이 있었거든요.. 자전거 낙차 사건 배달비 쪼금 아껴보겠다고 집 근처에 있는 햄버거🍔 집에 픽업 배달 시켜놓고 자전거🚴‍♀️ 타고 가는 도중에 자빠졌습니다 ㅋㅋㅋ 😣 🤕... 평소에 거의 안가던 방향으로 갔었는데요. 도로 폭도 인도도 너무 좁고 정말 위험하다고 생각하여 일단 도로에서 인도쪽으로 건너가자 했는데 턱에 걸려서 자빠지고 말았습니다. 제 생각에는 턱이 높지 않다고 생각했는데 자전거가 못넘어가더군요. 너무 기준치를 관대하게 생각했던 것 같습니다. 속도는 거의 걸어가는 수준이었어서 크게 다치진 않았는데 아픈건 둘째치고 너무 쪽팔렸습니다. 아무렇지 않은척 일..

React에서 Apollo Client 를 상태관리 라이브러리로 사용하기

오늘은 리액트에서 Apollo Client 를 사용하는 경우 Redux, Recoil, Jotai, Zustand 와 같은 상태관리 라이브러리를 사용하지 않고 Apollo Client 만을 사용하여 클라이언트 내부 상태관리하는 방법에 대해 알아보겠습니다. 주의할 점은 Apollo Client 가 GraphQL + 클라이언트 내부 상태관리도 가능하다는 것이지, GraphQL 를 사용하지 않는 환경에서 이미 잘 사용하고 있는 상태관리 라이브러리를 대체해서는 안됩니다 🙅‍♂️ 이미 다 아시겠지만, Apollo Client 를 통해 Apollo Server 에 Query를 요청하는 방식부터 살펴봅시다. Apollo Client 를 통해 서버에 Query 요청하는 방식 Apollo Client와 GraphQL ..

취미 부자가 되자

또 다시 근황 최근 들어서 그동안 너무 숨가쁘게 살아왔다는 생각이 크게 들었습니다. 20대를 거의 2년을 주기로 내가 하는 일, 주변 사람, 지역, 환경이 바뀌며 살아왔는데 이제는 좀 정착하고 안정적인 것을 추구하고 싶다는 생각이 들기 시작했습니다. 여기서 말하는 정착, 안정이라는 것은 공부 때려치우고 게으른 수동적인 월급쟁이로 살고싶다 이런 뜻이 아니라 지금 하고 있는 개발 일을 2년 후에도 5년 후에도 계속해서 하고 싶다는 뜻이고 내가 좋아하는 것을 내일도 모레도 1달 후에도 1년 후에도 꾸준히 하면서 취미로 이어가고 싶다는 뜻입니다. 환경 바뀔 때마다 사람들과 멀어지는 것도 너무 스트레스였는데 이제는 연락하는 사람들과 계속해서 인연을 이어나가고 소통하고 싶네요. 취미 부자가 되자 게임을 제외하고 ..

MBTI 업데이트?

요즘 제 걱정은 제가 제 스스로를 잘 모르겠다는 것 입니다. 저는 꽤 이른 나이 부터 이런 고민을 했어서 이미 나를 잘 알게되었다고 생각했었는데요. 요즘 또 헷갈리기 시작합니다. 쉽게 말해서 MBTI 가 업데이트가 된 것 같습니다. 다들 잘 아는 MBTI 에 비유하여 이야기 해보자면... 굳이 약속잡고 사람 만나는건 귀찮고 집에 있는게 좋지만, 또 집에만 있으면 그렇게 사람을 만나고 싶을 수가 없습니다. 저는 사람들한테 연락을 잘 안하고 집에 있는 걸 좋아하는걸 보면 I형 같기도 하면서 누구보다 밖에서 사람 만나는걸 좋아합니다. 모임 한번 나가면 사람들과 금방 친해져있고 항상 마지막 까지 남아있는 저는 I 일까요 E 일까요? 그러면서도 너무 말 많은 사람들 사이에 있다가 기가 다 빨려오는 날이 있는걸 보..

VSCode 스니펫 생성하기

스니팻 생성 https://snippet-generator.app/ 사이트에 접속한뒤 원하는 템플릿 구조를 왼쪽에 작성합니다. Description : 설명을 작성합니다. Tab trigger : 저장한 템플릿을 한방에 불러올 마법의 단어를 작성합니다. Your snippet :저장할 템플릿을 입력합니다. 2-2. vscode 로 돌아와서 File > Preferences > User Snippet 을 클릭하면 상단에 사용할 언어를 쓰면됩니다. 참고로 VSCode 에서 맥북 기준으로 Command+Shift+P 를 누르고 Snippets 까지 입력하는게 빠릅니다. (커맨드 꼭 외우는걸 추천) 자바스크립트 리액트라면 javascriptreact.json 을 선택 후 사이트에서 변환된 코드를 삽입해주면 됩니..

Next.js 에서 소셜 로그인 구현하기 (next-auth.js 사용)

Next.js 에서 next-auth 라이브러리 사용하여 소셜 로그인을 구현하는 글 입니다. 소셜 로그인(카카오, 네이버) 과 커스텀 로그인 두가지 모두 구현해보겠습니다. next-auth next-auth 라이브러리는 쉽게 인증 로직을 구현하기 위한 Next.js 전용 라이브러리입니다. 모든 OAuth 서비스와 함께 작동하도록 설계되었으며 OAuth 1.0 , 1.0A , 2.0 및 OpenID Connect를 지원 하며 가장 널리 사용되는 로그인 서비스를 기본적으로 지원합니다. OAuth 동작 과정에 대해서는 이곳을 참고하세요 물론 인증 로직을 직접 구현해도 되지만, 쉽고 빠르게 할 수 있는 라이브러리를 쓰면 정신 건강에 이롭습니다. NextAuth.js Authentication for Next.j..