내가 보려고 만든 블로그

정----말 오랜만에 Flutter로 사이드 프로젝트를 시작했습니다. 한동안 손 놓고 있던 사이에 Flutter 버전은 2.x대에서 3.x대로 훌쩍 업데이트되었고, 그러면서 바뀐 점들도 꽤 있더라고요.프로젝트를 진행하며 알게 된 몇 가지를 정리해 보려고 합니다. 그 첫 번째 타자가 바로 Flavor! 그럼 시작해 볼까요?Flavor란?프로젝트를 진행하거나 출시하다 보면 하나의 소스 코드로 여러 환경에 맞춰 앱을 빌드해야 할 때가 많습니다. 개발, 스테이징, 운영 등등.. 각 환경은 서로 다른 API 주소나 앱 이름, 아이콘을 가져와야 하죠. 만약 이런 설정을 수동으로 변경한다면 개발 서버를 바라봐야 할 앱이 운영 서버를 본다거나 하는 크리티컬한 실수를 피하기 쉽지 않습니다.Flutter의 Flavor는 ..

어렴풋이 알고만 있던 SSR과 CSR, 그리고 SPA 알고는 있지만, 이걸 정의해보라고 시키면 말하기는 어려운 친구들...하나 둘씩 정리해보자 SSR (Server Side Rendering) 란?이름 그대로 서버에서 페이지를 모두 렌더링해서 브라우저에 전달하는 방식이다. 브라우저는 렌더링이 거의 끝난 HTML 문서를 전달받기 때문에, 초기 화면을 매우 빠르게 표시할 수 있다는 장점이 있다. SSR의 동작 과정 SSR의 동작 순서를 간단히 나타내면 이렇다.사용자가 브라우저를 통해 웹사이트에 접속을 요청한다.서버는 요청을 받고, 페이지를 렌더링할 준비를 마친 완전한 형태의 HTML 파일을 생성한다.브라우저는 서버로부터 이 HTML 파일을 받아 즉시 화면에 표시한다. 사용자는 콘텐츠를 바로 볼 수 있지만,..

요즘 웹개발 시장을 보면 서버사이드 렌더링 (SSR) 과 정적 사이트 생성 (SSG)는 필수적인 기술이다. 이와 관련하여 React와 Vue.js 를 기반으로 한 대표 프레임워크인 Next.js 와 Nuxt.js 를 정리해보자. 현대 웹 개발에서 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)은 더 이상 선택이 아닌 필수 기술로 자리 잡았다. 뛰어난 사용자 경험(UX)과 검색 엔진 최적화(SEO)를 모두 잡기 위해 많은 개발자가 React와 Vue.js 기반의 대표 프레임워크인 Next.js와 Nuxt.js를 사용하고 있다.두 프레임워크는 파일 기반 라우팅, 코드 분할 등 유사한 기능을 제공하지만, 기반이 되는 라이브러리의 철학과 최신 업데이트 방향성에 따라 뚜렷한 차이를 보이고 있는데, 프로젝..

vuejs 에서 input 내 키보드로 enter 쳤을때 함수 실행하기 둘중 아무거나 쓰면된다.v-on:keyup.enter="login()"@keyup.enter="login()"

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