CyberImagination BLOG 226

멀티채널 웹 컨텐츠 관리를 위한 사용이 쉽고 편리한 CMS bizXpress

안녕하세요. 멀티채널 컨텐츠 관리에 유용한 CMS 솔루션 bizXpress의 특징을 살펴보겠습니다. 멀티 채널 콘텐츠 관리는 브랜드 성과와 고객 경험을 동시에 강화하는 핵심 전략으로 자리 잡고 있지만, 현실에서는 콘텐츠 생성뿐 아니라 각 채널에 최적화된 배포와 관리를 일일이 수행해야 하는 어려움이 존재합니다. 이로 인해 현업의 업무 부담이 증가하고, 작업 시간이 과도하게 소요되기도 합니다. bizXpress는 이러한 현실적인 문제를 효과적으로 해결해주는 CMS 솔루션입니다.bizXpress는 웹 콘텐츠를 손쉽게 작성·편집하고 다양한 채널에 배포할 수 있는 기능을 제공하여 멀티 채널 콘텐츠 관리의 복잡성을 크게 줄여줍니다. 멀티채널 웹컨텐츠 관리에 탁월한 bizXpress 1) 콘텐츠 제작과 관리의 간소..

민첩성을 확보하는 데이터 연계 전략 MSA 환경의 메인 허브 API Gateway

이번 글에서는 D-Bridge를 API Gateway로 활용하여 서비스 디커플링을 구현하고, 개발 및 배포의 민첩성을 극대화할 수 있는 방법을 제시합니다. 개발 조직의 독립적인 민첩성과 확장성을 향한 여정, MSA (Micro Service Architecture)오늘날 IT 환경은 급변하며, 새로운 요구 사항에 빠르게 대응하는 민첩성(Agility)이 핵심 경쟁력입니다. 이러한 요구에 따라, 기존의 크고 복잡한 시스템(모놀리식)을 작고 독립적인 서비스 단위로 분리하는 MSA(Micro Service Architecture)가 주목받고 있습니다. 하지만 MSA로의 전환은 쉽지 않습니다. 특히 기존의 부서별/시스템별 경계를 넘어 수많은 마이크로 서비스 간의 복잡한 데이터 연계 및 통신 문제를 어떻게 효율적..

[세미나 후기] 서울지역 대학교 대상 API 솔루션 D-Bridge 발표

안녕하세요. 사이버이메지네이션이 강릉 스카이베이호텔에서 10월 16일에 진행된 '2025 한국교육정보화재단 서울지역협의회 세미나'에 참여했습니다. 기간: 2025년 10월 16일(목) ~ 17일(금)장소: 강릉 스카이베이호텔 이번 세미나에서 사이버이메지네이션은“Data 업무의 미래, API로 연결하다. 디지털혁신플랫폼 D-Bridge” 라는 주제로 발표를 진행했습니다. ** 발표 주요 내용- 대학교 API 확장성- D-Bridge 핵심 가치: 효율성, 보안성, 확장성 중심의 설계- SQL 기반 API 개발: D-Bridge로 API를 개발하는 동영상- 대학교 API 활용사례: DB Link, View API 전환, 이기종 DB 데이터 연계, 교내 / 외부기관 연계 ** 사용자 인터뷰D-Bridg..

보안 위협과 대응(1편) - 랜섬웨어

안녕하세요. 최근 가장 심각한 보안 위협으로 떠오른 랜섬웨어. 이에 대해 알아본 후 웹사이트 운영 업무를 하면서 직접 경험했던 리눅스 서버의 로그와 톰캣(Tomcat) 로그를 통해 이상 징후를 확인하고 대응했던 경험을 공유하고자 합니다. 목차 1. 랜섬웨어란 무엇인가?2. 최근 랜섬웨어 공격 동향과 피해 사례3. 랜섬웨어 초기 흔적 파악하기3-1. 로그(톰캣, 아파치) 분석3-2. 비정상 접속 탐지3-3. 모니터링을 통한 탐지4. 파일 변조 탐지4-1. find, lsattr, inotify 활용 실시간 탐지4-2. 파일 무결성 점검 및 관리 1. 랜섬웨어란 무엇인가?Ransom(몸값) + Software(소프트웨어)의 합성어로 시스템을 잠그거나 데이터를 암호화해 사용할 수 없도록 하고 이를 인질로 금..

유용한 정보 2025.10.01

[React] React + Upbit API로 실시간 코인 시세 사이트 만들기 (2)

안녕하세요.이번 글에서는 앞선 포스팅에서 구현한 API와 WebSocket 연동이후에 데이터를 받아 화면에 보여주는 부분을 구현해보겠습니다. 목차데이터 가공과 UI 수정검색 및 탭기능 구현데이터 가공과 UI 수정ProductTable.tsx실시간 데이터를 화면에 보여주기 위해 ProductTable 컴포넌트를 구현해보겠습니다.ProductTable은 현재 선택된 마켓 탭과 검색 조건에 따라 화면에 보여줄 코인 목록(visible)과 실시간 시세 데이터를 테이블 형식으로 렌더링하는 컴포넌트입니다.ProductTable내부에서는 Zustand의 useUpbitStore을 사용하여 visible 배열상태로 구독하고, 해당 배열을 순회하며 ProductItem컴포넌트를 동적으로 생성하도록 구현합니다.visibl..

프론트엔드 2025.07.11

