Vue.js/Way Home
-
[서버에서 데이터 받기] 토큰을 이용해서 이용자의 닉네임 표시하기Vue.js/Way Home 2022. 10. 17. 19:38
목표 : 사용자가 로그인을 했을 경우 UI를 다르게 표시한다. 해결 방법 : 1. 토큰을 이용해서 이용자의 닉네임을 localStorage에 저장한다. nameData = await axios.methods .$callAPI('POST', 'http://localhost:5000/checktoken',tokenrInformation) .catch((e) => { console.log(e); }); //추후 닉네임으로 수정 필요! const name: string = nameData.data.result.name; localStorage.setItem('name', name); 2. Header에서 토큰 유무로 화면이 달라지게 표시한다. function loginTrue() { if (localStorag..
-
[5주차] 서버에서 데이터 입력받아 arr에 저장하기Vue.js/Way Home 2022. 10. 11. 23:02
문제점 : [[Prototype]]: Promise안에 data.list 값을 추출하고 싶다. 실행 과정 : 1. function getData() { highwayApiData.then((data) => { const highwayList1: highway[] = data.data.list; console.log(highwayList1); }); } https://velog.io/@zzero9158/javascript-promise%EC%9D%98-%EA%B0%92-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0 [javascript] promise의 값 가져오기 promise result에 접근하는 방법 velog.io ==> function 과정을 거쳐야 하고, 지역 list로 생..
-
[5주차] TypeScript로 객체 배열 중복 제거 구현하기Vue.js/Way Home 2022. 10. 11. 16:06
문제점 : 카테고리 첫 번째 select문에서 같은 데이터값이 나열되고 있다. 해결 방법 : const removeDuplicates = (array: Array, key: string) => { return array.reduce((arr, item) => { const removed = arr.filter((i: any) => i[key] !== item[key]); return [...removed, item]; }, []); }; const high: highway[] = removeDuplicates(highwayList, 'routeNm'); routeNm 값이 중복되면 객체 value를 제거하게 작성했다. 참고 사이트 : https://ko.code-paper.com/javascript/ex..
-
[모달창 구현] 모달창 구현 방법Vue.js/Way Home 2022. 9. 26. 18:31
목적 : 모달창 열기 닫기 버튼 생성 코드 : 공통 닫기 (생략) export default { name: 'qaView', data() { return { modal: false, } } } body { margin : 0 } div { box-sizing: border-box; } .black-bg { width: 100%; height : 100%; background :rgba(111, 110, 110, 0.5); position: fixed; padding :20px; } .white-bg { width :100%; background: white; border-radius: 8px; padding: 20px; } 실행화면 :