프로젝트 개요 프로젝트 명 에듀키트 디지털 트윈 모니터링 시스템 구축 구성원 멘토 @허재준 팀장 @김채은 팀원 @김희선 @진아영 @백동기 프로젝트 기간 프로젝트 총 기간 2022-03-16 ~ 2022-04-28 프로젝트 기획 기획 목적 기획 아이디어 산업 분야로 옮겨진 메타버스 및 디지털 트윈을 통해 기존의 자동화된 기기 관리를 웹 UI UX로 구현하고, 구현한 기기의 실시간 데이터 확인 및 불량품 판독을 가능하게 하여 기기 관리자로 하여금 기기제어 및 생산품 관리가 용이하도록 함. 프로젝트 방법 및 과정 기능 정의 불량품 확인 및 체크 edukit의 실시간 데이터를 three.js로 웹에서 확인 가능 웹에서 기기 클릭 후 방향키로 움직임을 조작 가능 비전인식으로 불량품 판별(주사위) 시 웹에서 체크 ..
프로젝트 개요 구성원 본인 포함 총 4명...이었다가 코로나로 인해 3명이 된다. 역할 분담 프론트 2명, 백엔드 2명(후에 1명) 내가 맡은 파트는 프론트에서 프론트 및 퍼블리싱 보조였다. 그리고 팀장도 맡았다. 프로젝트 기간 2022.02.21 - 2022.03.15(스프린트 총 3회) 스프린트는 콜라비로 진행하였다. 프로젝트 결과 노션으로 정리하였다. [Team 제주 넘는 차] 제주도 렌터카 사이트 구현 프로젝트 결과 broad-industry-94e.notion.site 프로젝트 회고 좋았던 점 코드를 좀 더 이해할 수 있게 됐다. 대체 각기 다른 코드를 어떻게 버무리는 건지 상상도 못하던 첫날과 구글링하여 코드를 넣고 맞게 수정하는 마지막 날을 비교해보니 많이 발전한 것 같다. 팀 소통이 활발하..
자바스크립트의 .map을 사용했다. 더 좋은 방법이 있을 것 같지만...일단 그냥 모두 적었다. 참고한 링크1 [javascript] 객체 배열에서 속성 값을 배열로 추출 - 리뷰나라 다음 구조의 JavaScript 객체 배열이 있습니다. objArray = [ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ]; 각 객체에서 필드를 추출하고 값을 포함하는 배열을 가져 오려고합니다 (예 : field foo는 array) [ daplus.net 참고한 링크2 Array.prototype.map() - JavaScript | MDN The map() method creates a new array populated with the results of ca..
거의 3일 내내 쩔쩔 맨 오류 store/apiUtil.js 파일에서 뭔가 오류가 난 건 알겠는데 어느 부분이 문제인지 아예 감도 못잡았었다. // store/apiUtil.js import axios from 'axios' const api = axios.create() // request(요청)시 아래의 로직이 인터셉트 된다. api.interceptors.request.use( async request => { // header.token 전송 const token = window.localStorage.getItem('accessToken') request.data.accesstoken = token return request }, async error => { return Promise.reje..
요구사항 (팀원분이 만들어주신 화면에) 인풋 폼 공란/유효성 체크 기능 넣기 전화번호 파이프 자동 삽입 views/reservation/Reservation.vue 로직은 회원가입 때 로직과 동일하다고 보면 된다. 근데 내가 bootstrap vue를 이용해서 짰기 때문인지는 모르겠는데 toLocaleString()가 충돌이 나서 금액에 들어가있던 해당 명령어를 빼야했다. 처음으로 다른 사람이 짠 아예 새로운 코드를 수정해본 것 같은데 신기했다. // ... 예약자 이름 이름은 한글 2자리 이상 입력해야 합니다 운전자 이름 이름은 한글 2자리 이상 입력해야 합니다 운전자 생년월일 핸드폰 번호 무통장 입금 우리**** *** **** ** 국민**** *** **** ** 농협**** *** **** **..
로컬 스토리지에 토큰을 담는 것은 이미 수업 때 해봤던 부분이라 그렇게 어렵지 않았다. 로그아웃 또한 마찬가지였다. 토큰 삭제를 어디서 할 지 고민했는데 그냥 수업 때처럼 프론트에서 삭제하기로 했다. vues/auth/logout.vue 로그아웃 페이지를 따로 생성했다. store/models/auth.js 로그아웃 로직을 추가 했다. 백엔드로 받지 않고 프론트에서 로컬 스토리지에 있는 토큰을 삭제하도록 했다. // ... mutations: { // 동기적 setTokenUser(state, data) { state.TokenUser = data }, setTokenLoading(state, data) { state.TokenLoading = data state.Error = null }, setErr..
요구 사항 1. 체크박스 중 '전체' 항목의 경우, 다른 항목들 중 하나라도 체크 해제 되면 체크가 해제 되어야 하고, '전체'에 체크 되면 모든 항목에 체크가 되어야 한다. 2. '전체' 항목에 체크 해제되면 모든 항목이 체크 해제 되어야 하고 체크되면 모든 항목이 체크 되어야 함 1번부터 코드를 짰다. reduce()를 이용해 구현했다. // views/main.vue // ... export default { data: function () { return { ranks: [ { name: '경형', value: true }, { name: '소형', value: true }, { name: '중형', value: true }, { name: '대형', value: true }, { name: '수..
회원가입 시 들어가야 할 항목은 다음과 같다. 이름 아이디 비밀번호 비밀번호 확인 생년월일 주소 전화번호 이메일 주소 그리고 디테일한 요구사항은 다음과 같다. 회원가입 / 로그인 창은 심플하게 구현한다. 비밀번호 및 비밀번호 확인은 암호화 하도록 한다. 비밀번호 및 비밀번호 확인란에서 capslock이 눌려 있을 시 고객에게 알려줘야 한다. 주소 입력은 카카오(다음) 우편번호 서비스 api를 이용해 구현한다. 근데 여기에 아이디, 이메일의 경우 중복 체크, 유효성 검사도 넣어야 할 것 같다. 0221-0222 이틀간 한 일 : 팀 회의 계획 및 스프린트 양식 미리 작성 팀 프로젝트를 위한 github repository 생성 및 콜라보레이터 추가 vue(+ bootstrap vue)로 먼저 폼 작성 주소..
