드리프트의 코-자-경

안녕하세요? 오늘은 Remix 프레임워크에 대해 알아볼까 합니다. React 생태계에서 가장 잘 나가는 프레임워크가 바로 Next.JS인데요. 저도 왠만하면 거의 모든 프로젝트는 모두 NextJS로 만듭니다. NextJS는 사실 현재 엔터프라이즈 기업들이 애용하는 최고 수준의 리액트 프레임워크인데요. 작년 말에 나온 Remix 프레임워크가 제 눈에 많이 들어오고 있어 오늘은 Remix를 한번 살펴볼까 합니다. https://remix.run/ 설치 일단 터미널 창에서 아래와 같이 실행시켜보겠습니다. npx create-remix@latest remix-tutorial create-remix 패키지를 설치하라고 물어보면 Y를 눌러줍니다. Remix 프레임워크는 기본적인 설정을 사전에 준비시켜 주는데요. 첫..

안녕하세요? 이번 시간에는 Supabase 블로그 마지막 시간이 Search 기능 추가 시간입니다. 블로그 포스트의 생성, 조회, 업데이트, 삭제 기능을 완성했는데요. 남은 건 바로 검색 기능입니다. /pages/post/search.tsx 파일로 진행할 예정입니다. 일단 User-Authenticated 템플릿을 아래와 같이 준비합시다. import React, { useState } from "react"; import Link from "next/link"; import { GetServerSideProps } from "next"; import { useMessage } from "../../lib/message"; import { useFormFields } from "../../lib/util..

안녕하세요? 오늘은 TailwindCSS 3.0과 Next.JS에서 다크 모드(Dark Mode) 적용하는 방법에 대해 알아보겠습니다. 먼저, 빈 템플릿을 설치해 볼까요? npx create-next-app tailwind-dark-mode 열심히 설치하고 있네요. 이제 TailwindCSS 최신판을 설치해 봅시다. cd tailwind-dark-mode npm i -D tailwindcss@latest postcss@latest autoprefixer@latest TailwindCSS는 postcss와 autoprefixer 패키지가 필요합니다. 같이 설치해주셔야 합니다. 그다음에 TainwindCSS 초기화 명령을 실행시킵시다. npx tailwindcss init -p TailwindCSS 초기화 ..

안녕하세요? 오늘은 Supabase + NextJS 블로그 만들기 시리즈 마지막인 Post의 Modify, Delete에 대해 알아보겠습니다. 일단 /post/modify.tsx 파일을 만들었고 무엇을 수정, 삭제할지에 대한 정보는 브라우저의 주소창 쿼리를 이용할 예정입니다. NextJS의 다이내믹 라우팅으로도 할 수 있지만 좀 더 간단한 주소창 쿼리를 이용할 예정입니다. http://localhost:3000/post/modify?id=1 이런 식으로 주소 링크를 주면 해당 modify.tsx 파일에서 해당 id를 이용해서 수정, 삭제할 예정입니다. 일단 /post/modify.tsx의 로그인된 유저만 볼 수 있게 하는 템플릿을 준비해 보겠습니다. import React, { useEffect } fr..

안녕하세요? 지난 시간에 이어 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(리듀셔)로 구현하기가 더..