[React] React + Upbit API로 실시간 코인 시세 사이트 만들기 (1)

안녕하세요.이번 글에서는 앞선 포스팅에서 소개한 React 와 Upbit API 를 활용하여 간단한 예제를 직접 구현해보겠습니다. 목차 1. 프로젝트 세팅 2. Upbit API 와 WebSocket 연동 프로젝트 세팅 UI 구성에 앞서 React 프로젝트에서는 각 기능별로 폴더를 나눠서 관리하는것이 일반적입니다. 이렇게 구조화하면 유지보수와 확장에 유리하고, 협업시에도 각자의 역할이 명확해집니다. 아래는 대표적인 폴더구조 예시입니다. components 재사용 가능한 UI 요소들을 보관하는 폴더입니다. 라우팅과 직접 연결되지 않는, 작고 반복적인 컴포넌트들을 정의합니다. pages 라우팅에 대응되는 페이지 단위 컴포넌트를 보관합니다. URL 경로와 직접 연결되며, 각 화면의 중심역할을 합니다. ..

프론트엔드 2025.07.04

[React] React 소개 및 프로젝트 생성

안녕하세요. 이번 글에서는 React가 어떤 라이브러리인지 간단히 살펴보고, Vite와 TypeScript를 활용해 React 개발 환경을 구성하는 방법을 소개해 드리겠습니다. 목차1. React란2. 프로젝트 생성 1. React란 React 는 사용자 인터페이스 (UI) 를 효율적으로 구축할 수 있도록 도와주는 JavaScript 라 이브러리입니다. Meta(Facebook) 에서 개발되었으며, 현재는 다양한 웹 서비스와 애플리케이션에서 널리 사용되고 있습니다. React의 주요 특징 컴포넌트 기반 구조 React 는 화면을 컴포넌트라는 작은 단위로 나눠서 구성합니다. 예를 들어 웹 페이지가 있다고 하면 헤더는 본문은, 푸터는 이렇게 각각의 부분을 독립적인 파일로 만들고, 조립하듯이 붙여서 하나..

프론트엔드 2025.06.27

[Vue.js 3.0] Vue 3 + UPbit API로 실시간 코인 시세 사이트 만들기 (2)

안녕하세요.이번 글에서는 지난 포스팅에서 구현한 실시간 코인 시세 사이트에 WebSocket을 활용한 실시간 데이터를 구현하고, 데이터를 가공하고 변화를 감지하여 UI에 반영하는 방법을 함께 살펴보겠습니다. 목차WebSocket을 활용한 실시간 데이터 구현데이터 가공과 UI 수정 1. WebSocket을 활용한 실시간 데이터 구현 실습을 진행하기 전, Vue의 Lifecycle Hooks에 대해 알아보도록 하겠습니다. | Lifecycle HooksVue에서는 컴포넌트가 생성되고 제거되는 일련의 흐름(생명주기)에 따라 특정 시점마다 작업을 수행할 수 있도록 라이프사이클 훅이라는 개념을 제공합니다.Composition API에서는 각 훅을 함수 형태로 가져와서 실행하며, 컴포넌트의 생성, 마운트, 업데이..

프론트엔드 2025.04.24

[Vue.js 3.0] Vue 3 + UPbit API로 실시간 코인 시세 사이트 만들기 (1)

안녕하세요.이번 글에서는 앞선 포스팅에서 소개한 Vue 3와 UPbit API를 활용하여 간단한 예제를 직접 구현해보겠습니다.실습 과정에서 Vue의 컴포넌트 구조와 컴포넌트간의 상호작용 방식에 대해서도 함께 알아보겠습니다. 목차프로젝트 세팅과 UI 구성UPbit API 연동하여 종목명 표시하기 1-1. 프로젝트 생성 및 VSCode 확장 프로그램 소개이전 포스팅에서 Node.js 설치와 프로젝트 생성 방법을 다뤘습니다.이번에는 동일한 방식으로 Vue 프로젝트를 만들고, 로컬 환경에서 실행해보겠습니다. [Vue.js 3.0] (1) Vue 소개 및 프로젝트 생성안녕하세요. 이번 글에서는 웹 개발에서 중요한 역할을 하는 프론트엔드 프레임워크 Vue.js를 설명드리겠습니다. 우선 Vue.js에 대해 알아보고 ..

프론트엔드 2025.04.22

AWS EC2 활용한 CI/CD 구축 (2)

안녕하세요. 2편에서는 1편에서 설명드렸던 CI/CD를 실제로 구축해보도록 하겠습니다. 1편을 확인하고 싶으신 분들은 아래 링크를 눌러주세요. AWS EC2 활용한 CI/CD 구축 (1) 1. 아키텍처 아키텍처는 아래 순서대로 진행합니다. 개발자 작업사항 커밋 → jenkins 빌드 실행 → GitHub 프로젝트 파일 빌드 → jenkins 빌드한 파일을 배포서버 ec2 인스턴스에 배포 → 배포 서버 ec2 톰캣 실행 → 스프링 부트 프로젝트 실행 완료 2. 구축순서 구축은 아래 순서대로 진행하도록 하겠습니다. 1. 개발 프로젝트 github 연동 2. AWS 계정 생성 → 2번 단계까지는 별도 설명없습니다. 3. IAM 사용자 추가 (그룹 생성, 권한 추가) 4. EC2 서비스 인스턴스 생성 5. EC..

백엔드 2024.01.25