자바스크립트의 .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)로 먼저 폼 작성 주소..
부트캠프에서 팀프로젝트를 하게 됐다. 프로젝트명 제주도 렌터카 회사(가상)의 사이트 기간 220221 - 220315 팀원 분 중에 체크박스로 결과를 필터링하는 기능 등을 사용해본 분이 계셔서 그 기능을 적극적으로 활용 가능한 주제로 잡았다. 나는 프론트(+조장)를 맡았고 총 프론트 2명, 백엔드 2명으로 4명이 한 팀이 되었다. 팀회의 끝에 정한 계획은 이렇다. 계획 요구사항 리스트 로그인, 회원가입 기능 회원가입 항목 이름 아이디 비밀번호 비밀번호 확인 생년월일 주소 전화번호 이메일 주소 정렬 기능 가격 브랜드 인기도 차량 등급 연료 날짜 시간대 이미지 클릭 시 상세 정보 페이지로 연결 기능 예약(결제) 결제 창 항목 이름(예약자, 운전자) 연락처(예약자, 운전자) 운전자 생년월일 결제 수단 확인 사..
First session TDD의 철학을 적용해보는 피드백 주도 학습 방법 - 메이커준 TDD 장점 난이도를 잘 조절할 수 있게 됨 => 스트레스를 관리할 수 있게 됨 => 에너지 관리를 할 수 있게 됨 => 기분 좋게 변화하는 짜릿함을 느낄 수 있다 TDD란? Test Driven Development 저서 '테스트 주도 개발' - 켄트 벡 테스트를 먼저 만들고, 테스트를 통과하기 위한 코드를 짜는 개발 방법 ex. 생년월일을 입력 받아서 나이를 출력해주는 프로그램 테스트를 먼저 만들고, 실제 코드를 작성하고, 원하는 대로 동작하는지 빠르게 피드백을 받는 것 => 테스트 코드는 의도치 않은 유용한 부산물 / 핵심은 더 자주, 더 빨리 '피드백'을 받는 것 결정과 피드백 사이의 갭을 좁히기 결정 - 내가..
