노션 자음 모음 분리 - nosyeon ja-eum mo-eum bunli

ㅋㅣㅂㅗㄷㅡㄱㅏㅇㅣㅅㅏㅇㅎㅐㅇㅛ! 키보드 자음 모음 분리 해결하기

😥키보드 자음 모음 분리현상이 일어난 이유 오늘도 작업을 하느라 컴퓨터를 이용 중인데 갑자기 나도 모르는 팝업창이 생성되었다. "현재 언어로는 받아쓰기를 사용할 수 없습니다 : 한국어" 지원되는 언어를 확인하려면 여기를 클릭하세요. 다시 또 작업을 하려고 보니 키보드 자음 모음이 분리되는 현상이 나타났다; 처음에는 왜 나타나는지도 모르고 당황했다.😅 알고 보니 윈도우 + H키를 누르면 실행되는 음성인식이 실행되면 버그로 키보드 자음 모음이 분리되는 현상이 나타난다고 한다. 키보드 자음모음 분리현상 해결방법 해결방법은 매우 간단하다 윈도우키 + V를 눌러주면 정상적으로 작동한다.😎

Diary 2022.05.27

네이버 웨일 다크모드 설정하기 - 탄소중립을 위한 소소한 실천

최근 유튜브를 보다 보면 화질이 자동으로 떨어지는 것을 느껴본 적이 있을 것이다. 최근 국제적인 이상기후로 IT 업계에서 탄소중립을 위한 소소한 방법들이 제시되고 있다. 유튜브의 화질 저하도 이러한 실천 방법 중의 하나이다. 😎유튜브 화질 저하와 탄소중립 유튜브의 화질을 낮춰서 시청을 하게 되면, 탄소배출량이 감소한다고 한다. 낮은 화질로 영상을 보는 경우 전력사용량이 저하되는 것에 대한 효과라고 한다. 🌙다크 모드 이용하기 요즘 유행하는 다크 모드도 탄소배출 저하에 도움이 된다. 스마트폰에서 다크 모드를 적용할 경우 소비전력이 현저히 줄어든다고 한다. 이러한 탄소중립에 맞춰서 네이버 웨일 브라우저는 브라우저 자체에서 다크 모드를 지원하기 시작했다. 다크모드를 적용하는 것만으로도 환경에 도움이 되다니! ..

etc. 2022.05.25

[Notion] 노션 템플릿 갤러리 오픈! 유용한 노션 템플릿 모음

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

etc./Notion 2022.05.16

Javascript URL 리다이렉트 시키기 (vue.js router push)

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

FrontEnd/Javascript 2022.05.11

[Notion] 스타트업에서 노션 활용하기 - Notion 크레딧 제공 확정!

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

etc./Notion 2022.05.10

[javascript/Vue] dayjs에서 요일 한국어 적용하기 (locale/ko)

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에서 요일을 표시하면 기본적으로는 영어 약어로 표시가 된다. 만..

FrontEnd/Vue.js 2022.05.03

[Vue/nuxt] mounted에서 $ref undefined 해결하기(<client-only> 이슈)

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

FrontEnd/Vue.js 2022.05.02

[Vue.js/Nuxt] vue-masonry-css를 이용해서 카드레이아웃 구현하기

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

FrontEnd/Vue.js 2022.04.30

[Vue.js/Nuxt] 구글애널리틱스4 vue-gtag로 연동하기

✔️구글 애널리틱스 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..

FrontEnd 2022.04.27

[vue.js] image 없을 경우 default 이미지 처리하는 방법 @error 사용하기

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의 경우 원본 이미지가 깨지거나, 로드되지 않..

FrontEnd/Vue.js 2022.04.26