원문: How Does Chrome Prioritize Image Requests? 이 글에서는 Chrome 브라우저가 이미지 리소스에 대한 요청 우선순위를 어떻게 결정하는지 자세히 살펴보겠습니다. 우선순위 결정 방식의 원리를 이해하고, 중요한 이미지를 더 빠르게 로드하기 위해 사용할 수 있는 최적화 기법들을 소개합니다. 이미지 요청은 기본적으로 ‘낮음(Low)’ 우선순위를 가집니다. 기본적으로 이미지 요청은 낮음(Low) 우선순위를 갖습니다. 브라우저는 이미지를 로드하기 전에 렌더링 차단(render-blocking) 리소스나 핵심 요청 체인(critical request chain) 에 포함된 리소스들의 로드를 먼저 처리합니다. 아래 요청 워터폴(waterfall) 예시를 보면 여러 이미지 요청이 ‘낮음(Low)’ 우선순위로 처리되는 것을 확인할 수 있습니다. 회색 막대는 대기 시간을 나타내며, 이 예시에서는 700ms가 넘는 경우가 많습니다. Chrome은 페이지 렌더링이 …

현대 소프트웨어 개발 환경은 기술적 복잡성이 증가하고, 프로젝트 규모가 확대되며, 다기능 팀 기반 협업이 심화되는 특징을 보입니다. 이러한 변화 속에서 개발자의 전문성은 특정 프로그래밍 언어나 도구의 숙련도를 넘어, 보다 근본적인 지적 역량과 대인 관계 능력에 의해 좌우됩니다. 특히 웹 개발과 같이 프론트엔드, 백엔드, 인프라 등 다양한 기술 영역을 포괄하면서 성능, 코드 재사용성, 유지보수성, 보안 등 다차원적인 품질 속성을 요구하는 분야에서는 이러한 핵심 역량이 더욱 중요합니다. 이 글에서는 소프트웨어 개발자가 지속적으로 성장하고 경쟁력을 유지하기 위해 필수적으로 갖춰야 할 세 가지 핵심 역량인 효과적 사고력, 체계적 문제 분해 능력, 그리고 명확한 의사소통 능력의 중요성을 분석하고, 이를 개발자가 실무에서 내재화할 수 있는 방법을 살펴봅니다. 1. 효과적 사고력: 분석적 탐구와 시스템적 통찰 효과적 사고력은 기술적 도전을 깊이 있게 이해하고 최적의 해결책을 찾기 위한 근본적인…

웹사이트 내비게이션의 해골물, 브래드크럼(Breadcrumbs). 사용자의 현재 위치를 알려주고 상위 경로로의 복귀를 돕는 이 UI 패턴은 그 직관성 덕분에 오랫동안 사랑받아 왔습니다. 하지만 웹 기술과 사용자 형태가 변화하면서, 는 다소 극단적인 주장까지 제기되고 있습니다. 하지만 저는 이 사망 선고가 다소 성급하다고 생각합니다. 하지만 브레드크럼의 역할과 필요성이 과거와 달라졌으며, 그 적용에 있어 이전보다 훨씬 신중한 접근이 필요하다는 점에는 전적으로 동의합니다. 이 글에서는 브레드크럼 효용성에 대해 논의하고, 현대 웹 개발 환경에서의 가치와 고려 사항에 대한 제 관점을 공유하고자 합니다. 브레드크럼 효용성에 대한 회의론: 타당한 지적들 여러 사이트의 글 등에서 제기되는 브레드크럼 회의론의 근거는 주목할만 합니다. 1. 향상된 웹사이트 아키텍처 명확한 주 내비게이션, 플랫 구조, 효과적인 태깅 시스템 등은 사용자가 정보 구조 내에서 길을 잃을 가능성을 줄였습니다. 물론 현대…

현대의 웹 어플리케이션 환경에서 성능, 안정성, 그리고 확장성은 더 이상 선택이 아닌 필수입니다. 트래픽이 폭증하고 서비스 아키텍처가 복잡해짐에 따라, 유입되는 요청을 다수의 백엔드 서버로 분산하고, 예기치 않은 서버 장애 상황에서도 서비스 중단을 최소화하는 기술의 중요성은 아무리 강조해도 지나치지 않습니다. 이러한 과제를 해결하기 위한 오픈 소스 솔루션 중 하나가 바로 HAProxy입니다. HAProxy(High Availability Proxy)는 고성능 TCP/HTTP 로드 밸런서 및 프록시 서버로서, 수많은 글로벌 고트래픽 웹사이트에서 그 성능과 안정성을 입증하며 핵심 인프라 구성 요소로 자리 잡았습니다. 이 글에서는 HAProxy의 개념과 주요 기능을 소개하고, Nginx와 Envoy와 같은 다른 솔루션과의 비교를 통해 각각의 특징과 적합한 사용 사례를 알려드리겠습니다. HAProxy의 핵심 기능 HAProxy는 트래픽 관리와 서비스 가용성 극대화를 위한 풍부하고 강력한 …

머신러닝 모델의 성능은 학습 데이터로부터 일반화하여 새로운 데이터에 얼마나 잘 적용되는가에 따라 결정됩니다. 그러나 학습 데이터의 세부적인 특성이나 노이즈까지 과도하게 학습하면, 새로운 데이터에서 성능이 급격히 떨어지는 현상이 발생합니다. 이를 과적합(Overfitting) 이라고 합니다. 이 글에서는 과적합의 정의, 주요 원인, 정확한 진단 방법, 효과적인 방지 전략 및 실제 사례를 통해 이해를 돕겠습니다. 과적합이란? 과적합이란 머신러닝 모델이 학습 데이터를 너무 세밀하게 학습하여, 실제로는 중요하지 않은 노이즈나 특이사항까지 반영함으로써 일반화 성능이 떨어지는 현상입니다. 예를 들어, 학생이 문제의 원리를 이해하지 않고 단지 특정 문제의 답만 외우는 경우와 유사합니다. 결과적으로 새로운 문제에는 제대로 대응할 수 없습니다. 과적합의 주요 특징 학습 데이터에서는 뛰어난 성능을 보이지만, 검증 또는 테스트 데이터에서는 성능이 크게 떨어집니다. 특히 모델의 구조가 복잡하거나 파라…

“기계가 스스로 학습한다” 라는 말은 이제 흔히 들리지만, 정작 ‘어떤 방식으로 학습하는 걸까?’ 라는 질문을 던지면 막막해하는 분들도 많습니다. 머신러닝에는 여러 학습 방식이 있지만, 그중에서도 가장 기본이 되는 두 축은 지도 학습(Supervised Learning) 과 비지도 학습(Unsupervised Learning) 입니다. 이 글에서는 두 가지 방법을 쉽게 이해되도록 소개하려고 합니다. 지도 학습(Supervised Learning) 주요 개념 지도 학습이란, 입력 데이터와 그에 대응하는 정답(레이블) 을 함께 제시해 모델을 학습시키는 방식입니다. 예컨대 강아지 사진에 “강아지”라는 레이블을, 고양이 사진에 “고양이”라는 레이블을 붙여 주면, 모델이 둘 각각의 특징을 학습한 뒤 새로운 사진이 들어왔을 때 해당 이미지가 강아지인지 고양이인지 예측할 수 있게 됩니다. 또한 스팸 메일 필터링, 음성 인식, 이미지 분류, 금융 시장에서의 시계열 예측(회귀 문제) 등에서 폭넓게…

요즘 AI가 우리 일상에 깊이 들어옵니다. 그래서 AI가 데이터를 자유롭게 다루는 능력이 얼마나 중요한지 새삼 느끼게 됩니다. 예전에는 AI가 파일이나 데이터베이스, 클라우드에서 정보를 가져오려면 개발자가 복잡한 코드를 작성해야 했습니다. 이는 전자기기마다 플러그가 달라서 콘센트에 맞추려면 계속 새 어댑터를 만들어야 하는 상황과 비슷합니다. 이런 비효율을 해결하기 위해 Anthropic이 내놓은 해결책이 바로 모델 컨텍스트 프로토콜(Model Context Protocol, MCP) 입니다. MCP는 AI, 특히 대형 언어 모델(LLM)이 데이터 소스와 도구에 쉽게 접근할 수 있도록 도와줍니다. 다양한 기기를 하나의 포트에 연결하듯, MCP는 AI와 데이터 소스를 매끄럽게 연결합니다. 이러한 혁신 덕분에 AI는 더 정확하게 작동하고 실시간으로 반응하며 사용자 맞춤형 답변을 제공합니다. 이번 글에서는 MCP가 무엇인지, 어떻게 작동하는지, 왜 주목해야 하는지, 그리고 비슷해 보일 수…

