김평범's OrdinaryCode

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

이벤트 페이지 혹은 사용자가 공유를 하기 위해서는 해당 주소를 복사해야 되는 경우가 있다. 주소창은 전체 선택해서 복사를 하는 것도 가능하나, 모바일 화면상에서는 직접 주소창을 복사하는 것도 귀찮기도 해서 요즘은 링크 복사 가능한 버튼을 만들어서 제공한다. 🧐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는 상대적 길이 단위로 비교대상과 비교해서 상대적인 크기를 측정하는 단위이다. 예를 들어보자, 현재 브라우저 화면이..

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

웹 페이지를 제작 중 특정 페이지의 경우 단순히 보는 것이 아닌 프린트 기능이 필요할 때가 있다. 물론 기본 적인 브라우저 내에서는 인쇄 기능을 제공 하나, 모든 페이지가 아닌 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, ..

🙅‍♀️moment.js 나의 프로젝트의 날짜 시간 계산을 하는 라이브러리는 moment.js를 사용했다. 오늘 기준 다운로드 수가 18,204,885 많은 개발자들에게 사랑받은 라이브러리였다. 나 역시 프로젝트마다 날짜를 계산할 때 사용하는 라이브러리였다. 2011년 첫 공개된 moment.js는 이제는 이미 발표가 된 지 9년이 지났고, 지금의 웹은 이 moment가 발표되었을 때와 많은 부분이 변했다. moment 제작진들은 이제 새로운 기능 대신 안정성을 우선으로 하여 moment를 이제 더 이상의 업데이트가 없다고 발표를 했고, 다른 라이브러리를 사용하라는 말을 남겼다. 이제부터 moment.js는 더 이상 지원이 없어진다는 점을 밝힌 것이다. 물론 지금 사용하는 곳에 문제가 없다면 당장은 문제..

렌더링에 관심을 가지기 처음 프런트 앤드 개발자가 되면 해당 기능을 개발하는데 가장 큰 관심과 열정을 쏟는다. 하지만, 연차가 어느 정도 차게 되면 내가 짠 코드의 구조와 성능에 대해 관심이 생기기 시작한다. 오늘은 그 중 렌더링에 관련된 얘기다. 렌더링이란? 가장 간단하게 설명하면 웹 애플리케이션 상에 데이터를 표시하는 행위이다. 즉 사용자의 화면 혹은 다른 출력장치에 내가 프로그래밍한 요소를 문서 객체모델(DOM) 형태로 보여준다. 우리가 만들어진 화면은 HTML로 이루어진 문서 구조와 CSS로 만들어진 스타일 요소들이 혼합된 형태로 화면상에 그려지게 된다. HTML의 경우 DOM(Document Object Model)으로 구현 CSS의 경우 CSSOM(CSS Object Mode)으로 구현 렌더링..

🧛‍♂️ Are you interested in participating? 문구 발생 nuxt Project를 생성해서 npm run dev 명령어 실행 시 Are you interested in participating?(Y/n)이라는 문구가 계속 뜨는 문제가 발생했다. 처음엔 왜 뜨지? 하고 무시하고 Y, n 여러 개를 선택해서 넘어가 보았지만, 지속적으로 서버가 돌아갈 때마다 물어보는 경험을 하게 된다. 위의 내용에 따라 보면 NuxtJS의 경우 익명의 원격 측정 데이터를 수집하여 지속적으로 개선하는데 노력하니 원격으로 데이터를 수집하길 참여해달라는 내용이다. 들어가 보니 수집되는 항목은 아래와 같다 호출하는 명령어(nuxt dev, nuxt Build 등) Nuxt.js, Node.js 버전 일반..

🐣 들어가기 전 요즘 UI상에서 사용자에게 직관적인 형태로 ON/OFF 스위치 버튼을 제공한다. 이러한 형태는 HTML input Checkbox를 이용하여 만들 수 있다. 다크 모드/라이트 모드 변환이라던지 해당 기능을 끄고 키는 경우는 기본적인 체크박스 디자인보다는 스위치 형태로 제공하는 게 사용자의 이해도가 더 높을 수 있다. ON/OFF 스위치 완성 UI 보통 ON 상태일 경우 포인트 컬러를 이용하여 상태가 들어온 상태이며, OFF상태일 경우 회색 등을 이용하여 꺼져있는 느낌으로 만든 스위치 디자인이다. HTML 코드 CSS 코드 .switch-button { position: relative; display: inline-block; width: 55px; height: 30px; } .swit..