ZeroBin`s 개발일지

시네마틱 스크롤링(Cinematic Scrolling)은 웹 페이지에서 스크롤을 통해 시각적 연출이 이루어지는 기법입니다. 주로 이미지, 텍스트 애니메이션, 시차 효과(parallax scrolling), 비디오 전환 등이 포함되며, 사용자가 마치 영화를 감상하는 듯한 경험을 하도록 도와줍니다. 특히, 브랜드 소개 페이지나 포트폴리오에 적합하며, 시각적 몰입감을 높여 사용자의 흥미를 유발하는 데 유리합니다. 주요 특징과 간단한 예제를 소개하겠습니다. 1. 시네마틱 스크롤링 특징인터랙티브 경험 제공: 스크롤에 따라 페이지 요소가 움직이고 변하면서 사용자의 참여를 유도합니다.시차 스크롤링: 배경 이미지와 전경 이미지가 다른 속도로 움직이며 입체감과 깊이감을 줍니다.스토리텔링에 적합: 특정 스토리를 순차적으로..

JAM 스택(JAM Stack)은 JavaScript, API, 그리고 Markup의 조합을 통해 빠르고, 안전하며, 확장 가능한 웹 애플리케이션을 만드는 현대적인 아키텍처입니다. 기존 서버 중심의 웹사이트와 달리, JAM 스택은 정적 파일을 기반으로 하여 클라이언트와 서버 간의 분리를 통해 성능과 보안을 강화합니다. JAM 스택의 주요 특징과 간단한 예제를 소개하겠습니다. 1. JAM 스택의 특징JavaScriptJAM 스택 애플리케이션의 동작을 담당하는 클라이언트 측 로직을 JavaScript로 처리합니다. React, Vue, Svelte와 같은 프레임워크를 통해 사용자와의 상호작용을 구현할 수 있습니다.API서버에서 필요한 데이터를 가져올 때 API를 통해 서버에 의존하지 않고 데이터를 처리합니다..

TensorFlow.js는 브라우저 및 Node.js에서 머신러닝 모델을 개발하고 실행할 수 있는 JavaScript 라이브러리입니다. TFJS의 주요 특징과 간단한 예제( "손글씨 숫자 인식" )를 통해 알아보겠습니다. 1. TFJS의 주요 특징브라우저 기반 실행: 클라이언트 사이드에서 직접 모델을 학습하고 예측할 수 있습니다.모델 변환: 기존 TensorFlow 모델을 TensorFlow.js 형식으로 변환하여 웹에서 실행 가능.빠른 프로토타이핑: 웹 애플리케이션에서 손쉽게 머신러닝 기능을 구현할 수 있습니다. 2. 손글씨 숫자 인식https://github.com/google/tfjs-mnist-workshop/tree/master/model위 경로에서 "group1-shard1of1" 과 "mod..

WebAssembly(웹어셈블리, WASM)는 웹에서 고성능 코드를 실행하기 위해 설계된 이진 코드 형식입니다. 주로 웹 브라우저에서 JavaScript와 함께 실행되지만, 높은 성능이 요구되는 연산을 위해 C, C++, Rust 등 다른 언어로 작성된 코드를 컴파일하여 브라우저에서 실행할 수 있도록 지원합니다. WASM의 주요 특징과 간단한 예제를 통해 알아보겠습니다. 1. WASM의 주요 특징고성능: WASM은 바이너리 형식으로 작성되어 브라우저가 빠르게 로드하고 실행할 수 있습니다. 특히 대규모 연산이나 복잡한 계산이 필요한 작업에서 JavaScript보다 빠르게 동작합니다.다양한 언어 지원: C, C++, Rust, Go 등 여러 언어로 코드를 작성하고 이를 WebAssembly로 컴파일하여 웹 ..

PWA (Progressive Web Apps)는 웹 기술을 사용해 모바일 앱과 같은 사용자 경험을 제공하는 웹 애플리케이션입니다. 일반 웹사이트와 네이티브 앱의 장점을 결합하여, 오프라인 동작, 푸시 알림, 설치 가능성 등의 기능을 지원합니다. PWA는 성능 최적화와 사용성 향상에 중점을 둔 애플리케이션 방식입니다. PWA의 주요 특징과 간단한 예제로 사용방법에 대해 알아보겠습니다. 1. PWA의 주요 특징반응형 디자인 (Responsive)다양한 기기 및 화면 크기에 자동으로 최적화되어 데스크톱, 태블릿, 스마트폰에서 원활히 작동합니다.오프라인 지원 (Offline Support)서비스 워커(Service Worker) 기술을 사용해 오프라인 상태에서도 일부 기능을 사용할 수 있습니다.설치 가능성 (..

Tailwind CSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크로, 미리 정의된 클래스들만으로 빠르게 스타일링할 수 있도록 설계되었습니다. 컴포넌트 기반이 아닌, 스타일 속성 자체에 집중한 독특한 접근 방식을 사용하여 빠르고 일관된 디자인을 구현할 수 있는 것이 특징입니다. 이번 포스팅에선 Tailwind CSS의 주요 특징과 간단한 예제로 사용방법에 대해 알아보겠습니다. 1. Tailwind CSS의 주요 특징유틸리티 클래스 기반 스타일링Tailwind는 미리 정의된 CSS 클래스들(예: bg-blue-500, text-lg, p-4)을 조합하여 요소를 스타일링합니다.유틸리티 클래스는 재사용 가능한 단일 속성들로 이루어져, CSS 파일을 별도로 작성할 필요 없이 HTML 안에서 직..

Windows에서 Docker Compose를 이용해 Grafana, Loki, Promtail을 구성하는 방법에 대해 알아보겠습니다. 1. Docker Desktop 설치https://docs.docker.com/desktop/install/windows-install/위 URL로 접속하여 윈도우용 설치파일을 다운로드합니다. 2. Docker Compose 파일 작성2.1. 작업폴더생성mkdir grafana-loki-setup저는 "D:/loki/grafana-loki-setup" 경로에 생성하였습니다.해당 경로로 이동해서, 3개의 파일을 생성합니다.docker-compose.ymlloki-config.yamlpromtail-config.yaml 2.2. 설정파일생성2.2.1. docker-compo..

Loki는 Grafana Labs에서 개발한 오픈 소스 로그 집계 시스템으로, Prometheus의 메트릭 수집 방식과 유사하게 설계되어 로그 데이터를 효율적으로 수집하고 저장합니다. 특히 Loki는 메타데이터(레이블)를 기반으로 로그를 필터링하고 검색할 수 있도록 하여 기존의 로그 수집 시스템보다 리소스 소모가 적습니다. Promtail은 Grafana Loki와 함께 사용되는 로그 수집기입니다. Promtail은 다양한 소스에서 로그를 수집하고, 이러한 로그를 Loki로 전송하여 저장하고 쿼리 할 수 있도록 도와줍니다. 1. Loki, Promtail 설치https://github.com/grafana/loki/releases위 URL로 접속합니다.최신 버전을 선택한 후, Assets 항목에서 윈도우..

Grafana는 오픈 소스 시각화 도구로, 다양한 데이터 소스에서 데이터를 수집하고 이를 차트, 그래프, 알림 대시보드로 시각화해 주는 도구입니다. 주로 DevOps 환경에서 시스템 성능 모니터링과 운영 관리를 위해 사용됩니다. 1. Grafana 설치https://grafana.com/grafana/download?platform=windows위 URL 로 이동합니다.installer 또는 zip 파일을 다운로드합니다. 2. Grafana 서버 실행C:\Program Files\GrafanaLabs\grafana\bin\grafana-server.exeinstaller로 설치하였다면 위 경로로 이동하여 서버를 실행합니다.http://localhost:3000/login위 URL로 접속하면 로그인 페이지..

1. Git Flow 전략 소개Git Flow는 기능 개발과 배포 준비 프로세스를 체계적으로 관리할 수 있는 Git 브랜칭 모델입니다. feature, develop, release, hotfix, main 브랜치를 구분하여 안정성과 효율적인 협업을 가능하게 합니다.기본 브랜치:main: 배포된 안정적인 버전만 존재develop: 개발을 위한 통합 브랜치. 새로운 기능이 merge 되는 곳지원 브랜치:feature: 새로운 기능을 추가하는 브랜치release: 릴리즈 준비 단계에서 사용hotfix: 긴급 버그 수정 시 사용하는 브랜치 2. Github 저장소 생성Git-Flow 라는 이름으로 저장소를 생성합니다.Git 주소를 복사합니다. 3. Git Flow 환경 설정git clone https://gi..