All

Polling ?클라이언트가 서버에 일정 간격을 두고 주기적으로 HTTP 요청을 보내 응답받는 형태의 단방향 실시간 통신이다. 쉽고 간단하게 구현할 수 있지만, 반복적인 요청이 발생하여 불필요한 트래픽이 발생한다. Long Polling ?Polling과 동일하게 동작하지만, 클라이언트가 주기적으로 요청하는 것이 아니라 요청 후 응답을 받을 때 까지 기다린다. 마찬가지로 구현은 쉽지만 연결이 많아질 경우 Polling 보다 서버 리소스(메모리) 사용량이 많아질 수 있다. WebSocket ?초기 HTTP로 핸드셰이크를 통해 연결 후 WebSocket 프로토콜로 업그레이드하여 연결되는 TCP 기반 양방향 통신이다. 클라이언트와 서버는 지속적인 양방향 통신이 가능하여 Polling(+Long Polling)..

SSL/TLS 관련된 인증서 문제를 테스트하기 위한 웹사이트이다.HTTP 요청 시 SSL 설정마다 어떻게 응답되는지 확인할 수 있도록 다양한 서브도메인을 제공한다. 사설 CA가 적용된 환경에서 사용하는 것으로 추측되는 해외 유저로 부터 티켓을 받아 확인이 필요했는데, badssl.com에서 제공하는 서브 도메인 중  https://untrusted-root.badssl.com로 HTTP 요청을 보내 응답된 Error 객체를 확인할 수 있었다.  https://badssl.com badssl.comYour Browser: 📋 Click to copybadssl.com https://github.com/chromium/badssl.com/tree/master GitHub - chromium/badssl.c..

목표Docker compose를 사용하여 각각의 Nginx, PHP, MySQL 컨테이너를 실행하고, php 개발환경을 구성한다. 파일구성docker-compose.ymlservices: php: build: ./docker/php container_name: php ports: - "9000:9000" expose: - "9000" volumes: - {앱 경로}:/home/app mysql: image: mysql:8.0 container_name: db restart: always environment: MYSQL_DATABASE: {DB} MYSQL_USER: {DB 유저} MYSQL_PASS..

비동기 프로그래밍?Javascript는 싱글 스레드로 동작하기 때문에 한 번에 하나의 작업만 실행할 수 있다. 하지만, Call Stack, Web API, Event Loop, Callback Queue와 함께 동작하여 비동기 프로그래밍이 가능하다.  Call Stack자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조로 실행 중인 함수들이 쌓인다. Web API브라우저에서 제공하는 API로 Call Stack에 있는 비동기 작업들을 위임받아 멀티 스레드로 처리한다. Callback QueueWeb API의 비동기 작업이 완료되고 실행을 대기하는 함수가 쌓인다.  Event Loop Call Stack이 비어있는 경우 Callback Queue에서 대기중인 함수를 Call Stack으로 옮겨 실..

쿠키(Cookie)브라우저에 저장되는 작은 크기의 문자열이다. 쿠키를 활용하여 HTTP 통신의 무상태 프로토콜(Stateless) 특성을 보완할 수 있다. 하지만, 쿠키에 모든 상태정보를 저장하는 것은 보안에 취약하고 용량의 한계가 있어 대부분 상태정보는 서버 측 세션에 저장하고, 해당 세션 ID를 쿠키에 저장하여 사용한다. 특징도메인 단위로 데이터를 공유도메인마다 저장할 수 있는 쿠키의 개수는 20개(브라우저에 따라 다름)쿠키의 데이터 크기는 약 4KB로 제한만료시간 설정 가능HTTP 요청 시 자동으로 요청 헤더에 Cookie에 값을 포함하여 전달 읽기document.cookie에 name=value 형태로 저장되고, 각 값은 ;(세미콜론)으로 구분된다. 쓰기클라이언트에서 document.cookie에..

함수 바인딩Javascript는 함수가 어떻게 호출 되었는지에 따라 this 객체가 동적으로 할당된다. 크게 함수 호출 방식은 함수, 메소드, 생성자 함수, call/apply/bind 호출이 있다. Javascript는 렉시컬 스코프를 따라 함수의 상위 스코프를 결정한다. 글로벌 영역에 함수 호출을 예로 들면 this는 상위 스코프인 전역 객체(Global Object)를 의미한다. Browser-side에서는 window, Service-side에서는 global 객체가 전역 객체가 된다. var name = 'john';function greet() { console.log(`hello, ${this.name}`); // this: window}greet(); // 'hello, john'var ..

Open WebUI?Open WebUI is an extensible, feature-rich, and user-friendly self-hosted AI platform designed to operate entirely offline. It supports various LLM runners like Ollama and OpenAI-compatible APIs, with built-in inference engine for RAG, making it a powerful AI deployment solution.  🏡 Home | Open WebUIOpen WebUI is an extensible, feature-rich, and user-friendly self-hosted AI platform d..

Ollama?Ollama는 로컬 환경에서 대형 언어 모델(LLM)과 기타 AI 모델을 실행할 수 있는 오픈소스 프로젝트이다. 복잡한 설정 없이 AI 모델을 쉽고 빠르게 사용할 수 있도록 경량화된 모델을 제공하고, GPT 계열 뿐만 아니라 다양한 모델을 지원한다. Ollama 설치 Download Ollama on macOSDownload Ollama for macOSollama.com  Ollama Model Library OllamaGet up and running with large language models.ollama.comModelParametersSizeDownloadDeepSeek-R17B4.7GBollama run deepseek-r1DeepSeek-R1671B404GBollama run..

Laravel Reverb는 Laravel 팀에서 제공하는 first-party 오픈소스 웹소켓 서버다. Laravel의 BroadCasting, Pulse, Laravel Echo 등 다양한 기능들과 통합을 지원한다. 속도를 위해 미세 조정되었고, 단일 서버에서 수천 개의 연결이 가능하다고 한다.  Laravel Reverb - Real-time WebSocketLaravel Reverb brings real-time WebSocket communication to Laravel applications.reverb.laravel.com 개요운영중인 서비스에 중복로그인 및 실시간 알림이 필요하여 웹소켓 서버가 필요했다. 운영중인 서비스의 API 서버는 Laravel 애플리케이션이었다. Nest.js를 사..

배경맡고 있는 프로젝트가 Electron, React로 개발된 데스크탑 애플리케이션으로 초기에 모놀리식 아키텍처로 개발 되었다. 혼자 진행하던 프로젝트라서 모놀리식 구조를 유지하였다.모놀리식 아키텍처는 단일 코드 베이스의 애플리케이션 구조를 의미한다. 프로그램의 전통적인 구조로 모든 기능이 하나로 결합되어 있으며 타 애플리케이션과 독립적인 것이 특징이다. 프로젝트가 통합되어 있어 단순하며 보편성이 장점이다. 하지만 규모가 커졌을 경우 복잡도로 인해 유지 보수 및 유연한 확장이 어려울 수 있다. 하지만 UI 변경이 있을 때마다 앱을 새로 빌드하고 배포하는 과정이 비효율적이었다. 반복되는 작업이 점점 번거로워지면서, Electron과 React 코드를 분리해 멀티레포 방식으로 전환했다. React 앱은 S3..