타닥타닥 민타쿠

Nodejs 에서 로깅 모듈로 유명한 winston 모듈은 성능 등의 이슈로 추적(tracing) 기능을 지원하지 않는다고 한다. 일부 유저들이 winston 을 쓰면서 파일명, 라인(몇째 줄인지)까지 나오게 하는 시도들이 있는 것 같지만, 불안정하고 성능이 좋지 못하다는 공식 입장을 보고도 그러한 방법을 써볼 필요는 없는 것 같다. 따라서, tracer 라는 편리한 모듈을 써서 쉽고 간편하게 파일명과 라인 출력을 해보았다. npm install tracer 프로젝트 경로에서 명령어를 통해 모듈 설치 tracer.js var fs = require('fs'); var logger = require('tracer').colorConsole({ transport: function(data) { console..

ajax 통신시 제한시간 설정 및 로딩 아이콘 표시하기 로딩 아이콘 CSS 설정(샘플 참고 사이트) /* (css) */ .loading { display: inline-block; width: 30px; height: 30px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; } @keyframes spin { to { -webkit-transform: rotate(360deg); } } @-webkit-keyframes spin { to { ..

각종 태그에서 border 속성을 통해 테두리를 넣을 수 있듯이 글자에도 비슷한 속성이 있다. text-shadow 속성인데, 이를 이용하여 그림자는 물론이고 테두리까지 넣을 수 있다. 글자 테두리 넣는 방법 테두리 스타일 - 각각 순서대로 왼쪽, 아래, 오른쪽, 위쪽을 그려준다. - 'x축 position / y축 position / 색상' 혹은 '가로 위치 / 세로 위치 / 색상' 으로 이해하면 되겠다. - 추가로, 색상 전에 픽셀 단위를 한번 더 적어서 번짐 정도를 지정할 수 있다. 아래 그림자 넣는 방법에서는 번짐도 이용한다. 글자 그림자 넣는 방법 그림자 스타일 - 똑같이 'x축 position / y축 position / 색상' 혹은 '가로 위치 / 세로 위치 / 색상' 에서 번짐 정도를 추가..

node-schedule 사용법 npm install node-schedule - 프로젝트 경로에서 cmd 명령어로 node-schedule 모듈을 설치한다. 스케줄러 선언 및 반복 규칙 지정하기 var nodeschedule = require('node-schedule'); // nodeschedule rule 지정. // '초 분 시 일 월 요일(0 과 7 은 일요일)' // ex) '0 0 15 1 * *'

Nodejs nodemailer 모듈로 이메일 보내는 방법 npm install nodemailer (npm install nodemailer fs) 프로젝트 경로에서 cmd 명령어로 nodemailer 모듈을 설치한다. (pdf 파일 첨부할 경우 fs 모듈도 함께 설치) 모듈 선언 및 transporter 생성 const nodemailer = require('nodemailer'); // const { readFileSync, unlinkSync, stat, readdirSync } = require('fs'); // 파일을 다룰 경우 let transporter = nodemailer.createTransport({ // 사용하고자 하는 서비스 // service: 'gmail', host: sen..

로깅을 위해 Nodejs 에서 가장 많이 사용되는 winston 모듈을 적용 및 테스트하였다. winston 모듈로 로깅하면 로그 레벨별로 색상을 구분하여 출력할 수 있으며, 레벨별, 날짜별로 저장하고 보관 기간 등 원하는 설정을 할 수가 있다. winston 모듈 적용 방법 npm install winston winston-daily-rotate-file 프로젝트 경로에서 cmd로 winston 과 winston-daily-rotate-file 모듈 설치 명령어를 입력한다. winston.js 작성 const winston = require('winston'); const winstonDaily = require('winston-daily-rotate-file'); const logDir = 'logs..

사용자가 input 태그를 통해 이미지 파일 선택을 하면, 해당 이미지 파일을 저장하는 업로드 기능을 구현하는 방법이다. 파일 선택하면 저장하는 법 npm install multer HTML - form 태그로 감싼 input 태그 만들기(name 중요) 스크립트 - input 태그로 파일 선택을 하면 form 태그 submit 시키기 $('#inputImg').on('change',submit); function submit() { $('#imgForm').submit(); } app.js - multer 를 이용해 라우팅 처리하기 // app.js var multer = require('multer'); var imgStorage = multer.diskStorage({ destination: fun..

처음에 자바스크립트의 비동기적 특성 때문에 내가 원하는 순서대로 실행되지 않는다는 것을 깨달았을 때, 실행 순서는 보장 받고 싶지만 동기, 비동기, Promise, then, async, await 다 무슨 말인지 모르겠고 무서웠다. 아니면 콜백함수로 다 처리해버리면 된다는데 또 콜백지옥 얘기를 꺼내며 다들 안좋단다. 그래서 그 때의 나에게 해결책을 제시해주듯이 간단히 따라할 수 있도록 정리해보겠다. Play() 함수 안에서, showFirst() -> showSecond() -> showThird() 의 순서로 실행되기를 원하는데 showFirst() -> showThird() -> showSecond() 의 순서로 실행되고 있는 상황으로 가정한다. 해결책 1. async await 그냥 따라하기 as..

마우스 커서를 가져가면 파일 선택 버튼이 보이고, 이미지 파일을 선택하면 해당 이미지를 화면에 보여주는 미리보기 기능을 구현하는 방법에 대해 알아보겠다. HTML 레이아웃 id 기준으로, - imgBox : 마우스 오버를 감지할 곳이다. - imgTag : 이미지 미리보기를 나타낼 곳이다. - inputImg : 파일을 입력 받을 input 태그이다. jpg, png 형식만 accept 로 지정해 해당 확장명의 파일 선택을 유도한다. onchange 시 파라미터로 this 를 넘겨주며 loadFile 함수를 실행한다. 마우스 오버 감지 $('#imgBox').on('mouseover', function() { $('#inputImg').show(); }); $('#imgBox').on('mouseout'..

두괄식으로 말해서, 1. movePage 함수 선언 function movePage(navigator) { var pageUrl = $(navigator).attr("url"); if (pageUrl !== location.pathname) { history.pushState({ path: pageUrl }, null, pageUrl); var popStateEvent = new PopStateEvent('popstate', { state: null }); dispatchEvent(popStateEvent); // event 발생시키기 } } 이동하려는 url 정보를 받아 path 라는 이름으로 history.state 에 저장하고, popstate 이벤트를 발생시킨다. 2. onclick 에 moveP..