워드프레스에 구글맵 추가 : API Key 없이 사용하기
이번 글에서는 구글맵을 워드프레스에 추가하는 방법에 대해서 살펴보겠습니다. 제가 주로 만지는 테마가 Uncode 테마인지라 해당 테마 위주로 설명하지만, iframe 태그를 삽입할 수 있다면 어느 테마에서도 적용 가능할 것으로 생각됩니다. 꼭 워드프레스가 아니라 티스토리에도 첨부가 가능하겠죠? 구글 맵 유료화... 한동안 무료로 잘 사용해 오던 구글맵 API는 2018년 6월 경인가부터 유료화되었습니다. 물론, 초기에 200달러의 크레딧을 제공하기 때문에 웬만한 사이트에서는 별 부담 없이 사용할 수 있습니다만... 문제는... 구글맵을 삽입하려면 API Key가 필요한데 이 키를 발급받으려면 귀찮은 작업들을 해줘야 합니다. 더 큰 문제는!!! 결제를 하던 안 하던 계정에 카드를 등록해야 한다는 것이죠. ..
티스토리에서 이모지를 사용하자!
블로그를 작성하다 보면 가끔 뭔가 모르게 글이 좀 심심한 경우가 있습니다. 어쩌면 글빨이 없어서 그럴지도 모르겠습니다. 아무튼~ 이럴 때 이모지 하나씩을 섞어 주면 좀 더 그럴듯하고 활기찬 블로그 글로 변신! 까지는 안되는 것 같지만 약간의 포인트 정도는 되는 것 같습니다. 이번 글에서는 글 작성 시 쉽게 이모지를 추가하는 방법에 대해서 살펴보겠습니다. 😆 🅰 단축키로 간단하게! (Window 10) 윈도우 10에서는 간단하게 이모지를 추가할 수 있습니다. 바로 윈도우 키 + ; (세미콜론) 또는 윈도우 키 + .(마침표) 를 누르면 현재 커서 위치에 이모지 화면이 번쩍 나타납니다. 각 탭 별로 스크롤이 가능하고 일부 항목은 색상을 변경할 수 있습니다. 그러면 이렇게 쉽게 각종 이모지를 사용할 수 있어요..
네이버 웨일 - 블로거에게 좋은 3가지 이유!
한동안 네이버가 열심히 웨일 브라우저에대한 프로모션을 수행했었습니다. 얼마나 점유율을 획득했을지 모르겠습니다. 기본적으로 크롬과 같은 크로미움 기반으로 제작되어 사실상 기능이 거의 동일합니다. 개발자 도구 모양 자체도 쌍둥이 같으니까요. 다만 네이버 웨일은 몇 가지 기능을 추가해 넣었는데요, 은근히 블로그 작성 시 도움이 되는 기능이 있어서 소개합니다. 1. 스페이스 기능 보통 브라우징을 위해서 크롬을 사용해 왔는데요, 키워드 검색 후 사이트를 살펴볼 때 하나씩 열거나 새 탭에서 열기를 이용하여 여러 개를 열어놓고 하나씩 살펴보곤 했습니다. 네이버 웨일 브라우저에서는 편의성을 위해서 스페이스 기능을 제공하는데, 이를 이용하면 귀찮은 작업 없이 검색창은 그대로 두고 하나씩 클릭하면서 내용을 살펴볼 수 있습..
[ES6] Spread Operator (스프레드 연산자)
ES6에서는 '...'와 같이 다소 특이한 형태의 문법이 추가되었습니다. 점 3개가 연달아 붙어있는 이 표시는 Spread Opertor(스프레드 오퍼레이터, 스프레드 연산자, 전개 구문, 펼침 연산자...)를 나타내는 것으로, 배열, 함수, 객체 등을 다루는 데 있어서 매우 편리하고 재미(?) 있는 새로운 기능을 제공합니다. 이번 글에서는 스프레드 연산자에 대해서 살펴보도록 하겠습니다. Spread Operator 기본 문법 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다. 사실 말로 표현하면 의미적으로는 크게 와 닿지 않죠? 저도 말하면서 저게 맞는 말인지 고민이 됩니다. 우선 기본적인 표현법을 살펴보면서 감을 잡..
[포토스케이프, X] 여러장의 이미지 (사진) 한장으로 합치기
웹 페이지, 혹은 블로그를 만들다 보면 가끔 여러 장의 사진을 조합하여 한 장의 사진으로 통합하는 게 필요한 경우들이 있습니다. (합성을 하는 것이 아니라 여러 사진을 특정 모양으로 분할해서 보여주는 것을 의미합니다) 이러한 상황에서, 포토샵 같은 건 없이(!) 오로지 포토스케이프 만으로도 원하는 결과물을 얻을 수 있습니다. 포토스케이프 내에서 이 기능을 위한 명칭은 다음과 같습니다. 포토스케이프 : 페이지 포토스케이프 X : 콜라주 이번 글에서는 포토스케이프와 포토스케이프 X에서 위 기능을 사용하여 여러 사진을 통합하여 하나의 이미지를 생성하는 방법에 대해서 살펴보겠습니다. 단순히 가로, 세로, 또는 바둑판 형태로 구성하려는 경우에는 "이어붙이기" 기능을 이용하는게 더 좋습니다. 무엇을 합쳐 볼까? 아..
[JS, ES6] 객체 리터럴 한눈에 살펴보기
자바스크립트에서 객체를 표현하는 방법은 다양하며, ECMA 버전이 올라가면서 여러 가지 편리한 정의 방법이 추가되고 있습니다. 이번 글에서는 JavaScript에서의 객체 리터럴과 함께 새롭게 추가된 ES6의 객체 리터럴에 대해서 살펴보도록 하겠습니다. 1. 자바스크립트의 객체 리터럴 표기법 Javascript 객체를 선언하는 방법은 다음과 같습니다. var blog = new Object(); 물론 위와 같이 선언하는 분은 거의 없을 것으로 생각됩니다. 매번 생성할 때마다 new Object() 붙이는 일은 아무리 봐도 귀찮으니까요! 고로 객체 리터럴 표기법( { } )을 사용합니다. 이 경우 굳이 인스턴스를 생성하는 번거로운 과정을 거치지 않아도 됩니다. var blog = {} 이제 프로퍼티와 메서..
앵귤러 학습을 위한 도우미
앵귤러를 사용해보려 하시나요? 이번 글에서는 맨땅에 헤딩하고 온갖 삽질을 하면서 공부한 경험을 기반으로, 앵귤러를 학습하는데 도움이 될만한 사항에 대해서 이야기해볼까 합니다. 물론 기본적으로 HTML과 JavaScript, CSS에 대한 기본 지식이 우선이겠죠? 이번 글의 내용은 절대적인 것은 아니며, 전 영역을 두루 커버하는 것은 아닙니다. 100% 개인적인 경험에 의한 일부에 대한 내용이니 참고만 하시기 바랍니다. 1. 앵귤러를 시작하자! 일단 처음은 무조건 공식 튜토리얼을 이용하는 것이 좋습니다. (물론 문서는 마음에 들지 않습니다...) 오리지널 튜토리얼 : https://angular.io/docs 한글판 튜토리얼: https://angular.kr/docs 솔직히 좀 어렵습니다. 대체적으로 구..
앵귤러 (Angular)는 정말로 어려울까?
극악의 러닝 커브로 명성을 떨치고 있는 앵귤러! 진정 학습 난이도가 높을까요? 이번 글에서는 앵귤러의 러닝 커브에 대해서 어느정도인지, 간략하게 다루어보도록 하겠습니다. 물론 어디까지나 개인 의견이므로 누구에게나 통용되는 사항은 아닙니다. 1. 통설 (通說) 인터넷에 프론트엔드 프레임워크를 비교하는 Vs. 류의 글을 찾아보면 백이면 백 다음과 같은 말들이 나와있습니다. "앵귤러는 학습 커브가 steep 하다!" 다른 프레임워크나 라이브러리 (Vue, React)를 다뤄보지 않고 Angular만 다뤄본 입장에서 정확하지는 않겠지만, 앵귤러 자체의 절대적 측면에서의 기준으로 어느 정도는 맞다고 할 수 있을 것 같습니다. 난이도는 둘째치고, 기본적으로 공부해야 할 분량이 많거든요. NgModule Compon..