김평범's OrdinaryCode

모바일 환경이 중요해지면서, 프런트 앤드 개발자들은 모두 반응형을 고려해서 작업을 한다. 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..

🎉 마이크로 인터랙션 요즘 SNS에서 흔히 볼 수 있는 인스타그램의 "좋아요", 트위터의 경우 리트윗은 사용자들이 작은 동작으로 해당 게시물에 피드백을 주는 좋은 방법이다. 마이크로 인터랙션은 사용자들이 홈페이지에서 하는 작은 행동들을 어떠한 변화를 주었는지를 사용자 경험으로써 느낄 수 있게 해 준다. 자신이 행한 특정 행동에 자연스러운 UI 피드백을 주어 구구절절한 설명이 없이도 사용자는 변화를 알아차릴 수 있도록 시각화하며 오류 및 다음 행동들을 지시할 수 있게 한다. 왜 마이크로 인터랙션을 사용해야 하는가? 마이크로 인터랙션으로 우리는 사용자에게 어떠한 일이 지금 일어나고 있는지 다음 목표를 위해 어떠한 일을 진행해야 하는지 기다림 동안 페이지 이탈을 방지시켜주는 등의 기능을 제공할 수 있습니다. ..

🐣들어가기 전에 Database 필드 중 데이터 유형이 BIT인 경우 데이터를 Query를 통해서 가져왔다. 해당 값을 가지고 Node에서 작업을 하려고 했는데, 데이터 값을 콘솔 로그로 찍어보니 이라는 값이 찍힌다. 나는 해당 필드에 저장된 값을 봐야 되는데 어떻게 변환시켜야 하는 것인가 찾아보기로 했다. Buffer란? 이진 파일(binary file)을 저장하는 데이터 포맷이다. 컴퓨터 저장과 처리 목적을 위해 이진형식으로 인코딩 된 데이터 형식의 파일이다. 버퍼 형태로 데이터를 처리할 경우 데이터를 효율 적으로 처리할 수 있다고 한다. DB에서 query를 날린 뒤 나온 비트 형식의 데이터를 bitData변수에 넣어준 뒤, 콘솔 로그를 찍어보면 Buffer 형태로 출력되는 것을 볼 수 있다. co..