본문 바로가기

Javascript139

p5.js에서 drop shadow 효과 넣기 최근 p5.js로 코딩하다가 ellipse에 drop shadow를 넣을 일이 생겼다.하지만 p5.js의 reference를 찾아보아도 drop shadow을 넣을수 있는 함수는 보이지 않았다.구글링하여 찾은 결과 p5.js는 유일하게 drop shadow를 넣을수 있는 함수를 지원을 안한다고 한다. 이에 관한 내용 첨부는 아래의 링크를 참고하면 된다. https://github.com/processing/p5.js/wiki/p5.js-overview#createcanvas 대신 캔버스의 함수를 그대로 사용할 경우 drop shadow가 되게끔 지원해주고 있다. 결론적으로 아래와 같이 써주었더니 효과가 잘 적용되었다. drawingContext.shadowOffsetX = 5;drawingContext... 2017. 9. 21.
convolution 필터를 구현할때 주의할 사항 최근에 convolution 필터를 구현할 일이 생겼다.기본 원리는 학부때 많이 배워서 구글링을 하여 구현 방법을 습득후 p5.js로 구현하게 되었다.물론 참고한 자료에서는 canvas를 사용하고 있었지만p5.js가 나에겐 편한 라이브러리가 되었기에 캔버스 함수를 해석해서 p5.js로 고쳐짜기로 하였다. 그런데 아무리 해도 결과가 똑같이 나오지 않았다.조금 비슷하게는 나오는데 에얼리어싱이 생기고 색도 안 맞았다.도대체 어떤 부분이 잘못되었는지 2일동안 시간을 할애해서 수학식도 점검하고 코드도 디버깅 해보고 했지만 이상이 없었다. 그리고 마지막 3일날 오류를 찾게 되었는데,원인은 기존의 캔버스 코드에서는 결과를 담을 이미지 배열을 따로 생성해주어convolution한 값들을 새로운 이미지 배열에다 넣어주고.. 2017. 9. 15.
e.preventDefault() 함수를 푸는법 js 코드를 짜다보면 특정한 이벤트 발생을 막기위해 e.preventDefault() 함수를 쓰곤 한다.최근 개발중 modal 버튼 두개가 레이어상 겹칠일이 생겼다.그런데 상위 레이어의 버튼을 누르니 두개의 modal 페이지가 동시에 떴다. 이 문제를 해결하기 위해 뜨지 말아야할 modal의 show 이벤트가 발생했을때 e.preventDefault() 함수를 적용함으로 뜨지 않게 하였다.하지만 이후 e.preventDefault() 함수가 적용된 모달은 버튼을 눌러도 뜨지 않는 문제가 발생했다.이 문제를 해결하기 위해서 e.preventDefault()를 풀어야 하는 문제에 직면하게 되었는데,해당 방법을 찾느라고 시간을 많이 쏟았다.방법은 해당 모달에 unbind() 함수를 써주면 된다. 자세한 해결방.. 2017. 8. 28.
progressive web app 정리글 PWA 개념과 사용법을 처음 알게되었을때,놀람과 동시에 js를 잘 배웠다는 기분이 들던 떄가 있다. 최근 아래와 같은 블로그를 보게 되었는데,PWA에 대해 잘 정리해 놓았다. https://joshua1988.github.io/web_dev/opinions/where-are-we-and-where-are-we-heading/#들어가며 PWA 진지하게 다시 공부해봐야 겠다. 2017. 8. 28.
webpack 업데이트 사항 최근 다시 webpack을 사용해보려고 블로그 문서를 읽고 있는데,과정을 따라가다가 자꾸만 에러가 생기는 부분이 있었다.그래서 그에 관련한 해결책을 구글링 해보니 다름이 아닌 버전업 문제였다. 결론적으로 css 로더 문제였는데,이전에는 style!css! 이렇게 사용했다면, 지금은 style-loader!css-loader 이렇게 사용해야 된다고 한다.(아래 링크 참고) https://stackoverflow.com/questions/42196583/webpack-cant-resolve-style webpack이 버전업 됨으로 조금씩 바뀐함수가 있을거 같음으로최근에 다시 webpack을 사용하려는 사람들은 버전업을 참고 하기 바란다. 2017. 8. 21.
yyyy-mm-dd 형식으로 날짜 데이터 쉽게 꺼내는 방법 결론적으로 toISOString() 메소드를 이용하여 날짜 형식을 변환한 후에그중에서 yyyy-mm-dd 형식의 데이터만 추출하면 된다. 자세한 사항은 아래의 링크를 참조하면 된다. https://msdn.microsoft.com/ko-kr/library/ff925953(v=vs.94).aspx https://stackoverflow.com/questions/23593052/format-javascript-date-to-yyyy-mm-dd 2017. 8. 4.
서버로 보내기전 한글이 포함된 url을 인코딩하는 방법 클라이언트 단에서 서버쪽으로 한글이 포함된 url 주소를 보낼때서버에서 해당 url을 제대로 받지 못할때가 있다. 이러한 문제는 클라이언트와 서버와의 인코딩 형식이 다를때 발생하는데,클라이언트에서는 uft-8 형식으로 url 주소를 보내는 반면, 서버에서는 url을 유니코드 형식으로 변환해서 받기 때문이다. 그렇기에 클라이언트에서 한글이 포함된 url을 서버에 보낼때url의 인코딩 형식을 유니코드로 변환해줄 필요가 있다. 이러한 경우 encodeURIComponent() 라는 함수를 이용하면 된다.본 함수로 url 부분에서 한글로 된 부분만 해당 함수로 감싸주면 문제는 해결된다.(참고로 저 함수로 url 전체를 감싸면 안된다.이유는 해당함수가 특수문자는 제외하고 변환하기 때문에 일부값들이 생략되어 전달될.. 2017. 7. 28.
SVG filter에 대하여 최근 SVG 필터를 이용하여 작품읆 하나 만들 준비를 하고 있는데,해당 필터에 대한 한국어 페이지 정보가 미미함을 알게 되었다.그래서 내가 직접 정리해 보려고 한다. 먼저 filter 태그를 살펴보면,여러가지 속성이 있지만 대부분 기본적인 것이고 그렇지 않은것을 보자면filterRes, filterUnits, primitiveUnits 정도가 있다.이중에서 filterRes 폐기되어 더이상 사용하지 않는다고 한다.그러니 filterUnits, primitiveUnits 정도만 알아두면 된다. 솔직히 filterUnits, primitiveUnits에 대한 설명글을 읽어 봤지만정확히 어떤 기능을 하는 속성인지는 파악이 안 되었다. 두개의 속성 모두 userSpaceOnUse, objectBoundingBo.. 2017. 7. 26.
datatables editor 파일 업로드 사용하기 datatables editor에서 파일 업로드를 사용하고 싶으면,아래의 예제링크를 참고하면 된다. https://editor.datatables.net/examples/advanced/upload.html 문제가 있다면 본 예제에서 서버사이드는 php 언어만 보여주고 있기에,node.js를 쓰는 경우 ajax 함수 발생에 따른 반환 데이터를 직접 짜주어야 한다. 그렇기에 datatables 팀에서는 php 이외의 서버언어를 사용하는 개발자들을 위해서클라이언트에서 서버로 저달하는 데이터와 서버에서 클라이언트로 전달하는 데이터를 아래의 링크에 잘 정리해두었다. https://editor.datatables.net/manual/server 이러한 형식을 맞춰서 클라이언트와 서버가 소통해야 datatables.. 2017. 7. 11.

티스토리툴바