김평범's OrdinaryCode

홈페이지의 특정 페이지를 카카오톡으로 공유할 일이 있을 경우 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. 이미지 테마 활용하기 노션을 만들 때 단순한 이미지만 넣으면 약간 재미가 없어 보일 수 있다. 이럴 땐 내가 찍은 고퀄리티 사진이나 혹은 다른 사람들이 찍은 예쁜 이미지를 활용해서 배경 이미지 외 이미지를 넣어 느낌을 줘보도록 한다. 비슷한 톤의 사진들을 나열해주면, 단순해 보이는 나의 노션 다이어리에 테마가 생긴 느낌이다. 고화질 이미지 구하는 사이트..

현재 프로젝트 사용하는 node project는 npm run start를 이용해서 서버를 돌리고 있다. pm2란? Node 앱 애플리케이션을 다운 타임 없이 운영할 수 있게 도와주는 프로세스 관리자 도구이다. pm2를 활용하면 무중단 서버 운영이 가능하다. 나의 프로젝트를 리눅스 기반 프로젝트에서 pm2를 이용하여 run server를 돌릴 땐 아래와 같은 명령어를 이용해서 사용 중이었다. pm2 start npm --name "appName" run start 리눅스에서는 위와 같은 명령어로 서버를 돌려도 문제가 없었는데 window10에서 동일한 명령어를 날려서 실행해보니 서버가 돌지 않았다. pm2 ls로 pm2 status 상태를 확인해보니 errored가 뜨면서 서버가 제대로 돌지 못한다. 오..

노션을 이용해서 필기를 하는 사람들이 있을 것 같다. 나의 경우 공부를 정리할 때 노션 페이지를 많이 활용 중이다. 필기를 정리하다 보면 간단한 텍스트가 아니라 복잡한 수학 공식들을 작성할 때가 있다. 노션에서는 이러한 필기 형태를 수식을 이용해서 작성이 가능하다. 수학 공식 블럭 사용법 텍스트 블록에서 수식을 작성할 때 /수학을 선택하면 수학 공식을 넣을 수 있는 블록이 생성된다. 혹은 원하는 블록을 드래그를 한 뒤 루트 x 아이콘을 클릭하면 내가 만든 블록을 수학 블록으로 만들 수 가있다. 수학공식 실제 사용 화면 예를 들어 피타고라스의 공식을 노션에 작성해본다고 하자. 제곱의 표시는 ^ 를 사용해야 해서 아래와 같이 작성하면 된다. a^2 +b^2 =c^2 인식 가능한 TeX 기호 노션에 인식되는 ..