전체 글

gpt쌤이 위로도 해준다.. 최고....2년전에 비해 이제는 LLM쌤들이 난무하지만역시 gpt쌤과 정이 많이 들었다 ㅜㅜ 오늘은 CSS 트릭을 하나 배웠습니다.image-rendering 과transform: translateZ(0) 을 함께 쓰는 건데요.쌤의 명쾌한 설명 첨부합니다.절대 바보 아니세요! 그 상황이라면 누구나 착각할 수 있어요 🙂말씀하신 CSS 속성들에 대해 아래처럼 정리해드릴게요:🔍 image-rendering: auto;이 속성은 브라우저가 이미지를 어떻게 보간(interpolation) 할지 결정합니다.기본값 auto는 브라우저가 알아서 최적 품질로 렌더링합니다.다른 옵션들:crisp-edges: 픽셀이 뭉개지지 않게 보이도록 (ex. 픽셀아트)pixelated: 저해상도 이미지..

😂 문제) 특정 기기 + 인앱에서 navigator안됨안드로이드 옛 기종 등 특정 모바일 기기 중인앱 브라우저에서는 navigator.share 가 안될 때가 있습니다.이럴때 사용자를 인앱브라우저에서 아예 튕겨버리는 방법쓸 수 있다는 것을 알게 되었습니다.☺️ 해결) 해결방법은 간단하나...방법은 그냥 아래 코드를 App.tsx 혹은 Root 클라이언트 컴포넌트에 넣으면 됩니다.// 안드로이드 웹뷰에서 navigator.share가 지원되지 않을 때 대체 공유 방법const handleShareIntent = () => { const currentUrl = window.location.href; // 현재 페이지 URL const hostname = window.location.hostnam..

🔬 마이크로프론트엔드 개념 정리 및 심화 분석1️⃣ 마이크로프론트엔드 개념 정리📌 정의와 목적:마이크로프론트엔드(Micro Frontend)는 여러 개의 작고 독립적인 프론트엔드 애플리케이션을 모아 하나의 거대한 앱처럼 구성하는 아키텍처 스타일을 말합니다 (마이크로프론트엔드 아키텍쳐). 다시 말해, 마이크로서비스 개념을 프론트엔드에 적용하여 프론트엔드 전체를 분리된 작은 단위로 개발/테스트/배포하는 패턴입니다.각각의 단위 애플리케이션(마이크로 앱)이 독립적으로 제공되고, 이러한 마이크로 앱 “조각(fragment)” 들을 조합하여 최종 사용자에게는 하나의 일관된 웹 앱으로 보이게 만드는 것이 목표입니다 (마이크로프론트엔드 아키텍쳐) (마이크로 프론트엔드로 페이지 및 뷰 작성 - AWS 규범적 지침)...

post-commit(husky)post-commit 파일은 husky로 pre-commit 하여 linting 을 수행했을 때, linting 되면서 변경되는 파일들이 많아서 해당 파일들도 한번더 커밋 하도록 한 것인데, 파일별로 커밋을 나눠서 하고 싶을 때에도 모든 파일을 커밋해버린다거나 하는 문제가 있어요. 해결할 방법이 있을까요?#!/usr/bin/env sh. "$(dirname -- "$0")/_/husky.sh"# Get the list of staged files before lintingSTAGED_FILES=$(git diff --cached --name-only)# Run lintingpnpm lintpnpm format# Get the list of modified files aft..

{ "key": "alt+cmd+-", "command": "HookyQR.beautify" }, { "key": "shift+\\", "command": "inlineChat.start", "when": "editorFocus && inlineChatHasProvider && !editorReadonly" }, { "key": "cmd+i", "command": "-inlineChat.start", "when": "editorFocus && inlineChatHasProvider && !editorReadonly" }, { "key": "cmd+r i", "command": "-inlineChat.start", "when": "edi..

{ // ======================== // Workspace UI Settings // ======================== "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Default Dark Modern", "workbench.colorCustomizations": { "[Default Dark Modern]": { "activityBarBadge.background": "#2979FF", "activityBar.activeBorder": "#2979FF", "list.activeSelectionForeground": "#2979FF", "list..

Hasura란?Hasura는 GraphQL 기반의 실시간 API 생성 엔진으로, 데이터베이스에서 자동으로 GraphQL API를 생성해주는 도구입니다. 특히 PostgreSQL과 잘 연동되며, 최소한의 설정만으로 강력한 CRUD API 및 실시간 데이터 쿼리 기능을 제공할 수 있습니다.🔹 주요 특징자동 GraphQL API 생성PostgreSQL, MySQL, SQL Server 등의 데이터베이스에서 자동으로 GraphQL API를 생성함.REST API를 따로 개발할 필요 없이 빠르게 백엔드 구축 가능.실시간 데이터 처리 (Subscriptions)GraphQL의 subscriptions 기능을 기본적으로 지원하여, 데이터 변경 시 자동으로 프론트엔드에 반영됨.WebSocket을 활용하여 실시간 데이..

n8n이란?n8n은 오픈 소스 기반의 워크플로우 자동화(Workflow Automation) 도구로, 다양한 API 및 서비스 간의 데이터 흐름을 자동화할 수 있도록 도와주는 노코드(No-Code) / 로우코드(Low-Code) 플랫폼입니다.🔹 주요 특징오픈 소스 & 셀프 호스팅 가능n8n은 오픈 소스이므로 무료로 사용할 수 있으며, 직접 서버에 배포하여 사용할 수도 있습니다.SaaS(클라우드) 버전도 제공됨.직관적인 노드 기반 UI플로우 차트처럼 노드를 연결하여 워크플로우를 구성할 수 있음.개발자가 아니더라도 쉽게 자동화할 수 있음.150개 이상의 서비스 통합 지원Slack, GitHub, Notion, Google Sheets, Trello, PostgreSQL, MySQL, Stripe 등 다양한..

Git에서 Rebase와 Merge는 브랜치를 병합하는 두 가지 방식인데, 각각 장단점이 있어요. 실무에서는 코드 히스토리를 관리하는 전략에 따라 다르게 사용됩니다.1️⃣ Merge (git merge)✅ 기본적인 브랜치 병합 방식✅ 새로운 Merge Commit이 생성됨사용법git checkout maingit merge feature-branch예시A---B---C (main) \ D---E---F (feature-branch) ➡ git merge feature-branch 실행 후:A---B---C---M (main) \ / D---E---F (feature-branch) ✅ M(Merge Commit)이 생성됨.✅ 과거 히스토리를 그대로 유지하며, 브랜치..

🔹 행렬 곱셈(Matrix Multiplication)이란?행렬 곱셈은 두 개의 2차원 배열(행렬)을 곱하는 연산입니다.행렬 곱셈은 단순한 원소별 곱셈이 아니라 행과 열을 이용한 연산으로 이루어집니다.✅ 1. 행렬 곱셈의 조건A(행렬)이 m × n 크기이고, B(행렬)이 n × p 크기라면,A의 열 개수(n)과 B의 행 개수(n)가 같아야 곱할 수 있음결과 행렬 C는 m × p 크기의 행렬이 됨🔹 즉, A(m × n) * B(n × p) = C(m × p)✅ 2. 행렬 곱셈 과정행렬 A와 B가 주어졌을 때, A의 각 행(row)과 B의 각 열(column)을 곱해서 더한 값이 결과 행렬 C의 원소가 됩니다.예제A (2 × 3 행렬)| 1 2 3 || 4 5 6 | B (3 × 2 행렬)| 7 ..