![]()
macOS에서 여러 GitHub 계정 사용하는 방법 (SSH 중심)회사 계정과 개인 계정을 구분해서 GitHub를 쓰고 싶을때..매번 어떻게 어떻게 했었는데 정리가 안되었어서 이번기회에 정리합니다.macOS 환경에서 SSH 방식으로 GitHub 여러 계정을 깔끔하게 설정하는 방법✅ 방법 개요GitHub 계정별로 별도의 SSH 키를 만들고, ~/.ssh/config에 설정해주는 방식입니다.왜 SSH가 더 나은지?토큰 입력 없이 인증 자동화계정별로 구분해 push/pull 가능한 번만 설정하면 편리하게 사용 가능1️⃣ 계정별 SSH 키 생성# 개인 계정ssh-keygen -t ed25519 -C "your-email@example.com" -f ~/.ssh/id_ed25519_personal# 회사 계정ss..
![]()
Docker Desktop에서 이미지가 "in use" 상태로 표시되어 삭제되지 않는 문제1. 숨겨진 컨테이너 확인 및 정리터미널에서 다음 명령어로 모든 컨테이너(중지된 것 포함)를 확인해보세요:# 모든 컨테이너 확인 (중지된 것 포함)docker ps -a# 중지된 모든 컨테이너 삭제docker container prune -f2. Dangling 이미지 정리태그가 없는 이미지들을 정리합니다:# dangling 이미지 확인docker images -f "dangling=true"# dangling 이미지 삭제docker image prune -f3. 네트워크 및 볼륨 정리이미지가 네트워크나 볼륨에 연결되어 있을 수 있습니다:# 사용하지 않는 네트워크 정리docker network prune -f# 사..
![]()
JSON-LD: 웹 표준에서 AI 검색 기반으로JSON-LD는 단순한 웹 표준에서 AI 기반 검색 최적화의 핵심으로 변모했습니다. 2011년 JSON과 시맨틱 웹 기술을 연결하기 위해 설계된 JSON-LD는 이제 지식 그래프, AI 크롤러, 생성형 검색 엔진의 중요한 인프라 역할을 하고 있습니다. 이러한 진화는 기계가 웹 콘텐츠를 이해하고 처리하는 방식에서 가장 중요한 변화 중 하나를 나타냅니다.기원과 표준화: 링크드 데이터를 접근 가능하게 만들기JSON-LD는 2011년 시맨틱 웹 기술을 단순화해야 한다는 절실한 필요에서 출현했습니다. Digital Bazaar의 Manu Sporny가 프로젝트를 시작했고, 공동 편집자인 Gregg Kellogg, Markus Lanthaler, Dave Longley..
![]()
🎨 OpenAI Responses API로 이미지 생성 결과 스트리밍 받기OpenAI에서 제공하는 responses API를 이용하면 이제 텍스트 프롬프트로 이미지 생성을 요청할 수 있고, 이를 스트리밍 형식으로 단계별로 수신할 수 있습니다.Next.js와 TanStack Query의 streamedQuery 기능을 활용해 실시간으로 이미지를 받아 UI에 바로 반영하는 방식을 정리합니다.🧩 시스템 구성✅ 주요 기술 스택OpenAI SDK (openai): responses.create를 통해 이미지 스트리밍 요청Next.js Route Handler: 서버 측에서 OpenAI 응답을 ReadableStream으로 래핑TanStack Query (useQuery + streamedQuery): 클라이언..
![]()
🧩 문제정의React에서 디바운스 기능이 필요한 상황에 대응하기 위해 직접 커스텀 훅 useDebounce를 만들어 사용하고 있었습니다.기본적으로 useCallback과 useRef만으로 구현했기 때문에 간단하고 직관적이었으나,콜백이 최신 상태를 반영하지 않거나 props로 전달 시 리렌더링을 유발하는 등의 숨겨진 안정성 문제가 있었습니다.원래 코드import { useCallback, useRef } from "react";type Debounce = (...args: T) => void;export const useDebounce = ( func: (...args: T) => void, delay: number,): Debounce => { const timerRef = useRef..
![]()
작년에 FSD를 나름대로(?) 적용하여 진행했던 프로젝트가 있었습니다.그러나 FSD에 대한 깊은 이해를 바탕으로 적용했다기 보다는그냥 '기능 중심으로 묶는다' 정도로 생각했었기 때문에 부족함을 많이 느꼈었습니다. 그래서 이번에 FSD를 다시한번 공부하며 도입해 보았는데 이 과정에서여러 의견을 종합하고 제 나름대로 커스텀(...)해보았던 기록을 남깁니다. FSD의 개념에 대한 내용은 검색하면 많이 나옵니다.# (번역) 기능 분할 설계 - 최고의 프런트엔드 아키텍처# 프론트엔드 개발자 관점으로 바라보는 관심사의 분리와 좋은 폴더 구조 (feat. FSD)# Feature-Sliced Design을 직접 사용하면서 느낀 장점과 단점# FSD 아키텍처 알아보기위 블로그 등을 참고할 수 있겠습니다(감사합니다) ..
![]()
Q1저는 계속 RSC 와 Next.js 에서 use server 혹은 use client 지시어에 대해 정확히 무슨 일을 하는지 궁금했습니다.단순하게는 use server 를 사용하면 해당 파일은 server side 가 되고, use client 를 사용하면 client side 가 되는 건가? 라고 생각했는데요. Next.js 에서는 아무것도 안쓰면 자동으로 서버 컴포넌트가 되기도 해서 정확한 의미가 궁금했어요.검색을 해보니 use server 는 사용된 모듈 내의 함수를 마치 http 엔드포인트 처럼 만들어서 클라이언트가 사용할 수 있도록 하는 것이고, use client 는 프론트엔드에서 동작할 함수(=컴포넌트)가 데이터를 서버로부터 받을 수 있게하고, 서버에서 렌더링 가능하도록 한다는 것을 알 ..
![]()
🧩 문제 정의프로젝트에서 OpenAI의 image edit 기능을 활용한 이미지 생성을 구현하던 중,Amplify 환경에서 API 요청이 504 Gateway Timeout 에러를 반환하는 문제에 직면했습니다.Vercel 배포 환경에서는 요청이 정상적으로 처리되지만,Amplify에서는 Lambda@Edge의 timeout 제한으로 인해 SSR 함수가 29초를 넘기면 강제 종료특히 이미지 생성은 평균 40초 이상 걸리는 작업이라, Amplify 환경에서 실행 불가능🛠 해결 과정1. 구조 분리 (백엔드 역할 Next.js 앱 도입)이미지 생성 로직을 별도의 Next.js 앱에 분리해 ‘백엔드 역할’로 사용클라이언트는 이 앱에 요청을 보내고, 실제 작업은 해당 앱에서 수행2. Polling 방식 적용첫 번..
![]()
🧨 문제 상황컴포넌트 내 드롭다운 필터를 초기화(reset) 해야 하는 상황이 있었습니다.처음에는 아래와 같은 방식으로 리셋을 구현했었는데, 계속 신경이 쓰였습니다.const [isReset, setIsReset] = useState(false);const handleReset = () => { setKeyword(""); setPage(1); setTarget(All); setIsReset(true); setTimeout(() => setIsReset(false), 1000);};❗문제점setTimeout으로 리셋 flag를 1초 뒤에 false로 만드는 게 불안정하고 지저분했음Dropdown 컴포넌트 내부에서 isReset을 감지해 setLabel, onValueChange 등을 직접 호출..
![]()
🧠 Inertia/React + Context 환경에서 중복 fetch 문제 해결기📌 문제 정의최근 Inertia.js + React + Laravel 조합으로 프로젝트를 진행하던 중, Context 내부에서 fetch가 두 번 이상 발생하는 문제를 겪었습니다.Context 내부에서 초기 fetch 요청을 보내고 있었고, 이 요청은 특정 state에 의존하고 있었습니다.그런데 페이지 이동 시 Context가 재마운트되며 initialState가 다시 적용되었고, 결과적으로 fetch가 두 번 이상 실행되었습니다.이로 인해 드물게 초기값이 UI에 반영되는 문제, 혹은 깜빡임(flickering)이 발생했습니다.⚙️ 문제 원인 분석Inertia 환경에선 다음과 같은 제약이 있었습니다:Context Pro..
![]()
문제 상황회사 밖에서 회사 서버에 접속해야 했습니다.하지만 회사 서버는 방화벽 설정으로 인해 외부에서는 직접 접근이 불가능했습니다.해결 시도회사에서 제공한 OpenVPN 설정 파일(.ovpn)과 함께, crt, key, pem 등 필요한 인증서 파일들도 모두 갖추고 있었습니다.macOS에서 OpenVPN Connect 앱으로 시도했지만, 접속은 계속 실패했고 로그에는 서버 타임아웃 메시지가 반복되었습니다..ovpn 파일을 수정해 UDP → TCP, 포트 변경, 불필요한 옵션 제거 등 여러 가지 방법을 시도했지만 효과가 없었습니다.결국 회사 선임에게 도움을 요청했고, 제 집 공인 IP를 화이트리스트에 등록하는 방식으로 문제를 해결했습니다.배운 것이 과정을 통해 VPN의 기본 원리에 대해 다시 이해하게 되었..
![]()
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 ..
![]()
모듈로 연산을 사용하여 일관된 인덱싱 처리🔹 비교배열이 기준배열보다 긴 경우✅ 모듈로 연산(i % pattern.length)은 항상 0 이상 pattern.length - 1 이하의 값을 반환✅ 즉, 패턴이 길어도 i가 그 범위를 초과하지 않으면 처음 몇 개 값만 사용됨const answers = [1, 3, 2]; // 정답 3문제const pattern = [1, 2, 3, 4, 5, 6, 7, 8]; // 8개짜리 패턴 (더 김)for (let i = 0; i → 패턴이 길더라도 처음 answers.length만큼만 비교되므로, i % pattern.length는 그냥 i와 동일한 효과. 💡 즉, pattern.length >= answers.length일 때 i % pattern.lengt..
![]()
🔹 Number.EPSILON 이란?Number.EPSILON은 JavaScript에서 부동소수점 연산의 오차를 처리하기 위해 사용되는 상수입니다.이 값은 1과 가장 가까운 부동소수점 숫자 사이의 차이를 나타내며, 2^(-52) (약 2.220446049250313e-16)의 값을 가집니다.console.log(Number.EPSILON); // 2.220446049250313e-16🔹 왜 필요한가?JavaScript에서 숫자는 IEEE 754 부동소수점 방식으로 저장됩니다.이 때문에 정확한 실수 연산이 어려워 미세한 오차가 발생할 수 있습니다.❌ 부동소수점 오차 예시console.log(0.1 + 0.2); // 0.30000000000000004console.log(0.3 === (0.1 + 0...
![]()
키워드상황스택- 쌍이 맞는지- 최근- 무언가를 저장하고 반대로 처리해야 할 때- 데이터의 조합이 균형을 이루어야 할 때- 알고리즘이 재귀 특성을 가질 때- 최근 상태 추적큐- 순서대로- ~대로 동작하는 경우- 스케줄링- 최소 시간- 특정 조건에 따라 시뮬레이션 할 때- 시작 지점부터 목표 지점까지 최단 거리깊이 우선 탐색- 모든 경로- 메모리 사용량이 제한적일 때의 탐색- 백트래킹 문제를 풀 때너비 우선 탐색- 최적- 레벨 순회- 최소 단계- 네트워크 전파- 시작 지점 부터 최단 경로나 최수 횟수를 찾아야 할 때백트래킹- 조합- 순열- 부분 집합- 조합 및 순열 문제- 특정 조건을 만족하는 부분 집합최단 경로- 최단 경로- 최소 시간- 최소 비용- 트래픽- 음의 순환- 단일 출발점 경로- 다익스트라: 특..
![]()
JavaScript는 1995년 넷스케이프(Netscape) 사에서 브랜든 아이크(Brendan Eich) 가 단 10일 만에 개발한 것으로 유명합니다.이렇게 짧은 시간 안에 만들어진 이유는, 당시 브라우저에서 경량의 스크립트 언어가 필요했기 때문입니다.초기에는 “Mocha”라는 이름으로 개발되었으며, 이후 “LiveScript”를 거쳐 JavaScript라는 이름으로 변경되었습니다. 1996년, 마이크로소프트는 넷스케이프의 JavaScript를 리버스 엔지니어링하여 JScript를 개발했고,이를 자사 브라우저인 Internet Explorer(IE) 에 탑재하면서 브라우저 간의 표준 차이로 인해 비호환성 문제가 발생하게 되었습니다. 이에 따라 1997년 ECMA(European Computer Manu..
![]()
XSS와 SQL Injection: 왜 실행될까?💡 핵심 질문:"유저 입력에 JavaScript 코드나 SQL 문을 넣는다고 해서, 이게 클라이언트나 서버에서 실행될 수 있는가?"✅ 답변: 실행될 수 있음.XSS는 클라이언트(브라우저)에서 실행되는 문제SQL Injection은 서버(DB)에서 실행되는 문제둘 다 입력값을 제대로 처리하지 않으면 악성 코드가 실행될 수 있음.1️⃣ XSS (Cross-Site Scripting) → 클라이언트에서 실행됨XSS가 발생하는 이유:브라우저는 HTML을 렌더링할 때, 스크립트(이 값이 그대로 데이터베이스에 저장됨이후, 다른 사용자가 이 페이지를 방문할 때 저장된 악성 스크립트가 브라우저에서 실행됨📌 왜 실행될까?서버가 입력값을 필터링 없이 그대로 HTML로 반..
![]()
자바스크립트의 덕 타이핑(Duck Typing) 개념덕 타이핑(Duck Typing)은 객체의 실제 타입이 아니라, "어떤 속성과 메서드를 가지고 있는지"에 따라 타입을 결정하는 개념입니다. 📌 철학:"오리처럼 걷고, 오리처럼 꽥꽥거린다면, 그것은 오리다." 🦆즉, 객체의 타입을 확인할 때 클래스나 명시적인 타입 정보가 아니라, 객체가 특정 속성이나 메서드를 가지고 있는지를 기준으로 판단합니다.자바와 자바스크립트의 차이자바 (명시적 타입 시스템)객체가 특정 클래스에서 상속받거나 인터페이스를 구현해야 해당 타입으로 간주됨클래스 이름이 다르면, 같은 속성을 가지고 있어도 다른 타입으로 인식됨자바스크립트 (덕 타이핑 기반의 동적 타입 시스템)특정 클래스에서 파생되지 않아도 속성과 메서드만 맞으면 해당 타입..
![]()
1. XSS(Cross-Site Scripting) 방어💡 문제:사용자가 입력한 HTML 태그를 그대로 렌더링하는 취약점 발견 (Stored XSS)URL 파라미터에서 자바스크립트 실행이 가능한 이슈 발견 (Reflected XSS)✅ 해결 방법:React에서 기본적으로 dangerouslySetInnerHTML을 사용하지 않도록 하고, DOMPurify를 적용해 안전한 HTML만 허용서버에서 Content-Security-Policy (CSP) 헤더를 추가하여 악성 스크립트 실행 방지escape()를 적용해 HTML 인코딩 처리📌 예제 코드 (DOMPurify 적용)import DOMPurify from "dompurify";const sanitizedHTML = DOMPurify.sanitize(..
![]()
HTTP란 무엇인가?HTTP(HyperText Transfer Protocol)는 클라이언트-서버 간의 요청/응답을 처리하는 프로토콜입니다.HTTP는 클라이언트와 서버 간의 요청-응답을 처리하는 애플리케이션 계층 프로토콜입니다. 기본적으로 stateless하며, 요청 방식(메서드)과 응답 코드, 헤더, 바디 등의 개념을 포함합니다. GET, POST, PUT, DELETE 같은 메서드를 사용해 리소스를 요청하고 조작합니다. 또한, HTTP/1.1, HTTP/2, HTTP/3 등의 버전이 있으며 성능과 보안 측면에서 차이를 보입니다.주요 개념HTTP의 특징Stateless (기본적으로 상태를 유지하지 않음)Request-Response 구조메서드(GET, POST, PUT, DELETE 등)와 역할HTTP..
![]()
추상화(Abstraction)란?추상화는 코드의 복잡성을 줄이기 위해 핵심적인 기능만 노출하고, 불필요한 세부 사항을 숨기는 개념입니다. 예를 들어, 자동차를 운전할 때 내부 엔진 동작을 몰라도 '엑셀을 밟으면 가속된다'는 것만 알면 됩니다. 프로그래밍에서도, 함수나 클래스가 내부 로직을 감추고 인터페이스만 제공하면, 더 쉽게 이해하고 유지보수할 수 있습니다. 복잡성을 줄이고, 사용자가 필요한 정보만 보이도록 설계내부 구현을 숨기고, 인터페이스만 제공하여 유지보수성을 향상**객체지향 프로그래밍(OOP)에서 핵심 원칙 중 하나 ✅ 추상화의 핵심 역할 → "불필요한 세부 사항을 숨기고, 핵심 기능만 제공"✅ 쉽게 이해할 수 있는 비유 → "자동차의 가속 원리를 몰라도 운전 가능"✅ 실제 코드 적용 가능성 →..
