javascript

javascript

    sequelize에서 alias 사용하여 검색하는 방법

    sequelize에서 검색을 할 때 alias를 줘서 검색하는 방법은 다음과 같다. 생각보다 간단하다. 123await This.User.findOne({ attributes: ['id', ['name', 'userName']] //id, first AS firstName});Colored by Color Scriptercs

    sequelize에서 timezone 설정 추가

    sequelize를 통해 datetime 필드에 값을 삽입해봤을 때 계속해서 값이 UTC 시간대로 들어가게 되었다. 그래서 해당 블로그(http://ggamu.com/81)에서 제공하는 방식대로 database 자체에 timezone을 서울로 변경하였다. 하지만 그래도 계속해서 값이 UTC로 들어갔고 그래서 혹시 몰라 삽입하는 코드에 new Date('2018-10-18 11:11:11').toLocalString()를 설정해줬다. 하지만 그래도 역시나 ㅜㅜ 그래서 sequelize 라이브러리 자체에 설정을 하는 부분이 있는지 싶어서 확이해봤는데, 설정 자체에 timezone을 설정하는 부분이 있었다. 그래서 sequelize 객체를 만들때 사용하는 option에 timezone옵션을 부여해줬다.1234..

    node js에서 stream pipe 사용시 에러 처리 방법

    node js에서 데이터를 stream을 사용하여 처리하고 pipe를 사용해서 계속해서 stream을 가지고 작업을 이어나갈 수 있다. 그런데 pipe를 통해서 작업을 진행하다 보니까 중간에 오류가 발생했을 때 try / catch 로는 정상적으로 처리하지 못하는 경우가 발생했다. 나에 경우에는 에러가 발생했을 때 try / catch에서 잡히지 않아서 프로그램이 Unhandled Promise Rejections를 출력 하며 죽어버렸다. 그 예는 다음과 같이 request를 통해서 받은 이미지를 sharp 라이브러리를 통해서 이미지 크기를 변경하려고 할 때 발생했다.1try { await request('https://image.toast.com/aaaaab/ticketlink/TKL_3/ion_mai..

    Elasticsearch query string 조회시 parse exception 에러 처리

    elasticsearch에서 query_string로 데이터 조회시에 쿼리문으로 ) 특수문자가 포함하여 조회했다. 하지만 다음과 같이 문제가 발생했다. 1234567891011{ "error": { "root_cause": [ { "type": "parse_exception", "reason": "parse_exception: Encountered \" \")\" \") \"\" at line 1, column 11.\nWas expecting one of:\n \n ...\n ...\n ...\n \"+\" ...\n \"-\" ...\n ...\n \"(\" ...\n \"*\" ...\n \"^\" ...\n ...\n ...\n ...\n ...\n ...\n ...\n \"[\" ...\n \"..

    node.js express에서 request 사용자 아이피 찾기

    요청한 사용자의 Ip를 찾아서 로그를 남기거나 Ip 지역정보를 활용해서 geoIp를 찾아내거나 할 때 request를 요청한 사용자의 IP 주소가 필요하다. Spring에서는 간단하게 HttpServletRequest에서 getHeader의 X-FORWARDED-FOR에 있는 정보를 가져오거나 getRemoteAddr()을 통해 가져올 수 있다.1234567891011121314/** * 주문요청. * * @param req the req * @return the response entity*/@PostMapping(value = "/order")public ResponseEntity order(@Valid @RequestBody OrderRequestDto req, HttpServletRequest r..

    Javascript에서 epoch second 구하기

    epoch second 는 유닉스 시간을 나타내고 Epoch 시간 이라고 한다. 이를 자바스크립트로 구하는 방법을 알아보자.1Math.floor(new Date('2018-03-11') / 1000)cs 다시 Date 값으로 돌리는 것도 어렵지 않다.1new Date(1520726400 * 1000)cs

    Javascript promise에 대해 알아보자.

    기존에 ajax와 같은 비동기 요청이 종료가 되고 특정한 작업을 수행하고 싶을경우 콜백함수를 설정하여 진행했었다.1234567891011 Common.sendAjax({ url: Common.getFullPath('user/cert/check'), param: { 'otp' : $otpNum.val(), 'userId' : $joinEmail.val() }, type: 'POST', success: (e) => { // 성공 시 발생할 콜백함수 }, failed: () => { // 실패시 발생할 콜백함수 } });Colored by Color Scriptercs 이런 비동기 프로그래밍은 기존 동기식 프로그래밍 보다 작업을 요청하고 다른 작업을 할 수 있는 장점이 있다. 하지만 이는 그 유명한 콜백 지옥..

    node.js에서 aws s3 스토리지에 이미지 저장하기

    AWS에서 제공하는 S3 스토리지는 다양한 파일을 bucket에 보관할 수 있다. 자세한 내용은 생활코딩 강의 참고하면 좋다. https://opentutorials.org/course/608/3006 그럼 우선 aws sdk를 설치하여야 한다.1npm i aws-sdk --savecs 그리고 AWS IAM에서 생성한 사용자가 있어야 한다. 사용자는 S3에 대한 권한을 가지고 있어야 한다. 사용자를 생성하고 권한을 부여하는 기능은 어렵지 않기때문에 검색해서 적용하면 된다. 그리고 해당 사용자를 생성하면 csv 파일로 secretkey를 받을 수 있다. 이를 AWS S3에 접근하여 사용하기 위해서 사용된다. 기본 정보가 담긴 config.json 생성 우선 부여 받은 사용자 accessKeyId와 secr..

    elasticsearch percolating 쿼리

    엘라스틱 서치에서 일반적인 검색 기능은 특정 인덱스에 문서를 저장하고, 쿼리에 매칭되는 문서를 불러오는 방식으로 수행된다. 하지만 percolating 쿼리 방식은 그 반대로 동작한다. 쿼리를 사전에 저장하고, 새로 유입된 문서가 매칭되는 쿼리가 있는지 확인해 매칭되는 쿼리를 반환한다. 업무적으로 필요한 기능이어서 알아보던 중 알게되어서 정리해본다. https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-percolate-query.html 인덱스 생성아래 인덱스생성에 보면 두 가지 필드를 볼 수있다. 먼저 message 필드는 percolator에서 정의된 문서를 임시 인덱스로 인덱싱하기 전에 사전 처리하는 데 사용되는 필드이..

    elasticsearch session timeout 이슈

    node.js에서 엘라스틱서치 클라이언트 사용시에 반복되는 요청이나 오랜 시간이 필요한 요청이 있을때 session이 끊어져 버리고 socket hang up 이슈가 발생한다. ※해결방법 session timeout과 keepalive 옵션을 지정해주면 된다. 아래 내용을 보고 참고하여 설정하시길.

    request-promise를 통해 가져온 euc-kr 문자열 인코딩 문제 해결 (iconv)

    크롤러를 만들기위해 필요로하는 페이지를 가지고 오기위해 request-promise를 사용하였다. 요새 대부분의 홈페이지는 utf-8을 사용하기 때문에 큰 문제가 없으나 euc-kr를 사용하는 옛날 사이트들이 있다. 그런 사이트들의 정보를 그냥 request해서 가지고 오게되면 한글이 다 깨져버린다. 그것을 해결해보자. 우선 request-promise를 사용하여 데이터를 가지고 와보자.12345678const request = require('request-promise'); class Crawler { async crawler() { let doc = await reqest('http://url'); }}Colored by Color Scriptercs 역시 euc-kr를 사용하는 것을 확인하고 있고..

    node.js로 구글 스프레드시트에 접속하여 데이터 가져오기

    자신의 구글 드라이브에 있는 엑셀 (스프레드시트)에 접속하여 데이터를 가져오는 방법을 알아보자. 우선 google-spreadsheet에 접근할 수 있는 Js를 다운로드 받자.1npm i google-spreadsheet --savecshttps://www.npmjs.com/package/google-spreadsheet 구글 스프레드 시트 만들기 구글 드라이브에 스프레드 시트를 만들자. 저 주소 URL에 블록처리되어있는 부분이 바로 키로 사용된다 구글 스프레드 시트 접속권한 사용자 생성 그리고 이 스프레드 시트에 접속할 수 있는 계정을 만들어야한다. https://console.developers.google.com 이곳에 접속하여 사용자를 만들고 키를 생성한다. (단순하게 들어가서 확인해보면 무리없이..

    Facebook Javascript plugin과 spring security를 이용한 페이스북 로그인

    개인적으로 공부겸 만들고 있는 Wedul Pos에는 아이디와 패스워드를 사용해서 로그인하는 방식을 제공했다. 하지만 페이스북 로그인 방식을 추가해보고 싶어서 facebook 개발자 사이트에 가입하여 정보를 얻고 추가해봤다. 우선 페이스북 로그인 방식을 처리하는 방식은 Facebook Javascript plugin을 사용하여 spring security에서 인증을 하는 방식과 /sign/facebook 요청만 front에서 보내면 server에서 모든 처리를 진행하는 방식 두가지가 있다. 그 중에 첫번째 javascript plugin을 이용하는 방식을 사용해서 구현해보자. 1. facebook developer 사이트에서 javascript 내용 얻기 https://developers.facebook...

    html의 화면을 캡쳐해서 이미지로 변경하는 html2canvas와 pdf로 저장하는 jsPDF 라이브러리 소개

    회사에서 업무를 진행하면서 현재 화면을 pdf로 만들어야하는 일이 있었다. 기존에 html을 pdf로 스프링에서 만드는 업무는 진행을 했었다. 이때는 이전에 포스팅을 했었으니 참고 하시면 좋을 것 같다. (Spring에서 html2pdf를 사용해서 pdf파일 만들기) 우선 현재 화면을 딱 캡쳐해서 image로 만드는 작업이 필요했다. 그 작업을 제공해주는 라이브러리가 바로 html2canvas이다. html2canvas 우선 html2canvas를 사용하기 위해 파일을 받아보자. npm install --save html2canvas 캡처를 진행하기 위해서는 캡처하고자 하는 영역을 selector로 위치를 받아서 지정할 수 있다. 우선 캡처를 진행할 화면을 간단하게 만들어보자. Hello world! W..

    input 태그에 선택한 항목이 label로 출력되게 해주는 choices.js 소개

    현재 공부하려고 개인적으로 만들고 있는 프로젝트 위들포스에서 사용자를 검색하고 input 박스위에 레이블처럼 보여주는 기능이 필요했다. 아무리 찾아보아도 좋은 라이브러리가 없었는데 choices.js의 이미지를 보니 좀 좋아보여서 적용해 보았다. 우선 내 프로젝트에 적용된 하면은 이렇다. [홈페이지 및 github] https://joshuajohnson.co.uk/Choices/ https://github.com/jshjohnson/Choices 홈페이지에는 예제가 여러개 나열되어 있고, 필요에 따라 소스보기를 통해 참고할 수 있다. github에는 document가 있어서 사용할 수 있는 속성들이 나열되어 있다. [사용방법] 간단한 사용방법은 github에서 소스를 받거나 npm install cho..

    div내에 overflow scroll 옵션에 따라 스크롤 생성 시 제일 밑으로 스크롤 내리기

    채팅 프로그램을 요새 만들고 있는데 채팅의 경우 스크롤이 새로운 내용이 추가되면 맨 밑으로 이동되어야 한다. 그래서 jquery를 통해 좀 쉬게 이동하게 할 수 없나 싶어서 찾아보다가 있어서 정리해본다. const $messageTextBox = $('#messageTextBox'); $messageTextBox.scrollTop($messageTextBox[0].scrollHeight); div의 태그를 잡아서 해당 스크롤의 높이를 scrollTop 메서드로 잡아주면 자동으로 밑으로 내려가게된다. 어려워 어려워.

    spring에서 List 또는 Array 데이터를 Controller에서 받기

    컨트롤러에서 List데이터를 받아서 매핑하기 위해서 필요한과정을 정리해본다. 1. List 데이터를 받기 먼저 controller에서 @RequestBody List를 받도록 설정한다. 그리고 ajax를 통해서 요청하는 부분에서 다음과 같이 진행한다. 1234567let data = [{'name':'cjung', 'age':30}, {'name':'wedul', 'age':28}]; $.ajax({ url:...., type:..., param: JSON.stringify(data);});Colored by Color Scriptercs 2. DTO객체 안에 LIST 변수에 데이터를 매핍 하고자 하는경우 기존에 습관대로 진행을 다음과 같이 먼저 해보자. 12345678910111213141516// j..

    css 파일 Uncaught SyntaxError: Invalid or unexpected token 에러

    css 파일 로드시 브라우저에서 다음과 같은 오류가 출력되는 경우가 있다. Uncaught SyntaxError: Invalid or unexpected token 이 때 가장 의심해 볼 수 있는 부분은 css 파일 로드시 다음과 같은 방식으로 로드했는지 의심해 보아야 한다. css 파일은 자바스크립트 파일이 아니기 때문에 로드시 문법 오류를 유발 할 수 있다. 그래서 css 파일로드시 다음과 같이 로드하여야 한다.

    javascript로 여러 파일 다운로드 하기

    회사에서 프로젝트를 진행하다가 자바스크립트로 여러 파일을 동시에 다운받게 할 일이 있었다. 기존에 다음과 같이 반복을 통해서 진행하였더니, 정상적으로 동작하지 않았다. 그 이유는 정확히 알지 모르지만 같은 요청을 동시에 요청하는 것을 막는 것 같다. 12345678 Colored by Color Scriptercs 코드에 두개를 요청하였으나, 하나만 다운로드가 되는 것을 알 수 있다. 실패에 원인이 제대로 출력되지 않아 정상적으로 확인하기는 어렵다. [해결법] 이를 바꾸기 위해서는 어느정도에 interval을 주어야 한다. 12345678910dd Colored by Color Scriptercs 이렇게 하면 해결이 되지만, 만약 서버에 request 응답 시간이 지연되면 마찬가지로 되지 않는다. 그럴 ..

    var와 let 그리고 const 차이점과 사용법 소개

    es5까지 Javascript에는 변수 선언할때 var를 사용하였었다. 하지만 var를 선언하여 변수를 선언할때 잘못된 사용으로 인해 문제가 발생하는 경우가 있었다. 하지만 자바스크립트 es6로 올라가게 되면서 let 그리고 const 가 추가되었다. 프로젝트를 진행하면서 es6를 처음 사용하게 되었는데 java8이 나와서 java 사용이 편해진 것 처럼 es6를 사용하면서 더욱 편하게 개발을 진행하였다. 그럼 es6의 특징에 대해 알아보자. [var와의 차이] var는 function-scoped이고, let 그리고 const는 block-scoped 이다. 함수 스코프는 모든 변수가 함수에 속하고 한수 전체에 걸쳐서 사용되는 개념이다. block-scoped는 선언된 변수를 둘러싼 블록의 스코프를 이..

    Javascript 처리과정

    javascript의 처리과정 순서에 대해서 알아보자. 브라우저에서 이벤트가 발생하면 Event Queue에 삽입해 놓고 이를 stack이 비어지면 Event Queue에서 작업이 있는지 확인한다. 그리고 작업이 있는 경우 그것을 꺼내서 사용한다. [작업순서](1) 이벤트 큐에 작업이 있는지 확인한다. (2) 스택이 비었을 때 큐에 있는 작업을 꺼내 수행한다.

    javascript 기타 팁

    javascript tip 에 대한 좋은 글이 있어서 정리해 보았다. https://m.blog.naver.com/tmondev/221070133735 1. css selector 우선순위 -> css Selector의 적용 우선순위가 있다. 해당 블로그에서 제공하는 자료에 보면 적용 우선순위는 다음과 같다. !important > id > class > tag 2. window.onload와 $(document).ready() 선언 차이 1) cs

    Javascript 성능 저하에 조심 할 부분

    Javascript 성능을 저하시키는 부분에 대한 좋은 글이 있어서 공부해보고 정리해 보았다. => 원본 https://m.blog.naver.com/tmondev/221070295102 1. 전역 변수 및 Element를 캐싱 => 자바스크립트의 전역 변수는 스코프 체인의 마지막에 오게 되므로, 전역 변수 내의 태그 탐색 등의 일을 하게되기 때문에 n*2의 비용이 발생 => 어떤 값을 찾을 때까지 스코프 체인 끝까지 뒤지기 때문에 성능에 문제가 발생할 수 있다는 뜻으로 해석됨. 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556/* 사례 1. document라는 java..

    dom element를 자유롭게 움직이고 수정할 수있게 하는 gridstack.js 소개

    기존에 jquery-ui에서 sortable 메서드를 사용하여 element들을 자유롭게 움직일 수 있다. 하지만 미세한 이동이 어렵고, 크기 조절까지 한번에 하기에는 부적절하다. 그래서 검색결과 gridstack.js를 사용하면 편리하게 크기 조절 및 위치 이동까지 자유롭게 할 수있다는 것을 알았다. [필요 라이브러리] gridstack.js를 사용하기 위해서는 하단의 정보와 같이 몇몇 라이브러리가 필요하다. [예제 코드] 1. package.json -> 필요라이브러리가 추가된 package.json 12345678910111213141516171819{ "name": "gridstack_test", "version": "1.0.0", "description": "gridstack_test", "ma..