Programming

CKEditor 예전에는 웹 에디터로 네이버 스마트에디터2를 사용하다가, 요즘 디자인에는 너무 구시대적 이라는 발상이 들어서 새로운 에디터를 찾아보다 Ckeditor를 찾게 되었다. CKEditor | Smart WYSIWYG HTML editor | Collaborative rich text editor Rock-solid, free WYSIWYG editor with collaborative editing, 200+ features, full documentation and support. Join Microsoft, Mozilla, Adobe and 20k+ other companies. ckeditor.com 기존에 4 시절에도 알고 있었긴 하지만, 당시에는 매력적이게 느끼지 못했는데, 5로 넘어..

웹 페이지 개발 중, 메타태그를 심도있게 커스텀 해야 되는 경우가 발생하였다. 서버단에서 메타태그를 수정한다면, dom이 불러와 지기 전에 메타태그의 치환이 이루어 져서 당연히 적용이 될 것이다. 문제는, 서버단에서 데이터를 치환 할 수 없는 경우가 가끔 있는데 해당 페이지 들에서 스크립트를 이용하여 메타태그를 변경 하더라도 검색 수집 봇들이 변경된 메타태그를 수집하는지가 궁금해졌다. 테스트를 위해서, 티스토리 블로그의 메타태그를 스크립트로 강제로 바꿔보기로 했다. 티스토리의 블로그 스킨 편집에서 아래와 같은 테스트 데이터를 스크립트로 추가하였습니다. var metaTag = document.createElement('meta') metaTag.setAttribute('http-equiv','X-UA-C..

외주나, SI 업체에서 일을 할 때 간간히 Iframe 을 사용할 때 가 있다. 특히, Cafe24쪽 쇼핑몰 커스텀 작업을 할 때, Cafe24쪽에서는 처리하기 힘든 데이터들의 가공이나, 디자인 문제 들이 있을 때는, 따로 서버를 두고 Iframe을 이용하여 작업을 하는 쪽이 수월하다. 이럴 때, Iframe에서 데이터 간의 이동을 시켜줘야 하는 경우가 잦은데, 같은 도메인의 경우에는 접근이 가능하지만, 다른 도메인의 경우에는 보안 문제로 인해 보통 접근이 안되게 되어 있다. 그래도 해결할 구멍은 있으니, postMessage를 이용한 방법이다. 먼저, 부모창에서 위와 같이 자식 iframe을 호출하였다는 가정 하에, 스크립트를 알아보겠습니다. 데이터 송신 생각보다 통신 방법은 간단한데, 부모쪽도 고쳐야..

데이터들을 만지다보면, 기존에 Excel로 관리 하던 것을 DB로 이관 해야 할 때 종종 있습니다. 다른 분들도 많이 소개 하였겠지만, 오늘은 제가 자주 사용 하는 방법으로 한번 포스팅을 해보려고 합니다. 먼저, 필요한 친구는 바로 Navicat이라는 친구입니다. Mysql 에서 제공하는 Mysql Workbench가 있긴 하지만, 얘보다는 엑셀쪽 관련 작업은 Navicat쪽이 좀 더 쉽기 때문에 추천드립니다. 급하신 분들은 14일 무료버전으로 하셔도 일단 넣을 수 있기 때문에, 그쪽을 이용하시면 되고 아니면 이왕이면 정품..아니면 크랙...이라도.. 버전은 12버전 기준으로 진행하였습니다. Navicat | Download Navicat | Download Navicat Premium 14-day tr..

여러개의 프로젝트를 동시에 진행하다 보면, 프로젝트 별로 개발한 node 버전이 달라서 애먹을 때가 있다. 하필 어제, 그런 상황을 겪었었다. 그럴때 필요한 친구가 바로 NVM(Node Version Manager)이다. 필자는 노드 버전을 8.x , 9.x, 10.x 를 번갈아 가면서 해야 하는 매우 슬픈..상황에 처해 있었는데 NVM이 바로 해결을 해 주었다. 로컬 서버는 mac, 실 서버는 ubuntu 인데 운영체제 별로 살짝 세팅하는 방법이 다르기 때문에 정리를 해보려고 한다. NVM 설치 1. 설치 sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash mvn을 설치하는 명령어. curl을 이..

최근에, nuxt.js 를 이용하여 세팅하는 방법을 올린 적이 있는데 회사 내부적으로 최종적으로 Vue + Cordova + OnsenUI 를 이용하여 개발하기로 하였다. 실질적인 개발은 무리없이 진행되고 있었는데 Cordova Plugin 을 연동하는 부분에서 꽤나 애먹었다. (핸드폰에 저장되어있는 모든 사진을 웹상에 띄워줬어야 하는데 이부분에서 시간을 잡아먹었다...) 이부분을 해결 하였으니, 하이브리드 어플리케이션을 개발하는 다른사람들에게 도움이 되고자 세팅하는 법 부터 차근차근 정리해 보기로 했다. 일단, Vue, Cordova, OnsenUI 가 무엇인지 부터 간단하게 알아보자. 1. Vue.js https://vuejs.org/ Vue.js Vue.js - The Progressive Java..

폰갭에서 FCM은 플러그인을 사용하여 연동해야 한다. 주구장창 Firebase 문서를 봐도 폰갭에 연동할 수 있는 방법은 잘 나오지 않는다. 일단 이 글은 Android를 기준으로 한다. 먼저, cmd 혹은 terminal 창에서 PhoneGap 프로젝트의 root로 이동한다. 시작하기 전에, npm 등을 이용하여 cordova 명령어를 터미널 창에서 사용 할 수 있어야 한다. FCM을 연동하기 전에, 폰갭 컴파일을 컴퓨터에 연결된 모바일 device에서 컴파일 할 수 있게 (실제 안드로이드 프로그래밍 할 때 처럼) 환경을 구축해 주는 것이 좋기 때문에 해당 내용을 먼저 설명 한다. cordova --force platform rm b rowser cordova --force platform add br..