2025년 2월 14일, React 팀은 Create React App(이하 CRA)의 공식 종료를 발표하며 프론트엔드 개발자 커뮤니티에 큰 파장을 일으켰습니다. 2016년 처음 등장한 이래로, CRA는 React 프로젝트를 시작하는 가장 간편한 방법으로 자리 잡았지만, 이제는 그 역할을 내려놓고 더 현대적인 도구로의 전환을 맞이했습니다. 이 소식은 단순한 도구의 종료가 아니라, 웹 개발의 흐름이 변화하고 있음을 보여줍니다. 왜 이런 결정이 내려졌는지, 어떤 대안이 우리를 기다리고 있는지, 그리고 이 변화가 개발자들에게 어떤 기회를 열어줄지 이 글에서 자세히 다뤄보겠습니다. 만약 여러분이 React로 프로젝트를 시작하거나 유지하고 있자면, 이 글이 중요한 길잡이가 될 것입니다. 1. Create React App의 종료 배경 CRA는 React의 개발의 문턱을 낮춘 혁신적인 도구였습니다. 과거에는 React 프로젝트를 시작하려면 Webpack으로 빌드 시스템을 설정하고, Babel…

안녕하세요, 최근 자연어 처리(NLP) 분야에서 최근 주목 받고 있는 DLLM (Diffusion Language Model) 에 대해 이야해보고자 합니다. DLLM은 확산 언어 모델로, 기존의 대규모 언어 모델(LLM)과는 다른 독창적인 접근 방식을 취합니다. 이 글에서는 DLLM의 개념과 작동 원리를 소개하고, 기존 LLM과의 주요 차이점을 비교하며, 이 새로운 모델이 가져올 가능성을 탐구해보겠습니다. 1. DLLM이란? DLLM은 확산 언어 모델의 줄임말로, 이미지 생성에서 성공을 거둔 확산 모델(Diffusion Model) 의 원리를 텍스트 데이터에 적용한 신개념 언어 모델입니다. 확산 모델은 데이터에 점진적으로 노이즈를 추가하고 이를 제거하는 과정을 통해 데이터의 분포를 학습하는 방식으로 작동합니다. DLLM은 이 아이디어를 텍스트에 맞게 변형하여, 텍스트를 왜곡한 후 원래 상태로 복원하면서 언어의 구조와 의미를 학습합니다. 쉽게 말해, DLLM은 텍스트에 노이즈를 더하…

React 애플리케이션을 개발하다 보면, useState의 setter 함수를 자식 컴포넌트에 직접 내려주어 데이터를 업데이트하는 패턴을 흔히 볼 수 있습니다. 처음에는 간단해 보이지만, 코드가 복잡해지고 상태 구조가 변동될 때 abstraction leak(추상화 누수)이 발생할 위험이 큽니다. 이 글에서는 abstraction leak이 무엇인지, 왜 문제가 되며, 어떻게 해결할 수 있는지 알아보겠습니다. Tip: 혹시 TypeScript 프로젝트에서 React.Dispatch

React를 처음 배우는 분들은 React가 복잡하고 어려울 것이라고 생각하기 쉽습니다. 하지만 실제로 React 자체는 엄격한 알고리즘과 명확한 로직을 제공하기 때문에 복잡도가 크게 높지 않습니다. 오히려 문제는 React ‘바깥’에 있습니다. 예를 들어, “어떤 기준으로 컴포넌트를 설계할지?”, “라이브러리를 사용해야 할지, 직접 구현해야 할지?”, “어떤 상태관리 전략이 적합할지?” 등 상황과 맥락마다 답이 달라지는 질문들이 쏟아지죠. 이 글에서는 모달 다이얼로그 예시를 통해, 아이디어에서부터 프로덕션 수준까지 개발 과정을 어떻게 밟을 수 있는지 살펴보겠습니다. 1. 가장 간단한 구현: 스파이크(Spike) 1) 스파이크란 무엇인가? ‘스파이크(Spike)’는 특정 문제나 기능에 대해, 가장 빠르고 단순하게 구현해보며 가능성을 탐색하는 과정입니다. 이때는 코드를 깔끔하게 유지하거나 최적화하는 것보다는 “일단 돌아가는지(동작하는지) 테스트”하는 데 집중합니다. 2) 간단한 모달…

오늘날 많은 기업이 디지털 전환(Digital Transformation)을 가속화하고 있습니다. 클라우드, 빅데이터, 보안 솔루션 등 점점 복잡해지는 IT 환경을 성공적으로 운영하기 위해서는 전문적인 관리와 유지·보수가 필수적입니다. 바로 이 지점에서 MSP(Managed Service Provider) 가 큰 역할을 하게 됩니다. 이번 글에서는 MSP란 무엇인지, 왜 기업에 중요한지, 그리고 어떻게 활용할 수 있는지 알아보겠습니다. MSP란? MSP(Managed Service Provider) 는 기업이 보유한 IT 인프라, 시스템, 애플리케이션 등을 전문적으로 대신 관리·운영해주는 서비스 공급자를 말합니다. 과거에는 서버 호스팅이나 네트워크 유지보수를 대행하는 모델이 많았으나, 최근에는 클라우드 운영, 보안, 애플리케이션 관리, 빅데이터 분석, 컨테이너 오케스트레이션(Kubernetes) 등으로 그 영역이 더욱 다양해지고 있습니다. 주요 특징 외부 전문성 활용: 기업 내부에…

