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

안녕하세요? 지난 시간에 이어 Supabase와 NextJS로 블로그 만들기에 도전해 보겠습니다. 오늘은 Create A Post를 만들어 보겠는데요. 기존에 만들어 놨던 템플릿만 잘 활용하면 오늘 주제도 금방 만들 수 있을 거 같습니다. 먼저 /pages/post/create.tsx 파일을 만들 예정입니다. 이렇게 만들면 browser 상의 주소가 http://localhost:3000/post/create 가 됩니다. 일단 User-Authenticated Page 템플릿을 준비합니다. 이 템플릿은 앞에서 벌써 여러 번 써먹었으니 꼭 알아 두시기 바랍니다. /pages/post/create.tsx import React from "react"; import { GetServerSideProps } f..

안녕하세요? 지난 시간에 깜빡했던 PostgreSQL DB의 Row Level Security에 대해 추가로 알아볼 게 있어서 잠깐 글을 쓰게 되었습니다. CREATE TABLE posts ( id bigint generated by default as identity primary key, user_id uuid references auth.users not null, user_email text, title text, content text, inserted_at timestamp with time zone default timezone('utc'::text, now()) not null ); alter table posts enable row level security; create policy "..

안녕하세요? 이번 시간에는 지난 시간에 만들었던 Supabase 블로그 만들기 2편입니다. 1편에서는 supabase에서 데이터를 불러와서 보여주는 페이지를 만들었는데요. 2편에서는 각 블로그의 상세 페이지에 대해 만들어 보겠습니다. supabase의 posts 테이블은 일련번호가 id라는 이름으로 매겨지는데요. 이 id라는 것을 params으로 해서 PostDetailPage를 만들어 보겠습니다. id를 a tag 링크에 집어넣어야 돼서 지난 시간의 posts.tsx 파일을 조금 수정하겠습니다. const ListPosts = ({ post }: { post: PostsProps }) => { .... .... .... ... ... ... ... 위 코드를 보시면 어딜 고쳐야 되는지 알수 있을 겁니다..

안녕하세요? 오늘은 지금껏 만들어 왔던 supabase 로그인 구현 템플릿에 더해서 Supabase 데이터베이스를 이용해서 간단한 블로깅 시스템을 만들어 보겠습니다. 먼저, 블로그 데이터를 저장할 DB의 테이블을 만들어야 하는데요. 일단 supabase 대시보드에서 아래 그림과 같이 SQL Editor을 이용해서 테이블의 schema를 짜 보도록 하겠습니다. 아래 New Query를 클릭하고 오른쪽 화면에서 다음과 같이 입력합시다. 그리고 오른쪽 아래에 RUN 버튼을 눌러 table을 만들도록 하겠습니다. Supabase에서는 위와 같이 SQL 명령어를 위와 같이 직접 입력해서 만들 수 있습니다. CREATE TABLE posts ( id bigint generated by default as ident..

안녕하세요? 오늘은 타입스크립트로 리액트 코드를 짤 때 하위 컴포넌트(child componet)에 Props를 전달하는 제대로 된 방법을 알아보겠습니다. 그냥 자바스크립트로 작성하면 크게 문제가 안되지만 타입스크립트로 작성하면 되게 까다롭습니다. 먼저, 상황을 설정해 보겠습니다. supabase로 posts 테이블에서 데이터를 불러와서 title로 리스트를 작성하는 페이지를 작성해 보겠습니다. 먼저 코드를 보겠습니다. import { useState, useEffect } from "react"; import { supabase } from "../lib/supabase"; const ListPosts = (post) => { return ( {post.title} {post.content} ); };..

Reducer 란? Reducer(리듀서)는 기본적으로 두 개의 인수(current state와 action)를 받고, 이렇게 받은 두 인수를 기반으로 해서 새 상태를 반환하는 함수입니다. 그래서 reducer(리듀서)는 다음과 같은 코드로 표현할 수 있습니다. const reducer = (state, action) ⇒ newState; 예전에 React와 Redux를 사용해서 코딩하셨다면 reducer(리듀서)란 말을 들어 보셨을 겁니다. 우리가 reducer(리듀서)를 사용해서 얻는 이점은, 예측 가능하고 일관되게 작동하며, 그래서 복잡한 상태를 관리하는 데 적합합니다. 일반적으로 테스트하기 쉽습니다. 실행 취소/다시 실행, 상태 지속성 등과 같은 헬퍼 함수는 reducer(리듀셔)로 구현하기가 더..

안녕하세요? Supabase 강좌가 벌써 8편이네요. 7편 링크를 남겨드릴 테니 지난 시간까지 뭐가 있었는지 참고 바랍니다. https://cpro95.tistory.com/623 Supabase로 로그인 구현하기 with NextJS 7편 안녕하세요? 이번 시간은 기나긴 Supabase 강좌의 마지막인 Third-Party 로그인에 대해 알아보겠습니다. 일단 지난 강좌 링크 올려 드립니다. https://cpro95.tistory.com/617 Supabase로 로그인 구현하기 with Ne.. cpro95.tistory.com 이번 시간에는 Supabase에 로그인 한 유저의 패스워드를 변경하는 방법에 대해 알아보겠습니다. 위 그림과 같이 Profile 페이지에서 패스워드 변경이 가능하게끔 만들 생각..

안녕하세요? 일렉트론 강좌를 끝냈었는데요. 댓글로 CRUD 예제를 원하시는 분이 계셔서 5편까지 오게 되었네요. 일단 지난 시간 강좌는 참고로 링크 걸어 두겠습니다. https://cpro95.tistory.com/500 ElectronJS 일렉트론 강좌 1편 SQLite3 sql.js 안녕하세요? 오늘은 Electron 강좌를 시작해 볼까 합니다. ElectronJS는 웹상의 기술인 HTML, CSS, Javascript로 데스크톱 애플리케이션을 만들 수 있는 NodeJS 패키지인데요. HTML, CSS, Javascript로 작동되다.. cpro95.tistory.com https://cpro95.tistory.com/501 ElectronJS 일렉트론 강좌 2편 SQLite3 sql.js 안녕하세요..

안녕하세요? ElectronJS 일렉트론 강좌를 3편에서 끝냈었는데요. 댓글로 어떤 분께서 SQLite3 CRUD(Create, Read, Update, Delete) 예제를 보고 싶다고 해서 4편을 작성해 봤습니다. 먼저, 기존 강좌 3편 링크입니다. https://cpro95.tistory.com/500 ElectronJS 일렉트론 강좌 1편 SQLite3 sql.js 안녕하세요? 오늘은 Electron 강좌를 시작해 볼까 합니다. ElectronJS는 웹상의 기술인 HTML, CSS, Javascript로 데스크톱 애플리케이션을 만들 수 있는 NodeJS 패키지인데요. HTML, CSS, Javascript로 작동되다.. cpro95.tistory.com https://cpro95.tistory.c..

안녕하세요? 이번 시간은 기나긴 Supabase 강좌의 마지막인 Third-Party 로그인에 대해 알아보겠습니다. 일단 지난 강좌 링크 올려 드립니다. 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를 이용한 로그인 구현..