드리프트의 코-자-경(코딩, 자동차, 경제)

안녕하세요? Supabase로 로그인 구현하기 5편입니다. 일단 이전 편 못 보신 분들을 위해 전편 링크 걸어두겠습니다. https://cpro95.tistory.com/617 Supabase로 로그인 구현하기 with NextJS 1편 안녕하세요? 최근 NextJS로 여러가지 로그인 구현 웹앱을 만들려고 노력하고 있는데요. 최근에는 NextAuth와 Prisma를 이용해서 카카오 로그인, 네이버 로그인, 구글 로그인 등 다방면으로 구현해 봤 cpro95.tistory.com https://cpro95.tistory.com/618 Supabase로 로그인 구현하기 with NextJS 1편 안녕하세요? 최근 NextJS로 여러가지 로그인 구현 웹앱을 만들려고 노력하고 있는데요. 최근에는 NextAuth와..

안녕하세요? Supabae 로그인 구현 4편입니다. 전편 링크는 아래와 같습니다. https://cpro95.tistory.com/617 Supabase로 로그인 구현하기 with NextJS 1편 안녕하세요? 최근 NextJS로 여러가지 로그인 구현 웹앱을 만들려고 노력하고 있는데요. 최근에는 NextAuth와 Prisma를 이용해서 카카오 로그인, 네이버 로그인, 구글 로그인 등 다방면으로 구현해 봤 cpro95.tistory.com https://cpro95.tistory.com/618 Supabase로 로그인 구현하기 with NextJS 2편 안녕하세요? 이번 시간에는 지난 회부터 시작한 Supabase를 이용한 로그인 구현 2편을 이어나가도록 하겠습니다. 1편은 아래 링크 참조바랍니다. htt..

안녕하세요? 지난 시간에 이어 Supabase 서비스를 이용한 NextJS 로그인 구현을 이어 나가도록 하겠습니다. 1, 2편 링크는 아래를 참조해 주시기 바랍니다. https://cpro95.tistory.com/617 Supabase로 로그인 구현하기 with NextJS 1편 안녕하세요? 최근 NextJS로 여러가지 로그인 구현 웹앱을 만들려고 노력하고 있는데요. 최근에는 NextAuth와 Prisma를 이용해서 카카오 로그인, 네이버 로그인, 구글 로그인 등 다방면으로 구현해 봤 cpro95.tistory.com https://cpro95.tistory.com/618 Supabase로 로그인 구현하기 with NextJS 2편 안녕하세요? 이번 시간에는 지난 회부터 시작한 Supabase를 이용한..

안녕하세요? 이번 시간에는 지난 회부터 시작한 Supabase를 이용한 로그인 구현 2편을 이어나가도록 하겠습니다. 1편은 아래 링크 참조바랍니다. https://cpro95.tistory.com/617 Supabase로 로그인 구현하기 with NextJS 1편 안녕하세요? 최근 NextJS로 여러가지 로그인 구현 웹앱을 만들려고 노력하고 있는데요. 최근에는 NextAuth와 Prisma를 이용해서 카카오 로그인, 네이버 로그인, 구글 로그인 등 다방면으로 구현해 봤 cpro95.tistory.com 지난 시간에는 우리의 NextJS 템플릿을 Typescript, TailwindCSS를 이용해서 구축했는데요. 물론, Supabase API URL, Key도 설정했고요. 먼저 프로젝트의 뼈대부터 구성해 ..

안녕하세요? 최근 NextJS로 여러가지 로그인 구현 웹앱을 만들려고 노력하고 있는데요. 최근에는 NextAuth와 Prisma를 이용해서 카카오 로그인, 네이버 로그인, 구글 로그인 등 다방면으로 구현해 봤습니다. 근데 본격적인 웹앱 개발을 하려면 DB에 대한 서버 문제가 걸리는데요. 이에 대한 해결책으로는 Firebase 를 쓰는 방법이 있습니다. 웹 관련 애플리케이션 제작에 있어 모든 기능을 제공해 주는 Firebase인데요. 구글이 인수해서 키우고 있는 토탈 서비스인데요. 오늘은 Firebase 말고 이에 대항해서 새로 나온 서비스인 Supabase를 이용해서 로그인을 구현해 볼까 합니다. https://supabase.com/ The Open Source Firebase Alternative |..

