ChoboIT

이번 글에서는 Google MediaPipe 에서 개발한 Hand Landmark Detection 을 사용하여, 손이 나오는 영상에서 손을 추적해 스켈레톤화 하는 과정을 정리하고자 한다. 개발 환경 macOS Sonoma 14.1.1 Python 3.10.6 1. Google MediaPipe HandLandmark MediaPipe Hand Landmark 는 이미지에 보이는 손의 랜드마크(Landmark)를 인식하여, 시각적으로 가시화까지 해주는 기능들을 포함하고 있다. 여기서 랜드마크(Landmark) 라는 단어가 살짝 어색해 보일 수 있다. 쉽게 생각하자면, 랜드마크는 손의 중요 포인트를 뜻한다고 생각하면 된다. 중요 포인트는 다음 그림과 같다. 위 그림을 보면 손의 형상을 0~20까지 21가지..

노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의에서 ToDoList 를 만들어보았다. 강의에서는 단순히 에 입력하면 아래에 목록으로 출력이 되는 간단한 형식이었다. 그렇게 넘어가려던 중, 강의 댓글을 보니 ToDoList 에 삭제 기능을 넣는 것에 대한 논의가 이뤄지는 것을 발견했다. 그래서 필자도 삭제 기능까지 포함하여 꽤 있어보이는 ToDoList 를 만들어 보기로 했다. 1. 강의 결과물 강의에서 배운 결과물의 코드와 화면은 아래와 같다. import {useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDosList, setToDosList] = useState([]); cons..

본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 듣고 정리한 글입니다. 더 자세한 설명과 정보는 영상을 통해 확인할 수 있습니다. ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co 지난 글에서는 CRA(Create-React-App) 에 대한 강의를 정리하여 올렸습니다. 이번에는 Effects 에 대한 강의를 듣고 정리합니다. [ReactJS로 영화 웹 서비스 만들기] 4. Create React App 본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 정리한 글입니다. 더 자세한 내용과 설명은 무료 강의를 들어주세요! ReactJS로 영화 웹 서비스 만들기 – 노마드 ..

본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 정리한 글입니다. 더 자세한 내용과 설명은 무료 강의를 들어주세요! ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co 지난 글에서는 ReactJS 의 Props 에 대해 정리하였다. [ReactJS로 영화 웹 서비스 만들기] 3. Props & PropTypes ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React 본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 수강하고, 개인적으로 정리한 글입니다. 더 자세하고 choboit.tistory.com 이번에는 간단히 React App ..

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React 본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 수강하고, 개인적으로 정리한 글입니다. 더 자세하고 쉬운 설명은 강의를 참고하세요~! [ReactJS로 영화 웹 서비스 만들기] 2. State 본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 수강하고, 개인적으로 정리한 글입니다. 더 자세하고 쉬운 설명은 강의를 참고하세요~! ReactJS로 영화 웹 서비스 만들기 – 노마드 choboit.tistory.com 지난 글에서는 State 에 대한 강의를 듣고 실습하며 블로그에 정리했습니다. 이번에 정리 해볼 니코쌤의 강의는 ReactJS - Props 에 대한..

개발 환경 - M1 Macbook Pro (2021) - macOS Ventura 13.2.1 - react@18.2.0 - react-native@0.71.4 Problem 여느 때와 같이 "npx react-native start" 를 통해 RN 앱을 실행시켜 개발을 진행하려 했다. 그런데, 이번에 ""listen EADDRINUSE: address already in use :::8081." 에러가 나타나면서, RN 앱을 실행시킬 수가 없었다. 에러의 내용은 대강 "주소가 이미 사용되고 있어서 지금 ReactNative 를 시킬 수 없다" 라는 뜻인 것 같았다. 주소에서도 포트(Port)가 이미 사용 중이라 새로운 RN 앱을 실행할 수 없는 것처럼 보인다. 바로 구글링을 통해 해결법을 찾았고, 바로..

Problem 이전에 진행하던 RN 프로젝트를 다시 진행하고자 빌드를 시켜보았다. 그런데, 이전에 잘되던 iOS 빌드가 잘 되지 않았다. "npx react-native start" 명령어를 실행시킨 후에, "i" 를 입력시켜 iOS 빌드를 진행했는데, 진행 중에 멈추는 현상이 발생했다. FAIL 문장이라도 명확히 나타난다면, 검색하기 쉬웠을텐데 에러 문구마저 안 나타나니 곤란할 수 밖에 없었다. 그러던 중, iOS 를 빌드하는 다른 명령어로 진행을 시켰더니, "BUILD FAILED" 가 뜨게 되었다. react-native run-ios 에러 로그는 상당히 길었으며, 위 이미지는 에러문에서 일부를 캡쳐한 것이다. 에러 내용 중에서 "value" 에 대한 에러 문장을 복사하여 구글링 하였다. 비슷한 에..

필자는 Android 앱을 개발하면서 UI 를 만들 때, [Split] 모드로 코딩을 한다. [Split] 모드는 왼쪽에는 [Code] 뷰, 오른쪽에는 [Design] 뷰가 보여서 XML 코드를 추가함과 동시에 앱에서 어떻게 보여질지 미리볼 수 있어서 좋다. 그런데, 어느 순간 FragmentContainerView 를 추가하면, 우측에 미리볼 수 있는 곳에서 모든게 안보이는 버그(?)가 나타났다. 그래서 급할 때는 FragmentContainerView 부분을 주석처리하고, 다른 부분을 작업했다. 어느날, 위 현상을 해결하고 FragmentContainerView 를 주석처리할 필요 없이 작업할 수 있는 방법을 찾아내서, 블로그에 정리하고자 한다. 해결 방법이 너무나 간단해서 본 글은 엄청 짧다. 해결..

React Native 앱에서도 웹뷰를 사용할 수 있다. "react-native-webview" 라이브러리를 추가하여 웹뷰를 사용하고, 웹뷰와 앱 간에 동작 연동을 해본다. 그리고 그에 대한 내용과 그 과정에서 겪었던 오류들에 대한 내용들을 모두 정리하고자 한다. 개발 환경 - M1 Macbook Pro (2021) - macOS Ventura 13.2.1 - react@18.2.0 - react-native@0.71.4 1. Install Package npm install --save react-native-webview 웹뷰를 사용하고자 하는 RN 프로젝트 폴더로 이동하여, 위 명령어를 입력한다. install 이 완료되면 "package.json" 파일에 dependencies 블럭에 잘 추가되..

본 글은 노마드코더의 "ReactJS로 영화 웹 서비스 만들기" 강의를 수강하고, 개인적으로 정리한 글입니다. 더 자세하고 쉬운 설명은 강의를 참고하세요~! ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders 왕초보를 위한 React nomadcoders.co 직전 강의 정리는 다음 링크로 들어가시면 됩니다. [ReactJS로 영화 웹 서비스 만들기] 1. The basic of REACT 본 글은 노마드코더의 "ReactJ로 영화 웹 서비스 만들기" 강의를 복습 정리한 글이다. 영상 강의에서 더 자세하고 쉬운 설명을 들을 수 있으니, 본 강의에 흥미가 생긴다면 영상 강의를 수강하자. choboit.tistory.com 1. State? State 는 기본적으로 데이터가 저장되..