내가 보려고 만든 블로그

여러 애드 네트워크들이 모인 애드 익스체인지 (AD Exchange), 그리고 광고주를 위한 DSP (Demand side Platform), 매체를 위한 SSP (Supply side platform)에 대해 알아보자 매체를 위한 플랫폼, SSP SSP는 매체사를 위한 플랫폼으로 매체의 이익을 극대화 하기 위한 플랫폼이다. 각 매체들은 수익을 위해 높은 단가의 광고를 찾고자 하는데. 이를 위해 SSP는 여러 애드 네트워크, 애드 익스체인지, DSP를 연동하여 더 높은 광고비를 지불할 광고주를 찾을 수 있도록 돕는 역할을 수행한다. SSP는 유저로 인해 매체에서 노출이 발생할 때 마다 비어있는 인벤토리를 RTB 경매장에 올리는데. 이를 확인한 DSP의 응답중 가장 높은 입찰가를 부른 광고의 요청을 수락하..

사용자 여정지도란? '여정지도'란 말 그대로 사용자가 생활 맥락에서 제품/서비스와 만나는 지점을 살펴보고 기록해야 한다는 의미입니다. 인터뷰 결과물과 페르소나 활동으로 만든 가상의 사용자를 고려하여, 그 사용자가 실제 제품/서비스에서 겪는 경험을 시각화 하는것을 말합니다. 일반적으로 여정지도를 작성하는 방버은 사용자가 제품 및 서비스를 접하기 전부터 사용중, 사용 후까지 행동들을 시간 순서대로 나열을 하고 그 행동들에 따르는 사용자의 생각과 감정을 채워서 정리해놓습니다. 경험을 행동, 감정, 생각으로 추출하고 그 속에서 이슈와 인사이트를 얻어내어 향후 제품 개선 및 새로운 개발을 위한 재료로 사용됩니다. 사용자 여정지도 구조 상단: 특정 사용자 (User) + 시나리오 + 기대되는 행동 및 목표 (Exp..

이미지 파일을 만든후 사용하려고 할때 DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 이 발생한다면? 해결방안 외부 이미지를 가져올때 cross origin 문제로 발생한 오류이기때문에 이미지에 cross origin 을 "Anonymous" 로 지정해주면 된다 const image = new Image(); image.src = image_src; image.crossOrigin = 'Anonymous'; image.onload = () => { consoel.log(image) } 간단하게 해결완료 ✋ 잠깐 crossOrigin 추가 이후 갑자기 이미지 CORS..

툴팁이란? 해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과 생각보다 툴팁을 사용할 일이 많은데 따로 js 없이 순수하게 툴팁을 사용해보자 tailwind를 이용한 tooltip 예제 Tooltip! 🤚tailwind에서 부모 hover시 자식 엘리먼트에게 무언가 옵션을 주고 싶다면? 1. 부모요소에 group 클래스를 추가 2. 자식 요소에 group-hover:flex 로 hover 관련 옵션을 추가 이렇게 하면 끗!

const today = new Date(); const timeValue = new Date(date); const betweenTime = Math.floor((today.getTime() - timeValue.getTime()) / 1000 / 60); if (betweenTime < 1) return '방금전'; if (betweenTime < 60) { return `${betweenTime}분전`; } const betweenTimeHour = Math.floor(betweenTime / 60); if (betweenTimeHour < 24) { return `${betweenTimeHour}시간전`; } const betweenTimeDay = Math.floor(betweenTime / 6..

ckeditor에서 유튜브를 embeded 했는데, embeded 태그로 입력되서 출력이 되지않는다ㅠㅠ 유튜브는 iframe으로 출력해야되서 그런데, 간편하게 변경할 수 있는 방법이 있다! editor config에 넣어주면 된다! editorConfig = { toolbar: [....], mediaEmbed: { previewsInData: true } } [vue 전체 코드]

AWS S3에 올려둔 이미지를 다운로드해보자! 우선 코드 먼저 let image = new Image(); image.onload = function() { const canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0); let dataURL = canvas.toDataURL(); const element = document.createElement('a'); element.setAttribute('href', dataURL); element.setAttribute..

input type이 date일때는 placeholder가 적용되지 않는다 그래서 html 태그랑 css에 몇가지 추가로 적어주어야한다! HTML CSS input[type='date']::before { content: attr(data-placeholder); width: 100%; } input[type='date']:focus::before, input[type='date']:valid::before { display: none; } 이렇게 해주면 적용한 플레이스 홀더가 잘 나오는걸 볼 수 있다

input에서 휴대폰 번호 입력할때 휴대폰 양식에 맞춰서 자동으로 dash를 넣어줘야될 경우가 있다 예를들어 사용자가 숫자만 01011112222만 입력하면 입력할때마다 자동으로 010-1111-2222로 변환해주는 이런거... 그럴땐 let phoneNumber = 01011112222; phoneNumber = phoneNumber.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3"); console.log(phoneNumber) // 010-1111-2222 이렇게만 하면 끝이라는거!! 생각보다 자주쓰는데 할때마다 검색하는게 귀찮으니 나는 이제 블로그 들어와서 봐야겠다

이미지를 가져오고 싶은데 cros 오류가 발생한다... cors는 통신때만 해주면 되는데 왜 여기서 까지 발생할까... 이유를 검색해보니 초기 이미지를 캐싱하는 단계에서는 cors 헤더를 가져가지 않고 캐싱을 하기때문에 이와같은 오류가 발생한다고 한다 그래서 열심시 구글링해서 canvas로 우회해서 가져오고 crossOrigin을 설정해주었지만... 그래도 동일하게 발생하는 오류... 여기서 삽질을 더 한결과 기존 코드 getBase64FromUrl(){ let image = new Image(); const _this = this; image.onload = function() { const canvas = document.createElement("canvas"); canvas.width = imag..