아키텍처
Clean Architecture 정리 – 5부 16장 아키텍처의 독립성
2025.07.19
좋은 아키텍처가 지원해야 하는 것유스케이스운영개발배포1. 유스케이스 아키텍처는 시스템이 어떤 목적을 달성하기 위한 도구인지, 그 의도를 잘 드러내야 한다.이를 명확히 보여주는 게 유스케이스다.좋은 아키텍처는 이 유스케이스가 중심에 있도록 구성되어야 한다.따라서 클래스, 함수, 모듈 등에서 눈에 띄게 표현되어야 하며, 다른 구조 속에 감춰져 있으면 안 된다.좋은 아키텍처는 유스케이스를 일급 요소(first-class element)로서 다루며, 개발자가 시스템 구조만 훑어도 어떤 유스케이스들이 있는지 파악할 수 있게 한다. (이후, 21장에서 다룰 예정) 2. 운영유스케이스에 걸맞은 처리량과 응답 시간을 보장할 수 있는 아키텍처를 구조화할 수 있어야 한다.ex) 모노리틱, 다중 스레드, 다중 프로세스, 마..
아키텍처
Clean Architecture 정리 – 5부 15장 아키텍처
2025.07.13
아키텍처란시스템의 형태이다.어떤 컴포넌트들로 구성되어있고, 컴포넌트들이 어떻게 배치되며, 상호작용하는지 등을 정의한다.이러한 형태는 단순한 구조적 정보 이상을 담는다.개발, 배포, 운영, 유지보수의 모든 흐름에 영향을 준다. 개발 측면에서 본 아키텍처초기에는 아키텍처를 고려하는 것이 오히려 방해가 될 수 있다.그러나 프로젝트가 커지거나 오래 살아남는 시스템일수록 아키텍처의 진가가 드러난다. 배포 측면에서 본 아키텍처처음부터 배포를 고려하지 않으면,서비스는 코드 완성과는 무관하게 “배포하기 번거롭거나 심하게는 배포 할 수 없는 상태”에 빠질 수 있다.서비스가 하나의 단위로 배포 가능한지, 분리된 기능이 독립적으로 배포 가능한지 등을 아키텍처에서 고민해야 한다. 운영 측면에서 본 아키텍처대부분의 운영 문제는..
아키텍처
Clean Architecture 정리 - 컴포넌트 원칙 (2)
2025.07.05
지난 글에 이어서 정리.https://goto-helloworld.tistory.com/120SDP (Stable Dependencies Principle) — 안정된 의존성 원칙더 안정된 컴포넌트에 의존하라[ 안정적인 컴포넌트는 쉽게 변경되지 않기 때문이다. ] 컴포넌트의 크기, 복잡도, 간결함 등 변경을 쉽게 하지 못하게 하는 다양한 요소가 있지만, 여기서는 "얼마나 많은 컴포넌트들이 의존하고 있는가"에 주목한다. 많은 컴포넌트가 의존한다는 건, 사소한 변경에도 연쇄적으로 영향을 준다는 뜻이다. 결과적으로 해당 컴포넌트는 변경이 어렵다. (= 안정적인 컴포넌트다. ) 안정성 지표: 컴포넌트의 수치화된 안정성 안전성 지표는 들어오고 나가는 의존성의 개수를 계산한다.Fan-in: 다른 컴포넌트가 이 컴..
FE/React
인공지능 기반 카메라 감지 프로젝트: 백그라운드 동작 이슈 해결기
2025.06.30
현재, 인공지능 툴을 활용해 카메라로 행동을 감지하고 유의미한 결과를 제공하는 프로젝트를 진행 중이다.이 프로젝트에서 중요한 포인트는 지속적으로(끊임없이) 카메라의 정보를 분석해야 한다는 점이었다. 하지만 실제 구현 과정에서 브라우저 탭이 비활성화되거나 다른 프로그램을 사용하면 감지 분석 및 결과 알림이 작동하지 않는 문제가 발생했다.문제 상황 1: requestAnimationFrame의 한계 💡 추론브라우저 탭이 백그라운드로 전환되면 requestAnimationFrame이 멈출 것 같다. 실제로 다음과 같이 작성한 코드에서 문제가 발생했다:window.requestAnimationFrame(() => this.predictWebcam()); 공식 문서에 따르면:"requestAnimationFra..
FE/React
왜 memo에서 객체 리터럴은 리렌더링되고, useState 객체는 리렌더링되지 않을까?
2025.06.28
React.memo는 전달된 props가 이전과 얕은 비교(shallow equal) 시 같다면, 컴포넌트를 리렌더링하지 않는다.JavaScript의 얕은 비교는 === 연산자로 판단되며, 객체는 참조값이 같아야 === 연산자의 결과가 true가 된다.객체 리터럴 사용 시 문제'use client'import { memo, useState } from "react";const Test = () => { const object = { count: 0 }; // 매 렌더마다 새 객체 생성 const [count, setCount] = useState(0); return ( setCount(c => c + 1)}>Click {count} ..