UI 5

OpenCV, YOLOv8, PyQt5활용 실시간 객체 탐지 서비스 구현

OpenCV와 YOLOv8을 활용한 실시간 객체 탐지 서비스 구현 OpenCV와 최신 YOLOv8 모델, 그리고 PyQt5를 활용하여 실시간 객체 탐지 GUI 프로그램을 만듦  사용 기술 스택 객체 탐지 YOLOv8 (ultralytics 라이브러리)영상 처리 OpenCV (cv2)GUI 구성 PyQt5 (QWidget, QLabel, QPushButton, QVBoxLayout) *PyQt5Python에서 데스크탑 애플리케이션(GUI 앱)을 만들 수 있게 해주는 라이브러리QWidget모든 GUI 요소의 기본 (창, 버튼 등)QLabel텍스트나 이미지 보여주는 위젯QPushButton클릭 가능한 버튼QVBoxLayout위에서 아래로 위젯 정렬하는 레이아웃QTimer일정 시간마다 반복적으로 이벤트 실행 (..

React로 사고하기

전통적인 웹 개발 (HTML, CSS, JavaScript + jQuery) 기존의 웹 개발 방식→ HTML, CSS, JavaScript를 직접 사용해서 웹사이트를 제작특히 jQuery 같은 라이브러리를 사용해서 DOM을 조작하는 방식이 일반적 HTML, CSS, JS가 분리된 상태로 개발됨DOM을 직접 조작페이지 새로고침이 많음 (서버 렌더링 중심)복잡한 UI에서는 유지보수가 어려움재사용성 부족함 동작 원리서버 → 클라이언트(브라우저)로 HTML 파일 전송브라우저 :  HTML을 렌더링하고, CSS를 적용JavaScript가 실행되면서 동적인 UI 추가 (이벤트 리스너, 애니메이션 등)특정 이벤트 발생 시 document.querySelector() 같은 방법으로 DOM을 직접 수정새로운 데이터를 불..

Component

Component 리액트(React)에서 UI를 구성하는 기본 단위→ 레고 블록처럼, 여러 개의 작은 컴포넌트를 조합하여 복잡한 UI를 만들 수 있음→ 컴포넌트는 재사용 가능해야 함 (한 번 만든 컴포넌트는 다양한 곳에서 반복적으로 사용할 수 있어야 함) 재사용성 : 동일한 UI 요소를 여러 곳에서 사용할 수 있어 코드 중복을 줄임유지보수 용이 : 코드가 잘 조직되어 있어 변경 및 수정 용이가독성 증가 : 역할별로 컴포너트를 분리하면 전체 코드의 가독성이 높아짐  컴포넌트의 유형 함수형 컴포넌트 (Functional Component)ES6 함수 형태로 작성되며, 간결하고 가독성이 좋음React Hooks(useState, useEffect 등)를 사용하여 상태 및 생명주기 기능을 관리 가능최근 리액트 ..

JSX

JSX JavaScript XML의 약자로, JavaScript의 확장 문법 HTML과 비슷하게 보이지만, 실제로는 JavaScript 코드React에서 JSX를 사용하면 UI를 보다 직관적으로 구성 가능  직관적이고 가독성이 좋음JSX는 HTML과 유사해서 웹 개발자들이 직관적으로 이해하기 좋음기존 JavaScript의 React.createElement() 방식보다 코드가 깔끔하고 가독성이 좋음UI와 로직의 통함UI와 관련된 로직을 한 곳에서 작성 가능예:버튼을 생성, 생성한 버튼을 클릭했을 때의 동작을 같은 파일에서 정의  JSX의 사용법 JSX 안에서 JavaScript 사용 JSX 내부에서 JavaScript 표현식을 사용하려면 {} 중괄호 사용const name = "리액트";const ele..

React

React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 JavaScript를 사용하여 웹사이트의 UI(User Interface)를 구성하는 라이브러리→ 우리가 보는 버튼, 메뉴 등과 같은 요소를 쉽게 만들고 관리할 수 있도록 도와줌 페이스북에서 개발하여 오픈 소스로 공개됨  선언적 UI 라이브러리 선언적(Declarative) 프로그래밍 방식을 따름→ "어떻게(How)" 동작하는지보다 "무엇(What)"을 해야 하는지에 집중 예:특정 버튼을 클릭하면 화면이 어떻게 변해야 하는지를 선언적으로 작성하면, 내부적인 렌더링 과정은 React가 자동으로 처리함→ 코드의 가독성을 높이고 유지보수를 쉽게 할 수 있음 컴포넌트 기반 (Component-Based) UI를 컴포넌트(Component)..

728x90