ChoboIT

본 글에서는 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 페..