WebApp (100) 썸네일형 리스트형 WebApp동물상앱 - react native로 앱만들기 www.youtube.com/watch?v=8eIQNfPbRms&list=PLU9-uwewPMe2-vtJAgWB6SNhHcTjJDgEO&index=7 1.goormIDE에서 react Native로 컨테이너 생성 2. expo react Native webview로 구글검색 (1) - 터미널창에 expo설치 expo install react-native-webview (2) - app.js파일에 안에 아래 코드 복붙 import * as React from 'react'; import { WebView } from 'react-native-webview'; export default class App extends React.Component { render() { return ; } } (3) - 위코.. WebApp동물상앱 - 네이버웹마스터, 크롤러 등록, 검색엔진최적화 searchadvisor.naver.com/console/board [네이버: 로그인] 안전한 로그인을 위해 주소창의 URL과 자물쇠 마크를 확인하세요! nid.naver.com www.youtube.com/watch?v=xGkftwkoJK4 최적화 SEO WepApp_동물상앱 - netlify로 웹호스팅, 도메인연결 1. 나의 App github 레파지토리에 푸쉬하기 (1) - goormIDE 터미널에서 git명령어로 github 저장소에 push 2. netlify를 이용한 웹호스팅하기 www.netlify.com/ Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free! www.netlify.com (1) - github에 있는 나의 App(index.html)과 연결시켜 주기 위해 New .. WebApp_동물상앱 - 공유하기버튼 만들기 1. AddThis 이용하여 공유하기 버튼 만들기 www.addthis.com/dashboard?from=register#tool-config/pub/ra-5ff7fb6ae0e30acb/tool-select/share Sign In - AddThis www.addthis.com - 좌측 상단 여러가지 옵션들을 통해 공유할 플랫폼 갯수 및 디자인등을 설정해주고 Activate Tool을 클릭 - 아래 코드를 나의 App 코드 head태그에 붙여넣기하여 addThis와 동기화시켜줌 - 공유하기버튼을 넣고 싶은 위치에 아래 코드를 나의App코등 복붙한다 - 결과 WebApp_동물상앱 - 예측결과 순서대로 나타내기, 1.닮은꼴 %가 높은 동물이 제일 위쪽에 표시되도록 하기 - 예측결과와 관련된 predict()함수를 살펴보자 - 변수 prediction을 console에 나타내보자 - 아래 console창에서 볼 수있 듯 변수 prediction에는 배열이 들어있으며 배열의 원소로 예측결과가 객체의 형식으로 여러 키와 속성을 가진상태로 들어가 있는 것을 확인 할 수있다 - 이제 배열안의 객체를 probability라는 속성의 값(닮은정도 %)의 크기순서로 나열해보자 - sort라는 함수를 활용하여 아래와 같이 코드를 구현한다 - 이제 probability라는 속성의 값(닮은정도 %)이 가장 높은 객체가 배열의 0번째 원소로 오게 된다 2. prediction[0].className으로 찾아낸 닮은%가 높은 동물이름이.. WebApp_동물상앱 - 예측,시작 버튼 없애기 1. 우리는 사진을 업로드하자마자 우리의 App모델을 불러오는 start버튼을 눌렀을때의 init()함수를 실행하게 하고 싶다 (1) - 따라서 기존 start버튼을 지우고 안에있는 init()함수를 복사 *init()함수는 우리의 인공지능으로 학습시킨 모듈을 불러와서 동물상%를 기억하고 저장해둔다 (2) - 사진을 업로드하여 실행되는 input태그 안의 readURL()함수안에 (3) - init()함수를 집어 넣는다 *readURL함수는 이미지를 업로드할때 image-upload-wrap(이미지업로드화면)을 .hide로 숨기고 file-upload-content 즉 업로드한 이미지를 show()로 보여준다 2. 사진을 업로드하자마자 init()으로 모듈을 불러오고 바로 예측까지 하게 만들어보자 (1).. WebApp_동물상앱 - disqus로 페이스북 댓글창 구현 1.disqus로 페이스북 댓글창 구현하기 (1) - disqus -> get started -> i want to install Disqus on my site (2) - subscribe Now 클릭 (3) - manually with Universal Code 클릭 (4) - 1번코드 복사 (5) - 우리의 App의 script가 시작되는 곳에 붙여넣기를 하면 페이스북 댓글창이 구현됨ㅇ WebApp_동물상앱 - 웹어플 디자인(최종) 1. By 조코딩 유튜브 채널[이미지] 개선 (1). hover - By 조코딩 유튜브 채널 텍스트가 있는 a태그를 찾아서 개발자 도구의 Filter 우측 :hov를 클릭 *:hober = 마우스를 올려놨을때 변함 - hover를 체크하면 아 래 a:hover{}가 생기는데 그 안의 속성color를 주황색으로 바꿔준다 (2). container, mt-숫자 *mt-숫자 : margin-top을 적절히 주는 BootStrap class *pt-숫자 : padding-top을 적절히 주는 BootStrap class *container : 적절히 안쪽으로 넣어주는 BootStrap class - youtube-cover class에 container 와 mt-5 BootStrap class를 주어 위치와 마.. 이전 1 2 3 4 ··· 13 다음
