개발쬬

ES5 버전까지는 var 를 사용합니다. ES6 버전에서는 let 과 const 라고 var의 최신버전이 나왔다. let👉 값을 수정할 수 있는 변수를 선언할 때 사용 const👉 값을 변경할 수 없는 상수에 선언할 때 사용 * 새로운 할당 불가능 *바로 js 를 볼 수 있는 사이트 : ctrl + enter로 console 값을 바로 받아볼 수 있다. JS BinSample of the bin:jsbin.com # var 예시 # let 예시 # const 예시재할당이 불가능해 type 오류를 출력한다. 에러가 호출됨으로써 해당 코드에서 어떤 부분에 오류가 있는지 찾아서 수정이 가능하다.

Next에서는 image를 사용할 수 있는 코드가 따로 있다! Error: Failed to parse src "@public/img/common/logo/logo.svg" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://) Next/image 가이드대로 이미지를 첨부했는데 이런 에러가 났다. 전역으로 설정해놓은 @public 경로를 사용했는데 전역변수는 @로 핸들링 되는거 아니엿나? 했는데 / 로 시작하는 path를 입력해 달라고 뜨길래 @public 을 삭제하니 정상 작동했다. 👉 잘못된 경로설정 src 👉 정상작동된 경로설정 src..

애플로그인은 이메일이 필수가 아니라고요? 요즘 자체 회원가입 및 소셜 회원가입을 거쳐가면서 결국 이메일 인증 기능을 추가하기로 했다. 기존에 구현된 소셜 로그인에는 (카카오,네이버, 구글)은 별도로 이메일을 받기때문에 이런 인증절차를 자체회원가입에만 고민하면 되는 문제였는데 (사실 이 문제도 나중 스탭이였다..)🤨 애플로그인 기능을 구현 하냐! 마냐의 문제에서 결국 이메일 인증을 바로 다음 업데이트때 붙이기로 했다.. 애플로그인은 이메일을 제공할것인지 아닐것인지에 대해서 사용자가 직접 선택할 수 있다. (카카오의 경우 비지니스 계정을 등록하면 필수로 이메일을 받을 수 있다.) 어쨋든 대부분의 서비스는 이메일을 유니크값으로 사용자를 체크하기때문에 애플로그인에 대한 이메일 인증은 필수사항으로 보여졌다. 더 ..

화면에 데이터를 뿌려서 확인할 경우 깔끔하게 정리해서 보고싶을때 사용하기 좋은 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..