휴지통../IT (3) 썸네일형 리스트형 REACT + Spring Boot 를 이용한 선수 정보 웹페이지 1. 메인 화면 메인 페이지는 LeftSide와 RightSide로 나누었고, RightSide 왼쪽 화면은 경기 결과를 보여주는 화면, 오른쪽 화면은 Right 선수 정보를 볼 수 있는 Accordian과 경기를 추가할 수 있는 UpdateGame으로 적용하였다. -Accordian.js React-Bootstrap을 이용하여 Accodian을 통해 해당 포지션 별 선수 정보를 보여주는 페이지를 구성하였습니다. 해당 페이지에서는 골과 해당 선수의 골과 +,- 버튼으로 추가, 삭제할 수 있습니다. 선수를 불러오는 과정에서는 REST API Get Method를 사용하여, 선수단 정보를 불러왔습니다. 득점과 도움을 관리하는 경우에는 REST API Put Method를 이용하여, 득점과 도움을 추가, 삭제.. 졸업 작품 리뷰 ( React-웹 프로그램 ) 졸업 작품에서 웹페이지의 기능은 QR코드를 통해 로그인을 진행한 후 머신러닝을 통해 탈모를 예측해서 DB에 저장하는 역할을 하고 있습니다. - Client , Server 설정 웹 페이지에서는 로그인 , 측정 결과를 JSON 형태로 DB에 저장하는 역할을 하기 때문에 Client 와 Server를 나눌 필요가 있었다. 해당 서버는 프록시 서버로 지정하기로 했다. - Database 연결 데이터베이스를 연동시키기 위해서 mysql 모듈을 사용하여 DB와 연결해줍니다. DB에 저장하기 위해서 연동해둔 프록시 서버를 통해서 DB와 통신을 합니다. 위와 같이 5000포트를 입력했을시에 프록시 서버를 통해 API를 가져올 수 있다. - 초기 화면 (QR 로그인) 다음은 QR 코드를 통해서 로그인을 진행하는 페이지.. 졸업 작품 리뷰 ( 매직미러와 모니터 조립) 중간 고사 기간으로 중간고사 공부와 졸업작품 마무리를 하느라 조금 바빴던 것 같다. 중간고사와 졸업작품을 끝냈으니 이제 리뷰를 하려고 한다. - 졸업 작품 우리의 졸업 작품 주제는 머신러닝을 통해서 탈모를 측정하고, 값을 핸드폰으로 확인할 수 있는 스마트 거울이다. 스마트 거울은 라즈베리파이를 이용하기로 했다. 나는 졸업작품을 만드는데 있어서 REACT를 통한 웹페이지와 스마트 미러를 제작하는 역할을 맡았다. 안드로이드 앱은 성재가 담당했다. - 스마트 미러 스마트 미러를 제작하는 것은 생각보다 정말 정말 간단했다. 라즈베리 파이를 이용해서 Magic Mirror 오픈 소스를 다운 받으면 끝나는 작업이기 때문이였다. 문제는 해당 거울을 제작하는 과정이였다. 1. 모니터 구매 후 분해 캡스톤 디자인을 통해.. 이전 1 다음
