[TypeScript] 타입 정의를 위한 팁

타입스크립트를 사용하면서 특정 라이브러리를 사용하거나 이벤트의 타입을 알아야할 때 정확한 타입을 알기 어려워 답답할 때가 있다그럴 때를 위한 팁! 1) 특정 메서드의 반환값을 알아야할 때예를들어 onSubmit 등 이벤트가 발생할 때 전달되는 매개변수 e의 알아야할 때onSubmit={(e) => {}}이렇게 임시로 함수를 작성한 뒤 알고싶은 e를 명시해준다 그리고 e에 호버해보면 위와같이 인텔리전스가 타입을 알려준다! 2) 라이브러리를 사용하는 경우react-hook-form의 resolver를 props로 전달하기위해 타입을 명시하려하는데 위 값은 호버해도 찾기가 어려웠다나는 챗지피티에게 물어 타입을 확인했고, 또다른 알 수 있는 방법을 튜터님께 여쭤보았더니 보통 라이브러리의 공식 사이트에서 typs..

• format_list_bulleted TypeScript
• · 2024. 10. 23.
• textsms

[트러블슈팅] API key가 올라간 PR 처리하기

팀 프로젝트를 진행하면서 실수로 API 키가 PR에 올라왔다!팀원분이 커밋을 하시고나서 모르고 계시다가 PR을 올린 후 같이 코드리뷰를 하다 발견해서 방법을 찾다가  PR은 지울 수 없다는 것을 알게됐다... 하지만 다같이 방법을 찾았다! 1) 깃허브에 문의해서 PR 지우기2) 로컬 커밋에서 살릴 부분만 살리기 깃허브에 문의해서 PR 지우기https://80000coding.oopy.io/dd8b0614-20b9-4574-a3bd-fb1f181bcaf6 깃허브에서 잘못 올린 PR 완전히 삭제하기 (1)깃허브를 public으로 사용하다보면 실수로 외부에 공개되면 안되는 민감한 내용이 노출되기도 합니다.80000coding.oopy.io위 블로그를 참고해서 문의했다! 생각보다 금새 지워졌다 1시간정도??  ..

• format_list_bulleted 팀 프로젝트
• · 2024. 10. 23.
• textsms

에러를 잡는 마음가짐..

supabase를 활용해 소셜로그인을 구현하던 중 client 컴포넌트에서 async/await을 사용할 수 없다는 경고가 발생했다 async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server. const handleKakaoSignIn = async () => { await client.auth.signInWithOAuth({ provider: 'kakao', options: { redire..

• format_list_bulleted 일지
• · 2024. 10. 22.
• textsms

[Next.js] prefetching이 잘 되었는지 확인하는 방법

Next.js를 활용해 프로젝트를 진행하며 캘린더 UI에 필요한 초기값을 prefetch 해두었는데 잘 되었는지 확인하고 싶어 알아보았다방법은 간단하다! 네트워크 요청에대한 응답 확인하기url로 어떤 페이지에 접속하는 것은 결국 그 페이지를 달라고 요구하는 get 요청을 하는 것이다따라서 그 요청의 응답값에 데이터가 잘 들어와있는지 확인하면 된다! 위 이미지 속 일정 정보들은 모두 prefetch로 받아둔 값이다페이지를 받아온 후 fetch 요청을 한 결과가 아니라 schedule 페이지 요청에 대한 응답에 처음부터 포함이 되어있었다는 것이므로, prefetch가 잘 이루어졌다는 것을 확인할 수 있다  데이터 출력해보기위 방법과 같은 개념이다페치된 데이터를 출력해보았을 때, 페이지를 받아온 후 비동기 작..

• format_list_bulleted Next.js
• · 2024. 10. 21.
• textsms

[supabase/TypeScript] 간단하게 database 타입 추론하기

supabase CLI를 이용해 간단하게 데이터베이스의 전체 타입을 생성해서 사용할 수 있다!https://supabase.com/docs/guides/local-development Local Development & CLI | Supabase DocsLearn how to develop locally and use the Supabase CLIsupabase.com 설치 및 세팅기본적으로 supabase를 js에서 사용하기 위한 세팅은 되어있다고 가정! npm install supabase --save-dev package.json에서 gen 명령어 지정해두기"gen": "supabase gen types --lang=typescript --project-id \"{supabase에서 project ..

• format_list_bulleted supabase
• · 2024. 10. 15.
• textsms

[supabase] 세팅하기

설치yarn add @supabase/ssr @supabase/supabse-js  환경변수 설정.env.local 파일에 supabase 프로젝트 url과 api key를 추가해준다  설정파일 추가utils/supabase/client.tsimport { createBrowserClient } from "@supabase/ssr";export const createClient = () => createBrowserClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! );const browserClient = createClient();export default browserClien..

• format_list_bulleted supabase
• · 2024. 10. 8.
• textsms