드리프트의 세상 사는 이야기

안녕하세요? 최근 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..

안녕하세요? 오늘은 타입스크립트의 class에 대해 알아 보겠습니다. class는 다른 언어에서도 제공하고 있고 예전에는 객체지향 프로그래밍이 아주 유행했었는데요. C++ 의 Qt 나 윈도우즈의 MFC 라이브러리 모두 class를 이용한 결과입니다. class는 사용하면 아주 강력한 기능이 될 수 도 있는데요. 유지 보수가 어려워 그냥 함수형 프로그래밍 같이 직관적인 프로그래밍이 요즘 대세가 되었습니다. 본인도 class는 React 프로그래밍에서는 잘 안 쓰는데요. 그래도 타입스크립트에서 제공하는 class 기능을 잠깐 맛보기로 알아 보도록 하겠습니다. 예제를 들어 설명할까 하는데요. 간단한 데이터베이스 DB를 class로 만들어 볼까요? interface Database { get(id: string..

안녕하세요? 오늘은 타입스크립트의 enum과 literal 에 대해 알아 보겠습니다. enum은 다른 언어에서도 자주 나오는 타입인데요. 특히, C 언어에서 자주 쓰입니다. 특정 상태를 나타낼 때 아주 유용하거든요. const beforeLoad = "beforeload"; const loading = "loading"; const loaded = "loaded"; const isLoading = (state: string) => state === loading; console.log(isLoading("dog")); 위 코드를 보시면 우리가 React에서 많이 쓰이는 isLoading 함수가 있는데요. 뭔가가 좀 엉성합니다. 이제 이 코드를 enum으로 다시 바꿔 볼까요? // const beforeL..

안녕하세요? 이번 시간에는 타입스크립트의 Immutability에 대해 알아 보겠습니다. 간혹가다가 코드를 짤 때 변경되지 않았으면 하는 데이터 타입이 있습니다. 이럴 때는 어떻게 해야 할까요? const로 변수를 지정하면 변수값은 변경되지 않는데요. 객체의 경우에는 const 로 선언해도 객체의 내용이 변경될 수 있습니다. 다음 예를 들어 설명해 볼까요? interface Cat { name: string; breed: string; } function makeCat(name: string, breed: string): Cat { return { name, breed } } const kihun = makeCat("squid cat", "squidGame") kihun.name = "kihun" Cat..

안녕하세요? 이번 시간에는 타입스크립트에서 자체적으로 제공하는 Utility Types에 대해 알아 보겠습니다. https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 공식 홈페이지를 보면 Utility Types으로 제공하는게 아주 많은 데요. 우리는 가장 많이 쓰이는 몇가지에 대해 예를 들어 알아 보겠습니다. 1. Partial 먼저 Partial에 대해 알아 보겠습니다. Partial을 언제 쓰이는지는 예를 들어 보면 쉽게 이해 할 수 있습니다. 다음과 같이 My..