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 패턴의 등장 배경 기존 아키텍처의 한계 기존 모놀리식 아키텍처는 모든 기능과 서비스를 하나의 코드베이스에 포함하는 방식으로, 각 플랫폼의 특수한 요구사항을 반영하기 어렵다는 문제점이 있습니다. 특히 다양한 클라이언트(웹, 모바일, 데스크탑)를 지원할 때 모든 요청을 동일한 백엔드에서 처리하게 되면, 필요 이상의 데이터를 전송하거나 클라이언트 요구에 맞지 않는 형식의 응답을 줄 수밖에 없었습니다. 프론트엔드 개발의 복잡성 증가 현대 애플리케이션은 다양한 기기와 플랫폼에서 일관된 경…

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

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

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”과 같은 조건문을 사용하여 구현됩니다. 예를 들어, 사용자가 “안녕”이라고 입력하면, 인공지능은 “안녕하세요!”라고 응답하는 식입니다. 규칙 기반 시스템은 간단한 대화를 처리하는 데는 효과적일 수 있으나, 복잡한 대…

브라우저 주소창에 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를 도입하면서도 스스로에게 캐시가 뭐냐고 물었을 때 누구나 말할 수 있는 간단한 답밖에 하지 못한다는 것을 깨달았다. 그래서 이번 기회에 캐시란 무엇인가 정리해보고자 합니다. 캐시? 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓은 임시 장소를 일컫습니다. 원본 데이터에 접근하는데 걸리는 시간이 캐시의 접근 시간보다 오래 걸리는 경우나 값을 다시 계산하는데 걸리는 시간을 단축시키고 싶은 경우 사용한다. 예를 들자면, 다이소 본점에 가서 물티슈 하나 사는 것보다 집 앞에 있는 다이소에 가는 게 더 빠르게 사 올 수 있습니다. 캐시에는 어떤 정보를 담아야 할까? 캐시에 담을 정보를 생각할 때 많이 고려하는 법칙이 있다. 파레토의…