김평범's OrdinaryCode

내가 노션을 좋아하는 이유 중의 하나는 단순한 메모 어플이 아니라 데이터 연동과 표에 입력된 데이터를 다양한 형태로 볼 수 있다는 점이었다. 그래서 난 노션 표를 매우 잘 사용하고 있는데, 가끔 잘 만든 표는 다른 페이지에서 사용하거나 할 때 표를 복사해서 가져갈 일이 있다. 이때 표를 복사해서 사용하는 경우는 2가지 니즈가 있을 수 있다. 하나의 표를 여러 페이지에 연결하여 어디서 수정하든 이 표의 데이터가 모든 페이지에서 동일하게 관리하고 싶다. 하나의 표의 내용을 다른 페이지에서 표의 형태는 유지하되 다른 데이터를 입력해서 사용하고 싶다. 노션에서는 이 2가지가 모두 가능하다 노션 표 링크 복사 방법 만약 해당 표의 데이터를 이 페이지가 아니라 다른 페이지에서도 수정을 원한다면, 표에서 링크 복사를..

🐣들어가기 전 오랜만에 노션으로 템플릿을 만들어보았다. 요즘 많은 분들이 관심 있는 주식 주식을 투자는 하고있는데 내가 수입이 잘나고 있는지도 점검하는 것도 중요하다. 나의 경우 미국주식의 소량 투자를 하고 있는데 그중 안전한 배당주에 관심이 많아 매달 배당 수입이 얼마나는지를 정리할 수 있는 노션 캘린더를 만들어보았다. 📆노션으로 만든 배당 캘린더 노션으로 만든 배당 캘린더 전체 모습이다 노션 배당 캘린더는 2개의 표로 이루어진다. 실제 배당을 받는 내용을 적는 배당 캘린더와 해당 내용으로 월별 수입을 계산해주는 표가 있다. 📃배당캘린더 입력하기 배당 캘린더는 2가지 뷰를 제공한다. 테이블 형식과 캘린더 형식이다. 둘 중 편한 뷰를 사용하길 추천한다. 배당캘린더 캘린더 뷰로 확인하기 캘린더 뷰로 확인하..

vue.js에서 img 태그 내에 이미지를 특정 분기를 이용해서 해당 값에 맞는 이미지를 바꿔가면서 보여주고 싶을 때가 있다. 혹은 data에 선언한 변수명으로 img 이름으로 대체해서 보여주고 싶을 때 이용하는 방법이다. vue 이미지 변수로 연결하기 샘플 코드는 아래와 같다. 이미지를 data에 선언한 변수를 연결한 뒤, 이미지를 클릭하면 if문 분기를 이용해서 이미지가 변경되는 코드이다. 실제 화면 해당 소스를 실제로 실행해보면 imgName에 들어있는. png 파일을 연결해준다. 또한 이미지를 클릭하면 imgName Data가 변경되면서 이미지가 if문 분기에 따라 변경되게 된다. URL 이미지에 연결 마찬가지로 URL을 연결하는 것도 가능하다. 그리고 그 URL 안에도 변수 처리 또한 가능하다...

Notion에서 기본적인 설정을 바꾸는 것이 가능하다. 왼쪽 메뉴의 Settings & Members에서 노션 관련된 설정을 변경할 수 있다. 한국어를 설정했다면 설정과 멤버 메뉴에서 수정이 가능하다. 노션 언어 변환하기 (한국어 & 영어) 노션을 사용하다보면, 영어와 한국어 중 편리한 언어를 쓰는 것이 가능하다. Settings&Memers 에 Langugage&region에 들어가면 언어 설정 변경이 가능하다. 현재는 영어와 한국어 두 개를 선택할 수 있다. 노션 표 한주 시작 설정 변경하기 영어 외 해당 메뉴에서는 노션 표에서 한주의 시작을 월요일로 하는 설정도 가능하다. 노션에서 캘린더에서 요일을 월요일부터 설정을 하면 해당 옵션을 켜면 된다. 노션 다크 모드 설정하기 노션 Setting&Memb..

먼저 Vue에서 부트스트랩 datetimepicker를 못 연결하신 분들은 아래 포스팅을 먼저 확인하고 오길 바란다. 2021.06.04 - [FrontEnd/Vue.js] - [vue/Nuxt] 부트스트랩 datetimepicker Window is not defined 해결 방법 [vue/Nuxt] 부트스트랩 datetimepicker Window is not defined 해결 방법 내가 현업에서 사용하는 데이트피커는 vue-bootstrap-datetimepicker이다. https://www.npmjs.com/package/vue-bootstrap-datetimepicker vue-bootstrap-datetimepicker Vue.js date time picker component for b..

