김평범's OrdinaryCode

📌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..

Vue.js 공부할 때 이미지 경로를 하드코딩하지 않고 변수로 연결했던 방법을 공유했었다. https://ordinary-code.tistory.com/85 [Vue.js] 이미지 경로를 변수, data 값, URL로 이미지 연결하는 방법 (require이용) vue.js에서 img 태그 내에 이미지를 특정 분기를 이용해서 해당 값에 맞는 이미지를 바꿔가면서 보여주고 싶을 때가 있다. 혹은 data에 선언한 변수명으로 img 이름으로 대체해서 보여주고 싶을 때 ordinary-code.tistory.com 오늘은 이미지 경로를 가져오다가 에러가 발생할 경우 default 이미지를 호출하는 코드를 공유해보려고한다. 😎img 태그 @error 활용하기 @error의 경우 원본 이미지가 깨지거나, 로드되지 않..

🥲데이터베이스 이름 숨기기 페이지로 생성된 데이터 베이스 말고 인라인으로 데이터베이스를 생성하면 제목을 입력했어야 했고 기존에는 이름이 없으면 제목 없음이라는 데이터베이스명이 늘 따라다녔다. 이제는 제목 없음 옆에 점 3개를 눌러서 보기에서 제목 숨기기를 선택하면 표에서 제목이 사라지는 것을 볼 수 있다. 만약 숨긴 데이터 베이스의 제목을 다시 보이게 하고 싶다면? 데이터베이스 우측 상단 점 3개를 클릭해서 레이아웃에서 데이터베이스 제목 표시를 클릭해주면 다시 표의 제목이 나타나게 된다. :) 노션의 데이터베이스 대규모 업데이트로 좀 더 편하게 조건들을 걸어서 원하는 데이터를 잘 찾을 수 있게 된 것 같아서 만족스럽다.

✔️자바스크립트의 세미콜론(;) 자바스크립트에서는 세미콜론을 찍어주는 이유는 내가 쓰는 구문이 종료가 되었다 라는 의미이다. 프로그래밍 문법에 맞게 작성한 코드를 적고 해당 코드가 완료되면 그 뒤에 종료가 되었다는 의미로 세미콜론을 찍어준다. let a = 1; console.log(a); 하지만, 개발을 하다 보면 세미콜론을 정확히 찍을 때도 있지만, 개발을 하다보면 세미콜론을 까먹고 안 찍는 경우도 있다. 하지만 보통 세미콜론을 안찍어도 오류가 난적이 없다! 그런데도 꼭 세미콜론을 찍어야하는건가? 하지만 오류가 안나는 이유는 바로 ASI 때문이다! 🎇ASI(Automatic Semicolon Inserion, 자동 세미콜론 삽입) ASI는 자바스크립트 엔진에서 자동으로 ASI를 찍어주는 기능이 있기 ..