본문 바로가기

분류 전체보기76

[Vue] 이미지 data로 넣는 방법 정리 + vuetify 활용예시 (v-img) 이미지를 상태에 따라 이미지와 관련된 작업을 하다보면 [ active | defult | error ] 등 상태값에 따라 다르게 보여줘야 하는 경우가 있다. 최소한의 코드를 작성하고 최대 효율을 내고 싶어하던 와중에 여태까지 경험해본 이미지 리소스에 대한 활용예시를 공유해보려고 한다. (물론 개발자마다 처리하는 방식이 다르기때문에 이 방법은 공유차원에서만 쓰는 글이다) 우선 기본적으로 v-for 문을 통해 아래처럼 배열 형식으로 소스 닉네임을 가져왔다. 보통 value가 아닌 id 값을 사용하긴 하지만 대충 적어봤다. 아래 예시는 참고용으로만 봐주시길 바랍니다. 👉 script data sortItem: [ { value: 1, active: false, }, { value: 2, active: fals.. 2022. 11. 14.
[javascript] Spread & Rest Operators 연산자 / 배열 재생산 / 전개연산자 # Spread 연산자 const newArray = [..oldArray,1,2] const newObject = [...oldObject, newProp:5] 더 많은 원소도 추가가 가능하지만 대괄호와 ... 구문만 있으면 새로운 object 할당이 가능하다. spread 연산자는 객체배열이나 배열에 어떤 요소를 합칠때 매우매우 많이 사용한다. 실무를 하면서 매우 많이 사용하는 연산자이기 때문에 필수로 알고있는것이 좋다. 👉 예시 const numbers = [1,2,3]; const newNumbers = [...numbers, 4]; console.log(newNumbers) //[1,2,3,4] 출력 👉 예시2 const Person = { name: 'Max' } const newPerson .. 2022. 11. 12.
[javascript] let & const 차이 알아보기 + JSbin 사이트 ES5 버전까지는 var 를 사용합니다. ES6 버전에서는 let 과 const 라고 var의 최신버전이 나왔다. let👉 값을 수정할 수 있는 변수를 선언할 때 사용 const👉 값을 변경할 수 없는 상수에 선언할 때 사용 * 새로운 할당 불가능 *바로 js 를 볼 수 있는 사이트 : ctrl + enter로 console 값을 바로 받아볼 수 있다. JS BinSample of the bin:jsbin.com # var 예시 # let 예시 # const 예시재할당이 불가능해 type 오류를 출력한다. 에러가 호출됨으로써 해당 코드에서 어떤 부분에 오류가 있는지 찾아서 수정이 가능하다. 2022. 11. 12.
[Next/image] Next 활용하기 + 전역변수 src 설정 에러 해결과정 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.. 2022. 11. 10.
[javascript] 이메일 인증 타이머 기능 구현 (+ 애플로그인 구현 썰) 애플로그인은 이메일이 필수가 아니라고요? 요즘 자체 회원가입 및 소셜 회원가입을 거쳐가면서 결국 이메일 인증 기능을 추가하기로 했다. 기존에 구현된 소셜 로그인에는 (카카오,네이버, 구글)은 별도로 이메일을 받기때문에 이런 인증절차를 자체회원가입에만 고민하면 되는 문제였는데 (사실 이 문제도 나중 스탭이였다..)🤨 애플로그인 기능을 구현 하냐! 마냐의 문제에서 결국 이메일 인증을 바로 다음 업데이트때 붙이기로 했다.. 애플로그인은 이메일을 제공할것인지 아닐것인지에 대해서 사용자가 직접 선택할 수 있다. (카카오의 경우 비지니스 계정을 등록하면 필수로 이메일을 받을 수 있다.) 어쨋든 대부분의 서비스는 이메일을 유니크값으로 사용자를 체크하기때문에 애플로그인에 대한 이메일 인증은 필수사항으로 보여졌다. 더 .. 2022. 11. 9.
[css] 화면에서 object 요소가 정리되서 나오도록 하기 화면에 데이터를 뿌려서 확인할 경우 깔끔하게 정리해서 보고싶을때 사용하기 좋은 css 코드이다 .pre { white-space: pre; } 2022. 11. 2.
[javascript] 선택 날짜가 기간 사이에 있는지 체크하는 함수 localeCompare # 해당 날짜를 선택했을때, 선택된 날짜 기준으로 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.. 2022. 11. 1.
[환경변수설정] Next + React , Vue 에서 env 파일 설정시 주의해야 할 점/ undefined 최근 여러가지 개발을 진행하다보면서 여러가지 개발환경에 접근하게 됐다. 예를들어 Next 기반의 React 라던가 Vue 환경이라던가. 사실 회사에서 프로젝트를 하면서 얻게 된 상식 중 하나가 Vue 에서는 환경변수명 접두사에 꼭 VUE_APP 을 붙여줘야한다는 사실이였다. ✔️ Vue 환경변수 설정 접두사에 꼭 VUE_APP 을 붙여줘야한다는 사실이였다. VUE_APP_API_URL= "url" 그리고 이번 사이드 프로젝트에 들어가면서 Next 기반으로 작업해 나가는데 계속해서 환경변수가 읽히지 않는 현상이 일어났다. 보통 env 키를 확인하려면 콘솔에 process.env.{API키명} 을 붙여주면 서버가 콘솔에 찍힌다. 근데 계속해서 undefined 가 표시됐다. ✔️ .env 를 확인할때 pro.. 2022. 10. 19.
[Vue] Cookie 설정으로 하루보지 않기 설정 + 테스트 방식 공유 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; /.. 2022. 10. 4.
[Vue] mycure/vue-wysiwyg 기본편집기 활용하기 (default 값 넣기) 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.. 2022. 9. 20.
반응형

티스토리툴바