기존 이미지 파비콘으로 바꾸기 왼쪽의 Vue 기본 이미지에서 오른쪽의 Plantiful만의 이미지로 변경했다. 파비콘 만들기 우선 이미지에 넣을 파비콘을 만들어야한다. 난 두번째 사이트에서 직접 도트를 찍었다. 이미지 파비콘으로 변환하기 https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 파비콘 직접 만들기 https://www.favicon.cc/ fa..
this의 사용 this는 객체를 다시 호출할때 내가 호출하는 것이 이전에 정의되었던 '그' 객체를 호출하는 것이 맞다고 인식시켜주기 위한 것이다. 'this'의 값은 함수가 어떻게 호출되느냐에 따라 동적으로 결정된다. 함수가 객체의 메서드로 호출될 때: 'this'는 해당 메서드를 호출한 객체를 참조한다. 함수가 일반 함수로 호출될 때: 'this'는 전역 객체인 'window'를 참조한다. (브라우저 환경에서) 함수가 생성자 함수로 호출될 때: 'this'는 생성된 객체를 참조한다. 화살표 함수 내에서: 'this'는 주변 스코프의 'this' 값을 유지한다. 'this'를 사용하여 메서드 내에서 객체의 속성이나 메서드에 접근할 수 있다. this 아래의 예시에서 sayName function은 선언..
계속 이런 에러가 발생해서 미칠 노릇이었다. 실제로 구동하는데 눈에 띄지는 않아서 일단 콘솔창에서만 뜨게 해놓고 다른 기능을 하고 있었는데... 원인은 매우 간단했다. 검색해보니 400, 500, 405 에러는 서버랑 원활히 송수신이 안돼서 발생하는 문제라는 것을 보았다. 코드를 다시 분석하던 중에,,,아주 멍청한 실수를 했다는 것을 발견했다. 익숙하지 않은 Promise 를 쓰다보니 위에서 promise 가 위에서 const self = this; 를 append 해줄 것이라 생각했다. 당연함. 경로가 올바르지 않았음 !! const self = this; 즉, 코드 한줄 추가했더니 에러가 싹 사라졌다. 간만에 보는 클린한 콘솔창 ㅜ0ㅜ 나와같은 문제가 발생하는 분들, 경로 잘 확인해보세요ㅜ 이 실수를..
나의 문제 상황 구독 모집글이 진행중으로 변경되면 캘린더에 구독 일정 추가하기 버튼이 활성화되어야 한다. 시작일 ~ 끝일을 한번에 추가하려다 보니 아래와 같은 상황이 발생. 구독 일정이 이렇게까지 필요없기도 하고 시작날짜, 끝날짜만 있으면 된다고 생각했다. 한마디로, 구독 일정 추가하기 버튼 클릭 ➡️ 구독 시작일 일정, 구독 종료일 일정 두개 추가 내 지식수준에서는 formdata를 두번 작성해서 Axios 를 두번 보내는 방법을 생각했다. 그런데, 코드 길이도 길어지고 가독성도 떨어져서.. 아래와 같이 보내면된다. 그러면 createEvent 개수에 맞게 코드를 보낸다. 공통 부분들은 내버려두고, 달라지는 부분들에 넣을 값들을 오른편에 넣어준다. createEvent 밑에 넣을 값들을 순서대로 넣어준..
날짜 받아오는 방법 일반 html이랑 같게 input type="date"로 작성하면 된다. 부트스트랩을 사용해서인가 이미 우측과 같은 모양으로 날짜 선택이 가능하였다. 오늘 이전 날짜 제한 input date에 :min으로 동적 속성 부여. :min="minDate" :min 속성 또는 v-bind:min 디렉티브: :min 속성은 Vue.js의 데이터와 연동되어 동적인 값을 가진다. 데이터의 변경에 따라 속성 값이 업데이트되며, 데이터의 변경에 따라 동적으로 속성이 반영된다. computed에 minDate를 정의해준다. 며칠 이후부터 선택 가능한 제약조건 'n' 부분에 원하는 날짜를 입력하여, 위의 포맷에 return 부분을 변경해준다. dayjs().add(n, 'day').format('YYYY..
Dayjs 사용방법 dayjs 설치하기. Vue의 터미널에서 dayjs를 install한다. ⬇️ 터미널 여는 방법 맥 개발환경 세팅, 맥에 Vue.js 설치 & 프로젝트 만들기 (w. Visual Studio Code) Vue.js 설치 vscode 를 설치한다 자신의 버전에 맞는 vscode 를 설치하면 된다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugg skylarcoding.tistory.com npm install dayjs --save Vue.js에서 입력..
created: function () { //아래처럼 바로 등록도 가능 this.loginId = sessionStorage.getItem('loginId') this const self = this; self.$axios.get('http://localhost:8181/subscribeboard/' + self.subscribe_num) .then(function (res) { if (res.status == 200) { self.dto = res.data.dto; // 출금일 날짜 변환 self.paymentDate = dayjs(self.dto.payment_date).format('YYYY-MM-DD'); // 구독 시작날짜와 구독 끝 날짜 변환 self.startDate = dayjs(self...
오류메세지 Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:172:14) 위와같은 오류메세지. demo 폴더에 WebConfig.java에다가 아래 코드를 생성해줬다. 어떤 분 코드를 참고했는데, 워낙 이거저거 해보고 빼보고해서 누구였는지 기억안남,, 알려주시면 바로 출처 달게요. 그분은 다른 곳에 다른 것도 추가했는데, 나는 이것만 추가하니까 되더라. 오히려 다른거 추가하면 안된다. java spring boot, Vue 사용중이다. package com.example.demo; import org.springfram..
전체 검색 (findAll) 에서 정렬하는 방법 ASC 는 오름차순, DESC는 내림차순이다. dao.findAll(Sort.by(Sort.Direction.ASC, "기준 컬럼명") ArrayList list = (ArrayList) dao.findAll(Sort.by(Sort.Direction.ASC, "SubscribeNum")); 결과 DAO 에서 순서대로 정렬하는 방법 ArrayList findBySiteOrderBySubscribeNumAsc(String site); 참고 블로그 JPA findAll() 사용 시 정렬하여 반환하는 방법 List list명 = repository명.findAll(Sort.by(Sort.Direction.DESC/ASC, "기준컬럼명")); JPA에서 findAl..
Network Error (CORS blocked) 아래와 같은 오류가 떴다. 오류만 안보이게 하기 위해서는 아래 작업을 수행하면 되는데, 오류에 대한 근본적인 해결방법은 아니다. yourPromise() .then(result => { // 정상적인 처리 작업 }) .catch(error => { // 예외 처리 작업 console.error(error); }); [Vue] CORS 에러 해결하기 장고로 api만들고 vue에서 response를 받으려는데 cors 에러가 뜬다.proxy를 설정해 주면 해결할 수 있었음.proxy에 도메인만 써주면 된다.\*\* vue.config.js 에서 써준 proxy가 baseurl이 되고, axios에는 뒷부분 velog.io 위 블로그를 따라 CORS 에러를 ..
