개발쬬

화면에 데이터를 뿌려서 확인할 경우 깔끔하게 정리해서 보고싶을때 사용하기 좋은 css 코드이다 .pre { white-space: pre; }

# 해당 날짜를 선택했을때, 선택된 날짜 기준으로 live 화면인 리스트 출력 로직구현 👉 reconstruction/filters /** * 시작날짜와 종료날짜를 계산해 오늘날짜가 기간 상에 있는지는 반환해줍니다 * live : 기간안에 오늘날짜가 있는 경우 * finish : 종료된 경우 * ready : 준비중인경우 * @param {*} startDate 시작날짜 * @param {*} endDate 종료날짜 * @param {*} today 오늘날짜 * @returns */ export const CheckRange = (startDate, endDate, today) => { let endValue = today.localeCompare(endDate); let startValue = toda..

최근 여러가지 개발을 진행하다보면서 여러가지 개발환경에 접근하게 됐다. 예를들어 Next 기반의 React 라던가 Vue 환경이라던가. 사실 회사에서 프로젝트를 하면서 얻게 된 상식 중 하나가 Vue 에서는 환경변수명 접두사에 꼭 VUE_APP 을 붙여줘야한다는 사실이였다. ✔️ Vue 환경변수 설정 접두사에 꼭 VUE_APP 을 붙여줘야한다는 사실이였다. VUE_APP_API_URL= "url" 그리고 이번 사이드 프로젝트에 들어가면서 Next 기반으로 작업해 나가는데 계속해서 환경변수가 읽히지 않는 현상이 일어났다. 보통 env 키를 확인하려면 콘솔에 process.env.{API키명} 을 붙여주면 서버가 콘솔에 찍힌다. 근데 계속해서 undefined 가 표시됐다. ✔️ .env 를 확인할때 pro..

Vue2 에서 Cookie 설정하기 쿠키 있나 없나 확인 > 오늘하루보지않기 클릭액션 > 쿠키 저장 > 테스트 쿠키 저장에 대한 테스트는 1분으로 잡고 1분 뒤, 쿠키가 정상으로 작동되면서 팝업창의 여부를 체크하면된다! 그리고 다시 하루로 잡고 애플리케이션 > 쿠키 에서 정상적으로 값이 들어가 있는지 확인..! mounted(){ this.getCookie(); }, methods:{ //쿠키확인 getCookie() { let cookiedata = document.cookie; if (cookiedata.indexOf("todayCookie=done") < 0) { this.floatingInfo = true; //쿠키 없으면 띄우기 } else { this.floatingInfo = false; /..

Vue2로 작업 중, edit 기능을 사용해야 한 경우가 생겼다. 물론 Vue 기능을 사용해 에디터 기능을 내멋대로 구현하면 너무나도 좋겠지만.. 기획 요구사항 날짜를 맞춰야하기때문에 사용한 라이브러리다 ! 사실 에디터 기능을 갖춘 라이브러리가 많은데 일단 사용할때 직관적이지가 않고 vue 전용으로 나온 라이브러리라 예시도 간결해서 너무 좋았다. 간단하게 사용하고 싶은 기능만 추가해서 구현이 가능한 라이브러리라 여기저기 유용하게 사용이 가능 할 것 같다. npm 설치 npm install @mycure/vue-wysiwyg main.js import Vue from 'vue'; import VueWysiwyg from '@mycure/vue-wysiwyg'; Vue.use(VueWysiwyg); test..

문제를 접하다 기존 dev 환경에서 빌드하고 배포할땐 전혀 문제가 되지 않았는데 이상하게 production 빌드 시 특정 스타일이 무너지기 시작했다. 여러가지 시도를 거쳤지만 뭐가 문젠지 찾지 못하고 요소 하나하나 뒤져보다 발견한게 해당 css 파일 중 reset.css 로 저장된 파일이 컴포넌트 스타일 적용을 막고있는 문제였다. ㅠㅠ (대체 왜..) 여러번의 빌드로 테스트를 해보니 production으로 빌드되면서 min 파일 변환되면서 스타일이 적용되는 순서에서 문제가 있다는것을 발견했다. 프로젝트 기획부터 문제 사실 중소에 다니는 여러 개발자들이 겪는 가장 큰 문제라고 생각하는게, 바로 프로젝트 기획이다. 아무래도 개발자는 적고 앱,웹 사업을 하고싶어하는 회사는 많으니 적은 인원으로 여러가지 사업..

axios 문서 https://axios-http.com/kr/docs/interceptors 인터셉터 | Axios Docs 인터셉터 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다. axios.interceptors.request.use(function (config) { return config; }, function (error) { return Promise.reject(error); }); axios.interceptors.response.use(f axios-http.com axios를 활용한 통신이 많아지다보면 통신 전처리, 후처리에 대한 고민이 쌓여만간다.. interceptors는 원래는 요청이 주고받을때 통신 틈새에 액션을 취하는 역할이지만 ㅎㅎ 작업을 하다보..

환경 : Vue2 + vue-router@3.5.4 + vuex@3 main.js const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ) ? true : false; //전역설정 Object.defineProperty(Vue.prototype, "$isMobileDevice", { value: isMobileDevice, }); //this.$isMobileDevice 로 활용이 가능하다 Test.vue if (this.$isMobileDevice === true) { url = res.data.mobile_url; } else { url = res.da..