원문 출처: [https://dontfuckwithscroll.com] 모멘텀 스크롤(일명 부드러운 스크롤, 관성 스크롤) 플러그인은 웹 전반에 걸쳐 만연한 문제입니다. 이들은 향상된 경험을 표방하지만, 실제로는 웹 브라우징 경험을 크게 해치고 있습니다. 사용성, 접근성, 성능을 망가뜨리는 이들 효과는 결국 사이트를 덜 직관적이고 덜 효율적으로 만듭니다. 아래는 모멘텀 스크롤 플러그인이 웹을 망치는 10가지 이유입니다. 1. 사용자 기대를 저버린다 사용자는 스크롤 방식에 익숙합니다. 웹의 초창기부터 스크롤은 단순하고 직관적이었습니다: 마우스 휠 혹은 트랙패드를 움직이면 콘텐츠가 즉각 반응합니다. 하지만 모멘텀 스크롤은 이 기본적인 동작을 훼손합니다. 사용자가 스크롤할 때 즉각적 반응 대신 어색한 애니메이션이 개입하고, 기존의 근육 기억(muscle memory)을 무너뜨립니다. 마치 자동차의 핸들이 반대로 작동하는 것처럼, 불편하고 어색한 경험을 강요합니다. 영향: 사용자는 익숙한…

현대의 프론트엔드 개발은 단순히 화면을 그리는 것을 넘어 복잡한 상태 관리, 다양한 API 연동, 글로벌 디자인 시스템 통합 등 다층적인 요구사항을 다룬다. 간단한 MVP 수준에서 수십, 수백 개의 컴포넌트와 로직으로 확장되는 상황은 흔하다. 이때 단순히 ‘동작하는 코드’ 이상으로, 유지보수 가능한(Clean), 확장성 있는(Extensible), 일관성 있는(Consistent) 아키텍처를 갖추는 것은 필수가 된다. 본 포스팅에서는 프론트엔드 아키텍처 패턴과 클린 코드의 중요성과 이를 실무에 적용하는 방법을 사례와 함께 다룬다. 프론트엔드 아키텍처 패턴이란? 프론트엔드 아키텍처 패턴은 코드베이스를 모듈화하고, 명확한 책임 분리를 통해 애플리케이션 복잡성을 제어하는 설계 원칙이다. 이를 적용하면 다음과 같은 효과를 기대할 수 있다. 유지보수성 향상: 특정 모듈 수정 시 다른 부분에 최소한의 영향만 미치므로, 에러 추적과 버그 수정이 용이하다. 협업 효율 극대화: 명확한 디렉토리 구…

Zustand는 React 환경에서 경량 상태 관리를 지원하는 인기 있는 라이브러리입니다. 최근 업데이트된 Zustand v5는 성능 개선과 최신 React 환경과의 호환성을 강화하는 다양한 변경 사항을 도입했습니다. 이번 글에서는 Zustand v5의 주요 변경 사항과 함께 이전 버전에서 마이그레이션하는 방법을 다룹니다. 1. 주요 변경 사항 1.1 기본 내보내기 제거 이전 버전에서 지원되던 기본 내보내기()가 제거되었습니다. 이제 Zustand는 **명시적 내보내기()**만을 지원합니다. 1.2 React 18 이상 필수 Zustand v5는 React 18 이상 버전에서만 동작합니다. 따라서 React 17 이하를 사용하는 프로젝트는 React를 업그레이드해야 합니다. 1.3 의존성 추가 React 18의 기본 상태 관리 기능인 를 적극 활용하며, 일부 함수(, )는 이 패키지를 필요로 합니다. 해당 기능을 사용할 경우, 를 설치해야 합니다. 1.4 TypeScript 4.…

웹 애플리케이션을 개발하다 보면 사용자의 네트워크 상태에 따라 기능을 다르게 동작시켜야 하는 경우가 자주 있습니다. 예를 들어 사용자가 오프라인 상태일 때는 데이터를 로컬에 저장하고, 다시 온라인 상태로 전환되면 서버와 동기화해야 할 수 있습니다. 이러한 기능은 특히 모바일 앱이나 네트워크가 불안정한 환경에서 웹 애플리케이션을 사용하는 사용자에게 매우 유용합니다. React에서는 JavaScript의 속성을 활용하여 이러한 네트워크 상태를 쉽게 감지하고 처리할 수 있습니다. 이란? 은 브라우저의 객체에 속한 속성으로, 현재 브라우저가 온라인 상태인지 오프라인 상태인지를 나타냅니다. 이 속성은 간단하게 네트워크 연결 여부를 확인할 수 있게 해줍니다. 이를 통해 네트워크 상태에 따른 로직을 작성할 수 있으며, 오프라인에서 온라인으로 전환될 때 자동으로 데이터를 서버와 동기화하거나 사용자에게 적절한 메시지를 표시할 수 있습니다. : 네트워크에 연결된 상태 : 네트워크에 연결되지 않은…

소프트웨어 개발은 지속적으로 변화하는 기술 트렌드와 비즈니스 요구에 따라 진화합니다. 그러나 오래된 코드베이스, 즉 레거시 코드는 이러한 변화에 적응하기 어렵고, 유지보수와 확장성 측면에서 다양한 문제를 일으킬 수 있습니다. 이번 글에서는 레거시 코드를 왜 정리해야 하는지부터, 그 개념과 효과적인 정리 방법론에 대해 알아보겠습니다. 레거시 코드란 무엇인가? 레거시 코드는 다음과 같은 특징을 가진 기존의 코드입니다. 오래된 기술 스택: 구형 언어나 프레임워크를 사용합니다. 낮은 가독성: 복잡한 구조와 일관성 없는 코딩 스타일로 인해 이해하기 어렵습니다. 부족한 테스트 커버리지: 자동화된 테스트가 부족하여 변경 시 위험이 큽니다. 문서화 부족: 코드에 대한 주석이나 문서가 부족하여 새로운 개발자가 이해하기 어렵습니다. 레거시 코드를 정리해야 하는 이유 1. 유지보수성 향상 레거시 코드는 복잡하고 이해하기 어려워 수정이나 개선이 어렵습니다. 이를 정리하면 코드를 더 쉽게 이해하고 수정할…

Git 2.47이 공식 출시되면서 몇 가지 중요한 기능 개선과 추가 기능이 포함되었습니다. 이 글에서는 Git 2.47의 주요 기능을 살펴보고, 이러한 기능이 개발자들에게 어떤 이점을 줄 수 있는지 분석해 보겠습니다. 1. 증분 멀티팩 인덱스 (Incremental Multi-Pack Indexes) Git 2.47에서 가장 주목할 만한 기능은 증분 멀티팩 인덱스입니다. 기존 멀티팩 인덱스(MIDX)를 개선하여, 전체 인덱스를 갱신할 필요 없이 새 팩 파일을 효율적으로 추가할 수 있습니다. 이는 대규모 저장소에서 효율적인 객체 조회를 가능하게 하여, 개발자들이 클론이나 체크아웃 작업을 더 빠르게 수행할 수 있도록 합니다. 주요 이점: 증분 방식으로 추가되는 팩은 인덱싱 속도를 크게 높여, 대규모 프로젝트에서 속도와 저장 공간을 절약할 수 있습니다. 특히 협업 시 저장소의 복사 및 다운로드 시간이 감소해 전체 워크플로우가 더 원활해집니다. 사용 사례: 대형 기업 프로젝트나 오픈 소스…

Perplexity AI 리뷰 소개 Perplexity AI는 기존 검색 엔진과 차별화된 인공지능 기반 검색 도구입니다. 단순히 키워드에 맞는 웹페이지를 나열하는 것이 아니라, 사용자의 질문을 이해하고 관련 정보를 종합하여 직접적인 답변을 제공하는 검색 플랫폼입니다. 주요 기능 1. 맞춤형 검색 사용자는 원하는 정보에 따라 검색 옵션을 선택할 수 있습니다. 최신 인터넷 정보를 원하면 검색, 학술적인 정보를 원하면 또는 검색, 동영상 검색을 원하면 를 선택하여 보다 정확한 검색 결과를 얻을 수 있습니다. 2. 대화형 인터페이스 및 정확성 Perplexity AI는 대화형 인터페이스를 통해 사용자의 질문을 자연스럽게 받아들이고, 신뢰할 수 있는 출처에서 정보를 수집하여 답변의 정확성을 높입니다. 특히, 출처 링크를 함께 제공하여 사용자가 직접 정보를 확인할 수 있다는 점이 매우 유용합니다. 3. 연관 질문 제시 Perplexity AI는 사용자의 질문에 대한 답변을 제공하…

오늘날 웹과 모바일 애플리케이션 개발은 다양한 플랫폼에서 최적의 사용자 경험을 제공해야 한다는 도전 과제를 가지고 있습니다. 이를 해결하기 위해 등장한 BFF(Backend For Frontend) 패턴은 각 프론트엔드의 요구에 맞춘 맞춤형 백엔드를 제공함으로써 개발 효율성과 사용자 경험을 향상시키는 방법입니다. 이 글에서는 BFF 패턴의 개념, 장단점, 구현 방법 등을 자세히 알아보겠습니다. 1. BFF 패턴의 등장 배경 기존 아키텍처의 한계 기존 모놀리식 아키텍처는 모든 기능과 서비스를 하나의 코드베이스에 포함하는 방식으로, 각 플랫폼의 특수한 요구사항을 반영하기 어렵다는 문제점이 있습니다. 특히 다양한 클라이언트(웹, 모바일, 데스크탑)를 지원할 때 모든 요청을 동일한 백엔드에서 처리하게 되면, 필요 이상의 데이터를 전송하거나 클라이언트 요구에 맞지 않는 형식의 응답을 줄 수밖에 없었습니다. 프론트엔드 개발의 복잡성 증가 현대 애플리케이션은 다양한 기기와 플랫폼에서 일관된 경…

소개 기능 분할 설계 (Feature-Sliced Design, FSD)는 대규모 프론트엔드 애플리케이션을 구조화하기 위한 현대적인 아키텍처 방법론입니다. FSD는 애플리케이션을 기능 단위로 분할하고, 각 기능을 독립적으로 개발, 테스트, 유지보수할 수 있도록 하는 것을 목표로 합니다. FSD의 핵심 원칙 FSD는 다음과 같은 핵심 원칙을 기반으로 합니다. 기능 중심 설계: 애플리케이션을 비즈니스 기능 단위로 구성합니다. 계층화: 코드를 여러 계층으로 구분하여 관심사를 분리합니다. 단방향 의존성: 상위 계층은 하위 계층에만 의존할 수 있습니다. 명시적 공개 인터페이스: 각 모듈은 명확한 공개 API를 통해 상호작용합니다. 구성 가능성: 작은 단위의 기능을 조합하여 더 큰 기능을 만들 수 있습니다. FSD의 주요 구성 요소 레이어 (Layers) 레이어는 FSD의 가장 상위 수준의 구조입니다. 각 레이어는 특정한 책임을 가지며, 애플리케이션의 복잡성을 관리하는 데 도움을 줍니다. …

오늘은 제가 개발한 라는 도구에 대해 소개하고자 합니다. 는 AI를 활용하여 Git 커밋 메시지를 자동으로 생성해주는 CLI 도구입니다. 이 도구를 통해 일관성 있고 명확한 커밋 메시지를 쉽게 작성할 수 있습니다. 이를 통해 개발자들이 불필요하게 시간을 낭비하지 않고 더 중요한 작업에 집중할 수 있게 도와줍니다. 예제 이미지 개발 배경 Git을 사용하는 개발자라면 누구나 경험해 봤을 것입니다. 작업을 마치고 커밋을 하려는 순간, 적절한 커밋 메시지를 작성하는 데 시간을 허비하는 경우가 많습니다. 때로는 , 같은 모호한 메시지로 마무리 짓기도 하죠. 이런 문제를 해결하고자 AI를 이용해 자동으로 명확하고 구체적인 커밋 메시지를 생성해주는 도구를 만들게 되었습니다. Git 커밋 메시지는 코드 변경 사항의 요약이며, 팀 간의 의사소통과 프로젝트의 유지보수성을 높이는 데 매우 중요한 역할을 합니다. 하지만 바쁜 일정이나 많은 코드 변경 후에 적절한 커밋 메시지를 작성하는 것이 쉽지 않을…

소개 함수형 프로그래밍(Functional Programming, FP)은 순수 함수를 조합하고, 공유 상태, 변경 가능한 데이터, 부작용을 피하여 소프트웨어를 구축하는 프로그래밍 패러다임입니다. 이는 명령형 프로그래밍과는 대조적인 선언적 프로그래밍 스타일로, 코드가 “어떻게” 동작하는지보다 “무엇을” 하는지를 강조합니다. 개요 함수형 프로그래밍은 1930년대 람다 계산법(Lambda Calculus)에 근간을 두고 있으며, 1950년대에 개발된 Lisp 언어를 통해 처음으로 실용화되었습니다. 이 패러다임은 수학적 함수의 개념을 중심으로 프로그래밍을 구성하며, 상태 변경과 데이터 변경을 피하는 것을 강조합니다. 핵심 개념 1. 순수 함수 순수 함수는 다음 특성을 가진 함수를 말합니다: 같은 입력에 대해 항상 같은 출력을 반환합니다. 부작용(side effects)이 없습니다. 즉, 함수 외부의 상태를 변경하지 않습니다. 예시 (JavaScript): 2. 불변성 불변성은 생성된 후…

오늘은 이미지에서 주요 색상을 추출하는 방법에 대해 알아보며 이를 라이브러리화하는 과정을 소개하려고 합니다. 그 과정에서 겪었던 어려움과 노하우 등을 공유하고자 합니다. video 시작은 단순한 아이디어였습니다. 처음에는 그저 “이미지에서 색상을 뽑아낼 수 있으면 편하겠다. 그리고 그 이미지의 키 컬러를 뽑아내면 좋겠다.” 라는 생각으로 시작했습니다. 이미지에서 색상을 추출하는 사이트는 많았지만, 대부분 스포이드로 해당 픽셀의 컬러값을 가져오거나 그렇지 않으면 이미지 내에 있는 색상들을 전부 가져오는 것들이 대부분이였습니다. 첫 번째 도전: 성능 최적화 가장 먼저 부딪힌 문제는 성능이었습니다. 처음에는 모든 픽셀을 분석했는데, 큰 이미지를 처리할 때마다 성능이 떨어지는 문제가 있었습니다. 해결책: 픽셀 샘플링 모든 픽셀을 분석하는 대신 일정 간격으로 픽셀을 샘플링하는 방식을 도입했습니다. 사용자가 샘플링 비율을 조절할 수 있게 성능과 정확도의 균형을 맞출 수 있도록 했습니다. 두 …

최근 프론트엔드 개발에서 스타일링의 중요성은 점점 커지고 있습니다. Meta에서 개발한 StyleX는 CSS-in-JS 방식의 단점을 극복하고 더 나은 성능과 유지보수성을 제공하기 위한 경량 CSS 솔루션입니다. 이 글에서는 StyleX의 구조와 사용법, 주요 사용 사례, 그리고 장단점에 대해 알아보겠습니다. 주니어 개발자와 StyleX에 관심 있는 분들을 위해 쉽게 설명하려고 하니 편안하게 읽어주세요. StyleX란 무엇인가? StyleX는 Meta(Facebook)에서 개발한 CSS-in-JS 라이브러리로, React 기반의 대규모 애플리케이션에서 성능 문제를 해결하기 위해 만들어졌습니다. 기존의 CSS-in-JS 방식에서 발생하던 런타임 성능 문제와 스타일 중복을 줄이고, 스타일 관리를 더 쉽게 하기 위해 설계된 것이 특징입니다. CSS-in-JS는 자바스크립트 내에서 CSS를 작성하여 컴포넌트와 스타일을 결합하는 방식입니다. 그러나 대부분의 CSS-in-JS 라이브러리는 런…

현재 저희 회사의 CI/CD 구조를 간략히 살펴보면 아래와 같습니다. 하루는 서버를 배포하며 로그를 확인하고 있는데 라는 익숙한 문구가 나오는 것이였습니다. 바로 서버에 남은 용량이 없다는 것이였습니다. 원인 빌드 서버는 빌드 파이프라인을 실행하는 서버라 용량이 부족할 일이 없는데 이게 왜 이럴까 생각하면서 빌드 코드를 확인하는 순간 전 머리를 탁 칠 수밖에 없었습니다. image3 바로 도커 이미지를 에 Push하고 지우는 코드가 존재하지 않았던 겁니다. 일단 빌드 스크립트 상에서 에 Push하고 로컬 도커 이미지를 지우는 로직을 추가했지만, 남은 이 이미지들을 어떻게 다 지우지하는 생각이 들었습니다. Tag가 인 이미지를 조회하고 거기서 나온 도커 이미지 ID를 이용해서 삭제하는 스크립트를 작성해서 다 지울까? (수동으로 지운다는 생각은 하지 않았습니다. 갯수가 어마무시해서…) 해결 그러던 중 Docker image를 조회할 때 옵션을 사용할 수 있다는 것을 알고 좀 …

요즘 를 논할 때 빠질 수 없는 용어가 있습니다. 바로 IaC(Infrastructure as Code) 입니다. 수동으로 인프라를 구축하는 것이 아닌 코드를 통해 인프라를 생성하고 관리하는 것을 말합니다. IaC를 사용하면 인프라 사양을 담은 구성 파일이 생성되므로 구성을 편집하고 배포하기가 더 쉬워집니다. 또한 IaC는 매번 동일한 환경을 하도록 보장합니다. IaC를 사용하면 버전 관리, 재사용, 공유할 수 있는 리소스 구성을 정의하여 안전하고 일관되게 인프라를 구축, 변경, 관리할 수 있습니다. 그중 가장 많이 쓰는 도구로 하시코프(Hashcorp)에서 개발중인 이 있습니다. 테라폼의 경우 AWS, GCP, Azure와 같은 주요 클라우드 서비스를 비롯한 다양한 서비스를 프로바이더 방식으로 제공하고 있습니다. 이를 틍해 테라폼만으로 멀티 클라우드의 리소스들을 선언하고 관리하는 것도 가능합니다. 이번에는 Terraform을 이용하여 AWS 인프라를 간단하게 구축해보도록 하겠습니…

Drone CI 글과 연결되니 한번 읽어보시는 것을 추천합니다. Portainer란? Accelerate container adoption 다양한 환경에서 쿠버네티스, 도커, 스웜 등을 쉽게 배포하고 관리할 수 있는 경량화된 관리 도구로서, 웹 UI를 제공합니다. 실행 중인 컨테이너, 이미지, 볼륨 등을 직관적으로 확인 가능 CLI로 작업했던 Docker 관련 작업을 손쉽게 사용 가능 Architecture Portainer는 와 두 가지 요소로 구성됩니다. 이들은 기존에 구축된 컨테이너 환경에서 가볍게 운영되는 컨테이너로 실행됩니다. 클러스터 내의 각 노드에 Portainer Agent를 설치해야 하며, 이는 Portainer Server 컨테이너에 정보를 전달하도록 설정되어야 합니다. 는 여러 Agent의 연결을 수용할 수 있으며, 이를 통해 하나의 중앙화된 인터페이스에서 여러 클러스터를 관리할 수 있습니다. 이를 위해 Portainer Server 컨테이너는 데이터 지속성이…

로그를 확인하던 중 아래와 같은 심상치않은 로그를 발견했습니다. 😱 이게 뭐야? 열심히 구글링을 해보니 이것은 매우 일반적인 상황으로 많은 봇넷들이 이런식의 무차별 대입 공격을 하는 것으로 파악됐습니다. 해결 방법은? 해결 방법은 다음과 같습니다. 무차별 대입으로도 찾을 수 없는 엄청 복잡한 password 설정 root에 대한 ssh login 비활성화 password 기반 인증 비활성화 22번이 아닌 다른 포트에서 ssh 서버 실행 fail2ban를 사용하여 공격자의 IP를 자동으로 차단 화이트리스트에서만 ssh 허용 etc… 이렇듯 많은 방법들이 있지만, 사내 상황에 맞는 화이트리스트만 ssh를 허용하는 방법을 채택했습니다. 이유는 저희는 사내 클라우드 인스턴스에 접속 시 password를 사용하지 않고 public/private key 방식으로 로그인하고 있기 때문에 해당이 되지 않고, 나머지 사항은 혹시나 싶을 이슈가 발생할 수도 있기 때문입니다. 처음에 로그를 봤을 …

저는 웹 API를 구축할 때 NestJS를 주로 사용합니다. 프로젝트를 새로 시작할 때 이전에 다른 프로젝트의 Repo를 복사하여 필요 없는 부분을 지우고 사용합니다. 그러던 중 공통으로 사용될만한 코드들을 모아서 보일러 플레이트를 만들어두면 편할 것 같다는 생각을 하게 되었습니다. 따라서 주로 사용되는 NestJs + Fastify + MongoDB 가 연동된 보일러 플레이트를 제작하는 과정을 공유하고자 합니다. MongoDB는 이미 세팅되어 있는 것을 전제로 하고 있습니다. Require NodeJs 16.20.x Install 우선 를 설치해줍니다. 그 후 project를 생성해보겠습니다. 위의 명령어를 실행하면 아래와 같은 입력창이 뜰 것입니다. 원하는 를 선택해줍니다. 설치가 완료된다면 아래와 같은 폴더 구조가 생성되어 있을 것입니다. src: 소스 코드 폴더 test: 테스트 코드 폴더 서버를 띄워보겠습니다. 포트번호는 기본 번입니다. Swagger 우선 API 문…

애플리케이션을 Docker를 이용해 배포하다보면 Docker Build 후 생성된 Docker Image를 관리할 수 있는 Repository가 필요합니다. 이번 시간엔 Nexus를 이용한 사내 Docker Private Repository를 구축해보겠습니다. Running Nexus의 서버를 띄우는 건 Docker compose 파일로 간단하게 하실 수 있습니다. (물론 Docker와 Docker compose의 설치는 필수입니다.) 8081은 브라우저에서 접속할 포트이고, 8082는 API를 이용할 때 필요한 포트입니다. 이제 브라우저에서 접속해봅시다. () Setup 로그인을 위해서는 초기 비밀번호를 알아야합니다. 비밀번호는 위에서 설정한 volume 폴더에서 확인하실 수도 있고, 컨테이너 내부의 /nexus-data 폴더에서도 확인 하실 수 있습니다. Volume 폴더 지정한 Volume폴더로 이동 후 비밀번호를 확인합니다. Container 내부 Nexus의 C…

Drone CI는 도커(Docker)를 기반으로 harness에서 개발한 오픈 소스 CI 플랫폼입니다. 모든 구성 요소는 도커 컨테이너(Docker Container)로 되어 있으며 파이프라인 단계 실행도 도커 컨테이너로 수행됩니다. Go lang으로 작성되어 매우 가볍고 설정 파일도 간단한 YAML 파일로 구성할 수 있어 유지보수, 디버깅이 합니다. 또한 공통적인 파이프라인이 있을 경우 Template을 등록하여 공통적으로 사용할 수도 있습니다. Drone Server Drone Server는 저장소에서 변경 사항을 모니터링 합니다. 저장소에 저장된 구성 파일(.drone.yml)에 따라 Drone Runner에 task를 추가합니다. Drone Runner Drone Runner는 Drone Server에서 task들을 polling합니다. 후에 지정된 pipeline을 실행합니다. For Bitbucket 이 글에서는 Drone CI에 Bitbucket을 연동하는 과정을 설명…

Jenkins 서버에서 취약점이 발견되었다? 하루는 클라우드 서비스의 에서 Jenkins 서버가 떠있는 인스턴스에 심각한 취약점이 발견되었다고 알람이 왔습니다. 원인을 파악해보니 해당 플러그인에서 취약점이 발견되었다는 것입니다. (이슈 번호 CVE-2023-25765) 해결해보자 해당 플러그인의 2.93버전 이하에서 발견되는 이슈였습니다. 간단하게 버전을 2.93.1 이상으로 업그레이드하면 이슈가 해결될 것입니다. 따라서 jenkins 버전을 업그레이드 하기로 결정했습니다. 만약 jenkins 버전을 업데이트했는데 jenkins가 실행이 안된다면 을 확인해봐야 합니다. jenkins v2.375.1-1.1 버전부터는 jdk11버전 이상이 필요합니다. Jenkins 서버에서 취약점이 발견되었다? 해결해보자

국가 간 API 통신은 일반적으로 느립니다. 예를 들어 한국에서 해외 사이트 접속 시 화면이 늦게 뜨는 등을 예로 들 수 있습니다. 이유가 무엇일까요? 이유를 하나만 꼽자면 바로 물리적인 거리를 대표적으로 꼽을 수 있겠습니다. 이번에는 국가 간 API 통신 이슈를 어떻게 해결했는지 공유해보도록 하겠습니다. 화면이 늦게 뜬다구? 서비스를 오픈하고 얼마 지나지 않아서 하루는 고객에게 화면이 너무 늦게 뜬다는 CS가 들어왔습니다. 처음엔 서버 코드의 이슈인지 파악하기 위해 API 들의 실행 시간을 체크했습니다. 하지만 이상이 API 상에는 문제가 없었습니다. DB를 조회하는 코드도 체크를 했기 때문에 가 발생한 것도 아니였습니다. 그러던 중 혹시 앱 페이지를 로드할 때 이미지를 가져오는 부분이 문제일 지 모른다고 생각했습니다. 그 이유는 현재 이미지들은 서울 리전의 스토리지에 업로드 되어 있고 앱에선 그 스토리지를 직접 바라보고 있었기 때문입니다. 또한 을 사용하고 있었기 때문에 N…

하루는 개발팀에게 CS가 들어왔습니다. 고객이 엑셀 다운로드하려고 하는데 브라우저가 죽는다는 CS였습니다. 확인 결과 DB에서 데이터를 읽어온 후 클라이언트 단에서 엑셀 파일을 생성하고 있는 것이였습니다. 기존에는 이하의 데이터를 만들고 있었고, 이슈가 된 데이터 수를 확인하니 로 확인되었습니다. 엑셀 파일을 만들다가 브라우저가 죽다니? XLSX 파일의 형식은 OOXML(Open Office XML) 입니다. OOXML 이름 그대로 XML을 기반으로 데이터를 저장하고 표현합니다. XLSX 파일은 여러 XML 파일을 포함하는 폴더를 압축한 형태입니다. (확장자를 .zip으로 변경 후 압축을 해제하면 아래와 같은 파일을 볼 수 있습니다.) row의 정보는 파일에 저장되는데 이 파일에는 필요한 정보 외에 XML 오버헤드도 굉장히 많기 때문에 몇 만의 row 정보를 한 번에 메모리에 올리면 이 발생할 가능성이 큽니다. 따라서 stream처리가 되어야 합니다. 기존 구조는 아래와 같았…

하루는 ArgoCD 서버를 세팅하던 때였습니다. ArgoCD 서버를 무사히 띄운 후 https를 연결하여 브라우저에서 https로 접속하려고 보니 이슈가 발생하였습니다. err_too_many_redirects 넌 뭐야? 원인을 파악하니 아래와 같은 이슈가 있었습니다. 는 TLS를 자체적으로 종료하고 HTTP를 통해 백엔드 서비스와 통신 는 자체적으로 TLS를 종료하고 항상 HTTP 요청을 HTTPS로 리다이렉션 둘이 결합하면서 ArgoCD 서버는 HTTPS로 무한 리다이렉션이 발생하는 것이였습니다. 해결해보자 argocd-server deployment시 플래그 추가하는 것으로 간단하게 해결 참고 GITHUB ISSUE ArgoCD DOCS err_too_many_redirects 넌 뭐야? 해결해보자 참고

문제의 원인을 조사하는 것은 어려운 작업입니다. 하지만 유용한 리눅스 명령어들을 알고 있다면 문제의 원인을 찾는데 도움 받을 수 있습니다. Disk 디스크 용량 체크 파일 시스템의 디스크 사용량을 보여줍니다. 즉, 마운트된 각 파티션의 총 크기, 사용된 공간 및 사용 가능한 공간을 표시합니다. 디스크 공간을 차지하는 항목 확인 파일별 공간 사용량을 추정합니다. 아래 예제의 은 현재 디렉토리만 확인하는 옵션입니다. 현재 I/O 모니터링 현재 쓰기, 일기를 가장 많이 수행하고 있는 프로세스를 확인합니다. image3 Network tcpdump CLI에서 실행되는 데이터 네트워크 패킷 분석 프로그램입니다. 이를 통해 사용자는 네트워크를 통해 전송 또는 수신되는 TCP/IP 및 기타 패킷을 확인할 수 있습니다. BSD를 라이센스로 하며 무료 소프트웨어입니다. 문제의 원인이 클라이언트 측인지 서버 측인지 아니면 방화벽에 있는지 모르는 상황에서 는 송수신된 각 패킷을 확인하…

카프카(kafka)란? 설치 방법 STEP 1. DOWNLOAD KAFKA STEP 2. zookeeper 구동 백그라운드로 구동시키고 싶을 경우 -daemon 명령어를 추가합니다. zookeeper? 분산 애플리케이션을 구축하다보면, 분산 애플리케이션 관리를 위한 안정적인 코디네이션 애플리케이션이 추가로 필요하게 됩니다. 따라서 안정적인 코디네이션 서비스로 검증된 주키퍼를 많이 사용하게 됩니다. 주키퍼는 분산 애플리케이션이 안정적인 서비스를 할 수 있도록 분산되어 있는 각 애플리케이션의 정보를 중앙에 집중하고 구성 관리, 그룹 관리 네이밍, 동기화 등의 서비스를 제공합니다. 서버 여러 대를 클러스터로 구성하고, 분산 애플리케이션들이 각각 클라이언트가 되어 주키퍼 서버들과 커넥션을 맺은 후 상태 정보 등을 주고 받습니다. 위의 그림에서 Server는 주키퍼, Client는 카프카가 됩니다. STEP 3. Kafka 구동 서비스가 제대로 띄워졌는지 확인해보려면 포트가 정상적으…

1. 카프카(kafka)란? kafka는 모델의 입니다. 분산 환경에 특화되어 있는 특징을 가지고 있습니다. 1-1. 아키텍쳐 카프카 클러스터를 중심으로 Producer와 Consumer가 데이터를 Push하고 Pull하는 구조입니다. Producer, Consumer는 각기 다른 프로세스에서 비동기로 동작하고 있습니다. 아키텍처를 좀 더 자세히 표현하면 아래와 같습니다. 2. 구성요소 2-1. Event 는, kafka에서 Producer와 Consumer가 데이터를 주고받는 단위입니다. 이 글에서는 이벤트 또는 메시지로 표기하겠습니다. 2-2. Producer 는 kafka에 메시지를 게시(post) 하는 클라이언트 애플리케이션을 의미합니다. 2-3. Kafka Cluster Kafka Server로 이루어진 클러스터를 말합니다. Kafka Cluster를 이루는 각 요소는 다음과 같습니다. Broker 카프카 서버를 말합니다. Zookeeper 주키퍼(Zookeep…

Google Colab을 통해 Stable Diffusion LoRA 학습 방법을 소개하려고 합니다. 준비 google driver 계정 학습할 이미지 (중복되지 않은 최소 20장의 퀄리티 있는 이미지) 원하는 주제의 이미지만 추가할 것 (ex: 아이오닉6를 학습하려면 아이오닉6만 있는 것이 좋음) 테스트 이미지 아이오닉6 Data Maker Data Maker 접속 LoRA 학습 전에 데이터를 정형화하는 작업을 진행해야합니다. 새창으로 Data Maker에 접속해주세요. Setup project_name을 입력하고 Setup 타이틀 왼쪽에 있는 실행 버튼을 누릅니다. 정상적으로 완료됐다면 아래와 같은 메시지가 나옵니다. 그리고 Google Driver에 접속하면 Loras > > dataset 폴더들이 생성되어 있는 것을 확인할 수 있습니다. dataset 폴더 안에 앞서 준비한 이미지를 업로드합니다. Curate your image 중복된 이미지 및 퀄리티가 낮은 이미지…

OpenAI에서 개발한 이미지 생성 AI입니다. 텍스트 설명을 기반으로 관련된 이미지를 생성하는 능력을 가지고 있습니다. DALL-E의 이름은 살바도르 달리와 월-E의 결합에서 생각해냈다고 합니다. DALL-E 1 DALL-E 1은 GAN과 같이 이미를 생성하는 모델이기는 하나, 그 구조는 GAN보다는 GPT-3에 가깝습니다. GPT-3는 잘 알려진 대로 Transfomer의 Decoder 부분만을 사용하는 Generative 모델로, 입력받은 단어의 token의 sequence를 가지고 다음 단어 token을 차례차례 예측하는 방식입니다. 더물어 매우 많은 데이터로 pre-train 하여 각 단어 간의 관계를 학습한 후 실제 사용 시는 이보다 적은 데이터로 fine-tuning 하게 됩니다. DALL-E 1에서도 이런 기본 작동 방식은 같지만 달라진 부분은 출력에서 예측하는 결과가 token이 아니라 이미지의 picxel이라는 것입니다. 입력받은 이미지를 256x256…

대규모 데이터 셋을 학습하여 자연어 처리(NLP) 성능을 향상시키는 인공지능 모델입니다. LLM은 텍스트 생성, 요약, 기계 번역, 감정 분석 등 다양한 어플리케이션에서 뛰어난 성능을 발휘합니다. 대화형 인공지능의 성능이 갑자기 높아지게 된 이유 기존에 인공지능을 학습 시키기 위한 방법으로 주로 사용되던 것은 규칙 기반(Rule-based) 접근법과 RNN(Recurrent Neural Network) 및 LSTM(Long Short-Term Memory) 과 같은 순차적 모델입니다. 규칙 기반(Rule-based) 접근법 이 방법은 개발자가 직접 대화의 규칙과 패턴을 정의하여 인공지능이 사용자와 대화를 할 수 있도록 하는 방식입니다. 이러한 규칙은 “if-then”과 같은 조건문을 사용하여 구현됩니다. 예를 들어, 사용자가 “안녕”이라고 입력하면, 인공지능은 “안녕하세요!”라고 응답하는 식입니다. 규칙 기반 시스템은 간단한 대화를 처리하는 데는 효과적일 수 있으나, 복잡한 대…

MongoDB ReplicaSet? MongoDB의 레플리카 셋 구성 기능은 데이터베이스의 고가용성 환경을 위해 필요한 기술입니다. DB 노드의 장애가 발생하거나, DB에 문제가 발생하는 경우에도 빠르게 장애에 대응하여 복구() 하는 시간을 줄일 수 있는 장점을 갖게 합니다. MongoDB는 자체적인 기능으로 복제 기능을 지원합니다. 레플리카 셋의 가장 큰 목적은 서비스 중인 MongoDB 인스턴스에 문제가 생겼을 때, 레플리카 셋의 구성원 중의 하나인 복제 노드가 장애 노드를 즉시 대체하는 것입니다. 어떠한 상황에서도 클라이언트와 DB와의 통신은 지속적으로 동작할 수 있도록 구성하는 가장 기본적인 물리적인 DB 설계 방식입니다. MongoDB의 복제를 수행하기 위해서는 여러 mongodb 인스턴스가 모인 레플리카 셋이 필요합니다. 레플리카 셋의 구성원이 되면 서로의 정보를 동기화합니다. 구성 Primary: 클라이언트에서 DB로 읽기 및 쓰기 작업을 합니다. Secondary: …

BulkWrite란? BulkWrite는 MongoDB 데이터 쓰기 명령( , , )을 모아서 한 번에 실행할 수 있는 명령입니다. BulkWrite 명령은 다음과 같은 명령을 한 번에 모아서 실행할 수 있는데, 반드시 하나의 컬렉션에 대해서만 데이터를 변경할 수 있습니다. BulkWrite 실행 가능한 명령어 insertOne updateOne updateMany replaceOne deleteOne deleteMany BulkWrite 실행 BulkWrite 명령의 결과는 와 그리고 등의 명령 단위로 정리해서 적용된 건수를 보여줍니다. 처리 결과 insertedIds 서브 도큐먼트에서는 INSERT된INSERT 된 도큐먼트들의 _id값을 반환하며, upsertedIds 서브 도큐먼트에서는 UPDATE 명령의 upsert 플래그가 true일 때 INSERT 된 도큐먼트들의 _id값을 반환합니다. BulkWrite 명령에 입력하는 각 하위 명령은 각자의 도큐먼트 포맷을 가지는…

웹 API 서버를 운영할 때 중요한 것 중 하나가 바로 로그를 쌓는 것입니다. NestJS에 NodeJs의 대표적인 로그 모듈 중 하나인 winston을 도입해 로그를 남기는 방법을 알려드리고자 합니다. Middleware 미들웨어는 라우터 핸들러(컨트롤러) 전에 호출되는 함수입니다. Request - Response 사이클 중에 reqeust, response 객체에 접근할 수 있고, next 미들웨어 기능에 접근할 수 있습니다. NestJs의 Middleware는 기본적으로 express 의 Middleware와 동일합니다. 어떠한 코드도 실행할 수 있음. Request, Response 객체를 변경할 수 있음 Request - Response 주기를 종료시킬 수 있음 next 미들웨어 함수를 호출할 수 있음 현재 미들웨어 함수가 Request - Response 주기를 종료시키지 않는다면, 반드시 next 미들웨어 함수를 실행해야 합니다. 그렇지 않는다면 Request는 계…

NestJs에는 애플리케이션 전체의 모든 예외 처리를 하는 Exceptions Layer가 내장되어 있습니다. 애플리케이션 코드에서 예외 처리를 하지 않으면 이 레이어에서 예외를 처리합니다. 커스텀으로 예외 레이어를 만들지 않는다면 아래와 같이 기본 JSON 응답을 합니다. Exception Filters 기본 예외 필터가 자동으로 많은 경우의 예외 처리를 해주지만 custom으로 제어를 하고 싶은 경우가 있습니다. 예를 들어 다른 형태의 JSON 스키마로 반환하고 싶은 경우입니다. Usage 이제 위에서 만든 Exception Filter를 적용해보겠습니다. Exception Filter를 적용하고 싶다면 @UseFilters() 를 import해야 합니다. (이름이 아주 직관적이죠?🤣) User 컨트롤러의 라우팅 핸들러 전체에 Exception Filter를 적용하고 싶다면 @Controller() 에 위와 같이 적용하시면 됩니다. 그리고 특정 라우팅 핸들러에만 적용하고 싶다…

레디스를 쓰다 보면 각 서버가 CPU, MEM 등 서버 자원을 얼마나 쓰고 있는지 모니터링할 필요가 있습니다. 그럴 때 간단하게 쓸 오픈 소스 라이브러리를 소가해드리겠습니다. Redis-Stat Redis-stat로 띄운 대시보드입니다. 포트별로 정보를 나눠서 볼 수도 있습니다. 맘에 드신다면 아래 설치를 따라가주세요. Install redis-stat은 ruby로 만들어져 있습니다. 따라서 관련 라이브러리들을 먼저 설치하셔야 합니다. 그런 뒤 gem을 이용하여 redis-stat을 설치합니다 Usage 아래는 웹 서버를 띄우는 명령어 입니다. 위의 로컬 주소와 포트는 여러분의 것에 맞게 설정하시면 됩니다. 주의 위의 명렁어를 실행하면 아래와 같은 경고 로그가 찍힐 것입니다. 하지만 걱정하지 마세요. https://stackoverflow.com/questions/41463999/warning-constant-fixnum-is-deprecated-when-generating…

배치(Batch) 작업 어디까지 해봤니? 서비스를 구축하다 보면 많은 양의 데이터를 일괄적으로 변경하거나 삭제 등의 처리를 해야 할 순간이 옵니다. 이런 작업을 트래픽이 몰리는 시간 때에 하게 되면 서비스에 치명적일 수도 있고 잘못된다면 서비스 전체가 셧다운 되는 악몽을 꾸게 될 수도 있습니다. 이때 해야 하는 것이 배치(Batch) 작업입니다. 배치 작업은 데이터를 실시간으로 처리하는 게 아니라, 일괄적으로 모아서 한 번에 처리하는 작업을 의미합니다. 가령, 은행의 정산 작업의 경우 배치 작업을 통해 일괄처리를 수행하게 되며 사용자에게 빠른 응답이 필요하지 않은 서비스에 적용할 수 있습니다. 이번 글에선 MongoDB + NodeJs를 활용한 배치 작업 테스트 결과를 공유하고자 합니다. 테스트 환경 DB Spec Tencent Cloud CVM 2core / 2GB mongodb WT 4.2.19 DB Schema TestA name: string TestB name: strin…

브라우저 주소창에 google.com을 입력하면 어떤 일이 일어날까? 1. 브라우저는 캐싱된 DNS 기록들을 통해 google.com과 대응되는 IP 주소가 있는지 확인합니다. DNS(Domain Name System) 는 URL들의 이름과 IP 주소를 저장하고 있는 데이터베이스입니다. 인터넷에 있는 모든 URL들에는 고유의 IP 주소가 지정되어 있습니다. 이 IP 주소를 통해서 해당 웹 사이트를 호스팅하고 있는 서버 컴퓨터에 접근할 수 있습니다. 예를 들어 google.com의 IP 주소를 알아보기 위해서는 아래의 커맨드를 터미널에 작성하면 해당 사이트의 IP 주소를 알려줍니다. 현재 제가 있는 지역에서 해당 명령어를 작성했을 때 142.251.42.206가 나왔고 IP 주소를 브라우저에서 검색했을 때 google.com의 결과와 같았습니다. 여기서 non-authoritative answer이란, name 서버가 도메인에서 만든 원본 소스 파일을 갖고 있지 않다는 뜻입니다…

다들 한 번쯤은 구글을 써보았을 것입니다. 그런데 궁금하지 않으신가요? 구글은 어떻게 30조 개가 넘는 웹 페이지들 속에서 사용자가 입력한 검색어에 맞는 결과물을 10개로 추려서 보여줄까요? 그것도 평균 0.5초 만에!! 사용자가 검색어를 입력할 때마다 구글이 그 많은 웹 페이지에 접속하진 않습니다. 대신 DB에 각 웹페이지의 정보를 저장해 두고 알고리즘을 이용해서 무엇을 보여줄지 정합니다. 크롤링 구글의 알고리즘은 인터넷 상의 모든 웹페이지를 DB에 저장하는 것으로 시작합니다. 이를 위해 Spider라는 프로그램을 이용해 웹 페이지를 크롤링합니다. 크롤은 기어 다닌다는 뜻입니다. 크롤링은 인터넷에 있는 모든 웹 페이지를 찾을 때까지 지속됩니다. Spider는 일단 몇 개의 웹 페이지를 크롤링해서 색인이라고 하는 웹 페이지 목록에 추가합니다. 그리고 각 웹 페이지에서 외부 링크를 따라가서 또 새로운 웹 페이지를 색인에 추가합니다. 그렇게 해서 더는 새로운 웹 페이지를 찾을 수 없을…

CI/CD 란 용어를 알고 계신가요? 요즘 같이 빠르게 진화하고 변화하는 시대에는 어떻게 하면 시장과 고객의 요구에 빠르게 반응해서 제품을 출시, 업데이트할 것인가가 큰 과제입니다. 이 같은 고민을 해결하기 위해 많은 기업들이 CI/CD를 개발 프로세스로 사용하고 있습니다. 대부분의 it회사에서 CI/CD 환경에서 일하고 있기 때문에 개발자라면 CI/CD 란 무엇인지 정확하게 알아두면 좋습니다. CI/CD? 애플리케이션 개발 단계부터 배포 때까지 배포 때까지 이 모든 단계들을 자동화를 통해 조금 더 효율적이고 빠르게 사용자에게 빈번히 배포할 수 있도록 만드는 것을 말합니다. CI( Continuous Integration ) - 지속적인 통합 버그 수정이나 신규 기능들이 메인 Repository에 주기적으로 Build 되고 Test가 되어서 Merge 되는 것을 말합니다. 이 방식은 1991년 Grady Booch에 의해 처음으로 사용되었습니다. 후에는 Extreme Progra…

이번에 회사 서비스에 redis란 것을 도입하게 되었습니다. 데이터를 메모리에서 처리함으로써 더 빠른 연산을 도모하고 DB의 부하를 덜기 위한 것(캐싱) 이었습니다. redis 문서가 잘 되어 있어서 서비스에 도입하는 데까진 문제가 없었습니다. 하지만 redis를 도입하면서도 스스로에게 캐시가 뭐냐고 물었을 때 누구나 말할 수 있는 간단한 답밖에 하지 못한다는 것을 깨달았다. 그래서 이번 기회에 캐시란 무엇인가 정리해보고자 합니다. 캐시? 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓은 임시 장소를 일컫습니다. 원본 데이터에 접근하는데 걸리는 시간이 캐시의 접근 시간보다 오래 걸리는 경우나 값을 다시 계산하는데 걸리는 시간을 단축시키고 싶은 경우 사용한다. 예를 들자면, 다이소 본점에 가서 물티슈 하나 사는 것보다 집 앞에 있는 다이소에 가는 게 더 빠르게 사 올 수 있습니다. 캐시에는 어떤 정보를 담아야 할까? 캐시에 담을 정보를 생각할 때 많이 고려하는 법칙이 있다. 파레토의…

프론트엔드 개발에서 컴포넌트 기반 스타일링의 중요성이 점점 커지고 있습니다. 특히 CSS-in-JS 방식은 최근 트렌드로 자리 잡았는데, 여기서 대표적인 두 라이브러리가 Styled-Components와 Emotion입니다. 이번 글에서는 이 두 라이브러리를 사용해 스타일링을 어떻게 더 쉽게 하고, 컴포넌트 기반 개발에서 어떤 장점을 제공하는지 알아보겠습니다. CSS-in-JS란? CSS-in-JS는 자바스크립트 코드 안에 CSS를 작성하는 방식입니다. 전통적인 CSS 파일과 달리, 각 컴포넌트에 맞춘 스타일을 자바스크립트 코드 내에서 정의할 수 있습니다. 이는 스타일을 컴포넌트와 함께 관리할 수 있게 해주며, 코드의 재사용성과 유지보수를 용이하게 만듭니다. CSS-in-JS 방식의 주요 특징은 다음과 같습니다: 컴포넌트 기반 스타일링: 각 컴포넌트에 맞는 스타일을 정의하여 스타일의 독립성을 보장합니다. 동적 스타일: props를 사용하여 컴포넌트의 상태에 따라 동적으로 스타일을 …

모바일 웹 개발을 하다 보면 iPhone에서 필드에 포커스를 줄 때 화면이 확대되는 현상을 종종 겪게 됩니다. 특히 작은 화면에서 의도치 않은 확대는 사용자 경험을 저하시키며 불편함을 초래합니다. 이번 글에서는 이 문제의 원인과 다양한 해결책, 그리고 가장 최적화된 방법에 대해 자세히 알아보겠습니다. 문제의 원인 이 문제의 원인은 주로 때문입니다. 가장 많이 득표한 스택오버플로우 답변에 따르면, Safari는 필드의 가 16px 미만인 경우 자동으로 확대를 트리거합니다. 이는 사용자가 작은 글씨를 쉽게 보지 못할 것을 우려하여 설계된 기능입니다. 가 16px 미만인 한, 또는 같은 다른 단위가 사용되더라도 확대 현상은 동일하게 발생합니다. 기존 해결책 iPhone의 자동 확대 문제를 해결하기 위해 흔히 시도되는 방법은 다음과 같습니다. 를 16px로 설정하기 모든 입력 필드의 를 16px 이상으로 설정하면 확대 현상을 방지할 수 있습니다. 페이지 확대/축소 비활성화 메타 …

모바일 웹 개발을 하다 보면 iOS Safari에서 이벤트 내에서 을 호출하여 팝업 창을 여는 것이 작동하지 않는 현상을 경험할 수 있습니다. 이는 iOS 9.0 이후 보안 및 사용자 경험을 고려한 변화 때문입니다. 이번 글에서는 이 문제의 원인과 해결 방법에 대해 자세히 알아보겠습니다. 문제 현상 iOS Safari에서 이벤트 내에서 을 사용해 팝업 창을 열 수 없습니다. 이로 인해 터치 기반 인터랙션에서 팝업을 여는 기능이 제한됩니다. 원인 iOS 9.0부터 이벤트 내에서 을 사용할 수 없게 된 이유는 보안 및 사용자 경험 향상을 위한 조치입니다. iOS 9.0 이전 버전에서는 이벤트 내에서 을 통해 팝업 창을 여는 것이 가능했습니다. 그러나 이 기능은 악성 스크립트가 사용자 동의 없이 팝업 창을 열 수 있는 보안 취약점을 유발할 수 있었습니다. 이러한 위험을 줄이기 위해 Apple은 iOS 9.0부터 이벤트 내에서 사용을 제한하였습니다. 대신, Apple은 개발자들…

웹 개발을 하다 보면 대부분 이벤트를 자주 사용하게 됩니다. 예를 들어: PC 환경에서는 이 코드로 전혀 문제가 없습니다. 하지만 iOS 모바일 기기에서 동일한 코드를 사용할 경우, 클릭에 대한 반응이 약간 느리다는 것을 느낄 수 있습니다. 무엇이 문제일까요? 문제의 원인: iOS의 Click 이벤트 지연 iOS에서는 사용자가 화면을 터치했을 때 해당 동작이 더블 탭(줌)이나 스와이프 제스처와 같은 다른 동작이 아닌지 확인하기 위해 약 300ms의 지연을 추가합니다. 이러한 지연은 제스처 및 스와이프가 올바르게 작동하도록 하기 위한 조치입니다. 이 때문에 클릭 이벤트가 느리게 반응하는 문제가 발생합니다. 해결 방법: Touch 이벤트 사용 iOS에서 이벤트의 지연을 해결하기 위해서는 또는 이벤트를 사용하는 것이 좋습니다. 이 이벤트들은 이벤트와 달리 300ms의 지연 없이 즉시 실행됩니다. 아래는 그 예시입니다: 이렇게 하면 사용자가 터치했을 때 즉각적인 반응을 얻을 수 …

MySQL에서 Emoji 문자 저장 문제 해결하기 문제 개요 기존 MySQL에서 한글 및 다른 언어가 깨지는 문제를 해결하려면 character set을 utf8로 설정해야 했습니다. 하지만 emoji 같은 특수 문자는 어떻게 처리해야 할까요? character set이 utf8로 설정된 게시판에 emoji로 된 글을 남겨 보았습니다. 결과는 글자가 깨져 보였습니다. 문제 발생 이유 UTF-8은 1~4 Byte까지 다양한 길이의 문자를 표현할 수 있는 가변 바이트 인코딩 방식입니다. 1 Byte는 ASCII 문자, 2-4 Byte는 다양한 국제 문자를 포함합니다. 그러나 MySQL에서 사용되는 utf8 character set은 최대 3 Byte까지의 문자만 지원합니다. 이 때문에 4 Byte로 인코딩된 emoji와 같은 문자를 저장하려고 하면 MySQL의 utf8 character set은 이를 표현할 수 없어서 데이터 손실이 발생하고, 결국 글자가 깨져 보이게 되는 것입니다. …

오늘은 웹 어플리케이션 번들러 3대장중 하나인 parcel의 세팅 방법에 대해 알아보겠습니다. 물론 알아볼 것도 없이 parcel 홈페이지가 워낙 번역이 잘되어 있긴 합니다 ㅎㅎ;; 그래도 세팅이 어려운 분들을 위해 작성해봅니다. 시작하기 먼저 parcel을 실행하려면 parcel을 설치해야겠죠? Yarn: npm: 그 다음 그런 다음 index.html 실행 이런식으로 실행하면 parcel이 자동으로 다시 빌드하고 핫리로드도 지원합니다. 그냥 진입점 파일만 지정해주면 됩니다. 개발 환경 parcel은 옵션을 건드릴게 없습니다. 그게 장점이라면 장점이죠. 굳이 개발할 때 넣을 옵션이 있다면 —open 이런식으로 끝부분에 명령어를 넣어주면 실행하는 순간 브라우저창이 열리게 됩니다. 프로덕션 parcel을 빌드하면 기본적으로 dist폴더가 생성되며 그 안에 빌드된 파일이 저장됩니다. dist폴더명을 다른 것으로 하고 싶을 땐 —out-dir 로 하시면 폴더명이 build로…

오늘은 swiper.js로 만든 슬라이더들안에 youtube영상을 넣어보는 것을 알아보고자 한다. 기본적인 swiper를 생성하는 방법은 이 링크로 들어가면 자세히 알 수 있다. index.html youtube.js 기본적인 yotube 동영상을 생성하는 방법은 이 링크로 들어가면 자세히 알 수 있다. 이것으로 swiper안에 youtube넣기를 마치겠습니다 :) index.html youtube.js

jquery를 쓰다보면 현재 클릭한 요소의 인덱스 값을 구하는 것을 많이 쓰는데 코드로 보면 다음과 같다. 어떻게 구현하는 걸까? 생각해보자. 우선 현재 클릭한 요소의 부모 요소부터 찾아야 할 듯하다. 함수로 만들어 보겠다 이런식으로하면 element의 부모 요소를 찾을 것이다. 그리고 부모 요소 중 element는 몇 번째 자식인지 찾아야 한다. 그러려면 Array객체의 메서드 중 indexOf() 메서드가 유용하다. 1차로 element의 인덱스 값을 구하는 함수가 완성이 되었다. 함수를 살펴보면 이라고 되어 있는데 indexOf는 Array객체의 메서드라서 parentNode.children같은 유사 배열엔 적용되지 않는다.(크롬은 되는데 그놈의 IE ㅠㅠ) mdn을 찾아보면 indexOf 사용법이 이렇게 적혀 있다. arr.indexOf(searchElement[, fromIndex]) searchElement 배열에서 찾을 요소입니다. fromIndex Optional 검…

문제 정의 인터넷 익스플로러(IE)에서 방식으로 AJAX 요청을 보낼 때, 요청이 캐싱되어 기대한 대로 작동하지 않는 문제가 발생할 수 있습니다. 특히, 서버에서 제공하는 최신 데이터를 반복적으로 받아와야 하는 경우, 캐싱으로 인해 불필요하게 오래된 데이터를 받게 되어 문제가 발생합니다. 이 문제는 IE가 브라우저 캐싱을 강하게 적용하기 때문에 생깁니다. 이러한 캐싱은 브라우저 성능을 높이기 위한 의도이지만, 최신 데이터를 필요로 하는 AJAX 요청에서는 오히려 문제를 일으킬 수 있습니다. 이 글에서는 이 문제를 해결하기 위한 방법을 소개합니다. jQuery를 이용한 해결 방법 jQuery에서는 메서드에서 옵션을 통해 쉽게 이 문제를 해결할 수 있습니다. 예를 들어, 아래와 같이 를 로 설정하면 됩니다. jQuery 공식 문서에 따르면, 이 옵션을 사용하면 요청 시 URL에 타임스탬프를 추가하여 요청을 새롭게 만듭니다. 즉, 각 요청마다 고유한 URL을 가지게 하여 브라우저…

입력 폼 개발 시 사용자가 input에 한글만 적게 하고 싶을 때가 있다. 처음엔 이런식으로 하면 될 줄 알았지만 크롬에선 정상 작동되는데 IE에서는 정상적으로 작동하지 않았다 (망할 IE 망했으면…); 그때 여러 구글링을 통해 알아본 결과 숫자나 영어는 123, abc 이렇게 적히는 반면 한글은 ㄱ ㅏ ㅁ 을 합쳐서 감으로 만들어야 하기 때문에 keyup을 하면 안된다는 것이었다. 그래서 위 코드를 수정한 것이 keypress이다. keypress로 적용하니 정상 작동하였다. 결론 한글 입력 시 이벤트를 걸려면 keyup 말고 keypress !!!! 입력 폼 개발 시 사용자가 input에 한글만 적게 하고 싶을 때가 있다.

프론트엔드 개발자라면 이미지를 불러와 높이 값에 따라 레이아웃을 변경해야 할 때가 있을 것입니다. 예를 들어, 다음과 같은 코드를 사용할 수 있습니다: 하지만 결론적으로 위의 코드는 제대로 작동하지 않습니다. 왜 그럴까요? 문제의 원인: 이미지 로딩 타이밍 이 코드가 작동하지 않는 이유는 이미지가 로딩되기 전에 를 구하려고 하기 때문입니다. 이미지가 로드되지 않은 상태에서는 값이 정확하지 않거나 0으로 반환될 수 있습니다. 따라서 이미지의 크기를 기반으로 레이아웃을 변경하는 경우, 이미지가 완전히 로드된 이후에 높이 값을 계산해야 합니다. 해결 방법: 이미지 로드 후 높이 값 설정 위 코드가 정상적으로 작동하도록 하려면, 이미지가 로드된 후에 높이 값을 설정해야 합니다. 이를 위해 이벤트를 사용하여 이미지가 완전히 로드된 이후에 원하는 작업을 수행할 수 있도록 합니다: 위 코드에서는 콜백을 사용하여 이미지가 완전히 로드된 후에 의 높이를 이미지의 높이에 맞춰 설정합니다. 이…

프론트엔드 개발을 하다 보면 태그에 CSS 를 적용할 때 이미지가 흐릿해지는 현상을 경험할 수 있습니다. 이 문제는 이미지의 가로 또는 세로 크기와 관련이 있으며, 이에 대한 간단한 해결 방법을 제공하고자 합니다. 이미지 흐릿해짐 방지하기 태그에 CSS 를 적용할 때 이미지의 가로 또는 세로 크기가 홀수인 경우, 이미지가 흐릿해질 수 있습니다. 예를 들어, 를 적용할 때 이미지의 가로 크기가 홀수이면 이미지가 정확하게 픽셀 단위에 맞춰지지 않아 흐릿하게 보일 수 있습니다. 비슷하게, 를 적용할 때 세로 크기가 홀수인 경우에도 같은 현상이 발생합니다. 해결 방법 짝수 크기 유지: 를 사용하는 경우, 이미지의 가로 크기는 짝수여야 하고, 를 사용하는 경우에는 세로 크기를 짝수로 유지해야 합니다. 이렇게 하면 이미지가 픽셀 단위에 맞춰져 흐릿해지는 현상을 방지할 수 있습니다. 이미지를 배경으로 사용: 이 문제를 간단하게 해결하려면 이미지를 태그 대신 CSS의 속성을 사용해 배경으…