김평범's OrdinaryCode

노션이 좋은 점은 템플릿이 너무 잘되어있다는 점이다. 나의 경우도 내가 직접 만든 템플릿을 쓰고 있지만, 남들이 만든 템플릿도 많이 이용하고 있다. ✨노션 템플릿 갤러리 오픈 노션 엠버서들이 만든 다양한 노션 템플릿 갤러리가 오픈되었습니다. 실제로 노션을 잘 사용하는 분들이 직접 만든 템플릿 위주로 모여있어서 내가 원하는 템플릿을 찾아서 사용할 수 있다. https://www.notion.so/ko-kr/templates Notion 추천 – 템플릿 갤러리 Notion 팀이 큐레이션한 커뮤니티 템플릿. 업무와 생활을 효과적으로 관리하고, Notion을 사용하는 새롭고 창의적인 방법을 발견하세요. www.notion.so - 윗 링크를 이용하면 노션 템플릿 갤러리를 들어갈 수 있다. 💡노션 템플릿 갤러리 ..

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

현재 회사에서 위키로 매우 잘 사용하고 있는 Tool은 바로 Notion이다. Notion이 요즘 메모 어플로 급부상하면서 한국 내 스타트업에서 많이 이용 중인데 스타트업에서 Notion을 왜 선호할까?🤔 🧐스타트업에서 자주 쓴다는 노션의 장점 알아보기 1️⃣실시간으로 공동 작업 가능 노션의 가장 장점은 노션에 같은 팀원들이 모두 실시간으로 페이지 작업이 가능하다. 항상 최신 데이터를 누군가 업데이트해 놓으면, 모든 팀원들이 최신 페이지를 볼 수 있기 때문에 언제나 최신화된 정보를 관리할 수 있다. 파일을 주고 받으면서 버전 1, 버전 2, 버전 3 등 계속 늘어나면서 혼선이 생기기 쉬운데 노션으로는 항상 모든 팀원들이 최신의 자료를 볼 수 있다. (유료 플랜을 이용하면 히스토리까지 알아서 관리해주니 백..

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

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를 찍어주는 기능이 있기 ..