본문 바로가기
반응형

Projects64

[OpenRoadmaps] 3. 이메일 및 OAuth2 로그인 구현 Intro 사용자가 회원가입 및 로그인하는 방법으로 이메일 / OAuth2 두가지가 있다. 위 기능을 구현하며 중요했던 부분들을 정리해보자. 이메일 로그인 Frontend 입력값 검증 useForm Hook을 사용하여 입력값을 검증했다. regex 형식으로 검증하며, 패턴에 일치하지 않을 시 input 아래에 에러 메시지가 뜨도록 구현했다. 이메일 로그인 요청 API 세션으로 사용자를 인증하기 때문에 로그인 시 쿠키를 받고, 이후 요청마다 해당 쿠키를 전송해야 한다. 쿠키와 함께 요청하기 위해 withCredentials를 true로 설정해야 하는데, 모든 요청에 해당 속성을 넣는건 번거로우니 true로 설정되어있는 axiosInstance를 만들었다. import axios from "axios"; c.. 2022. 11. 28.
[OpenRoadmaps] 2. 프로젝트 구조 설계 및 환경 설정 Backend Spring Boot 다른 프레임워크들도 있지만 그동안 Spring을 공부해왔고, 시간이 별로 없기 때문에 가장 익숙한 프레임워크로 선택했다. 프로젝트는 Intellij에서 제공해주는 제너레이터를 통해 생성했다. Gradle 설정은 다음과 같다. dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' // Spring Data JPA implementation 'org.springframework.boot:spring-boot-starter-data-redis' // Redis implementation 'org.springframework.boot:spring-boot-starter-oaut.. 2022. 11. 28.
[OpenRoadmaps] 1. 프로젝트 시작 Intro 드디어 마지막 학기다. 그동안 공부한 지식들로 졸업작품을 만들어야 한다. 사실 졸업작품 주제로 미리 생각해둔게 있었는데, 한 줄로 정리하면 다음과 같다. 자신만의 로드맵을 만들고, 다른 사람이 만든 로드맵을 따라 공부할 수 있는 웹사이트 프로젝트 이름은 OpenTutorials.org 에서 따왔고, OpenRoadmaps.xxx 도메인으로 배포도 해볼 예정이다. 백엔드는 미리 공부해둔게 있어서 큰 걱정이 없지만, 프론트엔드 개발에 시간이 꽤나 들어갈 것 같다. 프로젝트 기능 회원가입 / 로그인 Email / Password 로그인 OAuth2 (Google / Github) 로그인 로드맵 로드맵 보기 로드맵 항목과 연결선으로 구성된 트리 구조 (최대 1개의 부모 항목을 가질 수 있음) 로그인된.. 2022. 11. 27.
[센서 모니터링 시스템] 13. Android Chart 구현 (프로젝트 종료) Intro 이제 마지막이다. 이전에 받아온 센서 데이터를 차트 형태로 출력해보자. 차트 라이브러리는 MPAndroidChart를 사용했다. GitHub - PhilJay/MPAndroidChart: A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubb A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations. - GitHub - PhilJay/MPAndroidCha.. 2022. 8. 19.
[센서 모니터링 시스템] 12. Android Request 구현 Intro 시간이 조금 남아서 간단하게라도 안드로이드 앱을 만들어볼 예정이다. 우선 서버로 센서 데이터 Request를 보내고, Response를 받는 것부터 해보자. 언어는 Kotlin을 사용했다. Kotlin에 편한 함수들이 많다. HTTP 라이브러리로는 Volley를 사용했다. https://developer.android.com/training/volley?hl=ko Volley 개요 | Android 개발자 | Android Developers Volley 개요 Volley는 Android 앱의 네트워킹을 더 쉽고, 무엇보다도 더 빠르게 하는 HTTP 라이브러리입니다. Volley는 GitHub에서 사용할 수 있습니다. Volley를 사용하면 다음과 같은 이점이 있습니다. 네트 developer.. 2022. 8. 19.
[센서 모니터링 시스템] 11. Rechart를 사용한 센서 데이터 시각화 Intro 인터넷을 찾아보다 Rechart라는 좋은 그래프 패키지를 찾았다. 디자인도 괜찮고 사용방법도 어렵지 않아 이 패키지로 센서 데이터를 시각화 해보기로 했다. Rechart 패키지 설치 우선 rechart 패키지를 설치해주자. npm install recharts 그 다음 App.js에 아래의 코드를 추가한 뒤에 차트가 잘 나오는지 테스트해보자. import React, { PureComponent } from 'react'; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts'; const data = [ { name: 'Page A', uv: 4000, pv: 2400, amt: 2400,.. 2022. 8. 19.
[센서 모니터링 시스템] 10. React 개발환경 구성 Intro 아래의 글을 참고하여 개발환경을 구성했다. https://velog.io/@u-nij/Spring-Boot-React.js-개발환경-세팅 Spring Boot + React.js 개발환경 연동하기 Spring Boot와 React.js를 연동해 개발환경을 만들고, 빌드해서 jar 파일로까지 만들어보는 과정입니다. velog.io React APP 생성 시작하기 전 npx 명령어를 사용하기 위해 Node.JS를 설치해야 한다. 아래의 링크에서 다운로드 받을 수 있다. https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.or.. 2022. 8. 19.
[센서 모니터링 시스템] 9. 라즈베리파이 Request 구현 라즈베리파이 Request 구현 센서 데이터 측정과 서버 API가 준비되었으니 이제 측정한 센서 데이터를 서버로 전송해보자. requests 패키지를 사용할 것이기 때문에 만약 없다면 설치해준다. pip3 install requests 우선 조회 API를 통해 request / response가 잘 되는지 확인하자. 원래 PC에서 무선랜카드로 핫스팟을 틀어서 SSH에 연결했었는데, 인터넷을 찾아보니 Windows10에서 핫스팟을 틀 경우 내부적으로 IP를 변경되어 연결된 기기에서 Windows로 Ping을 못한다고 한다. 그래서 휴대폰에서 핫스팟을 틀고, 라즈베리파이와 PC를 휴대폰에 연결했다. https://superuser.com/questions/1354338/cant-ping-when-mobile.. 2022. 8. 18.
[센서 모니터링 시스템] 8. Service, REST Controller 개발 Intro 이전에 Repository를 만들었으니, 이제 Service와 Controller를 만들면 된다. DTO 생성 Service에선 RequestDTO를 받아 Repository를 제어하고, Entity를 다시 DTO로 변환해서 반환해주는 역할을 한다. 때문에 Service 및 Controller에서 반환해줄 DTO 클래스를 새로 만들어야 한다. SensorDto.java Sensor 엔티티에서 클라이언트에게 넘겨주지 않아도 되는 ID와 Client를 제외하였다. package com.example.sensormonitoringserver.dto; import com.example.sensormonitoringserver.entity.Sensor; import lombok.AllArgsConstr.. 2022. 8. 18.
반응형