Develop (58) 썸네일형 리스트형 Firebase와 함께 PWA 만들기 이전에 Lighthouse에 대해 쓴 글이 있다. Lighthouse를 통해 우리의 웹이 얼마나 '좋은가' 평가해볼 수 있다. 내가 현재 개발/유지 중인 UOSTime은 성능에서 매우 좋지 않은 점수를 받았고, 약간의 개선을 해놓은 상태이다. 그런데 PWA에 관심이 생겨 Lighthouse도 알게 되었지만, 정작 이미 만들어진 웹을 PWA로 바꾸는건 생각보다 힘든 일이었다. 그래서 깔끔하게, 처음부터 PWA를 만들어보기로 했다. 그리고 아직 한 번도 안 써본 Firebase도 써보기로 했다. 공부해야 할 것이 왕창 늘었다!! 시작 node.js가 설치되어 있어야 한다. 무작정 Firebase에 가서, 프로젝트 추가를 눌렀다. 프로젝트 이름은 일단 'test'로 했다. 아직 아무것도 모르기 때문이다. 그러.. Lighthouse - 웹 진단 및 성능 향상시키기 웹 개발을 하면서 '더 좋은' 웹을 만든다는 것은 참으로 어려운 일이다.그러다 최근에 크롬 개발자도구의 Audits를 알게되었다. 크로미움 기반 웹에서 F12를 눌러 개발자 도구를 열어보면 Audits 탭이 보인다. 이 탭에서 Lighthouse를 이용해서 해당 웹페이지를 분석할 수 있다. Run audits 버튼을 누르면 된다.나는 현재 개발중인 UOSTime을 대상으로 해보았다. 결과로 성능, PWA, 접근성, 검색엔진 최적화 등의 점수가 표시된다.음.. 점수가 좋지 않다. 성능과 접근성이 많이 부족하다는 결과가 나왔고, 아래로 스크롤을 내리면 자세한 설명이 나온다. 무엇이 잘못되었고 무엇이 권장되는지 쭉 나와있다. 나는 곧바로 몇가지 작은 개선을 하고 다시 체크해보았다. 성능 면에서 12점이 올랐다.. Code to Image VS Code를 사용하다가 코드를 이미지로 바꿔주는 확장을 2개 접하게 되었다. 각각의 장단점을 비교해보자. Polacode, Polacode-fork확장 설치 후, Ctrl+Shift+P를 누르고 Polacode를 입력하여 실행한다. 코드가 적힌 부분에 자신의 코드를 복사한다. 그 후 아래의 동그란 버튼을 누르면 다음과 같은 결과물을 얻을 수 있다. 첫번째는 Polacode이고 두번째는 Polacode-fork이다. 차이점은 fork의 경우 배경이 투명하다는 점이다. (하지만 어딘가 불편하다) carbon-now-sh이 확장은 특정 스타일을 적용한 carbon 웹페이지로 이동해주는 확장프로그램이다.Polacode보다 이미지의 스타일을 더 자세히 설정할 수 있으며 완벽히 투명한 배경도 지원한다. 확장 설.. 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 NPM, Node.js 버전 확인 NPM(Node Package Manager) 버전 확인npm -v Node.js 버전 확인node -v 설치된 Package 목록 확인 (global)npm list --depth=0 -g 이전 1 ··· 3 4 5 6 7 8 다음
