김평범's OrdinaryCode

회사에서 노션을 활용하기 시작하면서, 이미 만든 노션에 아카이브를 점점 사용자들에게 공개하는 홍보페이지를 사용하는 분들이 많아졌다. 노션에서는 이미 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 👩🏻‍🤝‍👩🏻노션으로..

개발하다 보면 별생각 없이 개발을 하지만 가끔 npm이 꼬이거나 할 때 cmd 창으로 npm, node 버전을 확인할 때가 있다. node 버전 확인하는 방법 해당 명령어는 node 설치 후 사용할 수 있는 명령어로 node -v시 node를 못 찾는다는 식으로 에러 메시지가 나오면 먼저 노드를 설치해야 된다. node -v npm 버전 확인하기 npm 버전도 동일한 방법으로 확인할 수 있다. node를 설치하면 npm은 같이 설치가 돼서, 별도로 추가 설치할 필요가 없다. npm -v 설치된 npm 리스트 확인하기 프로젝트 내 설치된 npm 리스트를 확인하는 것도 가능하다. 해당 명령어로는 프로젝트에 설치된 모든 npm 리스트와 버전을 확인할 수 있다. npm ls 특정 npm 버전 확인하기 npm l..

노션을 간단하게 메모 어플로만 사용하는 분들도 많았지만, 회사에서 프로젝트 관리툴로 이용하던 분들은 노션 API를 기다리고 있었다. 드디어 노션 API Beta버전에 관련된 공지가 떴다! 📕노션 API 가이드 노션 API 베타 관련된 소식이 뜨면서 가이드 페이지가 생성되었다. 해당 내용에서는 노션API를 활용해서 우리가 사용하는 또 다른 툴을 노션과 연결할 수 있다는 내용이 담겨있다. https://www.notion.so/guides/connect-tools-to-notion-api Connect your tools to Notion with the API Learn what Notion’s API can do and how your team can build integrations to create ..

홈페이지의 특정 페이지를 카카오톡으로 공유할 일이 있을 경우 URL을 직접 복사해서 쓰는 것 외에 공유 기능을 개발이 가능하다. 해당 기능은 카카오 Developers를 가입하고, 내 사이트 URL을 등록한 뒤 사용이 가능하다. 카카오 디벨로퍼 사이트 : developers.kakao.com/ 🎱카카오톡 내 애플리케이션 등록하고 앱 키 발급받기 카카오 Developer에서 내 애플리케이션을 누른 뒤 내 애플리케이션을 만들어준다. 애플리케이션을 추가해줘야 내 사이트를 인증받을 수 있는 앱 키를 발급받을 수 있다. 기존 카카오 디벨로퍼 다른서비로 앱 키가 있다고 하면 기존 애플리케이션 앱 키를 이용해도 상관없다. 🔗VUE 카카오톡 URL 공유 버튼 만들기 코드 Vue에서 카카오톡 URL공유 버튼을 연결한 코..

요즘 노션을 통해서 자신의 업무를 관리하는 분들이 많아졌다. 현재까지 목표량 중 진행 퍼센트를 가독성이 좋은 프로그래스 바 형태로 보고 싶어 하는 분들이 있어서 한번 만들어보았다. 현재 노션의 경우 수식의 if문을 이용하면 원하는 분기에 따라서 원하는 텍스트를 보여줄 수 있다. 나는 10% 단위로 프로그래스 바가 채워지는 프로그레스 바를 만들어보았다. 💪수식을 이용한 프로그래스 바 결과 화면 진행상황 수식 코드는 if문 분기를 미친 듯이 타는 수식이 만들어졌다. 목표량에서 현재 완료 상황을 나눠준 뒤 floor 수식을 이용하여 뒷 숫자는 절사 한 뒤, 0부터 10까지 if 문 분기를 타서 각 숫자에 맞는 프로그래스 바를 보여주는 수식을 만들었다. 하지만 해당 코드는 if문 분기를 10번이나 타야 되는 막..

홈페이지 내 특정 URL 공유 기능을 개발할 때가 있다. 이때 사람들이 많이 사용하는 트위터, 페이스북으로 URL을 공유하는 방법에 대해서 오늘은 설명해볼까 한다. meta태그 설정하기 URL을 공유하게 되면 URL과 함께 대표적인 이미지, 타이틀, 세부 내용 등이 같이 보내는 것이 가능하다. 해당 정보를 담는 곳이 바로 meta 태그이다. 오픈그래프 meta 태그 중 오픈그래프는 HTML에 대한 정보를 담기 위한 프로토콜이다. SNS 공유 시 게시될 때 해당 정보를 이용하기 때문에 공유를 위해서는 오픈그래프인 og 매타태그를 설정해줘야 한다. 설정 방법은 아래와 같다. 트위터 카드 속성 트위터의 경우는 meta태그를 twitter로 설정해야 된다. 트위터의 경우 card 속성이 이 있다. 사진위주일 경..

Notion에서 표를 사용하다 보면, 내가 만든 표 속성을 모르고 숨김 처리해서 안 보이는 경우가 있다. 혹은, 만든 순서와 상관없이 내가 원하는 표 속성 순서를 바꾸고 싶을 때도 있다. 노션에서는 표에서 속성을 보이거나 감추는 것이 가능하고, 순서도 변경할 수 있다. 👀노션 표에서 속성 숨김 처리 혹은 보이게 하기 내가 만든 템플릿을 복제해왔는데 복제 전과 다른 형태로 보인다면, 아마 내가 표를 복사해오면서 속성들이 숨김 처리되었을 가능성이 높다. 이럴 경우 표에서 점세개를 눌러서 속성 메뉴를 선택한다. 그러면 해당 표에 존재하는 모든 속성들을 볼 수 가있다. 해당 속성에 옆에는 파란색으로 스위치 버튼이 있는데 이 스위치 버튼을 이용하면 표에서 속성을 보이거나 숨길 수 있다. 👀타임라인 보기 속성 숨기..