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

우분투 리눅스 타임존 설정 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: [], }; ..

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