✅ clientLoaderexport async function clientLoader() { // await new Promise((resolve) => setTimeout(resolve, 10000)); // const topics = await getTopics(); // const posts = await getPosts(); const [topics, posts] = await Promise.all([getTopics(), getPosts()]); /* const topics = getTopics(); const posts = getPosts(); */ return { topics, posts };}loader fn을 clientLoader로 바꿔주면 server에서 fetchi..

✅ prefetch사용자가 클릭하기 전에 다음 페이지에 필요한 것들을 미리 받아오는 기능 이건 “미리 받아보려는 힌트”에 가깝고, 클릭 시 무조건 즉시 렌더링 보장은 아니다. 진짜로 즉시 보여주고 싶으면 loader 쪽에서 캐싱 전략을 따로 가져가야 함. 예를 들면 React Query의 ensureQueryData() 같은 방식으로 loader가 먼저 캐시를 확인하게 만들거나, 서버 응답에 적절한 Cache-Control을 붙이는 방식이 필요 none기본값. 아무것도 미리 받아오지 않는다.intent사용자가 링크에 hover하거나 focus했을 때 미리 받아옴(마우스가 링크를 벗어나면 취소됨)render링크가 화면에 렌더링되자마자 미리 받아옴. 빠르지만 링크가 많으면 네트워크 낭비 가능viewport링..

✅ Supabase JS Client Library란?Supabase가 제공하는 전용 Client Library. 데이터베이스와 상호작용하려면 이걸 사용해야 한다.뿐만 아니라, 유저 인증(user authentication)을 사용한다거나 실시간 데이터베이스 변경사항을 리스닝하거나 Edge Function을 호출하거나 로그인 기능을 만들 때도 사용한다.(유저의 쿠키를 가져와서 유효한 세션인지 확인도 가능) ✅ Installationnpm install @supabase/supabase-js https://supabase.com/docs/reference/javascript/installing JavaScript: Installing | Supabase Docssupabase-js uses the Data..

✅ Self Referenceexport const postReplies = pgTable("post_replies", { post_reply_id: bigint({ mode: "number" }) .primaryKey() .generatedAlwaysAsIdentity(), post_id: bigint({ mode: "number" }).references(() => posts.post_id, { onDelete: "cascade", }), parent_id: bigint({ mode: "number" }).references( (): AnyPgColumn => postReplies.post_reply_id, // AnyPgColumn은 자체 참조를 하기 위해 필요(타입 안..

✅ Installationnpm i drizzle-orm postgresnpm i -D drizzle-kit import { drizzle } from "drizzle-orm/postgres-js"; https://orm.drizzle.team/docs/connect-supabase Drizzle ORM - SupabaseDrizzle ORM is a lightweight and performant TypeScript ORM with developer experience in mind.orm.drizzle.team ✅ Setupimport { defineConfig } from "drizzle-kit";export default defineConfig({ schema: "./app/features/*..

✅ Magic UI란?애니메이션 중심의 React UI 컴포넌트 라이브러리 Magic UI는 Tailwind + React 기반의 현대적인 애니메이션 UI 컴포넌트 라이브러리이고, shadcn/ui와 잘 어울리며 SaaS 스타일의 화려한 인터랙션과 랜딩페이지 효과를 빠르게 만들 수 있게 해준다. shadcn/ui: 기본 UI 뼈대Magic UI: 화려한 인터렉션 + 랜딩 페이지용 효과 https://magicui.design/ Magic UIBeautiful UI components and templates to make your landing page look stunning.magicui.design

✅ Clipping 현상이란?쉽게 말해 부모 영역 밖으로 나가는 부분이 잘려 보이는 것.(어떤 영역이 잘려서 안 보이는 현상) 위 사진의 Card component의 border를 자세히 보면 그려지다만 부분들이 보인다. 현재 Provider에 overflow-hidden 속성이 존재하기 때문에 자식 요소가 Provider의 영역을 넘어가거나 경계에 존재할 시 보이지 않게 한다. 그래서 이럴 때는 온전히 border가 보이기 위해 자식 요소에 padding을 주면 border가 잘 보이게 된다.export default function MessagesLayout() { return ( {Array.from({..

✅ 사용하게 된 이유기존에 사용하던 waka-box가 사용하고 있는 Node 버전이 곧 Deprecated가 됨에 따라 새 프로젝트를 찾아야 했다. ✅ 사용법참고 링크https://velog.io/@1703979/%EA%B9%83%ED%97%88%EB%B8%8C%EC%97%90-wakatime-stats%EB%A5%BC-%EC%B6%94%EA%B0%80%ED%95%B4%EB%B3%B4%EC%9E%90 깃허브에 wakatime stats를 추가해보자Github에 waka-readme-stats 추가하기velog.io 원본 프로젝트 레포 링크https://github.com/anmol098/waka-readme-stats?utm_source=chatgpt.com GitHub - anmol098/waka-r..

✅ Install & Usage유명 브랜드를 위한 SVG 아이콘 npm install react-iconsimport { SiGithub, SiKakaotalk } from "react-icons/si"; Kakao Talk Github https://simpleicons.org/ Simple Icons simpleicons.org

✅ Layout ...prefix("/:productId", [ index("features/products/pages/product-redirect-page.tsx"), layout("features/products/layouts/product-overview-layout.tsx", [ route("/overview", "features/products/pages/product-overview-page.tsx"), ...prefix("/reviews", [ index("features/products/pages/product-reviews-page.tsx"), route("/new", "features/products/pa..

✅ Luxon이란?JavaScript로 날짜를 다루는 라이브러리.npm install --save luxon https://moment.github.io/luxon/#/install luxon - Immutable date wrapper moment.github.io TypeScriptnpm install --save-dev @types/luxonTypeScript를 사용하면 이것도 설치해야 한다. ✅ 기본값 세팅export function Layout({ children }: { children: React.ReactNode }) { Settings.defaultLocale = "ko"; Settings.defaultZone = "Asia/Seoul"; return ( ..

✅ Lucide란?Shadcn을 설치했을 때 같이 설치되는 React를 위한 Lucide 아이콘 라이브러리 https://lucide.dev/guide/installation Lucide IconsBeautiful & consistent icon toolkit made by the community.lucide.dev https://lucide.dev/icons/ Lucide IconsBeautiful & consistent icon toolkit made by the community.lucide.dev

✅ React Router가 Remix처럼 되어간다?Remix 와 React Router는 별개 제품이지만, 지금은 매우 가까워졌고 React Router가 Remix 철학과 기능을 많이 흡수한 상태다. 기존 React RouterReact Router = 클라이언트 라우터 Remix 등장Remix = 라우터 + 데이터 + mutations + SSR React Router의 Remix 철학 흡수React Router가 더 프레임워크화됨 https://velog.io/@hazae23/Merging-Remix-and-React-Router [번역] Remix와 React Router 통합React Conf 발표당사는 거의 4년 동안 더 나은 웹 사이트와 애플리케이션을 구축하는 데 도움이 되도록 웹 표준을 ..

✅ Shadcn/ui란?복붙해서 내 프로젝트 안으로 가져오는 UI 컴포넌트 모음 + 시스템 다른 ui 라이브러리처럼 설치하는 것이 아니라 CLI로 필요한 컴포넌트를 추가한다.npx shadcn@latest init https://ui.shadcn.com/docs/installation 설정으로는 일단 기본값을 선택.{ "$schema": "https://ui.shadcn.com/schema.json", "style": "radix-nova", "rsc": false, "tsx": true, "tailwind": { "config": "", "css": "app/app.css", "baseColor": "neutral", "cssVariables": true, "pr..

✅ VSCode의 설정을 Cursor로 import 시키는 방법(자동)설정에서 Import Settings from VS Code 메뉴의 Import를 누른다. VSCode의 설정들은 잘 가져와지는데 extension을 자동으로 가져오지 못할 때가 있다. ✅ VSCode의 설정을 Cursor로 import 시키는 방법(수동) https://wikidocs.net/278870 05 VS Code에서 Cursor로 마이그레이션하기## 기본 정보 **Q: Cursor란 무엇인가요?** A: Cursor는 VS Code 코드베이스를 기반으로 하는 AI 기반 코딩 환경입니다. 익숙한 편집 환경을 유지하면서 …wikidocs.net

✅ Jupyter란?코드 + 실행 결과 + 설명(문서)을 한 곳에서 함께 다룰 수 있는 환경 설치pip install notebook ipykernelnotebook만 설치해도 되지만 대부분 2개 다 설치한다고 한다. VSCode에서 Python과 Jupyter Extension 설치하면 끝cell별 실행은 ctrl + enter

✅ Plotly란?데이터를 “인터랙티브(상호작용)”하게 시각화해주는 라이브러리 설치pip install dash https://dash.plotly.com/layout Part 1. Layout | Dash for Python Documentation | PlotlyThis is the 1st chapter of the Dash Fundamentals. The next chapter covers Dash callbacks. # Run this app with `python app.py` and # visit http://127.0.0.1:8050/ in your web browser. from dash import Dash, html, dcc import plotly.express as px impor..

✅ Pandas란?데이터를 수정하고 가공하고 검색하는 등 여러 기능을 제공한다. 설치pip install pandas Usageimport pandas as pddaily_df = pd.read_csv("data/daily_report.csv")daily_df = daily_df[["Confirmed", "Deaths", "Recovered"]].sum().reset_index(name="count")daily_df = daily_df.rename(columns={"index": "conditions"})daily_dfcsv파일을 읽어와 3개의 column들만 필터링해서 column별로 개수를 합산했다.합산 값의 데이터 형식은 더 이상 dataframe이 아니라 series로 나오는데, 다시 datafr..

✅ Mongoose 설치bun add mongooseornpm install mongoose ✅ Schema, Model 생성import * as mongoose from "mongoose";await mongoose.connect("mongodb://localhost:27017/movies");const moviesSchema = new mongoose.Schema({ title: { type: String, required: true }, rating: { type: Number, required: true }, min: [1, "No movie deserves less than 1"], max: [10, "No movie is better than 10"],});const Movie = m..

✅ Bun이란?Bun = Node.js + npm + bundler + test를 하나로 합친 “초고속 JavaScript 런타임” ✅ Installationbrew tap oven-sh/bunbrew install bun ✅ Usagenpm install = bun installnpm install PACKAGE_NAME = bun add PACKAGE_NAMEnpm uninstall PACKAGE_NAME = bun remove PACKAGE_NAMEnpm install -D PACKAGE_NAME = bun add -d PACKAGE_NAME

✅ Drizzle이란?Javascript 또는 Typescript로 작성할 수 있는 ORM(Object Relational Mapping)(Python 지원 X)SQL 위에 아주 얇은 레이어를 씌워 놓은 것 같이 동작한다.(VSCode의 자동완성, Typescript의 타입 가드까지 받을 수 있다.) Python에 비해 Javascript는 모든 드라이버가 구현해야 할 데이터베이스 스펙 같은 건 없고, 데이터베이스 드라이버 종류는 되게 많다.Drizzle을 이용해서 코드를 작성하면 겉으로 드러나지 않게 백그라운드에서 여러 개의 데이터베이스 어댑터 중 하나를 사용해서 DB와 통신한다. (어댑터를 설치하면 Drizzle이 그 어댑터를 대신 사용한다.) ✅ InstallationDrizzle ORMbun a..

✅ Installation가상환경 세팅 방법:https://j2yonghwa.tistory.com/133 Python - venv 가상 환경 세팅(macOS)✅ .venv 세팅 방법가상 환경을 설정해야 하는 이유React(= Node ecosystem)은 기본적으로 "프로젝트 단위 격리"가 이미 되어 있고,Python은 기본이 "전역 환경"이라서 가상환경이 필요하다 python 설치brew inj2yonghwa.tistory.com pymongo 설치(MongoDB driver)pip install pymongo ✅ ConnectionCreate Clientfrom pymongo import MongoClientclient = MongoClient("mongodb://localhost:27017")cl..

✅ Python 환경에서 SQLite 사용하기Placeholderimport sqlite3connection = sqlite3.connect("users.db")cursor = connection.cursor()def init_table(): cursor.execute( """ CREATE TABLE users ( user_id integer primary key autoincrement, username text not null, password text not null ); """ ) cursor.execute( """ insert into users (username, password) ..

✅ SQL Injection이란?사용자 입력을 이용해 “의도하지 않은 SQL 쿼리”를 실행시키는 공격예방 방법: String Interpolation을 사용하지 않는다.import sqlite3connection = sqlite3.connect("users.db")cursor = connection.cursor()def init_table(): cursor.execute( """ CREATE TABLE users ( user_id integer primary key autoincrement, username text not null, password text not null ); """ ) cursor.execute( ..

✅ Redis란?(Remote Dictionary Service)속도가 어어어어ㅓㅁ청 빠른 데이터베이스.대부분의 경우 다른 SQL 데이터베이스와 같이 사용하게 된다. Redis는 Key Value In-memory 데이터베이스다.(SQL, MongoDB 등은 디스크에서 값을 읽어오느라 상대적으로 느리다.) 장점: 빠르다.단점: 비싸다. 용량이 하드 디스크처럼 충분하지가 않기에, 다른 데이터베이스들을 보조하는 용도로 사용한다. ✅ 설치brew install redisbrew services start redis ✅ Usecase다음 명령어를 입력해서 cli를 활성화한다.redis-cli GET, SET╰─ redis-cli ..

✅ Create Documentshow dbsadmin 40.00 KiBconfig 72.00 KiBlocal 40.00 KiBuse moviesswitched to db moviesdb.createCollection("movies"){ ok: 1 }db.movies.insertOne({}){ acknowledged: true, insertedId: ObjectId('69d466bc1fef767903389270')}db.movies.insertOne({ title: "The Godfather", year: 1999, director: { name: "F.F.C", alive: true }, genres: ["Crime", "Drama", "Pizza"]}){ acknow..

✅ 설치MongoDB를 설치할 수 있도록 Homebrew(macOS)에 MongoDB 공식 저장소를 추가하는 명령어brew tap mongodb/brew MongoDB community 버전 설치brew install mongodb-community MongoDB 실행brew services start mongodb-community 테스트mongosh 현재 실행되고 있는 서비스들 보는 법(여기에 mongodb community가 started로 잘 실행되고 있으면 된 거다.)brew services GUI Tool 설치brew install --cask mongodb-compass데이터베이스를 편리하게 볼 수 있음 ✅ 예전 버전과 충돌이 난다면?삭제하고 다시 설치한다.brew uninstall ..

✅ .venv 세팅 방법가상 환경을 설정해야 하는 이유React(= Node ecosystem)은 기본적으로 "프로젝트 단위 격리"가 이미 되어 있고,Python은 기본이 "전역 환경"이라서 가상환경이 필요하다 python 설치brew install python python 설치 확인python3 --versionex) Python 3.12.x python 설치 경로 확인which python3이렇게 나오면 정상 /opt/homebrew/bin/python3 pip 설치 확인pip3 --versionpython 설치되면 같이 설치됨 ❗ python pyenv로 설치(추천)프로젝트별 python 버전 관리를 위해 pyenv를 사용하는 것을 추천한다. pyenv 설치brew install pyenv .zsh..

✅ 사용 가능한 PostgreSQL의 Extensions 목록 보는 법SELECT *FROM pg_available_extensions; ✅ Extension 활성화 방법CREATE EXTENSION hstore; ✅ hstoreKey, Value 데이터를 저장할 수 있게 해준다.(현재는 JSONB를 많이 사용한다.) CREATE TABLE users ( user_id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY, prefs hstore);INSERT INTO users (prefs)VALUES ('theme => dark, lang => kr, notifications => off'), ('theme => light, lang => es, notificat..

✅ JSON Column이란?테이블 안에 JSON 형식 데이터를 그대로 저장하는 ColumnMySQL과 PostgreSQL 모두 JSON 데이터 타입으로 저장하는 걸 허용한다. SQL이면서 동시에 NoSQL처럼 동작한다. 사용 시기: 유연한 구조가 필요할 때(어떠한 column에 어떤 데이터가 들어가야 할 지 모를 때)유연성↑, 구조 안정성↓ ✅ JSON, JSONB거의 동일한 값을 가진다.차이점은 효율성이다.JSON vs JSONBJSON: 입력된 text를 그대로 복사해서 저장함JSONB: 분해된 Binary 형식으로 저장함(데이터 입력 속도가 약간 느려진다. JSON에서 Binary로 변환해야 하기 때문, 처리 속도는 엄청 빨라짐, 대부분 JSONB 선호) CREATE TABLE users ( u..