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 는 기본적으로 데이터가 저장되..

본 글에서는 React-Native 기본 프로젝트를 생성하고, 그 과정에서 필자가 겪었던 오류를 해결한 방식에 대해 정리한다. 개발 환경 - M1 Macbook Pro (2021) - OS: Ventura 13.2.1 1. 프로젝트 생성 npx react-native@latest init [PROJECT_NAME] [PROJECT_NAME] 공간에 원하는 프로젝트명을 넣어주면 된다. 그러면 입력한 이름의 RN 폴더와 함께 기본적인 템플릿이 생성된다. 필자의 경우에는 iOS 환경을 생성하면서 에러가 발생했었다. 발견한 에러와 이를 해결한 과정을 정리한다. 2. [ERROR] warn Multiple Podfiles were found 이전에 Ruby 버전으로 에러가 발생했었는데, 이번에는 Cocopods ..

오랜만에 새 React-Native 프로젝트를 생성하던 중에 위 에러를 마주쳤다. 에러의 내용은 Ruby 의 버전이 맞지 않다는 것으로, Ruby 버전을 업데이트 하기로 했다. 업데이트와 동시에 앞으로도 쉽게 업데이트 하기 위해서 Ruby 버전 관리자인 rbenv 까지 설치하기로 한다. 실행 환경 - Macbook M1 Pro (2021) - Ventura 13.2.1 1. brew update brew update 2. brew install ruby-build brew install ruby-build 3. brew install rbenv brew install rbenv 4. rbenv install 2.7.6 rbenv install 2.7.6 5. rbenv global 2.7.6 rbenv ..

본 글은 노마드코더의 "ReactJ로 영화 웹 서비스 만들기" 강의를 복습 정리한 글이다. 영상 강의에서 더 자세하고 쉬운 설명을 들을 수 있으니, 본 강의에 흥미가 생긴다면 영상 강의를 수강하자. 왕초보를 위한 React Native 101 – 노마드 코더 Nomad Coders React Native로 2개의 앱 만들기 nomadcoders.co 1. Introduction ReactJS 는 JavaScript 라이브러리의 하나로서, UI 를 만들기 위해 사용된다. Facebook 의 소프트웨어 엔지니어 Jordan Walke 가 개발하였으며, 오픈 소스화 되었다. 즉, ReactJS 는 JavaScript 로 UI 작업을 하던 불편함을 해소하고자 만들어진 라이브러리라 볼 수 있다. 그렇다면 HTML..

HTML 을 만들면서 제일 많이 사용하는 Element 는 단연 일 것이다. 그리고, 에서는 항상 "id" 나 "class" 속성 값이 붙게 되는데, 이를 빠르게 만드는 방법에 대해 정리한다. 필자는 HTML 을 오랫동안 다루지 않았기 때문에, 아는 선까지만 정리하고 새로 알게되는 것들이 있으면 추가할 예정이다. 1. class 속성 값을 입력한 채로, 를 생성하고 싶을 때는 "div.~~~" 을 입력하고 엔터를 쳐주면 된다. 그러면 의 형태로 바로 생성된다. 2. id 속성 값을 입력한 채로, 를 생성하고 싶을 때는 "div#~~~" 을 입력하고 엔터를 쳐주면 된다.

본 글에서는 VSC 에서 HTML 파일을 새로 만들 때, HTML 의 기본적인 구조 코드를 쉽게 만드는 방법에 대해 정리한다. 1. !(Shift + 1) 치고 엔터 "!"(Shift+1) 를 치고, 그에 맞게 생성되는 자동 완성 상자에서 "!" 를 선택하면 된다. 2. html:5 를 입력하고 엔터 "html:5" 를 입력하고, 그에 맞게 생성되는 자동 완성 상자에서 "html:5" 를 선택하면 된다. 3. 글 마무리 오랜만에 VSC 를 켜서 새 HTML 파일을 만들 일이 생겼다. 그런데, DOCTYPE 부터 까지 입력할 생각을 하니 너무 귀찮았다. 분명 단축키가 있던 것 같았는데... 라는 생각을 하며 찾아보게 되었고, 이번 기회에 간단하게 정리했다.

