😎마치 useEffect의 의존성배열과 비슷하다! 리액트 쿼리는 모든 리렌더링에 대해 queryFn을 트리거하지 않습니다. 기본적인 유효기간(0초)가 지나도 마찬가지로 queryFn을 트리거하지 않아요 왜 그럴까요? 리액트에서 리렌더링은 굉장히 많이 일어날 수 있습니다. 이런 리렌더링마다 비용이 비싼 fetch 요청을 보내는 것은 미친짓이라고도 할 수 있습니다. 그러니... 한번 받아왔다면 revaildate가 필요하기전까지는 fetch를 하지 않는게 맞겠네요! 그런데 쿼리는 여러개일 수 있어요 각각의 쿼리에 대한 아이디가 있어야 어떤 쿼리가 바뀌었는지 인식할 수 있을 것이고 특정한 쿼리가 바뀌면 화면도 바뀌어주어야하겠죠? 마치 useEffect가 의존성배열에 있는 요소에 변화가 생기면 트리거되는것처럼 ..
CI/CD https://xionwcfm.tistory.com/309 CI/CD와 무중단 배포 🐕 CI/CD 무중단 배포 위키 백과에 따르면 CI/CD는 소프트웨어 공학에서 지속적 통합(continuous integration)과 지속적 배포(continuous delivery)가 결합한 사례 를 의미합니다. 즉 소프트웨어의 개발, 테스트 xionwcfm.tistory.com ci/cd에 관한 내용은 이전에 정리해둔 글이 있으니 링크로 대체합니다. 애플리케이션이 사용자에게까지 전달되려면 테스트 , 빌드, 배포 과정을 거쳐야만 할 것입니다. 테스트를 통해 새로 수정된 애플리케이션이 정상적으로 동작하는지 확인할 수 있어야하고 프론트엔드가 담당하는 부분같은 경우에는 여러가지 프레임워크들을 이용해 작업한 파일들..
😯@tanstack/react-query를 사용하는 이유 리액트쿼리는 강력한 데이터페칭도구입니다. 비동기 상태 관리를 도와주고 로딩, 에러처리, 리페칭, 캐싱 등 개발자가 생각하기 귀찮은 문제들을 대신 해결해주며 개발자는 무엇을 할것인지에 더 초점을 맞출 수 있도록 도와주는 라이브러리입니다. 비슷한 역할을 하는 라이브러리로 ReduxToolkit이 제공하는 RTK Query가 있습니다. RTK Query에 대한 사용법이 궁금하신 분들은 아래 링크를 참고하세요 https://xionwcfm.tistory.com/279 예제와 함께 TS ReduxToolkit Query Slow start ReduxToolkit Query에 대해서 잘 정리된 문서 / 영상을 찾아보기가 굉장히 힘들었고 특히 한국어로 되어있는..
😖ssh키를 생성해보자. ssh key gen 같은 초기 세팅은 한번 해두면 계속 쓰기도 하니 이렇게 필요한 시점이 오면 쉽게 잊혀지는 것 같습니다. EC2는 어떻게 보면 하나의 컴퓨터를 대여하는것이나 다름 없기에 내 컴퓨터에서 당연하게 쓰던 git setting도 되어있지 않습니다. 심지어는 당연하게 사용하던 node.js도 없고 nvm도 없고 그냥 아무것도 없더라구요 re: zero부터 다시 시작하는 개발환경세팅.. 을 해야하는데 몇번 안해보다보니 까먹게된것같습니다. 터미널을 bash로 전환해주고 cd ~를 통해 루트폴더로 이동했습니다. ssh-keygen 위와 같은 창이 뜬다면 성공입니다. 프롬프트 대화형으로 되어있기에 enter를 좀 입력해줘야합니다. key gen에 성공했다면 ~/.ssh./ 경..
AWS가 제공해주는 자습서를 참고할 수 있습니다. nvm github를 참고해보면 설치방법을 쉽게 알 수 있습니다. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash 둘 중 하나를 그냥 실행시켜주면 됩니다. https://docs.aws.amazon.com/ko_kr/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html 자습서: Amazon EC2 인스턴스에서 Node.js 설정 - AWS ..
😂왜 DOM요소는 as로 타입단언해야하나요? 사실 별 생각없이 당연히 그런거아님? 하고 넘어갔던 문제인데 디스코드에 질문이 올라온걸 보고 다른사람도 납득할 수 있게 근거를 들어 설명하려니 꽤나 어렵다는 생각이 들었습니다. 따라서 제 나름대로 접근하여 결론을 내봤습니다. 물론 100% 뇌피셜은 아니고 나름대로 레퍼런스를 찾아보면서 근거를 확인했어요 그래도 제 생각이 틀릴 수 있으니 만약 그런 경우 댓글 남겨주시면 감사하겠습니다. 😉나의 답변 익명보호를 위해 질문자 분 성함은 그림판으로 가렸습니다. 우선 이 답변이 제 결론이며 이 포스트에서는 제가 결론에 도달하기까지의 과정을 서술하겠습니다. 🤗타입스크립트로 작성한 파일은 어떻게 컴파일될까? 1. 타입스크립트 컴파일러에 의한 타입스크립트 -> 자바스크립트 변..
😙Next.js에서 소셜로그인 구현하기 next-auth는 OAuth로그인을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. next-auth를 이용하면 Oauth를 간편하게 구현할 수 있습니다. 근데 처음하는 입장에서 Oauth 자체가 간편하지 않습니다. 그러한 모순을 견뎌내는 것이 Oauth의 길이니까.. 😚설치 방법 npm i next-auth 😐Google Oauth 설정하기 https://cloud.google.com/solutions/apis-and-applications?hl=ko 우선 구글 oauth 로그인을 위해서는 클라이언트 아이디가 필요합니다. 관련 설정 방법은 잘 포스팅 된 글들이 많이 존재합니다. http://blog.teamelysium.kr/nextjs-auth NextAut..
😉error.js https://nextjs.org/docs/app/api-reference/file-conventions/error File Conventions: error.js | Next.js Using App Router Features available in /app nextjs.org error.js는 예약된 이름의 파일입니다. 에러가 발생했을 때 표시되게 되는 파일이에요 사실 Next.js가 제공하는 문서에서 아주 잘 설명을 해주고 있습니다. 'use client'; // Error components must be Client Components import { useEffect } from 'react'; export default function Error({ error, reset,..
