그냥 블로그

타입스크립트는 역시 어려워~ 기존에 웹캠으로 했던걸 사진을 넣어서 좌표를 한번 뽑아봄 때문에 IMG라는 클래스를 따로 만들어 줬고 -> 웹캠에는 canvas가 있으니까 걍 라이브러리 들여다 보고 webcam이랑 비슷하게 만들면 됨. 좀 다르게 pose.keypoint를 하면 poseNet이 찍은 좌표를 불러와서 볼 수 있고, 이걸 기반으로 로직 구현까지 완료할 예정이다. 웹캠의 경우 계속 업데이트 되다 보니 콘솔이 너무 많이 찍혀서 잘 되었는지 확인하기엔 좋지 않다고 생각되었고, 그래서 이미지 업로드를 할 수 있는 걸 따로 만들어서 확인하기로 했다. // MyComponent.tsx import React, { useEffect, useRef, useState } from 'react'; // impor..

https://teachablemachine.withgoogle.com/ Teachable Machine Train a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learning models for your sites, apps, and more – no expertise or coding required. teachablemachine.withgoogle.com 위 링크에서 포즈로 학습 시켰습니다. 참고로 타입스크립트임. 그냥 웹캠으로 찍고, 에폭, 러닝레이트, 배치사이즈 지정해서 학습시키면 간편하게 학습시킬 수 있다. 이 부분은 저도 잘 모르기 때문에 다양하게 넣어가면서 실험해 보는..

프로젝트에서 실시간 포즈 감지를 프론트에서 하게 되었다. '-` 사용 언어 : TypeScript, React 프레임워크 / 라이브러리 : vite, Recoil, eslint, prettierignore, 빠른 제작을 위해 모델은 https://teachablemachine.withgoogle.com/ Teachable Machine Train a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learning models for your sites, apps, and more – no expertise or coding required. teachablemachine.withgoogle...

생성(mounting) -> 엽데이트(updating) -> 제거(unmounting) 의 생명주기를 갖는다. 클래스 컴포넌트는 라이프 사이클 메서드를 사용, 함수형 컴포넌트는 Hook을 사용한다. Class Component 생명 주기 마운트 constructor : 컴포넌트 생성자 메서드, 컴포넌트 실행 시 가장 먼저 실행되는 메서드, this.props, this.state에 접근 가능하고 리액트 요소 반환 getDerivedStateFromProps : props로부터 파생된 state를 가져온다. 즉 props로 받아온 것을 state에 넣어주고 싶을 때 사용 render : 컴포넌트를 렌더링하는 메서드 componentDidMount : 컴포넌트가 마운트 됨, 즉 컴포넌트의 첫번째 렌더링이 마..

공통, 특화 프로젝트를 각각 React, React Native로 진행했다. 처음에는 마냥 리액트가 업계에서 많이 쓰인다는 말을 듣고 사용하게 되었는데, 그래서 정확히 무엇인지, 어떤 장점이 있는지 잘 모르고 있다는 생각에 포스팅을 해보기로 했다. 1. 리액트 상황 2. 리액트의 장점 2.1 SSR과 SPA 2.2 컴포넌트 기반의 화면 구성 2.3 Virtual DOM 2.4 선언형과 간결성 2.5 리액티브 프로그래밍 2.6 MVC 중 V만! 3. +번외 3.1 SSR vs CSR / SPA vs MPA 3.2 리액트 상황 2022년 자바스크립트 현황에 따르면 React가 4위로 나타난다. Solid, Svelte, Qwik 같은 새로운 프론트엔드 프레임 워크가 리액트에 도전 중이라고... 그래도 여전히..