내가 현업에서 사용하는 데이트피커는 vue-bootstrap-datetimepicker이다. https://www.npmjs.com/package/vue-bootstrap-datetimepicker vue-bootstrap-datetimepicker Vue.js date time picker component for bootstrap 4 www.npmjs.com Datepicker 설치하기 npm i vue-bootstrap-datetimepicker DatePicker 연결하기 아래 코드로 설치한 datePicker를 연결할 수 있다. import datePicker from 'vue-bootstrap-datetimepicker'; 만약 VueNuxt 프로젝트를 이용하는 분들이라면 datepicker를..

대학교 발표 및 요즘 유행하는 인스타그램 카드 뉴스, 블로그 썸네일 까지 우리가 작성하는 콘텐츠에 각각 맞는 디자인 들이 필요하다. 하지만, 나는 디자이너가 아니고, 포토샵도 몰라서 못했던 날들을 이제 미리 캔버스를 이용하면 해결할 수 있다. 🎨미리 캔버스란? 미리 캔버스는 저작권 걱정 없는 디자인 요소들을 제공해서 각 상황에 맞는 디자인 템플릿을 제공해준다. 미리 캔버스에서 마음에 드는 디자인을 찾았다면 간단하게 텍스트만 변경하면 바로 내가 원하는 디자인 작품이 완성된다. 미리캔버스 시작하기 미리 캔버스는 아래 사이트의 가입한 뒤 바로 사용이 가능하다. 소셜 로그인도 제공돼서 회원가입도 매우 간단하다 https://www.miricanvas.com/ 미리캔버스 저작권 걱정 없는 완전 무료 디자인툴 미리..

회사에서 노션을 활용하기 시작하면서, 이미 만든 노션에 아카이브를 점점 사용자들에게 공개하는 홍보페이지를 사용하는 분들이 많아졌다. 노션에서는 이미 URL공개라는 기능을 활용해서 웹에서 내가 만든 페이지를 공개할 수 있다. 하지만, 이렇게 공개된 페이지는 보다시피 사용자가 검색해서 들어오기 어려운 URL 주소를 가지고 있다. 개인과 개인들이 공유를 할 때는 링크로 공유하기 때문에 큰 신경을 쓸 필요 없지만, 회사에서 홍보용으로 사용하는 사이트의 주소가 저렇게 복잡하면 이야기는 달라진다. 그럼 URL을 좀 더 홈페이지처럼 바꿀 수는 없을까? 물론 가능하다. 이미 노션에 관심이 많은 분이라면 한 번쯤 들어봤을 사이트 바로 우피이다. 💻우피- 당신의 노션 페이지가 웹사이트가 됩니다. 우피라는 사이트에서는 내가..

웹 애플리케이션을 구축할 때 모니터링 기능이 주요 기능이라면 전체 화면으로 하여 커다란 TV에 프로그램을 띄워놓고 보는 경우가 있다. 크롬에서는 사실 F11을 누르면 전체 화면이 되는 단축키가 있지만, 인터넷 환경에 익숙하지 않은 분들은 해당 기능이 있는지도 모르는 경우가 많다. 이런 분들을 위해서 애플리케이션에 내 크롬 전체 화면을 만들어주는 버튼으로 넣어줄 수 있다. 🌵버튼으로 크롬 전체 화면 만들어주기 샘플 코드 전체 화면 켜기 전체 화면 끄기 vue.js에서 data에 전체 화면을 감지하는 fullPage라는 data를 만든 뒤 버튼에서 전체 화면일 경우 버튼을 각 상황에 맞게 보여준다. 해당 버튼 클릭 시 document.fullscreenElement상태를 확인한다. 만약 전체 화면 상태이면 ..

노션이란? 요즘 내가 가장 사용하는 메모 툴인 Notion은 내가 여기저기 홍보 중이다. 특히 Notion의 강점은 실시간으로 업데이트가 되어 PC, 핸드폰, 테블릿 모두에 설치해서 내가 원하는 기기에서 항상 최신 자료를 관리하고 사용할 수 있다. 아직 노션을 잘모르는 분은 아래 링크를 먼저 확인하길 바란다! https://ordinary-code.tistory.com/63 개인이 노션 잘 활용하는 방법 5가지 - 노션 첫 사용하는 분을 위한 글 내가 Notion을 사용하는 이유 요즘 핫한 메모 어플인 노션 처음엔 무료 플랜의 경우 블록 수 제한이 있어 활용하는 데 있어 고민이 있었지만, 지금은 개인들에게는 무료로 풀려서 고민 없이 바로 ordinary-code.tistory.com 👩🏻‍🤝‍👩🏻노션으로..