김평범's OrdinaryCode

🤔서버리스 컴퓨팅(Serverless computing)이란? 서버리스 컴퓨팅이란 보통 클라우드 모델 중하나이다. 단어 자체로는 서버리스이지만, 실제로는 서버는 존재하나 서버에 관련된 부분을 크게 신경 쓰지 않아도 된다라는 의미로 서버리스라는 단어를 사용한다. 클라우드 서비스 플랫폼에 서버리스 컴퓨팅을 제공하는 서비스에 소스를 올리게 되면 바로 애플리케이션이 돌아가게 된다. 서버리스 컴퓨팅을 이용하면 서버를 구매할 필요도 없으며, 배포 후에 user 수에 따른 스케일링이라던지 프로비저닝도 자동으로 제공되어 소스 외 서버에 관련된 부분은 개발자가 신경 쓸 필요가 없다는 것이 장점이다. ✨AWS Lambda 아마존 람다는 아마존 웹서비스에서 제공하는 서버리스 클라우팅 서비스이다. 아마존 람다는 서버를 프로비..

📑 태그란? hr 태그를 이용하면 콘텐츠 중간에 선을 그을 수 있다. 보통 주제가 변경이 될 때 이용하는 태그이다. 태그는 기본적으로 검은색으로 제공되고 있다. 만약에 해당 색상을 바꾸고 싶다면? 🧡태그 선 색상 변경 코드 hr { background:pink; height:1px; border:0; } hr 태그를 변경하려면 background나 color 속성만 변경하면 색상이 변하지 않는다. height를 1px을 주고 background를 주면 색상이 변하는 걸 확인할 수 있고 이때 border는 0으로 맞춰준다. 줄 넓이를 키우고 싶을 경우 height를 조절해주면 끝!

input에서 체크박스, 라디오 버튼의 백그라운드 컬러를 바꾸고 싶을 때가 있다. 그냥 생각으로는 background 속성을 사용을 하면 변경이 되지 않을까라고 해서 적용을 해봤지만 input의 기본 color는 원래 css로 변경이 불가능했다. checkbox, radio button의 색상을 바꾸려면, 단순 css로 원래 불가능했는데 최근 새롭게 출시된 css 기능 중 accent-color가 추가되었다. 🎨css accent-color accent-color는 HTML 요소 기본 색상을 변경할 수 있는 새로운 기능의 css이다. 기존 css의 디자인을 바꾸려면 Label 등을 이용한 편법으로 수정해야 되고 가장 기본적인 컬러 변경 자체도 안돼서 브라우저에서 제공하는 기본 디자인을 사용해야 되었다. ..

글래스모피즘이란? 반투명한 유리를 댄듯한 효과를 말한다. "얼린유리" 효과라고 해서 배경에 불투명한 유리를 올린 것 같은 효과를 말한다. 🙂글래스모피즘을 잘 활용하려면? 어느정도 배경 투영되어야 되서 비비드한 컬리와 패턴이 있는 배경 위에 사용을 해야 효과가 난다(배경 위에 떠있는 효과) 내부 쉐도우를 넣어서 테두리는 살짝 밝게 처리해준다. 글래스모피즘은 불투명도와 블러를 조절해서 효과를 낼 수 있다. 손 쉽게 글래스모피즘 효과를 보고싶다면 아래 링크에서 확인해보자. 👉https://hype4.academy/tools/glassmorphism-generator 클레이모피즘 클레이모피즘은 좀 더 부풀려진 말랑해보이는 3D모양의 UI 트랜드를 말한다. inner shadow, outerShadow를 활용해서..

🙋‍♀️JavaScript alert 이용하기 자바스크립트에서 알람을 발생하는 것 중에 가장 많이 사용하는 것이 바로 alert이다. alert으로 알람을 발생시키면 해당 웹에 들어가면 바로 알람을 확인할 수 있다. 하지만 alert의 문제의 경우는 해당 탭에 포커싱이 되어있을 때는 잘 볼 수 있지만 해당 탭에 포커싱이 안되어있을 경우 해당 알람창이 뜨는지를 알 수가 없다. 🤔HTML5 Web Notification API HTML에서는 웹페이지에서 알람을 표시하면 페이지 외부에서 표시가 되는 Notification API를 제공한다. 해당 웹페이지가 백그라운드로 돌고 있어도 내가 쓰는기기에서 알람을 볼 수 있는 기능이다. 📝Web Notification 사용 조건 해당 기능을 이용하려면 하지만 조건이 ..

