목록React (20)

qcoding

4) React + Teachable machine 프로젝트 - 배포 (Firebase Hosting 사용 ) + 카카오 애드핏 광고 적용

* 해당 글에서는 프로젝트 마지막으로 완성된 react 프로젝트를 Firebase Hosting 서비스를 통해서 배포 하고 배포가 완료된 뒤 카카오 애드핏을 통해 광고를 적용하는 것을 정리하였다. * 최종완성 사이트 https://politictest-8f628.firebaseapp.com/ 나와 닮은 정치인은? 나와 닮은 정치인은? 인공지능으로 알아보기! politictest-8f628.firebaseapp.com 1) Firebase Hosting -> 호스팅 서비스를 무료로 이용할 수 있는 것은 Firebase / Amazon / Netlify / Githup 등 여러가지가 있지만 그중에서도 Firebase가 안정적이고, 속도도 빠른 것으로 생각되어 해당 서비스를 사용하였다. -> 이미 구글링을 하..
React 2022. 3. 20. 14:15
3) React + Teachable machine 프로젝트 - React를 통한 프로젝트 제작

* 해당 글에서는 전에 만들었던 Teachable Machine을 이용한 모델을 통해 React 프로젝트를 생성하고 완성하는 과정을 포함하고 있다. 1) 사용한 라이브러리 -> Create React App을 통해 react 프로젝트를 생성하였다. npx create-react-app my-app cd my-app npm start -> 1) Styled-component --> css 사용을 위해 사용 2) @teachablemachine/image --> teachable machine js를 사용하기 위해 사용 3) react-icons --> 웹사이트에서 icons을 사용하기 위해 사용 4) react-router-dom --> 사이트 routing을 위해 사용 "dependencies": { "..
React 2022. 3. 20. 13:36
2) React + Teachable machine 프로젝트 - Teachable Machine 모델 생성

* 이번 글에서는 이미지 수집 -> 분류 -> 모델 생성을 통하여 Teachable Machine을 통해 머신러닝 모델을 생성하는 과정을 정리하였다. * Teachable Model 생성 1) 이미지 수집 -> 사용 방법 : 구글의 사이트의 이미지 검색을 통하여 검색어를 입력하고 python selenium을 통해 이미지를 가져와서 저장한다. -> python의 selenium을 통해서 수행하였으며 해당 코드 및 설치방법은 구글링을 통해서 많이 구할 수 있다. 내경우는 배열에 필요한 인물의 이름을 입력하고 반복문을 통해서 여러명의 사진을 한번에 받도록 사용하였다. 한 인물당 200장의 사진을 받도록 하였다. * 참고 url https://velog.io/@jungeun-dev/Python-%EC%9B%B..
React 2022. 3. 20. 12:19
1) React + Teachable machine 프로젝트 - 닮은꼴 정치인 찾기 개요

* 이번 사이드 프로젝트로는 React 와 구글에서 만든 간단한 인공지능 모델을 만드는 사이트 Teachable Machine을 통해서 나와 닮은 꼴 정치인을 찾는 프로젝트 과정을 소개하려고 한다. 과거 유튜브 조코딩 채널을 통해서 웹기반으로 Teachable machine을 통해서 프로젝트를 만드는 것을 보고 다음에 꼭 해봐야겠다고 생각하던 걸 실행하기로 하였다. 해당 유튜브를 참고 하면서 React를 기반으로 카카오 애드핏을 넣는 것 까지 차례대로 작성할 예정이다. https://www.youtube.com/playlist?list=PLU9-uwewPMe2-vtJAgWB6SNhHcTjJDgEO 실전 수익형 웹, 앱 서비스 동물상 테스트 만들기 인공지능이 보는 나의 동물상 테스트를 주제로 웹, 앱 서비..
React 2022. 3. 20. 10:28
5) ReactNative를 통한 App개발 진행 상황

* 현재 열심히 찾아보면서 만들고 있으며 각 페이지에 대한 기능과 세부 내용등은 차례로 글로 정리할 예정입니다. App 구성 - 맨 처음 프로젝트를 계획했을 때 3가지 Tap으로 구성을 하려 했으며 각각은 1) 지도를 통하여 전국에 있는 국밥집을 표현하는 것 2) 내가 가보거나 좋아하는 국밥집을 추가하는 것 3) 미정 ?! 간단한 내기를 위한 게임? 으로 구성을 하려고 했다. 현재 대략적인 기능과 디자인을 해서 만들어 가고 있으며 이번글에서 간단히 만들어진 페이지의 기능 등을 살펴보려고 한다. 1), 3) 페이지 정도가 진행되고 있으며 2번의 경우는 Realm을 사용해서 할 예정으로 아직까지는 어떤 라이브러리와 형태로 할지 정하지 못하여 만들지 못하였다. 역시 디자인이 제일 중요하지만 현재는 기능과 공부..
[사이드 프로젝트]App개발 - 전국 국밥 찾기 2022. 1. 15. 00:24
[ReactNative_study_15]LayoutAnimation

*이 내용은 Nomad coder의 React Native Master Class를 듣고 공부하는 글입니다. https://reactnative.dev/docs/layoutanimation LayoutAnimation · React Native Automatically animates views to their new positions when the next layout happens. reactnative.dev -> State가 변하기 전에 layoutAnimation을 선언하여, state가 변경될 때 적용하도록 할 수 있음. 1) import // Android의 경우 UIManager도 불러와야함 import React, { useState } from "react"; import { Layo..
ReactNative 2021. 12. 20. 17:02
[ReactNative_study_14] useContext , Realm SDK DB

*이 내용은 Nomad coder의 React Native Master Class를 듣고 공부하는 글입니다. 1) Realm SDK DB 사용 https://docs.mongodb.com/realm/sdk/react-native/install/ Install Realm for React Native — MongoDB Realm Docs Home → MongoDB RealmThe MongoDB Realm React Native SDK enables development of React Native applications using the JavaScript and TypeScript languages. React Native enables you to build cross-platform iOS and A..
ReactNative 2021. 12. 20. 15:39
[ReactNative_study_13]PanResponder (스크린 화면 터치감지)

https://reactnative.dev/docs/panresponder PanResponder · React Native PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures. reactnative.dev 1) 스마트폰 화면에서 사용자의 터치입력을 받아서 위치를 변경할 수 있는 Api이다. 아래 처럼 여러 props가 있으며 docs를 통해서 사용법을 확인할 수 있다. Object { "getInteractionHandle": [Functi..
ReactNative 2021. 12. 12. 12:12
Prev 1 2 3 Next