😯@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,..
🙄Emotion이 'use client'를 사용하라고 불평했다. emotion을 학습해보던 중 next.js 환경에서 사용해보려고 하니 위와 같은 에러를 반환했습니다. 우선 emotion docs에 ssr에 관한 항목이 있어 이를 참고해보았습니다. https://emotion.sh/docs/ssr Emotion – Server Side Rendering Server side rendering in Emotion 10 has two approaches, each with their own trade-offs. The default approach works with streaming and requires no additional configuration, but does not work with nth ..
😎세가지를 조합하면 아주 멋진 것을 만들 수 있다. https://xionwcfm.tistory.com/322 https://xionwcfm.tistory.com/323 https://xionwcfm.tistory.com/325 지금까지 진행한 세가지 라이브러리에 대한 포스트입니다. 이 세가지를 조합하면 아주 멋있고 유용한 CSS를 작성할 수 있습니다. npm install --save clsx npm install tailwind-merge npm install class-variance-authority 우선 tailwind css는 설치되어있다고 가정하고 위 라이브러리들을 설치해줍니다. 유틸함수를 만들어 주겠습니다. import { ClassValue, clsx } from 'clsx'; impor..
