Develop/Web (24) 썸네일형 리스트형 Javascript Benchmark 자바스크립트 코드의 성능을 비교측정하는 사이트를 알게되었다. http://jsben.ch/index 여담 http://jsben.ch/MgMXU forEach 보다 for-of이 더 좋은 성능을 보이는 것 같다. 이 둘에 대해서는 다음에 자세히 다루겠다. Firebase와 함께 PWA 만들기 이전에 Lighthouse에 대해 쓴 글이 있다. Lighthouse를 통해 우리의 웹이 얼마나 '좋은가' 평가해볼 수 있다. 내가 현재 개발/유지 중인 UOSTime은 성능에서 매우 좋지 않은 점수를 받았고, 약간의 개선을 해놓은 상태이다. 그런데 PWA에 관심이 생겨 Lighthouse도 알게 되었지만, 정작 이미 만들어진 웹을 PWA로 바꾸는건 생각보다 힘든 일이었다. 그래서 깔끔하게, 처음부터 PWA를 만들어보기로 했다. 그리고 아직 한 번도 안 써본 Firebase도 써보기로 했다. 공부해야 할 것이 왕창 늘었다!! 시작 node.js가 설치되어 있어야 한다. 무작정 Firebase에 가서, 프로젝트 추가를 눌렀다. 프로젝트 이름은 일단 'test'로 했다. 아직 아무것도 모르기 때문이다. 그러.. Lighthouse - 웹 진단 및 성능 향상시키기 웹 개발을 하면서 '더 좋은' 웹을 만든다는 것은 참으로 어려운 일이다.그러다 최근에 크롬 개발자도구의 Audits를 알게되었다. 크로미움 기반 웹에서 F12를 눌러 개발자 도구를 열어보면 Audits 탭이 보인다. 이 탭에서 Lighthouse를 이용해서 해당 웹페이지를 분석할 수 있다. Run audits 버튼을 누르면 된다.나는 현재 개발중인 UOSTime을 대상으로 해보았다. 결과로 성능, PWA, 접근성, 검색엔진 최적화 등의 점수가 표시된다.음.. 점수가 좋지 않다. 성능과 접근성이 많이 부족하다는 결과가 나왔고, 아래로 스크롤을 내리면 자세한 설명이 나온다. 무엇이 잘못되었고 무엇이 권장되는지 쭉 나와있다. 나는 곧바로 몇가지 작은 개선을 하고 다시 체크해보았다. 성능 면에서 12점이 올랐다.. Bootstrap v4.3.x 2019년 2월 11일과 13일, Bootstrap 4.3.0과 4.3.1이 각각 릴리즈되었다.이후의 업데이트는 Bootstrap 5가 될 것으로 보인다. 4.3.0에서는 새로운 클래스가 추가되었고, 반응형 폰트 사이즈가 생겼다.4.3.1에서는 4.3.0에서의 문제(XSS 등)를 해결했다. stretched-linkstretched-link는 a태그에 사용한다.stretched-link가 적용된 a태그는 position값이 relative인 부모 전체를 뒤덮는다. 이를 통해 부모 전체가 a 태그로 변한 효과를 준다.위의 예제에서 div를 클릭해도 a가 클릭된다. 정확히는, div태그보다 위에 올라온 a태그를 누르게 되는 것이다. Responsive font sizes반응형 폰트 사이즈가 나왔다!이제 사용.. ejs에서 변수가 undefined인지 검사하기 ejs에서 변수가 정의되어 있는지 확인하는 방법은 typeof를 사용하는 것이다.if (typeof variable_here == 'undefined') 아래의 방법을 사용하면 정의되지 않은 변수라고 에러를 낼 것이다.if (variable_here) ShrinkMe, 이미지 감쪽같이 압축하기 웹 개발에서 이미지의 용량을 줄이는 것은 사용자와 개발자 모두에게 매우 중요하다. 웹 페이지에 이미지를 올리기 전에, ShrinkMe 서비스를 이용하면 좋을 것 같다. 이 서비스는 이미지를 원본의 시각적 품질을 최대한 유지하면서 용량을 많이 줄여준다. ShrinkMe는 PNG, JPG, JPEG, WEBP 확장자의 이미지 압축을 지원하며, JPG와 WEBP에 대해 약 60%의 압축이 가능하다고 한다. 실제로 이용해본 결과는 다음과 같다.원본(572KB) 압축본(176KB) 겉으로 보면 큰 차이를 느끼기 어렵지만, 확대해서 보면 약간의 손실이 있음을 알 수 있다. Bootstrap v4.2.1 2018년 12월 21일, Bootstrap v4.2.1이 출시되었다.(v4.2.0이 npm에 잘못 올라가서 즉시 v4.2.1이 나오게 되었다고 한다.) 현재 부트스트랩은 v4.3을 계획하고 있으며, v5를 바라보고 있다.v5는 2019년에 프리뷰가 나올 것으로 보이며, 오래된 브라우저(IE 등)를 더이상 지원하지 않고 jQuery 의존성을 지울 것으로 보인다. v4.2.1에서는 스피너(Spinner), 토스트(Toast), 스위치(Switch)가 새로 추가되었고, 기존 항목인 캐러셀(Carousel)은 이제 터치가 지원된다.또한, 모든 버전의 부트스트랩을 확인할 수 있는 version 페이지가 생겼다.모든 변경사항은 v4.2.0 shiplist에서 확인할 수 있다. 참고: Bootstrap ES6 템플릿 문자열(template literal) ECMAScript 6 (ES 2015)에서 추가된 문법인 템플릿 문자열(template literal)은 문자열 사용을 더욱 편하게 해준다.문자열을 따옴표(')나 큰 따옴표(")로 감싸지 않고 억음 기호(`)로 감싸야 한다. 역따옴표라고도 하며, 쿼티 자판에서 Tab키 위에, ESC키 아래에 있다. 문자열 중간에 변수의 값을 넣을 수 있다. 아래는 그 예시이다. var i = 7; var string = `Hello template literal ${i}, it is me!`; // Hello template literal 7, it is me! 여러 줄의 문자열도 지원한다. 아래는 템플릿 문자열을 사용한 예와 그렇지 않은 예다. var string0 = `안녕하세요. GF의 블로그입니다. 템플릿 문자.. 이전 1 2 3 다음