Vue $router.push 오류가 나서 수정 방법을 찾다가 못 찾아서 일단은 Javascript로 Redirect 하는 소스로 변경해놨는데 오늘은 Javascript redirect와 Vue 에서 redirect를 하는 방법 정리하기로! 🧐Vue.js에서 page redirect 하는 방법 this.$router.push('/') Vue.js 에서 page를 이동하는 방법은 this.$router.push('경로')를 이용한다. 문제는 해당코드가 모바일에서 해당 코드가 작동하지 않는 이슈가 발생했다. 이것저것 코드를 바꾸다가 못 찾아서 :( 일단 Javascript 코드로 변경하기로 했다. 🐳Javascript에서 Page redirect 하는 방법 window.location.href = `${wi..

moment.js를 걷어내고 day.js를 메인 날짜 라이브러리로 사용 중이다. https://ordinary-code.tistory.com/60 [javascript/Vue] moment.js 지원 중단으로 dayjs로 변경하기 🙅‍♀️moment.js 나의 프로젝트의 날짜 시간 계산을 하는 라이브러리는 moment.js를 사용했다. 오늘 기준 다운로드 수가 18,204,885 많은 개발자들에게 사랑받은 라이브러리였다. 나 역시 프로젝트마 ordinary-code.tistory.com 👩‍🏫dayjs에서 요일 표시하기 기본 날짜 포맷의 경우 영어든 한국어든 상관없이 사용하고 있었는데 dayjs를 이용해서 요일을 표시하게 되었는데, dayjs에서 요일을 표시하면 기본적으로는 영어 약어로 표시가 된다. 만..

📌최근 발생한 문제점 $ref undefined mounted()에서 $ref에 접근을 해서 무언가를 적용을 하려고 해 봤는데, $ref에 접근이 안되고 undefined가 뜨는 오류가 발생했다. 무엇이 문제인지 찾아본 결과 안에 있는 $ref에 접근을 할 때, 초반에 undefined가 발생할 수 있다는 점을 찾아냈다. 이러한 상황은 왜 발생하는걸까? 먼저 이 문제를 알기 위해서는 를 왜 사용하는지를 알아야 했고, SSR과 CSR의 차이를 먼저 이해해야 되어서 오늘은 이 부분을 정리해보기로 했다! ⚙️SSR이란? Server Side Rendering이라고 해서 Server에서 렌더링이 된 HTML 화면을 만들어서 보내주는 방식을 말한다. SSR로 처리가 된다고 하면 모든 리소스를 서버에서 랜더링 한 ..

📌masonry Layout masonry는 건물의 벽, 돌벽 등으로 벽돌을 쌓는 공사를 말한다. 보통 이런 레이아웃은 핀터레스트 스타일이라고 해서 높이가 다른 각자의 카드들을 높이에 맞춰 딱딱 들어맞는 형식의 레이아웃이다. 👩‍💻vue프로젝트에서 masonry 레이아웃 이용하기 실제로 만들려면, npm 중에 vue-masonry-css를 이용하면 손쉽게 적용할 수 있다. vue-masnory-css vue에서 masnory 레이아웃을 만들어줄 npm이 존재한다. 사용방법은 그냥 npm install만 해주면 된다. npm i vue-masonry-css --save plugins/client.js import Vue from 'vue' import VueMasonry from 'vue-masonry-c..

✔️구글 애널리틱스 UA 종료 유니버설 애널리틱스(Universal Analytics, UA) 버전이 23년 7월 1일 이후부터 서비스가 종료된다는 안내가 왔다. 유니버설 애널리틱스 서비스 종료시점에서는 더 이상 신규 데이터 수집 및 조회가 안되기 때문에 구글 애널리틱스 4로 이전을 해야 된다. 🙅‍♀️vue-analytics 지원 중단 기존 지원하는 vue-analytics에서도 더 이상 지원이 안된다고 안내 문구가 떴다. 구글 애널리틱스 analytics.js 자체가 중단되고, gtag.js로 수집을 하라 권고가 되면서 vue-analytics 말고 vue-gtag를 이용을 하라고 안내가 되어있다. 📊vue-gtag https://www.npmjs.com/package/vue-gtag vue-gtag..