IT이야기/무료프로그램 2019.01.20 00:50 ${data.list[i].commentCount}
포토스케이프(PhotoScape X) 100% 활용 하기
사진이나 이미지를 다룰 때 포토샵을 뺴놓으면 섭하지만 이 포토샵의 가격이 후덜덜 하고 또한 클라우드로 변경되면서 가격은 좀 싸졌을지 모르지만 매년 또는 매달 비용을 지불해야 하는 부담감이 있습니다. 이걸 가지고 돈을 벌 수 있는 직업이 있다면 그런대로 투자할 만 한데 그렇지 않은 일반 개인이나 서민들은 해적판이나 대체 프로그램을 찾기 마련입니다. 여러가지 다양한 사진 다루는 툴이 있겠지만 그중에서도 높은 평점을 가지고 있으면서 간편하고 다양한 기능이 있고 무엇보다도 무료라는 메리트를 가지고 있는 포토스케이프를 소개해 볼까 합니다. 사실 포토샵 대용이라고는 하지만 어떤 면에서 보면 포토샵과는 좀 다른 용도라고 볼 수도 있습니다. 포토샵 보다 더 편한 기능이 많이 있습니다. 포토스케이프(PhotoScape)..
WEB개발이야기/Vue.js 2019.01.15 17:40 ${data.list[i].commentCount}
Vue.js의 이벤트 사용 방법 정리
Vue.js에서 이벤트를 다루는 방법에 대해서 간단히 정리하려고 합니다. HTML에는 나 처럼 당연히 알고 있는 기본 이벤트가 있습니다. 그리고 이미 javascript를 통해서 기본 이벤트와 어우러지게 사용하는 방법들이 있구요. 여기에서 Vue.js는 javascript로 조금 어렵게 구현했던 기능들을 v-on 디렉티브를 통해서 좀더 쉽게 구현할 수 있는 방법을 제공하고 있습니다. 이벤트 구현 Vue.js에서 이벤트를 구현하는 방법인 v-on 디렉티브를 이용합니다. v-on은 줄여서 @로 대체할 수 있습니다. 예> 좋아요 좋아요 좋아요 버튼을 클릭하면 javascript로 작성된 goodgood() 메서드를 호출합니다. 활용 이벤트 명 아래의 이벤트명을 v-on 또는 @와 같이 사용하면 됩니다. v-o..
WEB개발이야기/Vue.js 2019.01.15 11:37 ${data.list[i].commentCount}
Vue 인스턴스의 라이프사이클
보통 프레임워크나 라이브러리의 경우 처리 순서에 따라 라이프사이클이 존재합니다. 사실 사람이 인식하기도 전에 순식간에 라이프사이클이 지나가 버리기 때문에 육안으로는 관찰이 거의 어렵습니다. 하지만 컴포넌트를 개발하거나 일반 개발 과정에서 라이프사이클은 중요한 요소로 작용을 합니다. 예를 들면, 분명 내 생각에는 A * ( B + C ) = D가 나와야 하는데 E가 나오는 경우가 발생을 합니다. 확실하게 D가 나와야 하는데 말이죠.. 이런 경우 십중팔구는 라이프사이클 때문 일 확률이 높습니다. 아직 순서 상으로( B + C )가 계산 되기도 전 인데 먼저 A * B를 계산해 버리는 경우 이런 문제가 발생할 수 있다는 것입니다. 그래서 라이프사이클을 이해하는 것은 나중에 심도있게 개발 할 때 중요한 요소 일..
IT이야기/무료프로그램 2019.01.12 00:13 ${data.list[i].commentCount}
픽픽(PicPick)으로 이미지에 워터마크 쉽게 붙히기
예전에 만능디자인툴 picpick이라는 글로 포스팅을 한 적이 있었는데요. 이 디자인 툴에 새로 알게된 유용한 기능이 하나 있어 소개해 볼까 합니다. 블로거라면 내가 찍은 사진이나 캡쳐한 이미지에 나만의 워터마크를 넣고 싶은 욕구가 있을텐데요. 이 워터마크를 포토샵으로도 넣을 수 있지만 손이 많이가는 것은 피할 수 없는 사실입니다. 또한 워터마크를 붙혀야할 이미지의 양이 많아지면 이 또한 상당하게 귀찮은 일이 되어 버립니다. 그래서 이미지에 일괄로 워터마크를 붙혀주는 다양한 툴이 있지만 제가 메인으로 사용하는 캡쳐툴인 픽픽(picPick)에도 워터마크를 붙히는 기능이 있어 소개하려고 합니다. 픽픽에 워터마크 기능 모르면 못써먹은 워터마크 넣기 기술 입니다. 텍스트 워터마크는 없는 것 같고 워터마크 이미지..
WEB개발이야기/Vue.js 2019.01.11 17:38 ${data.list[i].commentCount}
Vue 인스턴스의 주요 옵션 정리
Vue를 실행시기키 위해서는 먼저 Vue.js를 import를 한 후 Vue 인스턴스를 생성해야 합니다. Vue인스턴스를 생성할때 지정된 몇가지 옵션 객체를 전달해야 하는데 이 옵션객체들이 어떤것이 있고 어떻게 사용되는지 간단히 정리하려고 합니다. Vue 인스턴스란? Vue를 실행하기 위해 첫번째로 정의 하고 생성해야 하는 객체입니다. Vue 인스턴스 예제 var vm = new Vue ({ el : '#test', data : { name : '홍길동'}, }) 옵션 설명 예제 비고 el Vue가 실행될 HTML의 DOM 요소를 지정 el : '#test' CSS의 선택자를 선택하듯이 선택 (#--> id 지정, . --> 클레스 지정) data Vue가 바라보는 data 객체를 지정 data : { ..
WEB개발이야기/Vue.js 2019.01.11 13:44 ${data.list[i].commentCount}
Vue.js의 기본 디렉티브 정리
Vue.js를 공부하면서 기억해야 할 것에 대해 요약정보를 정리해 보려고 합니다. 이번에는 Vue.js에 기본으로 포함되어 있는 기본 디렉티브에 대한 정리 입니다. 디렉티브 디렉티브를 우리나라 말로 하면 지시문이라고 할 수 있습니다. 어떻게 어떻게 해라~ 라고 지시하는 것이죠. Vue.js의 View영역에서 태그의 속성을 지정하는 방식으로 구현이 됩니다. 태그 속성에 간단히 v-text="message" 라고 작성을 하면 javascript단에서 message변수에 할당된 값을 보여주는 식으로 약속된 명령어를 구현합니다. Vue.js에서 기본으로 제공하고 있는 디렉티브를 기본 디렉티브라고 하고 사용자가 스스로 만들어서 사용하는 것을 사용자 지정 디렉티브 또는 커스텀 디렉티브라고 합니다. 이번에는 몇개 되..
WEB개발이야기/VScode 2019.01.09 15:10 ${data.list[i].commentCount}
VScode의 Extention의 폴더 위치는 어디일까요?
기존에는 텍스트에디터로 울트라에디터나 에디트플러스, Notepad++ 등등을 많이 사용 했었지만 이제는 좀 더 진보된 신세대 텍스트에디터라고 할 수 있는 VScode, 서브라임텍스트 등으로 넘어가는 추세입니다. 저도 그렇고 요즘의 가볍게 코드를 개발하는 개발자 분들이 많이 사용하고 있습니다. 약간 사용법이 상이 하지만 익숙해 지면 너무나 편리한 에디터라고 할 수 있습니다. VScode를 설치해서 사용하다 보면 가끔씩 설치 경로를 직접 엑세스 해야하는 경우가 종종 있습니다. 나중에 저도 참고하기 위해 그 경로를 포스팅해 놓을까 합니다. VScode 설정정보가 있는 폴더 위치 Mac에서 보통의 방법으로 VScode를 삭제하고 새로 설치할 경우 이상하게 모두 삭제가 되는 것이 아니라 이전의 기록들을 다시 가지..
IT이야기/무료프로그램 2019.01.09 00:56 ${data.list[i].commentCount}
오페라를 이용하여 무료 VPN을 안전하고 쉽게 사용하는 방법
VPN은 접속 정보를 가리고 암호화 함으로써 사용자의 보안을 한층 강화 시키는 방법으로 기업에서 많이 사용됩니다. 하지만 일반 개인들은 보안의 목적보다는 국가 또는 ISP(인터넷 서비스 공급자)에서 막아놓은 웹사이트(토렌트 사이트나 불법사이트)를 접속하는데 주로 많이 사용합니다. 보통은 인터넷에 접속을 한다고 하면 먼저 ISP(인터넷 서비스 공급자)가 요청을 접수 받아서 URL의 주소로 넘겨주게 됩니다. 이때 ISP업체는 모든 접속 정보를 볼 수 있고 추적할 수 있게 됩니다. 나라에서 원하면 ISP업체가 접속정보를 정부에 넘겨줄 수도 있다는 뜻입니다. IP주소가 온전히 남기 때문에 추적이 가능합니다. 보통 VPN서버는 각 기업에서 자사의 직원들을 위해 프라이빗하게 사용하는 용도로 사용하지만 인터넷에서는 ..
