비전공 개발자

여기서부터는 React를 이용한 화면 코드를 설명한다. client.js에서는 Main.js의 코드를 index.html의 root라는 id를 가진 div 태그에 렌더링 한다. Main.js부터 Main.js에서 사용하는 컴포넌트를 설명하겠다. Main.js import React, { useState, useEffect, useRef } from 'react'; import Chracter from './component/Character'; import Background from './component/Background'; import Enemy from './component/Enemy'; import { makeStyles } from '@material-ui/core'; import Butt..

공룡 점프 게임은 리액트만 이용하여 구현하였다. 작성한 파일은 다음과 같다. package.json { "name": "react-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node server.js", "dev": "webpack-dev-server --hot", "build": "webpack" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.7.4", "@babel/plugin-proposal-class-properties": "^7.7.4", "@babel/preset-env": "^7.7.4", "..

리액트를 이용하여 간단한 웹게임을 구현해보고자 이 프로젝트를 시작하였다. 인터넷 연결이 되지 않은 상태에서 크롬을 실행하면 나오는 공룡 게임에서 착안하였다. 다들 한 번씩은 해본 게임일 것이다. 공룡 점프게임은 이와 매우 유사한 게임이다. 비슷하게 장애물을 넘는 게임인데 선인장 대신 병균처럼 생긴 캐릭터를 넘는다는 점만 제외하면 같다. 모바일에서 접속하는 경우는 고려하지 않았다. 웹게임 배포 링크는 다음과 같다. https://jb-game-jump.herokuapp.com/ Jump Game jb-game-jump.herokuapp.com 게임 실행화면은 다음과 같다. 첫 화면을 클릭하면 게임이 시작된다. 병균이 한마리씩 공룡에 가까이 오게 되고 스페이스바를 눌러 점프해 병균을 피한다. 만약 피하는데 ..

마지막으로 수정하고 API와 리액트 앱을 배포하고 마무리한다. 기간 프로젝트 개발 기간 : 2019년 11월 1일 ~ 2019년 11월 15일 (2주) 블로그 정리 기간 : 2019년 12월 15일 ~2020년 1월 1일 (2주) 클라이언트 배포 링크 https://jb-mnist-client.herokuapp.com/ Mnist jb-mnist-client.herokuapp.com 서버 배포 링크 https://jb-mnist-server.herokuapp.com/ https://jb-mnist-server.herokuapp.com/ jb-mnist-server.herokuapp.com 클라이언트 소스 https://github.com/Jongbeom2/mnist-client Jongbeom2/mnis..

React 프로젝트를 완성하였으므로 웹 어플리케이션을 heroku에 배포해야 한다. 여기서 New 버튼을 눌러 새로운 앱을 생성한다. 앱을 생성하면 다음과 같이 이름이 뜨고 클릭하여 상세 화면으로 접속한다. 상세 화면에서는 Deploy 버튼을 클릭하여 배포 방법을 확인한다. 1. GitHub repository를 연결한다. 2. GitHub repository에 push하면 자동으로 빌드 및 배포가 되도록 설정한다. 3. git에 푸시 마지막으로 명령어를 입력하여 git repository에 작성한 코드를 저장하도록 한다. $ git add . $ git commit -am "make it better" $ git push origin master 4. 확인 Heroku는 git에 새로운 push가 발생..

여기서부터는 React를 이용한 화면 코드를 설명한다. 이전 글에서는 client.js까지 설명하였다. client.js에서는 Main.js의 코드를 index.html의 root라는 id를 가진 div 태그에 렌더링 한다. 여기서부터 Main.js부터 Main.js에서 사용하는 컴포넌트를 설명하겠다. Main.js import React from 'react'; import AppBar from '@material-ui/core/AppBar'; import Tabs from '@material-ui/core/Tabs'; import Tab from '@material-ui/core/Tab'; import PredictWithFile from './component/PredictWithFile'; imp..

인공지능으로 숫자를 판별하는 API를 작성하였으므로 API를 호출할 화면을 만들어야 한다. 다음과 같이 React로 앱을 생성하고 설정한다. 작성한 파일은 다음과 같다. index.html 웹 어플리케이션의 첫 페이지이다. Webpack을 이용하여 빌드한 결과물을 public이라는 폴더에 app.js라는 파일로 저장하므로 다음과 같이 설정하였다. package.json { "name": "react-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node server.js", "dev": "webpack-dev-server --hot", "build": "webpack" }, "author": "..

제작한 API를 웹 어플리케이션에서 사용하기 위해서는 서버에 배포를 해야 한다. 이를 위해 Heroku를 이용한다. Heroku는 제작한 어플리케이션을 배포하는 서버를 제공하는 서비스다. 이를 위해 Heroku를 접속한다. 로그인 후 대시보드를 확인하면 다음과 같은 화면이 나온다. 여기서 New 버튼을 눌러 새로운 앱을 생성한다. 앱을 생성하면 다음과 같이 이름이 뜨고 클릭하여 상세 화면으로 접속한다. 상세 화면에서는 Deploy 버튼을 클릭하여 배포 방법을 확인한다. 1. GitHub repository를 연결한다. 2. GitHub repository에 push하면 자동으로 빌드 및 배포가 되도록 설정한다. 3. Procfile 파일 작성 같은 경로에 Profile이라는 파일을 생성하고 다음과 같이 ..

이전 글에서는 숫자를 판별하는 딥러닝 모델을 구현하고 결과값을 반환하는 함수까지 작성하였다. 이 함수를 웹에서 사용하기 위해서는 이 함수를 API로 작성해야 한다. 이를 위해 python의 flask를 이용하였다. Flask란 python 웹 어플리케이션을 만드는 프레임워크이다. Django와 더불어 가장 많이 쓰이는 python 웹 애플리케이션 프레임워크이다. 심플한 기능만 구현하기에는 flask가 더 적합하므로 flask를 이용하였다. 아나콘다를 설치하면 많은 라이브러리들이 설치되지만 다 설치되지 않을 수도 있다. 시작메뉴에서 Anaconda Prompt를 실행하면 콘솔 창이 뜨는데 여기서 필요한 라이브러리들을 설치해준다. Flask 설치 pip install flask Flask Cors 설치 pi..

딥러닝에 관한 상세한 내용을 다루는 글이 아니기 때문에 딥러닝과 Mnist에 관한 설명은 생략 하겠다. 대부분의 내용은 밑바닥부터 시작한 딥러닝이라는 책을 참고하였다. 여기에 숫자 손글씨를 이미지로 실제 숫자를 판별하는 딥러닝 모델이 존재하므로 그대로 사용하기로 하였다. 파이썬과 딥러닝 모델을 사용하기 위해 아나콘다를 설치하였다. https://www.anaconda.com/distribution/#download-section Anaconda Python/R Distribution - Free Download Anaconda Distribution is the world's most popular Python data science platform. Download the free version to ..