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

Remix framework action function, 리믹스 프레임워크 action 함수 자세히 알아보기 안녕하세요? 지난 시간까지 배웠던 Remix 프레임워크의 서버사이드 담당 함수인 loader와 action 중에서 오늘은 action 함수를 좀 더 자세히 알아볼까 합니다. 지난 시간에 배웠던 loader, action 함수의 동작 방식을 복습해 보면, 1. 리액트 UI 부분의 form 엘러먼트에서 디폴트 옵션인 method="get" 상태에서 form을 submit 했고, 2. form을 submit 하면 브라우저는 자동으로 새로고침 하는데, 이때 form의 method가 "get"이기 때문에 input 엘레먼트의 name 부분이 현재 URL의 Params으로 추가되면서, 3. 새로고침 된 브..

Remix Framework loader, action Function, 리믹스 프레임워크 서버사이드 loader, action 함수 안녕하세요? 지난 시간에 배웠던 리믹스 프레임워크의 다이내믹 라우팅에 더해서 오늘 시간에 배울 부분은 리믹스 프레임워크의 가장 강력하고 편리한 기능이라고 할 수 있는 loader, action 함수입니다. loader, action 함수는 NextJS를 이용해서 취미용 프로젝트를 많이 만들었던 저로서는 리믹스 프레임웍의 서버사이드 함수의 간결하면서 편리한 형식에 감탄을 금치 못했는데요. 이제 본론에 들어가 보도록 하겠습니다. 먼저, NextJS에서의 서버사이드 코딩인데요. 예를 들어 보겠습니다. import { useState, useEffect } from "react"..

Remix Framework Dynamic Routing, 리믹스 프레임워크 다이내믹 라우팅 안녕하세요? 이번 시간에는 Remix 프레임워크의 다이내믹 라우팅에 대해 살펴보겠습니다. 지난 시간까지 배운 Nested Routing에 더해서 웹 앱에서는 라우팅으로 정보를 교환해야 할 때가 있습니다. 예를 들어 페이지 넘버나, 제품 ID, 포스트 목록 번호가 대표적이죠. Next.JS에서는 어떻게 했는지 비교해서 살펴보는 것도 좋을 듯싶습니다. 먼저, Next.JS의 예를 살펴보겠습니다. 아래 예를 보시면 prisma를 이용해서 id에 해당하는 포스트를 얻는 함수인데요. /post/[id]. tsx export const getServerSideProps: GetServerSideProps = async ({..

Remix Framework File-base Routing and Nested Routing ( 리믹스 프레임워크 파일 베이스 라우팅, 네스티드 중첩 라우팅) 안녕하세요? 오늘은 지난번에 간단하게 알아봤던 Remix 프레임워크에 대해 좀 더 심도 있게 들어가 보도록 하겠습니다. NextJS가 처음 나왔을 때 리액트쪽에서는 굉장한 반향이 일어났었는데요. 바로 NextJS의 파일 베이스 라우팅이 그 주인공이었습니다. 물론 Static Site Generating과 Server Side Rendering도 중요한 기능이었지만요. 일반적으로 리액트 라우터를 쓰는 SPA 수준의 리액트에서는 라우팅 하는데 꾀나 고달팠는데요. NextJS의 파일 베이스 라우팅의 소개로 그 수고스러움이 싹 사라졌다고 생각합니다. 리..

안녕하세요? 오늘은 Remix 프레임워크에 TailwindCSS를 적용시켜 보겠습니다. 먼저, 지난 시간까지 만든 remix-tutorial 폴더에서 다음과 같이 tailwindcss와 concurrently를 설치해 보겠습니다. npm i -D tailwindcss@latest concurrently 이제 tailwindCSS init을 실행시켜 볼까요? npx tailwindcss init Remix 프레임워크에서는 postcss가 필요 없어 뺐습니다. 이제 tailwind.config.js 파일을 아래와 같이 고쳐볼까요? module.exports = { content: ["./app/**/*.{ts,tsx,js,jsx}"], theme: { extend: {}, }, plugins: [], }; ..

안녕하세요? 오늘은 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..