기존 이미지 파비콘으로 바꾸기 왼쪽의 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..
계속 이런 에러가 발생해서 미칠 노릇이었다. 실제로 구동하는데 눈에 띄지는 않아서 일단 콘솔창에서만 뜨게 해놓고 다른 기능을 하고 있었는데... 원인은 매우 간단했다. 검색해보니 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 (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 에러를 ..
이번 포스팅은 CDN 코드를 사용하지 않고 VS CODE에서 직접 설치해 사용하는 방법에 대해 소개한다. Vue 란? MVVM 패턴의 View Model 레이어 라이브러리이다. Vue 생성하는 방법 Vue, VSCode 환경설정. Axios, Vue-Router 프로젝트 생성 vscode Axios, Vue-Router 설치 VSCODE에서 터미널 > 새 터미널 실행 맥 개발환경 세팅, 맥에 Vue.js 설치 & 프로젝트 만들기 (w. Visual Studio Code) Vue.js 설치 vscode 를 설치한다 자신의 버전에 맞는 vscode 를 설치 skylarcoding.tistory.com Vue의 Directive Vue 의 기본적인 Directive (지시자) 는 아래 CDN 코드를 이용한 사..
1,2편 보러가기 Vue.js 사용법 1 (CDN 코드 이용) Vue란? front 앱의 기본 뼈대와 api를 제공하는 Java Script 프레임 워크이다. 컴포넌트 베이스 개발이다. 컴포넌트는 (화면 ui 구성) , data, 메서드로 구성된다. 보다 동적이고 상호 호환적인 웹 애플리 skylarcoding.tistory.com Vue.js 사용법 2 (CDN 코드 이용) Vue란? 1편 보러가가기 ⬇️ Vue.js 사용법 1 (CDN 코드 이용) Vue란? front 앱의 기본 뼈대와 api를 제공하는 Java Script 프레임 워크이다. 컴포넌트 베이스 개발이다. 컴포넌트는 (화면 ui 구성) , data, 메서 skylarcoding.tistory.com Directive (지시자) 응용 (사..
vscode Axios, Vue-Router 설치 VSCODE에서 터미널 > 새 터미널 실행 맥 개발환경 세팅, 맥에 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 Axios, Vue-Router 설치 하나씩 입력해준다. npm install axios..
