김평범's OrdinaryCode

객체가 빈 객체 상태를 체크할 경우가 있다. let emptyObject = {}; 위에처럼 빈 객체를 만들었다면, 이제 해당 객체가 빈객체인지 확인해보는 방법이다. Object.keys(newObject).length === 0 ⭐Object.keys란? Object.keys() 메소드는 해당 객체가의 속성을 배열 형태로 반환해줍니다. 결국 반환된 배열의 length가 0일 경우 해당 객체가 비었다고 판단할 수 있다. Object.keys() 샘플코드 위 코드를 실행했을 때 결과 화면이다.

노션에서 가장 잘 이용하는 속성이라고 하면 바로 데이터베이스! 프로젝트를 정리하거나 일정 정리할 때 노션 데이터 베이스는 필수인데, 이번 12월 15일 노션에서 새로운 업데이트로 데이터베이스에 하위 항목이 추가되었다. ⭐노션 데이터베이스 하위 항목 추가 노션 데이터베이스는 원래 한줄한줄이 하나의 데이터였는데 이번 하위 항목이 추가되면서 하나의 데이터에 속하는 하위 항목까지 깔끔하게 정리가 가능하게 되었다. 💚노션 데이터베이스 하위 항목 추가하기 먼저 윈도에서 노션을 쓰는 분들이라면 노션 최신 버전을 업데이트를 먼저 받아준다. 1️⃣노션 데이터베이스의 오른쪽 상단의 점 3개 버튼을 클릭한다. 2️⃣하위 항목을 클릭해서 설정을 진행한다. 하위 항목이 생성되면 자동으로 관계형 칼럼이 추가된다. 3️⃣하위 항목..

오늘 개발하다가 발견한 특별한 상황 백앤드 개발자 분이 첫 페이지 로딩이 느린 것 같다는 말을 보니까 mounted 될 때 호출하는 function이 두 번씩 되는 것을 발견했다. 검색해보니 나와 같이 비슷한 상황이 나오는 사람들이 있는 듯했다. 원인은 찾지 못하고 급하게 처리하는 방식을 찾아서 공유해보려고 한다. 📌Nuxt mounted가 두 번씩 호출되는 원인 문제는 nuxt 레이아웃에서 무슨 원인인지 모르겠는데 레이아웃에 import 한 컴포넌트들이 모두 2개씩 들어가 있다.🤔 위 내용을 확인한 건 크롬 확장 프로그램인 vue.js devtools이다. 만약 이용하고 아래 프로그램을 크롬에 추가해보자. https://chrome.google.com/webstore/detail/vuejs-devtoo..

💗vue $ref란? vue코드에서 DOM요소에 접근하기 위해서 사용하는 속성 HTML 예시 코드 Vue 접근 예시 코드 this.$refs.target; script 코드 측에서 html에 지정한 ref를 접근하는 방법은 위와 같다. 📒$refs접근 시 변수로 접근하기 refs의 경우 ID처럼 고유한 하나의 유닛을 접근해야 될 때가 있다. 만약 for문으로 10개의 refs를 생성한다면 이때는 변수를 이용해줘야 한다. {{i}} 위 코드로 10개의 div를 생성해주면, 각각 다른 ref속성을 갖는 DOM이 생성된다. vue 접근 예시 코드 selectRefs(i) { let targetRef = `target-${i}`; vm.$refs[targetRef][0]; } 그냥 텍스트로 접근할 때와 다른 점..