김평범's OrdinaryCode

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

이벤트 페이지 혹은 사용자가 공유를 하기 위해서는 해당 주소를 복사해야 되는 경우가 있다. 주소창은 전체 선택해서 복사를 하는 것도 가능하나, 모바일 화면상에서는 직접 주소창을 복사하는 것도 귀찮기도 해서 요즘은 링크 복사 가능한 버튼을 만들어서 제공한다. 🧐JAVASCRIPT 링크 복사 예시 코드 HTML 복사하기 Javascript copyUrl () { //url 넣을 input 생성 const urlInput = document.getElementById("urlInput"); //현재 URL 가져오기 urlInput.value = window.document.location.href; //clipboard 복사 urlInput.select(); document.execCommand("copy")..

모바일 환경이 중요해지면서, 프런트 앤드 개발자들은 모두 반응형을 고려해서 작업을 한다. PC환경과 모바일 환경 모두 가독성을 잡기 위해서는 각 스크린 사이즈마다, 적당한 사이즈를 찾아서 적용하는 것이 중요하다. 📐CSS 반응형 단위 vw, vh 반응형으로 개발한 다 고하면, 대부분의 개발자들이 익숙한 단위는 %를 생각한다. 해당 %를 지정할 경우 스크린 넓이에 해당 % 맞춰서 자동 조절된다. 이와 비슷한 개념으로 이용되는 것이 vw, vh이다. vw : 뷰포트 너비의 1%, 뷰포트 가로 사이즈가 기준 vh : 뷰포트 높이의 1% , 뷰포트 세로 사이즈가 기준 CSS에서 사용하는 vw와 vh는 상대적 길이 단위로 비교대상과 비교해서 상대적인 크기를 측정하는 단위이다. 예를 들어보자, 현재 브라우저 화면이..

노션에서는 간단한 블록들을 사용할 수 있지만, 좀 더 멋진 페이지를 만들기 위해선 다른 사람들이 만들어놓은 위젯을 활용해보는 것도 좋다. 그중 날씨 같은 정보는 다이어리 등 스케줄을 볼 때 유용한 위젯으로 내가 원하는 페이지에 실제 날씨를 볼 수 있는 날씨 위젯을 추가해보자. ⛅WeatherWidget 활용하기 먼저 날씨 위젯을 제공해주는 사이트는 웨더 위젯이라는 곳이다. 해당 사이트에서 노션에 연결할 날씨 위젯을 만들 수 있다. weatherwidget.io/ WeatherWidget.io Enter your location below and choose the settings, options and theme that you like. Customize as needed. Then just "Get ..

요즘 많은 부분을 노션으로 관리하다 보니 페이지가 여러 개 생성되어 이것을 하나로 합쳐야겠다는 생각을 하게 되었다. 찾다 보니 다들 너무 예쁜 다이어리를 가지고 있어서 나도 개인적으로 다이어를 만들어보고 있다. 아직 내부 내용은 완성이 되지 않았지만, 만들다 보니 약간의 팁들이 있을 것 같아 오늘은 노션으로 만드는 감성 다이어리를 공유해보려고 한다. 1. 이미지 테마 활용하기 노션을 만들 때 단순한 이미지만 넣으면 약간 재미가 없어 보일 수 있다. 이럴 땐 내가 찍은 고퀄리티 사진이나 혹은 다른 사람들이 찍은 예쁜 이미지를 활용해서 배경 이미지 외 이미지를 넣어 느낌을 줘보도록 한다. 비슷한 톤의 사진들을 나열해주면, 단순해 보이는 나의 노션 다이어리에 테마가 생긴 느낌이다. 고화질 이미지 구하는 사이트..