Next.js 환경에서 Supabase를 이용해 간단하게 카카오 로그인 구현하기 (1)

이번 시간에는 Next.js 환경에서 Supabase를 이용하여 아주 간단하게 카카오 로그인을 구현해 보려고 합니다! Supabase | The Open Source Firebase Alternative Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free. supabase.com Supabase는 구글의 Firebase와 유사한 서비스인데요, 쉽게 생각하면 백엔드 기능을 가지고 있는 서비스라고 생각하시면 됩니다. 데이터 베이스를 쉽게 다룰 수 있게 해주기 때문에 풀스택 개발에..

• format_list_bulleted Front End/Next
• · 2023. 12. 9.
• textsms

Next.js, Typescript 환경에서 라이브러리 “모듈에 대한 선언 파일을 찾을 수 없습니다” 에러

Next.js와 Typescript 환경에서 “모듈에 대한 선언 파일을 찾을 수 없습니다” 라는 에러가 발생하였습니다. 그리고 이 문제를 해결하는 방법을 소개하려고 합니다. 1️⃣ 사용하고자 하는 해당 라이브러리가 TS를 지원하는지 확인하자 우선적으로 살펴봐야 하는 것입니다. 옛날 라이브러리 같은 경우 pure esm.js파일만 가지고 있고 타입설정을 따로 해놓지 않는 경우가 있을 수 있습니다. 이런 경우에는 @node_modules/@types//index.d.ts 파일을 생성하여 직접 작성해주어야 합니다. 제가 사용하고자 하는 use-sound는 업데이트 한지 꽤 되긴 했지만, TS를 지원하는 라이브러리입니다. 2️⃣ TS를 지원한다면 npm의 @types/ 를 확인하자 npm i -D @types/..

• format_list_bulleted Front End/Next
• · 2023. 12. 7.
• textsms

[React] Context를 이용하여 전역에서 사용하는 상태 만들기

이번 시간에는 React의 Context를 익히는 시간을 가지려고 합니다. ❓언제 Context를 사용할 수 있을까요? Context는 전역에 상태를 저장할 수 있습니다. 이는 일일이 컴포넌트에 props를 넘겨주지 않게 해줍니다. export default function App() { const [prop, setProp] = useState() return ( ); } export default function Box({prop}) { console.log(prop) // App 부모 요소에서 전달받은 prop 값 return ... props을 넘겨주는 예시입니다. Constext를 사용함으로써 props를 넘겨주지 않아도 됨으로써, 의존성을 없앨 수 있고, drilling을 없애 가독성을 향상시..

• format_list_bulleted 카테고리 없음
• · 2023. 12. 3.
• textsms

[하루 30분 러닝 타입스크립트] 타입 시스템

✨ 타입의 종류 타입이란 typeof 연산자가 설명하는 형태를 다루는 값 타입 시스템 코드를 읽고 모든 타입과 값을 이해 각 값이 초기 선언에서 가질 수 있는 타입을 확인 각 값이 추후 코드에서 어떻게 사용 될 수 있는지 확인 값의 사용법이 타입과 일치하지 않으면 오류를 표시 오류 종류 구문 오류 : TS → JS 로 컴파일 되는 것을 차단 타입 오류 : 타입 검사기에서 일치하지 않는 타입 확인 타입 오류는 JS로 변환되는 것을 막지 않는다. ✨ 할당 가능성 함수 호출이나 변수에 값을 제공할 수 있는지 여부를 확인하는 것을 할당 가능성이라 한다. ✨ 타입 애너테이션 때로 변수에 초기값이 없는 경우, 나중 타입을 파악하려고 하지 않는다. 암묵적인 any 타입으로 간주한다. 이 때의 any를 진화하는 any..

• format_list_bulleted 기술 서적/하루 30분 러닝 타입스크립트
• · 2023. 11. 30.
• textsms

[React] React Query와 SWR의 차이?

저번 시간 SWR에 대해서 배워봤는데요, 많은 분들이 SWR대신 React Qeury를 사용하더라구요. 분명 더 좋다는 이야기가 많기는 한데, 구체적으로 어떤 차이인지 알아보기 위해서 공식문서를 뒤져가며 그 차이점을 알아보기 위해 노력했습니다. 이전 SWR에 대한 내용은 아래를 참고해주세요! [React] SWR이 무엇인가요? 우선 SWR을 알아보기 앞서 캐시에 대해서 알아보겠습니다. ❓캐시란 무엇인가 캐시는 데이터를 일시적으로 저장하는 메모리를 가리키는 용어입니다. 한 번의 요청에 비용이 큰 경우, 여러 번 요 lurgi.tistory.com 그리고 몇 일간 React Query와 SWR의 차이에 대해서 명확히 하고자 했지만, 제 지식의 한계로는 그 차이를 인지할 수 없었고, 간단한 코드를 작성하는 것..

• format_list_bulleted Front End/React
• · 2023. 11. 29.
• textsms

[React] SWR이 무엇인가요?

우선 SWR을 알아보기 앞서 캐시에 대해서 알아보겠습니다. ❓캐시란 무엇인가 캐시는 데이터를 일시적으로 저장하는 메모리를 가리키는 용어입니다. 한 번의 요청에 비용이 큰 경우, 여러 번 요청을 하는 것 보다, 한 번의 요청 이후 캐시에 저장하여 재사용 하기 위한 전략입니다. ❓SWR이 무엇인가 SWR은 Stale-While-Revalidate의 약자로 HTTP 캐시 무효 전략을 뜻합니다. SWR은 우선적으로 캐시로 부터 데이터를 반환한 후, fetch 요청(Revalidate)이 필요한지 확인하고 요청을 합니다. 즉 캐시에 있는 데이터로 처리할 수 있다면, 굳이 요청을 하지 않는 것이죠. 그리고 반대로 사용자가 원하는 순간에 요청을 보내 새로 데이터를 받을 수 있습니다. 이를 통해 컴포넌트는 지속적으로 ..

• format_list_bulleted Front End/React
• · 2023. 11. 24.
• textsms