WEB개발이야기/웹퍼블리싱 2019. 2. 22.
javascript ECMAScript 2015(ES6)로 개발할 때 반드시 알아야할 9가지
ECMAScript2015로 개발하기 위해 알아야 할 9가지를 정리해 보려고 합니다. 먼저 간단하게 ECMAScript를 소개 하겠습니다. ECMAScript 옛날 옛적에 넷스케이프(NE)와 인터넷익스플로러(IE)가 주도권 경쟁을 하던 시절~~ 넷스케이프(NE)는 javascript를 지원했고 인터넷익스플로러(IE)는 Jscript를 지원 했었습니다. 윈도우즈에 끼워팔기 신공으로 점차 득세를 하기 시작한 인터넷익스플로러는 그만 자만심에 빠져 Jscript를 표준이 아닌 적당히 자기만의 기능을 추가하기 시작했습니다. 내가 점유율이 높으니 모든 브라우저들이 내가 만든 기준을 따라 올 거라 생각을 했던 것입니다. 하지만 망하기는 했지만 넷스케이프도 그렇게 호락호락하지 않았습니다. 자신이 밀고 있던 javasc..
WEB개발이야기/Vue.js 2019. 2. 20.
Vue.js의 이벤트버스에 대한 정리
Vue에서 컴포넌트 간 기본적으로 데이터를 통신하는 방법은 props와 events라는 것은 알고 있을 것이라는 전제로 정리하겠습니다. 부모컴포넌트 --> 자식컴포넌트 : props(속성 정의만으로 전달) 자식컴포넌트 --> 부모컴포넌트 : events(이벤트 발생 시켜 전달) 하지만 컴포넌트가 부모, 자식 관계만 있는것은 아니고 형제컴포넌트, 손자컴포넌트도 있을 것입니다. 이럴경우 사용할 수 있는 방법이 이벤트버스를 이용하는 방법입니다. 이벤트버스는 컴포넌트가 많지 않아 규모가 작은 중소 프로젝트에 사용해야 합니다. 컴포넌트가 많아지고 복잡해 지면 누가 누구에게 통신을 하고 있는지 헷갈리기 떄문에 디버깅이 너무 힘들어 지게 됩니다. 그래서 대규모 Vue 프로젝트인 경우는 Vuex라이브러리를 사용하여 통..
WEB개발이야기/Vue.js 2019. 2. 13.
Vue.js 템플릿 구문 작성시 주의할 점
Vue.js의 꽃인 컴포넌트에서 DOM을 구성하기 위한 Template을 만들때 주의할 점 몇가지를 포스팅합니다. is 특성 사용하기컴포넌트를 등록하고 HTML에서 이것을 사용하려면 보통 아래와 같이 사용합니다. 하지만 컴포넌트가 기존 HTML테그의 하위로 들어갈 경우 정상적으로 렌더링이 되지 않는 경우가 있는데 이럴때 is특성을 사용하면 정상적으로 렌더링이 됩니다. 아래와 같이 작성할 경우 라는 HTML태그에 컴포넌트가 들어가 있으므로 실제로 렌더링을 하면 이 나오지 않습니다. 이럴때 아래처럼 컴포넌트를 불러올 때 is특성을 사용하면 정상적으로 나옵니다. 컴포넌트의 템플릿 작성시 루트요소는 하나여야 합니다.컴포넌트 안에 옵션을 작성하는 요소중에 Template가 있습니다. DOM을 형성할 때 어떻게 나..
WEB개발이야기/Vue.js 2019. 2. 13.
Vue.js의 핵심인 컴포넌트에 대한 간략한 정리
Vue.js의 핵심이자 꽃이라 할 수 있는 컴포넌트(Component)에 대해 간략히 정리해 보려고 합니다. Vue.js에서 기본적인 프로그램 구현 방법은 화면 또는 기능을 적절하게 분리하여 컴포넌트화 시켜서 개발을 하고 이것을 연결하여 프로그램이 작동하도록 구현하는 방법을 사용합니다. 또한 각각의 컴포넌트간 데이터의 이동에 대해서는 단방향 이동만 가능하다고 합니다. 부모 컴포넌트에 있는 데이터를 자식 컴포넌트가 가져올 때는 그냥 쉽게 부모 컴포넌트에 props로 변수에 값을 넣어주면 바로 자식 컴포넌트가 읽어 올 수 있습니다. 가진 것을 모두 퍼 주는 부모님의 내리사랑 같은거에요. 하지만 자식 컴포넌트에 있는 데이터를 부모 컴포넌트에 넘기기 위해서는 기본적으로는 넘길 수 없고 Event를 사용해서 보내..
IT이야기/맥북 2019. 2. 12.
맥북에서 크롬 브라우저사용 시 먹통 되는 문제 해결 방법
맥에서 크롬브라우저를 사용하는 경우 처음에는 정상적으로 잘 구동되다가 어느 순간 브라우저가 먹통이 되는 경우가 있습니다. google이나 Naver에서 검색을 해도 결과물을 보여주지 않고 계속 우산만 돌리고 있는 경우가 있습니다. 이럴때는 덩달아 사파리 브라우저까지 멈춰버리는 데요.. 왜이럴까~~ 몇 일을 고민하고 인터넷 검색도 해보고 하다가 해결 방법을 찾은 듯 해서 포스팅을 합니다. 1달이 지난 지금까지 아직 이전처럼 먹통이 되는 것을 보지 못했습니다. 원인은 아무래도 하드웨어 가속에 있지 않을까 합니다. 굳이 하드웨어 가속을 하지 않아도 브라우저 결과물이 잘 나오므로 특별한 경우가 아니면 이 옵션을 끄시면 될것 같습니다. 크롬 브라우저에서 하드웨어 가속 끄기 먼저 위와 같이 크롬의 설정화면으로 들어..
IT이야기/시놀로지 2019. 1. 31.
스마트폰으로 시놀로지 OpenVPN 서버 접속하기
스마트폰으로 시놀로지 VPN 서버에 접속하는 방법은 이전에 포스팅을 헀으니 참고하세요. 스마트폰으로 시놀로지 VPN 서버에 접속하기 이번에는 OpenVPN으로 접속하는 방법입니다. 이전 포스팅에 시놀로지에 OpenVPN 서버를 설정하는 방법도 포스팅을 했으니 참고하세요. 시놀로지 VPN 서버와 VPN PLUS은 무엇이 다른것인가 스마트폰으로 시놀로지 OpenVPN 추가하기 OpenVPN은 오픈소스라 무료로 사용할 수 있고 현재 많은 VPN 업체에서도 사용하고있는프로토콜입니다. 비교적 안전하고 속도도 괜찮은 VPN이라고 보시면 됩니다. 다만 앱(프로그램)도 깔아야 하고 Config파일도 설정해야 하고 다소 복잡한 과정을 거쳐야 합니다. 먼저 플레이스토어에서 OpenVPN 앱을 찾아서 설치해야 합니다. 그러..
IT이야기/시놀로지 2019. 1. 31.
스마트폰으로 시놀로지 VPN 서버에 접속하기
이전에 시놀로지 VPN 서버와 VPN PLUS은 무엇이 다른것인가 라는 제목으로 시놀로지로 VPN 서버를 만드는 것을 포스팅 했었습니다. 이번엔 이 VPN서버에 스마트폰으로 어떻게 접근하여 사용하는지 포스팅하려고 합니다. 제 폰이 안드로이드이기 떄문에 안드로이드폰을 기준으로 설명을 드릴 예정이며 아이폰이나 기타 다른폰 일지라도 핵심 설정은 거의 대동소이하므로 참고하실 수 있을 것입니다. 스마트폰으로 VPN PPTP 추가하기 PPTP가 무었인지는 시놀로지 VPN 서버와 VPN PLUS은 무엇이 다른것인가에 설명을 달아놨으니 이전 포스팅을 참조하시면 됩니다. 먼저 스마트폰의 VPN설정 항목으로 이동해야 합니다. 설정 메뉴에서 연결이란 메뉴를 선택합니다. VPN연결은 많은 사람들이 사용하는 핵심 연결이 아니기..
IT이야기/시놀로지 2019. 1. 31.
Let’s Encrypt 인증서를 적용하여 안전한 페이지로 거듭나기
인터넷의 보안이 문제가 되면서 어느정도 공신력이 있는 웹사이트인 경우는 TLS 인증서를 설치해야 합니다. TLS 인증서를 사용하는지 쉽게 구분할 수 있는 것은 인터넷 주소가 https로 시작되는지를 보면 됩니다. TLS 인증서는 보통 SSL 인증서라고 말하기도 하는데, 통신을 하는 서버와 클라이언트가 서로가 문제가 없은 곳이라는 것을 인증하고 암호화를 시켜서 중간에 해커가 끼어들지 못하게 하는 것이 핵심인 프로토콜입니다. 구글이 Https 사용여부에 따라서 검색 순위에 반영을 하겠다고 발표를 했고 티스토리도 얼마전부터 http에서 https로 바꿨습니다. 그런데 이 인증서는 보통 인증업체가 인증을 해 주기 때문에 비용이 발생합니다. 매년 연단위로 비용이 발생하는데 기업이라면 얼마 되지 않는 돈이니 지불에..
IT이야기/시놀로지 2019. 1. 30.
시놀로지 VPN 서버와 VPN PLUS은 무엇이 다른것인가
해외여행을 앞두고 갑자기 VPN에 관심을 갖다가 시놀로지에서 VPN서버가 있다는 것을 알고 이것저것 알아봤습니다. 그렇게 알게된것을 잊지않기위해 포스팅을 해 봅니다. VPN은 무엇인가? VPN에 대한 포스팅은 이전에 작성한 오페라를 이용하여 무료 VPN을 안전하고 쉽게 사용하는 방법을 참고하시면 될 것 같습니다. 시놀로지의 VPN 서버와 VPN Plus와의 관계 먼저 포스팅한 오페라를 이용하여 무료 VPN을 안전하고 쉽게 사용하는 방법 을 보시면 오페라브라우저를 이용하여 무료 공개된 VPN서버를 자동으로 찾고 연결하는 방법에 대한 내용인데요. 만약 시놀로지NAS을 가지고 계시다면 나만을 위한 VPN SERVER를 직접 만들 수 있고 외부에서 접속하여 사용을 할 수 있습니다. 그런데 시놀로지 모바일앱을 살..
IT이야기/Google프로그램 2019. 1. 24.
구글 크롬을 초기화 하는 방법
구글 크롬을 오래 사용하다 보면 속도가 느려지거나 프리징이 되버리거나 하는 경우가 종종 있습니다. 이럴때 스마트폰을 공장초기화 하듯이 크롬도 초기화를 할 수 있는데요. 재설치가 아니고 크롬이 있는상태에서 초기화 하는 방법을 포스팅하려고 합니다. 모두 다 사라지는 것은 아니고 북마크는 남아 있으니 안심하시면 됩니다. 크롬 초기화 하기 브라우저의 우측 상단에 있는 설정메뉴 버튼을 클릭합니다. 컨텍스트메뉴 중 하단에 있는 설정 메뉴를 선택합니다. 설정화면의 하단으로 내려가면 고급 버튼이 있습니다. 선택하고 고급메뉴 화면으로 이동합니다. 설정을 기본으로 복원 버튼을 클릭합니다. 설정초기화 버튼을 클릭합니다. 자세히 보기 버튼의 내용을 보시면 아시겠지만, 시작 페이지, 새 탭 페이지, 검색 엔진, 고정 탭이 재설..
IT이야기/Google프로그램 2019. 1. 23.
구글 크롬 주소창 검색엔진을 바꿔 보자
초창기에는 인터넷브라우저로 윈도우즈에 기본으로 설치되어 있는 인터넷 익스플로러(IE)를 많이 사용했었습니다. 하지만 어느 순간부터 그것이 역전되어 이제는 전 세계적으로 크롬브라우저를 더 많이 사용하는 추세가 되었습니다. 아마도 크롬에서 개발한 V8엔진이 자바스크립트 안정적이고 획기적으로 빠르게 처리한다는 것이 알려지면서 부터이지 않을까 합니다. 저도 매인 브라우저로 크롬을 주로 사용하는데요. 크롬의 장점인 주소창에 인터넷 주소가 아니라 검색어를 입력하면 기본 검색엔진인 구글검색을 이용하여 검색결과를 보여주고 있습니다. 저는 이것에 매우 만족을 하지만 국내에서 구글 검색 말고 네이버 검색이나 다음 검색을 원하는 분도 상당히 많은 것으로 알고 있습니다. 그래서 이번에는 크롬의 주소창에 검색어를 입력했을 때 ..
WEB디자인이야기/Adobe Photoshop 2019. 1. 22.
포토샵으로 날씬하고 키가 크게 만드는 방법
오랜동안 온라인에서 마법의 도구로 사용되는 포토샵을 이용하여 사진 속 인물을 좀 더 날씬하고 좀 더 길쭉~ 하게 만드는 방법을 포스팅 하려고 합니다. 사용하는 기능 사용하는 핵심기능은 아래의 2가지 입니다. 픽셀유동화(Liquify) 필터 사용 사각형 선택 윤곽 도구를 활용한 부분이미지 변형 먼저 무료이미지 제공사이트에서 샘플로 사용할 사진을 하나 찾아서 포토샵으로 불러옵니다. 얼굴 보정과 날씬한 몸 만들기 먼저 모델을 날씬하게 만드는 작업을 하겠습니다. 형태의 변형을 자연스럽게 해주는 도구가 픽셀유동화(Liquify) 필터 입니다. 이 필터를 이용해서 날씬하게 만들어 보겠습니다. 사용방법은 그렇게 어렵지 않습니다. 다만 사진을 보는 눈이 좋아야 겠지요. 먼저 작업하기 전에 원본보호를 위해 레이어를 하나..
WEB디자인이야기/Adobe Photoshop 2019. 1. 22.
한글 포토샵을 영문 포토샵으로 전환하는 아주 손쉬운 방법
포토샵을 처음 사용하거나 개인인 경우는 대부분 한글 포토샵이 편할 것입니다. 그러나 포토샵을 업으로 하고 있는 포토그래퍼나 디자이너 같으신 분들은 아마도 영문 포토샵이 훨~씬 더 편하거라 생각합니다. Adobe에서 포토샵 판매방식을 매월 결제하는 포토샵CC로 바꾸면서 특별히 설정하지 안는 이상 한국에서는 한글 포토샵이 설치가 되게 되는데요. 이것을 영문버전으로 사용하는 2가지 방법을 포스팅 하려고 합니다. 아래의 2가지 방법이 있습니다. 설치할 때 영문으로 설치하기 설치 후에 영문으로 변환하기 설치할 때 영문으로 설치하기 AdobeCC를 사용한다면 Adobe Creative Cloud 설치 화면을 보셨을 거라 생각합니다. 이곳의 환경설정에서 언어를 영문으로 변경하여 설치하면 됩니다. 먼저 우상단의 메뉴버..
IT이야기/무료프로그램 2019. 1. 20.
포토스케이프(PhotoScape X) 100% 활용 하기
사진이나 이미지를 다룰 때 포토샵을 뺴놓으면 섭하지만 이 포토샵의 가격이 후덜덜 하고 또한 클라우드로 변경되면서 가격은 좀 싸졌을지 모르지만 매년 또는 매달 비용을 지불해야 하는 부담감이 있습니다. 이걸 가지고 돈을 벌 수 있는 직업이 있다면 그런대로 투자할 만 한데 그렇지 않은 일반 개인이나 서민들은 해적판이나 대체 프로그램을 찾기 마련입니다. 여러가지 다양한 사진 다루는 툴이 있겠지만 그중에서도 높은 평점을 가지고 있으면서 간편하고 다양한 기능이 있고 무엇보다도 무료라는 메리트를 가지고 있는 포토스케이프를 소개해 볼까 합니다. 사실 포토샵 대용이라고는 하지만 어떤 면에서 보면 포토샵과는 좀 다른 용도라고 볼 수도 있습니다. 포토샵 보다 더 편한 기능이 많이 있습니다. 포토스케이프(PhotoScape)..
WEB개발이야기/Vue.js 2019. 1. 15.
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. 1. 15.
Vue 인스턴스의 라이프사이클
보통 프레임워크나 라이브러리의 경우 처리 순서에 따라 라이프사이클이 존재합니다. 사실 사람이 인식하기도 전에 순식간에 라이프사이클이 지나가 버리기 때문에 육안으로는 관찰이 거의 어렵습니다. 하지만 컴포넌트를 개발하거나 일반 개발 과정에서 라이프사이클은 중요한 요소로 작용을 합니다. 예를 들면, 분명 내 생각에는 A * ( B + C ) = D가 나와야 하는데 E가 나오는 경우가 발생을 합니다. 확실하게 D가 나와야 하는데 말이죠.. 이런 경우 십중팔구는 라이프사이클 때문 일 확률이 높습니다. 아직 순서 상으로( B + C )가 계산 되기도 전 인데 먼저 A * B를 계산해 버리는 경우 이런 문제가 발생할 수 있다는 것입니다. 그래서 라이프사이클을 이해하는 것은 나중에 심도있게 개발 할 때 중요한 요소 일..
IT이야기/무료프로그램 2019. 1. 12.
픽픽(PicPick)으로 이미지에 워터마크 쉽게 붙히기
예전에 만능디자인툴 picpick이라는 글로 포스팅을 한 적이 있었는데요. 이 디자인 툴에 새로 알게된 유용한 기능이 하나 있어 소개해 볼까 합니다. 블로거라면 내가 찍은 사진이나 캡쳐한 이미지에 나만의 워터마크를 넣고 싶은 욕구가 있을텐데요. 이 워터마크를 포토샵으로도 넣을 수 있지만 손이 많이가는 것은 피할 수 없는 사실입니다. 또한 워터마크를 붙혀야할 이미지의 양이 많아지면 이 또한 상당하게 귀찮은 일이 되어 버립니다. 그래서 이미지에 일괄로 워터마크를 붙혀주는 다양한 툴이 있지만 제가 메인으로 사용하는 캡쳐툴인 픽픽(picPick)에도 워터마크를 붙히는 기능이 있어 소개하려고 합니다. 픽픽에 워터마크 기능 모르면 못써먹은 워터마크 넣기 기술 입니다. 텍스트 워터마크는 없는 것 같고 워터마크 이미지..
WEB개발이야기/Vue.js 2019. 1. 11.
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. 1. 11.
Vue.js의 기본 디렉티브 정리
Vue.js를 공부하면서 기억해야 할 것에 대해 요약정보를 정리해 보려고 합니다. 이번에는 Vue.js에 기본으로 포함되어 있는 기본 디렉티브에 대한 정리 입니다. 디렉티브 디렉티브를 우리나라 말로 하면 지시문이라고 할 수 있습니다. 어떻게 어떻게 해라~ 라고 지시하는 것이죠. Vue.js의 View영역에서 태그의 속성을 지정하는 방식으로 구현이 됩니다. 태그 속성에 간단히 v-text="message" 라고 작성을 하면 javascript단에서 message변수에 할당된 값을 보여주는 식으로 약속된 명령어를 구현합니다. Vue.js에서 기본으로 제공하고 있는 디렉티브를 기본 디렉티브라고 하고 사용자가 스스로 만들어서 사용하는 것을 사용자 지정 디렉티브 또는 커스텀 디렉티브라고 합니다. 이번에는 몇개 되..
WEB개발이야기/VScode 2019. 1. 9.
VScode의 Extention의 폴더 위치는 어디일까요?
기존에는 텍스트에디터로 울트라에디터나 에디트플러스, Notepad++ 등등을 많이 사용 했었지만 이제는 좀 더 진보된 신세대 텍스트에디터라고 할 수 있는 VScode, 서브라임텍스트 등으로 넘어가는 추세입니다. 저도 그렇고 요즘의 가볍게 코드를 개발하는 개발자 분들이 많이 사용하고 있습니다. 약간 사용법이 상이 하지만 익숙해 지면 너무나 편리한 에디터라고 할 수 있습니다. VScode를 설치해서 사용하다 보면 가끔씩 설치 경로를 직접 엑세스 해야하는 경우가 종종 있습니다. 나중에 저도 참고하기 위해 그 경로를 포스팅해 놓을까 합니다. VScode 설정정보가 있는 폴더 위치 Mac에서 보통의 방법으로 VScode를 삭제하고 새로 설치할 경우 이상하게 모두 삭제가 되는 것이 아니라 이전의 기록들을 다시 가지..
IT이야기/무료프로그램 2019. 1. 9.
오페라를 이용하여 무료 VPN을 안전하고 쉽게 사용하는 방법
VPN은 접속 정보를 가리고 암호화 함으로써 사용자의 보안을 한층 강화 시키는 방법으로 기업에서 많이 사용됩니다. 하지만 일반 개인들은 보안의 목적보다는 국가 또는 ISP(인터넷 서비스 공급자)에서 막아놓은 웹사이트(토렌트 사이트나 불법사이트)를 접속하는데 주로 많이 사용합니다. 보통은 인터넷에 접속을 한다고 하면 먼저 ISP(인터넷 서비스 공급자)가 요청을 접수 받아서 URL의 주소로 넘겨주게 됩니다. 이때 ISP업체는 모든 접속 정보를 볼 수 있고 추적할 수 있게 됩니다. 나라에서 원하면 ISP업체가 접속정보를 정부에 넘겨줄 수도 있다는 뜻입니다. IP주소가 온전히 남기 때문에 추적이 가능합니다. 보통 VPN서버는 각 기업에서 자사의 직원들을 위해 프라이빗하게 사용하는 용도로 사용하지만 인터넷에서는 ..
IT이야기/Google프로그램 2019. 1. 7.
구글 스프레드시트에서 연속데이터 복사하는 방법
엑셀에서는 사용방법을 아는데 구글 스프레드시트에서는 사용방법이 애매한 경우가 있습니다. 물론 알고 나면 쉽지만 모르면 상당히 어려운 기능 입니다. 저도 이것 때문에 고생하다가 겨우 알게 되었기에 블로그를 통해 공유를 하려고 합니다. MS엑셀에서 연속데이터 복사하기 MS 엑셀에는 상당히 쉬운면서 단순 노가다를 극적으로 해결해 주는 상당히 유용한 기능이 있는데요. 1~10번까지 순차적으로 자동 입력, 또는 날짜를 순차적으로 연속해서 데이터를 입력해 주는 기능입니다. 복사하고자 하는 내용을 입력하고 .점 부분을 클릭하고 아래로 드레그를 합니다. 오른쪽의 아이콘을 눌러서 셀 복사를 선택을 하면 첫번째의 내용과 동일한 내용이 복사가 됩니다. 반면 연속 데이터 채우기를 선택하면 순차적인 예상값들이 등록이 됩니다. ..
IT이야기/Google프로그램 2018. 12. 28.
엑셀 또는 구글 스프레드시트에서 셀 복사할 때 절대참조 활용하기
엑셀을 사용하다 보면 수식이 적용되어 있는 셀을 복사해서 사용하는 경우가 많습니다. 이때 셀을 복사하면 기본적으로 셀 복사가 상대 참조를 사용하게 되는데 이때 셀 복사를 절대 참조로 해야 할 경우가 있습니다. 증상 간단한 수식의 경우는 이렇게 상대 참조로 해도 결과물을 얻을 수 있습니다. 다만 환율(D라인)이라는 동일한 값이 불필요하게 반복적으로 들어가야 하는 것을 보고 있어야 하는 심리적 압박감과 좀 더 복잡한 수식에서는 이렇게 사용을 못한다는 단점이 있습니다. 그래서 셀을 절대참조로 하려고 하는데, 그냥 수식을 복사해서 사용을 하면 아래와 같이 오류가 발생을 합니다. 왜냐하면 엑셀은 기본적으로 수식을 복사할때 상대 참조를 하닌까요. 이 문제를 해결하는 것이 이번 포스팅의 목적입니다. 해결방법 이것을 ..
UXUI이야기 2018. 12. 27.
무인양품(MUJI)가 자율주행버스도 만든다???
자율주행이 이제 대세이긴 한가 봅니다. 일본에서 의류,가방,신발, 가구, 주방용품 등 생활용품을 주로 만드는 회사인 무인양품(MUJI)가 이제 자율주행버스도 만든다고 2018년 11월1일 발표를 했습니다. 물론 핀란드 기업인 Sensible 4와 합작으로 만든다고는 하지만 그래도 일반 생활용품 기업이 도전하기에는 좀 생뚱 맞긴한 모양새 입니다. 이전까지 자동차 산업은 몇몇 손꼽히는 대규모의 기업이 사활을 걸고 진행해야 하는 산업이였다면 이제는 어느 정도 자본만 있으면 도전해 볼 수 있는 산업으로 변하고 있다고 볼 수 있을 것 같습니다. 무인양품은 심플, 단순, 자연주의 같은 자사만의 독특한 디자인 컨셉을 가지고 있어서 기술력을 갖추고 있는 Sensible 4와 합작을 했을 때 성공 가능성이 어느 정도는 ..
WEB디자인이야기/WEB디자인 2018. 12. 22.
파비콘(Favicon) 만드는 방법 (a.k.a. ico파일)
홈페이지를 제작할 때 보통 가장 처음 또는 가장 나중에 만드는 것이 파비콘(Favicon)입니다. 많은 사람들이 파비콘과 아이콘(.ico)를 혼돈하는 경우가 많은데요. 이번 포스팅은 이것에 대한 구분과 만드는 방법을 소개하려고 합니다. 파비콘(Favicon) VS 아이콘(.ico) 아이콘(.ico) 파일이란? 텍스트 기반의 MS-DOS시절을 지나 마우스로 깔짝되는 GUI(Graphic User Interface) 기반인 Windows시대로 넘어 오면서 마우스로 눌러야 할 명령어를 사용자가 한눈에 직관적으로 알 수 있게 하기 위해 파일이나 폴더를 아이콘(.ico)파일로 만들면서 사용하기 시작했습니다. 말하자면 아이콘 파일은 Windows와 역사를 같이 하고 있다고 볼 수 있습니다. (GUI는 Mac으로부터..
WEB개발이야기/기타 2018. 12. 16.
google 번역기 플러그인으로 다국어 적용하기
기술이 너무나 급성장을 하는 것을 새삼 느낍니다. 예전에도 번역프로그램이 없었던 것은 아니지만 번역율이 좋지 않아서 거들떠도 보지 않았었는데 지금은 인공지능이라고 하는 머신러닝 기술을 이용해서 상당히 번역율이 높아지고 있음을 실감합니다. 그 선봉에 서있는 기업이 역시나 구글입니다. 구글은 전세계 언어를 서로 번역하는 기능을 무료로 제공 하고 있습니다. 무료로 제공한다고 해서 구글이 착한 회사라고는 할 수 없지만 그래도 일반인 입장에서는 고마운 기능임에는 틀림없습니다. 그래서 블로그나 웹사이트를 구글 번역 플러그인을 사용하여 어느정도 퀄리티 있는 번역을 제공하는 방법을 포스팅해 보려고 합니다. 구글 번역사이트 접속하여 코드 발행하기 구글 번역 웹사이트 먼저 구글 번역웹사이트에 접속을 합니다. 접속 후 웹사..
IT이야기/컴퓨터 2018. 11. 21.
windows10에서 자주 사용하는 폴더와 최근에 사용한 파일 나오지 않게 하는 방법
때로는 과잉친절이 불편할 때가 있습니다. 사람에게 편리하도록 만든 것이 오히려 사람을 더 힘들게 하는 경우가 딱 이 경우 인것 같습니다. 물론 UX측면에서 보면 자주 사용하는 폴더와 최근에 사용한 폴더를 앞쪽에 배치하는 것이 맞지만 때로는 자주 사용하는 것을 감추기 원할때도 있습니다. 마치 내가 무식한 것을 숨기고 싶은 것 처럼… 그런 소수의 사람들을 위해서 자주 사용하는 폴더와 최근에 사용한 파일를 나오지 않게 하는 방법을 공유하도록 하겠습니다. 위의 그림처럼 좋든 싫든 내가 보는 모든 파일과 폴더가 노출이 됩니다. 숨기고 싶은 것도 있을텐데 말이지요.. 설정하기 먼저 바로가기에서 마우스 오른클릭을 합니다. 옵션을 선택합니다. 파일탐색기 열기에서 내 PC를 선택합니다. (자주사용하는 폴더 제거) 개인 ..
WEB개발이야기/웹퍼블리싱 2018. 11. 7.
highlight.js를 활용하여 Code구문 강조하기
많은 개발자들이 웹사이트에 글을 작성할때 코드 부분을 실제 에디터에서 보이는 것 처럼 강조하기 위한 방법으로 highlight.js을 사용합니다. 이것을 사용하기 위해 npm 또는 yarn을 사용하여 프로젝트에 포함시키는 경우도 있지만 제가 소개하는 방법은 가장 간단하게 CDN을 활용하여 index.html에 적용하여 사용할 수 있는 쉬운 방법니다. CDN이란 : CDN은 콘텐츠 전송 네트워크(Content delivery network 또는 content distribution network (CDN))의 약자로 CDN 서버에 javascript나 images, sound등등..의 컨텐츠를 올려놓고 여러 위치에 동일한 파일을 분산시켜 저장해 놓습니다. 사용자가 해당 컨텐츠 파일을 요청할 경우 사용자와 ..
IT이야기/맥북 2018. 11. 6.
맥북에서 데스크톱 가상화인 VDI(Virtual desktop infrastructure) 사용할 때 한글문제점 해결하기
맥북에서 데스크톱 가상화(Virtual desktop infrastructure)로 Windows를 사용할 때 다양한 문제가 있지만 그중에서도 사용자를 가장 괴롭히는 것이 한글이 자동으로 바뀌는 것입니다. 이런 조건의 문제를 당하는 사람이 많지도 않을 것 같고 주위에 맥 전문가도 많지 않아서 이 문제의 원인과 해결 방법을 찾는데 많은 시간을 보내야 했습니다. 혹시나 저 같은 사람이 있을것 같아 포스팅으로 남겨봅니다. 상황 그냥 MAC만 사용할 경우는 한/영 전환에는 크게 문제가 없습니다. 한/영키가 없는 예전 MAC 이면 shift + spaceBar로 전환하면 되고 근래의 MAC은 키보드 좌측에 한/영 키가 별도로 붙어 나오기 때문입니다. 하지만 VDI로 Windows를 같이 사용할 경우는 키보드를 공..
