'분류 전체보기'에 해당되는 글 127건
분류 전체보기
WEB개발이야기/Vue.js 2019.06.18 18:19 ${data.list[i].commentCount}
Vue의 NUXT 템플릿을 쉽게 설치하는 3가지 방법
Vuejs의 장점은 매우 가볍고 쉽고 빠르게 기존에 있는 웹서비스에 접목해서 사용하는 것입니다. 새로운 웹프로젝트에도 쉽고 빠르게 적용을 할 수 있습니다. 하지만 쉽다고 해도 Vuejs의 최대 성능을 끌어 올려서 처음부터 파일을 만든다는 것은 생각보다 쉽지 않습니다. 더욱이 개발자 마다, 또는 개발할때마다 기본 틀이 달라진다면 혼자 개발할때는 문제가 없지만 통일된 규격을 가지고 있어야 할 대규모 프로젝트를 진행하기에는 어려운 점이 너무나 많습니다. 그래서 React의 NEXT처럼 Vue에서도 NUXT를 제공하고 있습니다. NUXT는 일반적인 Vue.js 어플리케이션을 정해진 규격에 맞게 만드는 프레임워크라고 할 수 있습니다. NUXT 설치하기 NUXT에 대한 설명은 나중에 포스팅을 하도록 하겠습니다. 여..
IT이야기/Adobe프로그램 2019.06.12 14:09 ${data.list[i].commentCount}
Adobe 포토샵과 XD의 다른점
이전에도 포스팅 했던 것 처럼 스케치라는 프로그램이 출시되면서 이제 UI디자인 트렌드도 워터폴 개발 방법론에서 애자일 개발 방법론으로 많이 따라가고 있는 추세입니다. 이전 포스팅 참조 : UI디자인 개발 트렌드의 변화 그래서 이번에는 기존에 UI디자인 툴로 많이 사용했던 Adobe 포토샵과 최근에 많이 사용하고 있는 UI디자인 전용 툴인 Adobe XD의 차이점을 제가 아는 한도 내에서 정리를 해 볼까 합니다. 포토샵은 비트맵 이미지를 다루고 XD은 벡터 이미지를 다룹니다. 포토샵은 기본적으로 비트맵 이미지를 다루지만 XD는 벡터 이미지 방식을 사용합니다. 비트맵 이미지의 경우 픽셀에 대한 이미지 색상정보를 저장했다가 보여주는 방식인 반면에 백터 이미지 방식은 이미지의 지점 정보와 계산식으로 이미지를 저..
IT이야기/시놀로지 2019.06.11 11:33 ${data.list[i].commentCount}
시놀로지 Docker로 Nodejs 웹서버 설치하고 띄우기
도커에서 Nodejs웹서버를 설치하고 띄우는 일은 간단하면서도 매우 유용한 작업입니다. 시놀로지 도커(Docker)은 주로 GUI로 설치를 진행하게되어 있어서 편리하기는 하나 아직 참고할 만한 자료들이 별로 없어서 처음 시도할 때는 애를 좀 먹게 되어 있습니다. 그래서 이번에는 시놀로지에 있는 도커(Docker) 스테이션으로 Nodejs 웹서버를 설치하고 실행하는 과정을 포스팅 해보려고 합니다. 전체적인 설명은 이전에 시놀로지 Docker 기본 사용법이라고 포스팅을 했으니 먼저 읽어보시는 것이 좋습니다. 레지스트리에서 nodejs 이미지 다운로드 받기 node.js로 웹서버를 실행시키는 것이 목적이니 먼저 node.js 도커 이미지를 다운로드 받아야 합니다. node.js 도커 이미지를 어디에서든 받아오..
IT이야기/Adobe프로그램 2019.05.29 18:53 ${data.list[i].commentCount}
UI디자인 개발 트렌드의 변화
웹디자인을 하던 모바일 디자인을 하던 UI 디자인(User Interface Design)을 하기 위해 지금까지 중심이 되어 온 툴은 포토샵이였다. 비교적 근래에 업종으로 자리 잡게된 UI 디자인(웹디자인/모바일 디자인)은 주로 시각디자인을 전공하던 그래픽디자이너나 편집디자이너, 제품디자이너 등이 작업하기 시작했으며 전용 툴이 없던 UI디자인은 시각디자이너들에게 익숙한 포토샵을 주로 사용하게 되었다. 매크로미디어의 파이어폭스나 Adobe의 이미지레디 등 여러 업체들이 UI디자인 전용 툴을 개발하기 위해 시도는 했으나 대부분 실패했고 아직도 범용 디자인 툴인 포토샵이 UI디자인 툴로써 긴 명맥을 유지하고 있었다. 그러다가 몇 년전 부터 슬슬 변화의 바람이 불기 시작했다. 보헤미안(Bohemian)이라는 회..
IT이야기/시놀로지 2019.05.27 23:31 ${data.list[i].commentCount}
시놀로지 Docker 기본 사용법
시놀로지 DS918+ 로 넘어온 이유 중 하나가 도커를 사용할 수 있다는 것 이였습니다. 기존에 사용하던 것은 Synology DS214+ 였는데 해당 기기에서는 성능 때문이였는지 Docker패키지를 설치할 수 없었습니다. 저도 도커 초보라서 많이 알지는 못하지만 정리차원으로 포스팅을 해 볼까 합니다. 도커란 무엇인가?? 도커란 컨테이너 기반의 오픈소스 가상화 플랫폼입니다. 라고 인터넷에 많이 올라와 있으나 초보자들에게는 이게 뭔~ 소린가~ 할 것입니다. 그래서 짧고 간단하게 풀어서 설명을 먼저 해 볼까 합니다. VirtualBox, VMware 같은 가상머신이라는 것이 있습니다. 가상머신은 컴퓨터 안에 또 다른 가상의 컴퓨터를 띄우는 기술을 말하는데 MAC컴퓨터에 windows를, Windows컴퓨터에..
WEB개발이야기/웹퍼블리싱 2019.05.24 00:38 ${data.list[i].commentCount}
현재 가장 모던한 모바일 터치 슬라이더 swiper
현재 github에서 거의 20,000에 달하는 Star을 받고 있는 모던한 모바일 터치슬라이더 플러그인입니다. 모바일뿐 아니라 Web화면에서도 아주 잘 작동하는 검증된 플러그인이라고 보시면됩니다. MIT 라이선스를 가지고 있어서 부담없이 사용할 수 있고 데모 사이트에서 다양한 Swipe DEMO를 보고 쉽게 적용할 수 있습니다. 홈페이지 http://www.idangero.us/swiper DEMO http://www.idangero.us/swiper/demos/ Install 아래와 같은 다양한 방법으로 소스를 적용할 수 있습니다. bower로 설치할 경우 $ bower install swiper 또는 Atmosphere as Meteor 패키지로 설치할 경우 $ meteor add nolimits4..
IT이야기/Office프로그램 2019.04.25 01:24 ${data.list[i].commentCount}
알아두면 편리한 엑셀의 조건부서식 작성하는 방법
엑셀을 작업할 때 조건부서식이라는 유용한 기능이 있어서 포스팅합니다. 조건부 서식은 말 그대로 셀 안의 내용이 어떤 조건에 해당 하면 그 셀 또는 셀이 속해있는 행 전체에 대해서 서식(스타일)을 자동으로 지정하는 것을 말합니다. 예를 들면 아래의 1번 처럼 완료라는 글자를 썼을 때 해당 행 전체가 회색바탕에 이탤릭체, 취소선이 적용되는 것을 말합니다. 이제 설정하는 방법을 하나하나 말씀드리겠습니다. 홈 메뉴를 선택합니다. 적용 하고자 하는 영역을 선택합니다. D, E 컬럼을 모두 선택하는 것도 좋은 방법입니다. 조건부서식을 선택하고 새규칙을 선택합니다. 6가지 메뉴가 있지만 그중에서 수식을 사용하여 서식을 지정할 셀 결정을 선택합니다. 서식이 적용될 조건을 입력합니다. 자세한 내용은 아래를 참조하세요. ..
WEB개발이야기/Vue.js 2019.04.24 18:49 ${data.list[i].commentCount}
Vue.js용 페이지 네비게이션 인 vuejs-Paginate Component를 소개합니다
Vue.js를 사용하다보면 수많은 사람들이 만들어서 무료로 공유해 놓은 Components들이 많이 있습니다. 라이선스를 꼭 확인해야 하겠지만 대부분 사용에 안전한 MIT라이선스를 주로 사용합니다. 그중에 보통 게시판 리스트 하단에 페이지를 넘기는데 사용하는 Paginate 컴포넌트를 소개해 볼까 합니다. 이 컴포넌트는 디자인은 Bootstrap3을 사용하고 있기때문에 Bootstrap3도 같이 설치를 해야 합니다. 설치하기 npm이나 yarn을 사용한다면 설치는 쉽습니다. NPM으로 설치 $ npm install vuejs-paginate bootstrap@3.3.x --save Yarn으로 설치 $ yarn add vuejs-paginate bootstrap@3.3.x CDN으로 설치 CDN은 설치라..
