이미지 최적화: JPG를 써야 할까 PNG를 써야 할까?
블로그나 홈페이지를 만드는 데 있어서 이미지의 용량과 품질 사이에서의 균형은 은근히 중요합니다. 출판물, 인쇄물이 아닌, 웹상의 문서이므로 품질과 트래픽을 동시에 고려하지 않을 수 없습니다. 이미지의 퀄리티가 너무 떨어지면 성의 없고 저렴해 보이는 문제가 있고, 쓸데없이 고퀄의 이미지를 사용하면 페이지 로드가 느려지고 page speed insight와 같은 웹페이지 속도 측정, 더 나아가서 SEO에 불리하게 작용합니다. 어쩌면 방문자가 들어와서 화면이 보이기도 전에 나가버릴지도 모르겠습니다. 이미지의 품질과 균형을 맞춘 최적화를 위해서 기본적으로 고려해 볼 사항은 이미지의 '크기'와 '형식'입니다. 이번 글에서는 두 가지 중 이미지의 형식, 특히 대표적인 이미지 포맷 JPG(JPEG)와 PNG 중 어떤..
[JavaScript] this의 모든 것 : 예제로 살펴보기
다른 언어를 사용하다가 자바스크립트로 넘어온 경우, 'this'에 대해서 매우 혼란스러운 경험을 하게 됩니다. 대부분의 언어에서 'this'는 클래스가 인스턴스화 한 현재 객체에 대한 참조입니다. 반면, 자바스크립트에서 'this'는 일반적으로 함수를 호출하는 객체에 대한 참조입니다. 이번 글에서는 자바스크립트의 this에 대해서 많이 사용되는 케이스의 예제 위주로 다루어 보겠습니다. #1. 혼돈의 카오스 - 'this' 자바스크립트의 this가 무엇을 나타내는지 결정하는 방식에 대해서 일반적으로 다음과 같이 설명하고 있습니다. this는 어떻게 정의되었느냐가 아니라 어떻게(how) 호출되었느냐에 따라 결정된다. 뭔 소린지 여전히 헛갈리긴 하지만 아무튼 그렇다고 합니다. 정확히 알기 위해서는 실행 컨텍스..
[ES6] var, let & const 간단히 살펴보기
기존의 JavaScript(ES5)에서 변수를 선언하는 방법은 "var"을 앞에 붙여주는 것이었습니다. var은 매우 유연하여 사용하기에 편리하기도 하지만, 그 유연함으로 인해서 여러 가지 문제점을 내포하고 있었습니다. 이를 보완하기 위해서 ES6에서는 let과 const라는 새로운 변수 선언 방법이 등장하였습니다. 이번 글에서는 기존의 var과 새로 추가된 let, const keyword의 특징과 차이점에 대해서 살펴보도록 하겠습니다. 1. var 기존의 var의 특징을 간단하게 언급하자면 다음과 같습니다. Function Level Scope를 갖는다. 언제든지 다시 선언할 수 있다. 각각에 대해서 간단히 살펴보겠습니다. ✅ Function Level Scope 대부분의 프로그래밍 언어와 달리, 기..
[티스토리] CCZ-CROSS 스킨 속도 향상을 위한 팁
본 티스토리 블로그에는 CCZ-CROSS 스킨이 적용되어 있습니다. CCZ-CROSS 스킨은 깔끔하고 카테고리 분류가 잘 보이게 되어 있어서, 주로 IT 쪽 블로그에서 많이 사용되고 있는 것 같습니다. 그런데 스킨의 사용 후기를 보면, "로딩 타임이 느리다"라는 평가가 있기도 합니다. 이를 극복하기 위한 방안도 많이 나와있고요. 이번 글에서는 검색과 소스 분석을 통해서 수집한 CCZ-CROSS 스킨의 속도 향상을 위한 여러 가지 방안에 대해서 알아보도록 하겠습니다. #1. CCZ-CROSS 스킨을 적용하다. 처음 티스토리 블로그를 개설한 후, 티스토리의 스킨 방식에 대해서 살펴보고 있었습니다. 티스토리의 기본 스킨들도 나쁘지는 않은데, 현재 블로그가 IT · 웹 쪽이다 보니 약간 어울리지는 않는 것 같습..
티스토리 블로그에 리디바탕체를 적용하였습니다.
폰트를 변경하다. 우연히 지나다니다가 발견한 리디바탕체. 가독성이 좋아 보여서 현재의 티스토리 블로그에 바로 적용하였습니다. https://www.ridicorp.com/branding/fonts/ridibatang/ 고맙게도 무료로 제공된다고 하네요. 권장사항이기는 하지만 블로그 푸터에 출처를 표기하였습니다. #1. 약간 IT 하고는 안 어울리는 것 같기도 하지만... 뭔가 깔끔한 맛이 있고 책을 읽는 듯한 느낌이 들어서 변경하였습니다. #2. Ebook 스타일의 디자인으로 블로그로 운영해보고 싶었기 때문이죠. 콘텐츠 수와 내용은 아직 한참 모자랍니다만. 어쩌면 금방 포기할지도. 😅 #3. 섹션의 제목에 bold를 적용하면 약간 부담스러운 느낌입니다. 조금 과한 듯하여 제목 부분만 나눔 바른고딕을 적용..
티스토리 구글 애드센스 승인 성공! (내용 분석)
이번 글에서는 티스토리 블로그로 구글 애드센스를 신청하고 승인 받은 내용에 대해서 다루어 보겠습니다. 전문적으로 이렇게 이렇게 해야 애드고시에 합격할 수 있다!라고 알려드릴 수준이 되는것은 아니고, 제가 애드센스를 신청할 때의 블로그 상태에 대해서 정리하는 정도로 가볍게 살펴보도록 하겠습니다. 1. 신청 반나절만에 승인 메일을 받다. 티스토리는 처음 사용이어서 다른 사람들은 어떻게 블로그를 꾸미나... 다른 티스토리 블로그를 살펴보다 보니 스킨보다 먼저 눈에 띈것은 구글 애드센스! 너도나도 광고가 달려있더군요. 방문자도 없고, 많이 검색될만한 내용도 아니고, 개인 저장소 성격의 블로그인데다가, 포스팅을 열심히 하게 될까 의구심이 들긴 하지만. 왠지 남들이 다 달려있으니 나도 한번 달아야 할 것 같은 생각..
[워드프레스] 언코드 (Uncode) 테마 설치와 데모 불러오기
워드프레스 Uncode 테마를 설치하고 데모를 가져오는 방법에 대한 연재글 모음입니다. 이 연재글을 통하여 워드프레스 Uncode 테마를 설치하고 공식 홈페이지에서 보이는 데모 페이지를 동일하게 구성할 수 있습니다. 또한 새로운 홈페이지 제작을 위한 기본 준비를 할 수 있습니다. 본 연재글은 총 5개의 글로 구성되어 있습니다. 1. 테마 추가와 활성화 Uncode (언코드) 테마는 ThemeForest 마켓 플레이스에서 많이 판매되는 다목적 WordPress 테마 중 하나로, 이탈리아와 스웨덴에 위치한 워드프레스 개발자의 크리에이티브 팀인 Undsgn에 의해 릴리스 되었습니다... paperblock.tistory.com Uncode 테마를 다운로드하고 서버에 설치하는 방법에 대해서 다룹니다. 2. 서버..
워드프레스 Uncode 테마 설치하기 - 5. 데모 설치
워드프레스 테마의 맛을 보려면 뭐니 뭐니 해도 데모를 설치해 봐야겠죠? 이번 글에서는 테마 설치의 마지막 단계로, Uncode 테마의 데모를 가져오는 부분에 대해서 다루도록 하겠습니다. (Uncode 테마의 경우에는 한 번의 클릭으로 간편하게 모든 데모를 가져올 수 있습니다. ) 만약 Uncode 테마를 처음 사용한다면 모든 데모를 가져와 보는 것을 추천합니다. 이미지, 글, 페이지, 포트폴리오 등 모든 데모 콘텐츠가 있어야 Uncode 테마가 돌아가는 방식을 이해하기 쉽고, 어떻게 다루어야 데모와 같은 콘텐츠가 생기는지를 분석할 수 있습니다. 그리고 페이지 제작에 있어서도 훨씬 시간을 단축할 수 있습니다. 1. 데모와 메뉴 가져오기 데모 설치를 하기 위해서 테마 메뉴에서 Import Demo를 선택합니..