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

안녕하세요? 오늘은 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 블로그 마지막 시간이 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..

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

현대자동차그룹의 ‘수소청소트럭’를 소개하는 ‘디어 마이 히어로(Dear My Hero: 나의 영웅에게)’영상이 작년 12월 공개됐다. 영상은 공개 일주일 만에 조회수 1천만 회를 돌파하며 뜨거운 반응이 이어지고 있다. 수소청소트럭을 직접 경험한 경남 창원시 소속 환경미화원들의 근무 환경에는 어떤 변화가 생겼을까? 수소청소트럭의 특징과 함께 환경미화원들을 통해 이야기를 들어보았다. 기존 청소트럭보다 40% 줄어든 소음 수소전기 트럭의 성능과 완성도를 검증하기 위해 산업통상자원부, 한국자동차연구원, 한국산업기술평가관리원, 창원시 등과 함께 개발했다 열악한 근무 환경의 원인 중 하나는 바로 소음이다. 기존 청소트럭은 쉬지 않고 돌아가는 엔진 소리와 쓰레기를 압축하는 동안 발생하는 소음으로 인해 작업자들 간의 ..

고성능 소형 해치백은 유럽 소비자로부터 인기가 많은 차종 중 하나다. 작고 가벼운 차체에 강력한 엔진을 탑재한 덕분에 주행 성능과 운전의 재미가 뛰어나 ‘핫해치(Hot Hatch)’ 또는 ‘포켓 로켓(Pocket Rocket)’이라는 애칭을 붙일 정도다. 또한 고성능 소형 해치백은 자동차 제조사의 기술력이 집약된 모델로, 브랜드 이미지 제고와 인지도 향상에도 적지 않은 영향을 미치고 있다. 이같은 인기를 방증하듯 영국, 프랑스, 독일, 이탈리아 등 주요 국가의 자동차 브랜드는 각기 1~2가지 이상의 고성능 소형 해치백을 선보이며 유럽 자동차 시장에서 각축을 벌이고 있다. 이런 가운데, 최근 독일의 유명 자동차 전문지 가 진행한 고성능 소형 해치백 비교 평가에서 현대자동차 i20 N이 승전보를 전해왔다. ..