김평범's OrdinaryCode

이벤트 페이지 혹은 사용자가 공유를 하기 위해서는 해당 주소를 복사해야 되는 경우가 있다. 주소창은 전체 선택해서 복사를 하는 것도 가능하나, 모바일 화면상에서는 직접 주소창을 복사하는 것도 귀찮기도 해서 요즘은 링크 복사 가능한 버튼을 만들어서 제공한다. 🧐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 기호 노션에 인식되는 ..

웹 페이지를 제작 중 특정 페이지의 경우 단순히 보는 것이 아닌 프린트 기능이 필요할 때가 있다. 물론 기본 적인 브라우저 내에서는 인쇄 기능을 제공 하나, 모든 페이지가 아닌 HTML에서도 특정 페이지를 프린트를 하고 싶을 경우 Print-js를 연결해서 사용해보도록 하자 🖨️print-js print-js는 자바스크립트 라이브러리로 웹상의 요소를 프린트를 도와준다. 간단하게 npm으로 설치가 가능해서 손쉽게 웹 애플리케이션에서 사용이 가능하다 설치방법 //npm npm install print-js --save //yarn yarn add print-js Import 설치한 라이브러리는 import 시켜서 사용이 가능하다. import printJS from 'print-js' Nuxt window ..

동적인 웹 애플리케이션의 구현을 위해서는 사용자의 다양한 이벤트에 맞춰 데이터를 핸들링해야 된다. 이러한 개념에서 Javascript 이벤트 객체에 대해서 관심을 가질 필요가 있다. 🎉 JavaScirpt 이벤트란? DOM에서 특정 이벤트가 발생되면 우리는 JavaScript 이벤트 객체에서 이를 확인할 수 있다. DOM 구조에서 이벤트는 매우 다양하지만, 자주 쓰는 이벤트는 아래와 같다. 포커스 이벤트(focus, blur) 폼 이벤트(reset, submit) 뷰 이벤트(scroll, resize) 키보드 이벤트(keydown, keyup) 마우스 이벤트(mouseenter, mouseover, click, dbclick, mouseleave) 드래그 앤 드롭 이벤트 (dragstart, drag, ..

내가 Notion을 사용하는 이유 요즘 핫한 메모 어플인 노션 처음엔 무료 플랜의 경우 블록 수 제한이 있어 활용하는 데 있어 고민이 있었지만, 지금은 개인들에게는 무료로 풀려서 고민 없이 바로 메인 메모 어플로 사용하게 되었다. 내가 Notion을 사용하는 이유는 통일된 디자인(가독성 상승) 표의 데이터베이스화 (데이터베이스로 관리되는 내 정보들을 관련 데이터끼리 연관시켜 관리가 가능하다) 친구와 공유 가능(특정 페이지는 공동 작업이 가능하다) 다양한 기능 제공 (메모 앱이지만, 숫자 수식계산, 이미지, 링크 연결 등 다양한 형태의 블록 기능을 제공한다) 모바일, PC를 이용하여 언제 어디서든 사용 가능 이러한 기능을 이용하니, 내가 관리하는 정보를 보다 깔끔하고 체계적으로 나의 개인 정보를 관리할 수..