개발/아카이브
웹페이지 최적화
2018.07.160.구글 PageSpeen 툴을 사용하면 내 사이트가 왜 느린지 분석해볼 수 있다.새로 만든 페이지가 너무 느려서(40초 도랏;;) 원인을 뒤지던 중 발견했는데 이거 기준으로 하나하나 해결해 나가니까 훨씬 빨라졌다."물론 이 점수가 반드시 페이지 속도에 비례하진 않는다. 점수가 높아도 느리거나, 점수가 낮아도 빠른 경우도 많다."https://developers.google.com/speed/pagespeed/insights/?hl=ko 1.이미지를 최적화하자.아래 사이트에서 png, jpg 등의 이미지들을 최적화 할 수 있다.비슷한 화질로 95% 가량 줄이니 네트워크를 통해 가져오는 이미지 용량이 격하게 줄어들었다.https://compresspng.com/ko/ 2.CSS, js 파일을 최적화하자.이..
webstorm에서 javascript/CSS minify 적용
2018.07.160.웹페이지 최적화를 위해 js 파일을 압축해보았다.일단 이걸 webstorm에 적용하기 위해서는 closure-compiler.jar 라는 파일이 필요하다. 다음 링크에서 다운로드 가능https://developers.google.com/closure/compiler/docs/gettingstarted_app 1.받고나면 하라는 대로 closure-compiler 폴더 아래에 .jar 파일을 넣어준다. 2.webstorm에서 Tools > File Watchers로 들어가서 + 버튼을 누르면 Closure Compiler 가 보인다. 3.아래 Program 경로에 closure-compiler-vxxxxx.jar 파일을 지정해준다. 4.적용해준 뒤 js 파일을 수정하면 이렇게 저절로 .min.js 파일..
canvas rotate 후 axis 조정
2018.02.19canvas를 rotate하거나 transform 하면 x축, y축도 돌아가 버린다. 뭐 그냥 보여주기만 할 거라면 축이 어디든 상관 없지만, 캔버스에 그림을 그리거나 할 때는 축을 다시 맞춰줄 필요가 있다. 이거 때문에 엄청 삽질함.. 그냥 let canvas = $('#canvas'+idx)[0]; let ctx = canvas.getContext("2d"); ... ctx.transform(0, 1, -1, 0, height, 0); ctx.drawImage(bgImg, 0, 0, width, height); ctx.setTransform(1, 0, 0, 1, 0, 0) 이렇게 transform> drawImage 과정을 거친 뒤, ctx.setTransform(1, 0, 0, 1, 0, 0); 해..
우분투에서 HeidiSQL 사용하기
2018.01.17wine installsudo apt-get install wine HeidiSQL 다운로드https://www.heidisql.com/download.php wine으로 HeidiSQL setup 파일 실행wine HeidiSQL_9.5.0.5196_Setup.exe 설치!
api 문서화, 좋은 예시
2017.10.310. api 자급자족할 때는 딱히 신경쓰지 않았는데, 간만에 다른 사람이 쓸지도 모르는 상황이 돼서, api 문서화를 찾아봤다. 1. swaggerhttps://swagger.io/ 이전 회사에서 쓰던 api 문서화 프레임워크. 베트남에 안드로이드/아이폰 어플 만드는 외주를 맡겼었는데 이 swagger가 정말 유용했다. 우리쪽에서 api를 만든 뒤, swagger를 업데이트해서 주면 따로 말로 설명할 필요가 없었다. 다만, 처음 사용이 좀 복잡하고...경우에 따라 작성/수정에 좀 오래 걸릴 수도 있다. django에 swagger 관련 모듈이 있다! 근데 사용법을 잘 몰라서 몇 번 끼적여보다가 포기. 간지나던데...다음에 다시 도전! 2. Asciidoctorhttp://asciidoctor.org/As..
ubuntu16에서 Pycharm, Webstorm 설치하기
2017.08.23괜히 ppa로 깔겠다고 이것저것 만지다가 에러나서 다 삭제. 0. Jetbrain 사이트 들어가서 Pycharm(혹은 Webstorm. 설치 방식은 똑같다.) tar 파일 다운로드. https://www.jetbrains.com/pycharm/download/#section=linux 1. /opt 아래에 압축풀기(버전명은 다를 수 있음)$ sudo tar -zxvf pycharm-professional-2017.2.1.tar.gz -C /opt 그러면 /opt 아래에 pycharm-professional-2017.2.1 폴더가 만들어지는데 너무 길다 싶으면 바꿔주자(생략 가능)$ sudo mv pycharm-professional-2017.2.1 pycharm 2. Pycharm 실행$ cd /opt/..
ubuntu에서 vim 사용하기
2017.08.23이상하게 푸티를 쓰면 vi가 익숙한데 우분투 터미널에서 vi를 쓰면 뭔가 거지같다. 그래서 vim을 깔았음 $ sudo apt-get update $ sudo apt-get install vim
CodeMirror에서 특정 라인 style 바꾸기
2017.06.23좀 삽질함 휴 편안한 주말
우분투에서 구글 드라이브 설치하기 : insync
2016.11.06우분투에서는 구글드라이브를 정식으로 다운받아 사용할 수 없어서 다른 방법을 써야 한다. insync! 아래 링크에서 받을 수 있다. https://www.insynchq.com/downloads 본인에게 맞는 버전을 받는다. 확장자가 deb인 파일이 받아질 텐데, 더블 클릭(혹은 우분투 소프트웨어 센터 연결)을 통해 우분투 소프트웨어 센터를 통해 설치하면 된다. 절차는 그냥 구글 드라이브랑 비슷하다. 하 동기화...언제 다 하냐... 대개 홈의 본인 계정 메일 폴더가 생긴다. 여기가 구글 드라이브ㅇㅇ 굿
Ubuntu 16 설치!
2016.11.06꺄 몇 주동안 묵혀만 두던 노트북에 우분투를 깔았다! 원래는 리눅스 민트를 시도했으나...계속 no screen found 에러만 떠서 삽질을 하다가.... 포기하고 우분투를 설치했다! 크 완전 예쁘다ㅠ 더 예쁘게 꾸며봐야지ㅎㅎ
html/CSS에 쓸만한 사이트 모음
2016.03.18Chart.jshttp://www.chartjs.org/docs/아래와 같이 차트를 심플하게 만들 수 있게 해주는 소스 Image Slider Maker http://imageslidermaker.com/여러 장의 이미지를 슬라이더로 넘길 수 있게 해주는 소스. 사이트에서 본인이 직접 커스터마이징 해 그대로 복붙할 수 있다. Ovenhttps://ovenapp.io/웹 개발 전 매우 유용한 프로토타이핑 사이트. 카카오에서 만든 건데 아직 베타버전이다. troyhttp://troy.labs.daum.net/원하는 디바이스를 골라 url을 입력해 기기에 따른 예상 UI를 볼 수 있다.