Tensorflow Lite 를 사용해야하는 상황이 와서, 이에 대한 기본적인 지식을 공부하기 위해 블로그에 기록하게 되었다. 아무것도 모르는 상태이기에 공식 문서의 Overview 문서를 번역하며 정독해보았다. Tensorflow Lite 는 Android 앱 안에서 Tensorflow Machine Learning 모델들을 실행할 수 있게 해준다. Tensorflow Lite 시스템은 Android 에서 ML 모델들을 빠르고 효율적으로 실행시킬 수 있는 실행 환경을 제공한다. 하드웨어 가속화 기능까지도 제공한다. 1. Machine Learning Models Tensorflow Lite 가 사용하는 Tensorflow Model 은 더 용량이 작아 옮기기 쉬우며, 더 효율적인 머신러닝(ML) 모델로..

프레임율(FPS, Frame Per Second) 이란, 초당 렌더링 되는 프레임의 개수를 의미한다. 여기서 프레임이란 하나의 사진, 화면을 뜻한다. 즉, 초당 그려지는 사진이나 화면의 개수를 프레임율이라 하며, 성능을 확인하며 게임을 하는 유저들에게는 아주 익숙한 용어일 것이다. 그만큼 애플리케이션이나 기기의 성능을 테스트할 때, 기본적으로 확인하는 요소이다. GitHub - friendlyrobotnyc/TinyDancer: An android library for displaying fps from the choreographer and percentage of time with t An android library for displaying fps from the choreographer and ..

새 Android 프로젝트에 개발하고 있던 라이브러리 모듈을 붙였더니 다음과 같은 에러가 나타났다. [Sync Now] 를 할때는 오류가 안생기다가, RUN 만 시키면 발생하는 오류였다. Duplicate class androidx.lifecycle.ViewModelLazy found in modules jetified-lifecycle-viewmodel-ktx-2.3.1-runtime (androidx.lifecycle:lifecycle-viewmodel-ktx:2.3.1) and lifecycle-viewmodel-2.5.0-runtime (androidx.lifecycle:lifecycle-viewmodel:2.5.0) Duplicate class androidx.lifecycle.ViewTreeV..

개발 중이던 Android 앱의 특정 기능들을 다른 ReactNative 앱과 결합할 일이 생겼다. 그래서 가장 먼저 Android 앱에서 필요한 기능들을 하나의 라이브러리 모듈로 통합을 해두었고, ReactNative 앱에서 생성된 Android Project 에 모듈을 Import 해주었다. 해당 모듈에는 필요한 기능들을 모두 사용하는 Activity 까지 넣어두었기 때문에, ReactNative 앱에서 Activity 를 호출해주기만 하면 됐다. 다만, 본 글에서는 ReactNative 에서 Android Project 를 생성하고, Android Project 내에서 ReactNative 에서 사용할 수 있는 함수를 어떻게 만들고, 호출하는지에 대해 정리한다. 1. Create React Nati..

JWT 는 JSON Web Token 의 약자로, 서버 API 를 호출할 때 토큰으로 주로 사용된다. JWT 는 크게 Header, Payload, Signature 라 불리는 세 개의 부분으로 나눌 수 있다. Header 에는 인코딩 알고리즘과 토큰의 타입을 정의하는 내용을 담고 있고, Payload 는 JWT 에 넣고 싶은 데이터를 가진다. 마지막으로, Signature 는 Header 와 Payload 의 내용을 검증할 때 사용한다. JWT 문자열을 생성하는 것은 jwt.io 홈페이지에서 해볼 수 있다. 이제 본 글의 목적에 맞게 JWT 문자열을 디코딩하여, 인코딩 했을 때의 JSON 값들을 추출하는 코드를 구현해보자. 우선, 디코딩을 하고자 하는 JWT 값을 선정한다. 본 글에서는 jwt.io 페..