안녕하세요? 지난 시간에 이어 NextAuth.js로 NextJS앱에 로그인 로직 만들기 3편을 시작해 보도록 하겠습니다. 2편 링크입니다. https://cpro95.tistory.com/612 NextAuth.js로 NextJS앱에 로그인 로직 만들기 2편 안녕하세요? 지난 시간에 이어 NextAuth로 NextJS앱에 로그인 로직 만들기 2편을 시작해 보겠습니다. 1편을 못 보신 분들을 위해 링크 걸어 놓겠습니다. https://cpro95.tistory.com/611 NextAuth.js로 NextJS앱에.. cpro95.tistory.com 2편에서는 signup 로직 관련 하드코딩 방식을 사용해서 테스트해봤는데요. 3편에서는 본격적으로 Prisma Client를 이용해서 DB에 유저 정보를 입..

안녕하세요? 지난 시간에 이어 NextAuth로 NextJS앱에 로그인 로직 만들기 2편을 시작해 보겠습니다. 1편을 못 보신 분들을 위해 링크 걸어 놓겠습니다. https://cpro95.tistory.com/611 NextAuth.js로 NextJS앱에 로그인 로직 만들기 안녕하세요? 지난 블로그를 보시면 NextAuth를 이용해서 카카오, 네이버, 구글 로그인 구현에 대한 글이 있는데요. 오늘은 카카오 로그인, 네이버 로그인, 구글 로그인 없이 그냥 바닥에서부터 유 cpro95.tistory.com 1편을 복습해 보면 NextAuth의 설정 파일인 /pages/api/auth/[...nextauth].ts 파일의 authorize 함수에서 우리는 로그인 체크 로직없이 그냥 user 객체를 리턴했는데..

안녕하세요? 지난 블로그를 보시면 NextAuth를 이용해서 카카오, 네이버, 구글 로그인 구현에 대한 글이 있는데요. 오늘은 카카오 로그인, 네이버 로그인, 구글 로그인 없이 그냥 바닥에서부터 유저 이메일과 패스워드로만 로그인하는 방식을 구현해 보려고 합니다. 먼저, 지난 시간에 만들었던 NextJS + Typescript + TailwindCSS 템플릿을 이용할 건데요. https://cpro95.tistory.com/610 NextJS + Typescript + TailwindCSS 적용 2편 안녕하세요? 지난 블로그에서 NextJS와 Typescript 그리고 Tailwind CSS까지 적용된 템플릿을 만들었는데요. 이번 시간에는 거기에 추가해서 Tailwind CSS를 이용한 모바일 적용되는 반..

안녕하세요? 지난 블로그에서 NextJS와 Typescript 그리고 Tailwind CSS까지 적용된 템플릿을 만들었는데요. 이번 시간에는 거기에 추가해서 Tailwind CSS를 이용한 모바일 적용되는 반응형 템플릿을 만들어 보겠습니다. 이렇게 하는 이유는 한번 만들어 놓으면 나중에 재사용이 쉬워서 그렇습니다. 디자인은 원하시는 방향으로 만들어도 상관없습니다. 전체적인 Responsive(반응형) 디자인이 목적이니까요? 일단 components 폴더를 만듭시다. 그리고 Layout.tsx파일도 생성시킵시다. mkdir components cd components touch Layout.tsx Layout.tsx파일을 만들기 전에 _app.tsx에 Layout을 적용시켜 볼까요? /pages/_app...

안녕하세요? 최근 들어 저의 최애 툴인 NextJS와 TailwindCSS에 요즘 공부 중인 Typescript을 추가로 설치하는 방법에 대해 알아볼까 합니다. NextJS 공식 홈페이지에서는 다음과 같은 옵션으로 NextJS와 Typescript을 설치할 수 있는데요. npx create-next-app@latest --ts # or yarn create next-app --typescript 이렇게 NextJS와 Typescript을 설치한 후 TailwindCSS를 수동으로 설치할 수 있는데요. 이것보다는 NextJS + TailwindCSS를 먼저 설치한 후 Typescript을 추가하는 것이 좀 더 편하기 때문에 이 방법을 알아보겠습니다. 먼저, 다음과 같이 NextJS + TailwindCSS..