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

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의 파일 베이스 라우팅의 소개로 그 수고스러움이 싹 사라졌다고 생각합니다. 리..

우분투 리눅스 타임존 설정 ubuntu timezone setting 우분투나 리눅스에서 서버의 시간과 날짜를 설정하는 명령어는 timedatectl 명령어입니다. 아래는 timedatectl의 man page입니다. 리눅스 터미널 창에서 다음과 같이 실행해 볼까요? timedatectl status 간단하게 date라고 쳐도 현재 날짜랑 시간이 나옵니다. 이게 간혹 GMT로 설정되어 있는 경우가 있는데요. timedatectl 명령어로 시간과 날짜를 조정하는 방법에 대해 알아 보겠습니다. GMT로 설정 sudo timedatectl set-timezone 'GMT' 위 명령어는 타임존을 GMT로 설정하는 방법입니다. timedatectl 뒤에 set-timezone 명령어를 썼는데요. 우리나라는 어떻게..

안녕하세요? 오늘은 기존에 쓰던 라즈베리파이와 OpenMediaVault를 버리고 Intel Pentium 구형 모델을 이용해서 나만의 NAS를 만들어 볼까 합니다. OpenMediaVault는 데비안 시리즈 10(Buster), 11(BullsEye) 버전에서 작동하니까 Ubuntu Server에도 설치가 가능할 줄 알았는데 21.10 버전을 설치하니 안되더라고요. sudo wget -O - | sudo bash 우분투 SSH 터미널 창에서 위와 같이 입력하면 원래 설치되어야 하는데 아래와 같이 에러가 뜨네요. Ubuntu Server 버전이라 그런 거 같습니다. ubuntu-21.10-live-server-amd64.iso 그래서 우분투 옛날 버전을 설치하려고 하니 굉장히 귀찮아졌고 그냥 수작업으로 ..

안녕하세요? 오늘은 타입스크립트 클래스에서 readonly와 static에 대해 알아보겠습니다. 먼저, readonly입니다. readonly class Player { public name: string = ""; public age: number = 0; constructor(name: string, age: number) { this.name = name; this.age = age; } } 위와 같은 Player 클래스가 있다고 합시다. Player는 name과 age가 있고 constructor 함수에서 this.name과 this.age로 각각 클래스 변수에 값을 지정해 주는 지극히 일반적인 클래스인데요. 타입스크립트에서는 위와 같은 방법 말고 아래와 같은 방법도 가능합니다. 컨스트럭터 안에서..

안녕하세요? 오늘은 좀 어려운 주제인데요. 먼저, RPG 게임에서 player의 특성을 정의하는 타입을 만들려고 한다고 가정해 봅시다. 어떻게 해야 할까요? 먼저, name이 있어야겠죠? type MyFlexibleInfo = { name: string; } 그다음으로 race (종족)이나 age (나이)가 있어야겠죠? 만약, MyFlexibleInfo 가 두 가지의 타입만 있다고 하고 race나 age 중에 한 개만 자유롭게 넣게 하고 싶을 때는 어떻게 할까요? 바로 타입 머지 (type merge) 하면 되는데요. type MyFlexibleInfo = { name: string; } & Record Record 유틸리티 타입으로 key : value 타입을 추가할 수 있게 했습니다. type MyF..

안녕하세요? 오늘은 지난 시간에 배운 Class Visibility에 더해서 클래스에서 제네릭을 쓰는 방법에 대해 알아보겠습니다. 일단 지난 시간에 만들었던 Database 클래스를 를 이용한 제네릭 형태로 변경해 보겠습니다. interface Database { get(id: string): string; set(id: string, value: string): void; } class InMemoryDatabase implements Database { protected db: Record = {}; get(id: string): string { return this.db[id]; } set(id: string, value: string): void { this.db[id] = value; } } 위..

안녕하세요? 오늘은 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: [], }; ..