비전공 개발자

마지막으로 수정하고 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 ..

최근 AI 분야의 딥러닝 공부를 시작했다. 석사 과정 중에 딥러닝 수업을 들었지만 시간이 지나니 기억이 나지 않아 처음부터 다시 시작했다. 딥러닝을 처음 공부하면 코딩에서 Hello World 같은 존재가 바로 Mnist일 것이다. Mnist는 숫자 손글씨 데이터로 딥러닝 모델을 트레이닝하고 테스트하는 프로젝트이다. Mnist를 공부하다가 이를 웹앱으로 만들어서 웹상에서 손글씨를 이미지를 업로드하고 결과를 확인하면 재밌겠다는 생각이 들었다. 그래서 AI 숫자 판별 앱이라는 이름으로 Mnist 웹앱을 개발해보았다. 웹사이트 접속 링크는 다음과 같다. 클라이언트 배포 링크 https://jb-mnist-client.herokuapp.com/ Mnist jb-mnist-client.herokuapp.com 서..