목록frontend (6)

DM Log

[RDP 모니터링 PJT] RDP 화면 녹화 프로젝트

RDP 화면 녹화 프로젝트개요여러 개의 Widnow 원격 접속(RDP) 접속 시 사용자가 작업한 내용을 녹화하고 특정 시간에 웹서버로 녹화 파일을 전송하여 웹 서버에서 녹화 파일을 재생하는 기능을 구현하기 위한 프로젝트프로젝트 환경RDP 서버 : Window Server영상 녹화: ffmpeg / Window Scheduler / BatchDB : SQLiteBackend : Python / FlaskFrontend : TypeScript / React 기능RDP 접속 화면 녹화 기능사용자 로그인 시 ffmpeg 실행 batch로 화면 녹화 시작사용자 로그오프 시 ffmpeg 실행 batch로 화면 녹화 저장 및 종료사용자 멀티 RDP 접속 시 ffmpeg 실행녹화 파일 전송 기능녹화된 파일 특정 시점에..
PJT/영상 파일 재생 PJT 2025. 11. 23. 19:26
[AI 프로젝트 #1] PDF Q&A #3: React + Vite 프론트엔드 UI 구축

서론React + Vite 프론트엔드 UI를 구축하여 실제로 PDF를 업로드하고 AI에게 질문을 던져 응답을 확인할 수 있는 화면 설계프론트엔드 디렉토리 구조 frontend/├── apps/│ └── pdf/ # PDF Q&A 프론트엔드│ ├── src/│ │ ├── components/│ │ │ ├── UploadForm.tsx│ │ │ └── ChatBox.tsx│ │ ├── api/pdfApi.ts│ │ └── main.tsx│ ├── package.json│ └── tsconfig.json├── packages/│ ├── ui/│ ├── style..
PJT/AI PJT 2025. 10. 19. 21:05
[AI 프로젝트 #0] 초기 세팅 #4: 공용 패키지(UI, 스타일, 유틸) 구조 설계

서론 모노레포(Monorepo) 환경의 핵심은 공용 패키지를 통한 중복 제거AI 프로젝트가 확장될수록 PDF, Word, Excel 등 각 앱마다 공통 UI, 스타일, 유틸 함수가 반복되기 쉬운데, 이를 효율적으로 관리하기 위해 packages/ 디렉토리를 구성packages/ui, packages/styles, packages/utils 구조 설계 정리각 앱에서 import하여 재사용하는 방법으로 사용프로젝트 디렉토리 구조frontend/ ├─ apps/ │ └─ pdf/ │ ├─ src/ │ │ ├─ App.tsx │ │ ├─ main.tsx │ │ ├─ components/ │ │ │ └─ PdfUploader.tsx │ ..
PJT/AI PJT 2025. 10. 13. 23:17
[AI 프로젝트 #0] 초기 세팅 #1: Node, Python, Vite 기반 모노레포 환경 설명

환경 설정1. 사용 버전Node.js: v22.17.1Python: 3.13.7Python은 가상환경(venv)을 사용해 프로젝트별 독립 환경을 구성할 예정이고, Node.js는 Vite + React 기반 프론트엔드 빌드2. 프로젝트 구조 설계모노레포(Monorepo) 방식을 채택하여 AI 모듈을 독립된 앱으로 구성하고, 공통 패키지를 공유하여 유지보수성을 높일 예정ai-projects/ ├─ frontend/ # 프론트엔드 (Turborepo 관리) │ ├─ apps/ # 개별 프론트엔드 프로젝트 │ │ ├─ pdf/ # PDF 전용 프론트 (/pdf) │ │ └─ ... │ ├─ packages/ ..
PJT/AI PJT 2025. 9. 14. 14:32
[# 데이터 플랫폼 PJT] 데이터 플랫폼 개발 프로젝트

데이터 플랫폼 개발 프로젝트개요사용자가 원하는 다양한 대시보드 / 데이터 소스를 간편하게 연동하고, 데이터를 웹 기반의 직관적 화면에서 자유롭게 시각화 할 수 있는 데이터 플랫폼을 구축하는 것을 목표로 합니다.기존의 데이터 시각화 플랫폼의 경우 많은 기능으로 인해 무겁고 복잡하다고 생각되어, 데이터 플랫폼에 필수적인 핵심 기능(Core)만을 최소화하여 제공하고, 직접 원하는 기능만 선택적으로 추가 및 빌드가 가능하도록 진행할 예정입니다.가볍고 빠르면서 자신만의 요구사항에 부합하는 데이터 모니터링 환경 구축이 가능하도록 하는 것이 목표 입니다.목표 사용자 중심의 유연하고 가벼운 데이터 시각화 플랫폼가벼운 플랫폼필수 기능만 최소화한 Core로 제공하여, 사용자가 원하는 추가 기능만 선택적으로 포함하여 빠르고..
PJT/데이터 플랫폼 PJT (추후 진행) 2025. 8. 3. 17:32
[JEST] 1. JEST 소개 및 간단한 테스팅

- JEST 란?자바스크립트(타입스크립트)에서 인기 있는 테스트 프레임워크이자 테스트 러너로 목 객체와 코드 커버리지 수집을 갖춘 메타의 오픈소스테스트 작성 및 실행 : 다양한 방식으로 코드 동작을 확인하는 테스트 작성 가능목  객체 지원 : 외부 의존성을 모방하여 테스트코드 커버리지 : 테스트가 코드의 어느 부분을 검증했는지 분석유연하고 직관적인  API : 쉽게 작성 가능한 문법 제공 - JEST 세팅프로젝트 초기화node.js 패키지 모듈 의존성 버전 관리를 위해  package.json 파일 생성npm init -yJest 설치와 TypeScript 설치npm install --save-dev jest ts-jest @types/jest typescriptTypeScript 설정 (선택)TypeS..
개발공부/Frontend 2025. 1. 9. 20:41
이전 Prev 1 Next 다음