티스토리 스킨/T스킨 공지사항 2020. 2. 3.
UX공작소 T스킨 BASIC를 배포합니다.
새롭게 시작하는 티스토리 스킨 T스킨 BASIC를 배포합니다 많은 시행착오를 거치면서 티스토리스킨의 가장 기본이 되는 BASIC 버전을 배포합니다. 여러가지 다양한 카테고리의 블로그에 어울리면서 기본 티스토리스킨에 비해 한차원 넘어서는 다양한 기능을 가지고 있습니다. 기능의 설정도 관리자 화면에서 설정 할 수 있도록하여 웹기술을 모르더라도 쉽게 적용할 수 있는 강점이 있습니다. 기존에 UX공작소에서 스킨을 구매 하신 분께서는 새로운 T스킨 BASIC 에서 구매 신청 후 댓글을 달아 주시면 무료 등록을 해드리겠습니다. T스킨 BASIC 구입 화면 바로가기 T스킨 BASIC 샘플 바로가기 아래의 샘플 블로그에서 기능과 디자인을 확인할 수 있고 구입도 할 수 있습니다. 또한 한번 구입 한 티스토리 유저는 언제..
WEB개발이야기/Git 2020. 1. 29.
gitlab에서 한국어 설정 방법
Gitlab은 기본으로 영어로 보여집니다. 서비스형 gitlab.com도 설치형 gitlab도 모두 그렇습니다. gitlab는 멀티랭귀지를 지원하기 때문에 한글로 쉽게 설정 할 수 있는데요. 그 설정하는 위치가 알고 나면 쉽지만 모르면 참 찾기 어려운 곳에 있습니다. 설치형 gitlab과 서비스형 gitlab 모두 동일한 방법으로 변경할 수 있습니다. 멀티랭귀지는 사용자 개별로 지원된다. 일단 이 개념부터 가져야 합니다. 저는 설치형 gitlab서버를 설치하면서 고생을 하며 알게 된 건데 당연히 서버 전체에 대해서 한글로 바꾸려고 계속 gitlab의 서버 설정(Admin Area)만 찾고 있었습니다. 하지만 서버는 기본적으로 "거의 대부분의 언어를 지원한다".이고, 가입한 회원이 "난 한국어를 쓸거야"~..
WEB개발이야기/Git 2020. 1. 28.
리눅스(CentOS7) 서버에 방화벽(firewall)을 활용하여 특정 IP만 접근하게 하는 방법
회사 내부용으로 리눅스 서버로 돌릴 경우 특정사용자만 해당 서버에 접근 하도록 해야 할 필요가 있습니다. 여러가지 방법이 있겠지만 가장 간단한 방법은 방화벽으로 특정 IP외에는 모두 막아버리는 방법이 있습니다. Firewall을 설치하고 설정하는 방법을 간단히 기록해 두려고 합니다. Firewall 상태 확인하기 현재 firewall이 구동되고 있는지 죽어있는지 먼저 확인 합니다. firewall-cmd --state 현재 실행 중이면 running, 실행 중이 아니면 not running을 출력합니다. 시스템(CentOS) firewall 설치 보통 리눅스도 기본적으로 Firewall은 설치가 되서 나오기는 하지만 간혹 설치가 되어있지 않은 경우도 있습니다. 이렇때 firewall을 설치하는 방법입니다..
WEB개발이야기/Git 2020. 1. 28.
CentOS7에 gitlab ce 설치하기
리눅스 서버로 많이 사용하는 CentOS 7에 gitlab을 설치하는 방법을 Posting하려고 합니다. 먼저 공식 사이트에서 제공하고 있는 설치방법을 따르는 것을 권장합니다. 저는 그 가이드를 따라 설치하면서 주의해야 할 점이나 기억해야 할 점에 대해서 주로 작성하려고 합니다. 공식 사이트의 설치가이드는 아래의 URL을 참조하세요. 주의 할 점은 무료 버전인 ce(Community Edition)을 찾아서 설치해야 라이선스의 찜찜함 없이 설치할 수 있습니다. 그냥 공식사이트에서 설치가이드를 따라 설치하면 ee(Enterprise Edition)의 가이드를 먼저 보여주기 때문에 영어 울렁증이 있는 사람은 나도 모르게 ee버전을 설치하게 되어 있습니다. ce(Community Edition) 설치가이드 :..
WEB개발이야기/웹퍼블리싱 2019. 10. 4.
하드코딩의 완소 아이템 인 자동 코드완성 emmet을 아시나요?
하드코딩을 선호하는 프론트앤드 개발자에게 아주 중요한 도구가 하나 있습니다. 예전에는 스니펫(snippets)이라고도 불렀었는데 그 사용법이 제공자마다 조금씩 달랐었습니다. 하지만 언제부턴가 Emmet이 나오면서 자동완성 코드의 사용법이 어느정도 통일이 된 것 같습니다. Emmet이 도대체 뭐야? Emmet을 한마디로 요약하면 제목에도 나와 있듯이 약속된 형태의 카워드를 작성하고 변환키를 눌러주면 자동으로 코드를 완성시켜주는 툴킷이라고 할 수 있습니다. Emmet은 웹 개발자를 위한 필수 툴킷 이며 현재 출시되어 있는 많은 인기있는 텍스트 편집기에서 플러그인 형태로 제공되고 있습니다. Emmet을 통해서 HTML 및 CSS 작업 과정을 효율적으로 작업할 수 있습니다. Emmet.io 적용가능한 텍스트 편..
IT이야기/기타 2019. 10. 3.
영문 Wordpress를 한글 Wordpress로 바꾸기
시놀로지에서 도커로 Wordpress를 설치하면 불행하게도 멀티랭귀지로 설치되는 것이 아니라 영문Wordpress가 설치가 됩니다. 아무래도 Docker 이미지를 가볍게 유지하기 위해서 Languages 폴더를 제거하고 만들어서 그런것 같습니다. 지금 설명드리는 영문 Wordpress를 한글 Wordpress로 변경하는 것은 시놀로지 Docker에 만 해당되는 것은 아니고 모든 영문Wordpress를 한글로 변경할때 해당 되는 내용이기도 합니다. 시놀로지에서 Docker로 Wordpress를 설치하는 방법은 이전에 포스팅한 내용을 참고하세요. 시놀로지 Docker로 Wordpress 완벽하게 설치하기 현재 영문 Wordpress 원래 이자리에 언어를 선택하는 콤보박스가 있어야 하는데 없습니다. 언어를 선..
WEB개발이야기/웹퍼블리싱 2019. 10. 2.
이미지를 DIV 가로, 세로에 대해 가운데 위치시키는 방법
예전에 이미지를 정해진 크기의 DIV의 가로, 세로 기준으로 중앙으로 정렬시키는 방법에 대해 포스팅한 적이 있습니다. 원하는 DIV박스 안에 최적의 이미지 사이즈로 표시하기 이 방법보다 더 쉽고 간단한 방법을 찾아내어 다시 포스팅을 합니다. background image의 cover을 활용하는 방법입니다. HTML 구성 먼저 HTML로 구성해야 하는 코드입니다. 이미지를 감싸고 있는 DIV를 통해서 나와야 할 이미지의 크기를 설정하시면 됩니다. 그러면 이미지가 그 크기에 맞게 중앙 정렬이 됩니다.
WEB개발이야기/웹퍼블리싱 2019. 9. 30.
웹사이트에 구글 웹폰트 적용하기
예전에 비해 근래는 무료 웹폰트를 적용하기에 좋은 시절입니다. 예전에는 웹폰트 하나 적용하려면 지식도 많이 필요했고 폰트라이선스도 구매했었어야 했습니다. 하지만 지금은 무료로 제공되는 웹폰트도 많고 구글에서도 무료 웹폰트를 온라인으로 서비스하고 있어서 쉽게 적용 할 수 있습니다. 구글폰트에서 웹폰트 확인 및 코드 획득하기 먼저 구글 폰트 웹사이트에 접속합니다. 구글 폰트 웹사이트 구글폰트 웹사이트에 접속합니다. 한글 폰트를 적용하기 위해서 Language 선택에서 Korean을 선택합니다. 폰트리스트 중 사용하기 원하는 폰트를 선택합니다. 선택된 폰트는 우하단에 저장됩니다. + 버튼을 클릭하면 장바구니에 저장됩니다. 폰트 용량 자체가 크기 떄문에 폰트 굵기 종류가 1개 추가 될 때마다 용량이 많이 증가하..
WEB개발이야기/웹퍼블리싱 2019. 9. 30.
javascript로 드레그가 가능한 HTML 요소 만들기
javascript로 HTML의 DIV를 드레그할 수 있게 하는 간단한 기능 구현입니다. 이와 비슷한 기능은 jquery UI에서 제공해 주고 있긴 하지만 드레그 기능 하나 구현하겠다고 jquery UI를 붙히기는 웬지 손해 보는 느낌입니다. 바닐라JS로 구현하는 코드와 설명입니다. HTML 먼저 간단하지만 HTML 구성요소 입니다. CSS CSS도 간단하게 구현합니다. 마우스가 해당 요소에 올라가때 화살표 마우스 표시가 이동이 가능한 표시로 바뀜니다. #dragdiv { cursor: move; } javascript 핵심기능인 javascript 코드 입니다. 바닐라JS로 구현 시 3가지의 단계로 구현이 되면 하나씩 설명을 하겠습니다. 마우스로 요소를 클릭 할 때 기능 구현 클릭한 요소를 움직일 떄 ..
IT이야기/시놀로지 2019. 9. 22.
시놀로지 Docker로 Wordpress 완벽하게 설치하기
시놀로지는 정말 좋은 어른들의 장난감인것 같습니다. 할게 이것 저것 무궁무진하게 많습니다. 우리 가족의 사진 히스토리를 기록할 수도 있고 어디에서든지 비용부담없이 동영상을 즐길 수도 있고 만화서버로도 이용할 수 있습니다. 그중에서도 프로그래머나 개발자 라면 정말 반길만한 서비스가 있는데, 바로 도커(Docker)라고 할 수 있습니다. 도커에 대해서 자세히 알려면 공부를 많이 해야 겠지만 간단하게 말한다면… 개발자가 개발을 하다가 "이게 아닌가벼~~"하는 생각이 들때 그냥 도커 컨테이너만 삭제해 버리면 깨끗하게 삭제가 가능하다는 것입니다. 다시 시작 할 수도 있고 도커로 개발이 완료되었을때 그상태 그대로 운영으로 돌릴 수도 있습니다. 저도 몇개의 도커사용법을 포스팅했는데요. 아래의 경로를 참고하세요. 시놀..
IT이야기/시놀로지 2019. 9. 18.
시놀로지 RAM 4GB에서 16GB로 램업(RAM UP) 했어요
이번에 시놀로지의 Docker 패키지 가지고 이것 저것하다가 너무 답답해서 RAM 업그레이드를 진행했습니다. 인터넷의 도움을 받고자 이것저것 찾아보고 최종적으로 실제 램업한 결과를 공유해 보고자 합니다.Synology의 DS918+ RAM UP은 얼마까지 가능한가?제가 가지고 있는 시놀로지는 DS918+ 입니다. 슬롯은 2개가 있고 그 중에 한곳에 4G짜리 RAM이 하나 끼워져있습니다. 사진은 제가 교체하고 찍어서 삼성 RAM이 꽃힌게 보이지만 원래는 정품 Synology RAM이 꽂혀 있습니다. 어찌되었든 4GB RAM이 기본적으로 이렇게 슬롯 하나에 꽃혀있고 하나는 비워져 있습니다. 시놀로지의 공식적인 최대 RAM은 8GB로 되어 있습니다. 다시말하면 기본 4GB에 추가로 4GB를 끼워서 8GB로 사..
WEB개발이야기/VScode 2019. 9. 16.
VScode 최고의 익스텐션 project Manager
VScode의 유용한 익스텐션인 프로젝트매니져-Project Manager를 소개합니다. 이 익스텐션은 개발 소스를 프로젝트 단위로 쉽게 관리하게 해주는 익스텐션입니다. 장점 제목에서도 알 수 있듯이 프로젝트를 매우 쉽게 전환 시켜주는 익스텐션입니다. 프로젝트의 구분은 보통 폴더단위로 구성되는데, 프로젝트를 변경하거나 생성하려면 폴더열기를 통해서 다른 프로젝트의 경로를 찾아서 열거나 해야하는데 프로젝트 매니저는 쉽게 버튼하나 누르면 변경을 할 수 있습니다. 또한 쉽게 사용할 수 있게 VScode의 좌측에 아이콘 버튼을 달아 놨습니다. Git, Mercurial, SVN repositiories는 자동으로 감지를 합니다. 사용법 간단하게는 좌측의 버튼을 사용하여 활용할 수도 있고 F1을 눌러서 명령실행줄을..
WEB개발이야기/VScode 2019. 9. 16.
VScode 최고의 익스텐션 Path Intellisense를 소개합니다.
안녕하세요. 반갑습니다. 이번에는 VScode의 익스텐션 중에 제가 사용해 본 것 중 괜찮다 싶은 것을 시리즈로 소개해 볼까 합니다. 첫번째로 소개할 것은 Path Intellisense입니다. Path Intellisense Path Intellisense는 VScode를 사용중에 파일이나 이미지 등의 경로를 지정할때 자동으로 경로를 선택해서 지정할 수 있게 해주는 아주 편리한 익스텐션입니다. 설치하는 방법은 따로 설명할 필요는 없겠지요? 저는 이미 설치한 상태입니다. Path Intellisense를 설치하고 몇가지 옵션이 있기는 하지만 설치하는 것으로 기본적인 작동을 합니다. 기준은 프로젝트 기준으로 작동을 합니다. 프로젝트는 해당 파일들이 모여있는 폴더라고 보시면 되고 그 폴더를 기준으로 상대경로..
WEB개발이야기/VScode 2019. 9. 14.
VScode Code Formater 인 Prettier 완벽 적용하기
VSCode 익스텐션 중에 코드를 정렬해 주는 Formatter는 크게 Prettier과 Beautify가 있습니다. VScode에서는 2가지의 Formatter가 가장 많이 사용되는데 2가지는 약간 다른 특징이 있습니다. Prettier가 코드를 강제적으로 변경을 시킨다면 Beautify는 좀더 자유롭게 놔두는 편입니다. 자신만의 코드작성 규칙을 가지고 있다면 Prettier가 짜증 날 수도 있습니다. 내 코드를 막 바꿔버리닌까요. 하지만 그런면이 코드를 항상 일정하게 정렬을 시켜 주기도하닌까 심리적인 타격만 없다면 이보다 좋을 수 는 없을 겁니다. 또한 여러 사람이 한 프로젝트를 같이 코딩을 해야 한다면 꼭 필요한 익스텐션이라고 할 수 있습니다. VScode에 prettier 적용하기 VScode에 ..
WEB개발이야기/Vue.js 2019. 7. 24.
개발하면서 경험으로 알게 된 Vuex에서 Store활용 방법
Vue의 개발을 편리하게 도와 주는 공식 툴 중에 Vuex가 있습니다. Vuex의 주요 기능은 개발하는 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역활 및 관리 입니다. 만약 이게 없다면 컴포넌트간 데이터를 주고받기 위해서 부모는 자식에서 props의 방법으로, 자식은 부모에게 Emit event의 방법으로 데이터를 주고 받아야 합니다. 또한 형제 컴포넌트간 데이터를 주고 받으려면 너무 복잡해져서 EventBus를 활용해야 그나마 사용을 할 수 있게 됩니다. 간단한 프로젝트인 경우에야 사용이 가능하겠지만 대형 프로젝트인 경우에는 이러한 방법으로는 도저히 감당이 되지 않고 개발 후 운영을 한다고 해도 거의 맨붕이 올 것입니다. 이러한 문제를 해결해 주는 것이 Vuex라고 보시면 됩니다. 데이터..
WEB개발이야기/Vue.js 2019. 6. 28.
Vue의 Nuxt로 개발할 떄 자동으로 브라우저 띄우는 방법
Nuxt로 Vue를 개발하다 보면 항상 사용하는 명령어가 npm run dev 또는 npm dev 또는 yarn run dev 또는 yarn dev 일 것입니다. 모두 동일하게 Nuxt를 개발 모드로 띄워라 인데.. 몇가지 명령어를 덫붙히면 dev모드 실행과 동시에 브라우저를 자동으로 띄 울 수 있는 몇가지 방법이 있습니다. 첫번째 방법 아주 간단한 첫번째 방법은 package.json을 사용하는 방법입니다. 아래와 같이 package.json의 scripts명령어 중에 원하는 실행 명령 뒤에 "dev": "nuxt --open"와 같이 --open을 붙히는 것입니다. { //... "scripts": { "dev": "nuxt --open", "build": "nuxt build", "start": "..
WEB개발이야기/Vue.js 2019. 6. 21.
Vue의 NUXT에서 SASS를 적용해서 사용하는 방법(feat. BULMA)
웹화면은 HTML, CSS, JAVASCRIPT로 구성되어 있습니다. 웹개발자 분은 보통 HTML과 JAVASCIPT로 작업을 하고, 웹디자이너는 HTML과 CSS로 작업을 합니다. 하지만 점차 시간이 지남에 따라 HTML, CSS, JAVASCRIPT, 심지어 백오피스까지 손을 대는 풀스텍 개발자가 나오게 되었습니다. 그러면서 자연스럽게 CSS 마저도 마치 프로그램처럼 작성하고 싶은 요구가 생겨나기 시작했습니다. 그런 요구에 따라 CSS도 프로그램처럼 개발하는 언어가 생겼는데 그것을 CSS 프리프로세서, 한국말로 CSS 전처리기라고 합니다. CSS 프리프로세서로 코딩을 하고 컴파일을 하면 결과물은 기존의 CSS 형태로 되어져서 나옵니다. CSS프리프로세서의 종류는 LESS, SASS(SCSS), Sty..
WEB개발이야기/Vue.js 2019. 6. 18.
Vue의 NUXT 템플릿을 쉽게 설치하는 3가지 방법
Vuejs의 장점은 매우 가볍고 쉽고 빠르게 기존에 있는 웹서비스에 접목해서 사용하는 것입니다. 새로운 웹프로젝트에도 쉽고 빠르게 적용을 할 수 있습니다. 하지만 쉽다고 해도 Vuejs의 최대 성능을 끌어 올려서 처음부터 파일을 만든다는 것은 생각보다 쉽지 않습니다. 더욱이 개발자 마다, 또는 개발할때마다 기본 틀이 달라진다면 혼자 개발할때는 문제가 없지만 통일된 규격을 가지고 있어야 할 대규모 프로젝트를 진행하기에는 어려운 점이 너무나 많습니다. 그래서 React의 NEXT처럼 Vue에서도 NUXT를 제공하고 있습니다. NUXT는 일반적인 Vue.js 어플리케이션을 정해진 규격에 맞게 만드는 프레임워크라고 할 수 있습니다. NUXT 설치하기 NUXT에 대한 설명은 나중에 포스팅을 하도록 하겠습니다. 여..
WEB디자인이야기/WEB디자인 2019. 6. 12.
Adobe 포토샵과 XD의 다른점
이전에도 포스팅 했던 것 처럼 스케치라는 프로그램이 출시되면서 이제 UI디자인 트렌드도 워터폴 개발 방법론에서 애자일 개발 방법론으로 많이 따라가고 있는 추세입니다. 이전 포스팅 참조 : UI디자인 개발 트렌드의 변화 그래서 이번에는 기존에 UI디자인 툴로 많이 사용했던 Adobe 포토샵과 최근에 많이 사용하고 있는 UI디자인 전용 툴인 Adobe XD의 차이점을 제가 아는 한도 내에서 정리를 해 볼까 합니다. 포토샵은 비트맵 이미지를 다루고 XD은 벡터 이미지를 다룹니다. 포토샵은 기본적으로 비트맵 이미지를 다루지만 XD는 벡터 이미지 방식을 사용합니다. 비트맵 이미지의 경우 픽셀에 대한 이미지 색상정보를 저장했다가 보여주는 방식인 반면에 백터 이미지 방식은 이미지의 지점 정보와 계산식으로 이미지를 저..
IT이야기/시놀로지 2019. 6. 11.
시놀로지 Docker로 Nodejs 웹서버 설치하고 띄우기
도커에서 Nodejs웹서버를 설치하고 띄우는 일은 간단하면서도 매우 유용한 작업입니다. 시놀로지 도커(Docker)은 주로 GUI로 설치를 진행하게되어 있어서 편리하기는 하나 아직 참고할 만한 자료들이 별로 없어서 처음 시도할 때는 애를 좀 먹게 되어 있습니다. 그래서 이번에는 시놀로지에 있는 도커(Docker) 스테이션으로 Nodejs 웹서버를 설치하고 실행하는 과정을 포스팅 해보려고 합니다. 전체적인 설명은 이전에 시놀로지 Docker 기본 사용법이라고 포스팅을 했으니 먼저 읽어보시는 것이 좋습니다. 레지스트리에서 nodejs 이미지 다운로드 받기 node.js로 웹서버를 실행시키는 것이 목적이니 먼저 node.js 도커 이미지를 다운로드 받아야 합니다. node.js 도커 이미지를 어디에서든 받아오..
WEB디자인이야기/WEB디자인 2019. 5. 29.
UI디자인 개발 트렌드의 변화
웹디자인을 하던 모바일 디자인을 하던 UI 디자인(User Interface Design)을 하기 위해 지금까지 중심이 되어 온 툴은 포토샵이였다. 비교적 근래에 업종으로 자리 잡게된 UI 디자인(웹디자인/모바일 디자인)은 주로 시각디자인을 전공하던 그래픽디자이너나 편집디자이너, 제품디자이너 등이 작업하기 시작했으며 전용 툴이 없던 UI디자인은 시각디자이너들에게 익숙한 포토샵을 주로 사용하게 되었다. 매크로미디어의 파이어폭스나 Adobe의 이미지레디 등 여러 업체들이 UI디자인 전용 툴을 개발하기 위해 시도는 했으나 대부분 실패했고 아직도 범용 디자인 툴인 포토샵이 UI디자인 툴로써 긴 명맥을 유지하고 있었다. 그러다가 몇 년전 부터 슬슬 변화의 바람이 불기 시작했다. 보헤미안(Bohemian)이라는 회..
IT이야기/시놀로지 2019. 5. 27.
시놀로지 Docker 기본 사용법
시놀로지 DS918+ 로 넘어온 이유 중 하나가 도커를 사용할 수 있다는 것 이였습니다. 기존에 사용하던 것은 Synology DS214+ 였는데 해당 기기에서는 성능 때문이였는지 Docker패키지를 설치할 수 없었습니다. 저도 도커 초보라서 많이 알지는 못하지만 정리차원으로 포스팅을 해 볼까 합니다. 도커란 무엇인가??도커란 컨테이너 기반의 오픈소스 가상화 플랫폼입니다. 라고 인터넷에 많이 올라와 있으나 초보자들에게는 이게 뭔~ 소린가~ 할 것입니다. 그래서 짧고 간단하게 풀어서 설명을 먼저 해 볼까 합니다. VirtualBox, VMware 같은 가상머신이라는 것이 있습니다. 가상머신은 컴퓨터 안에 또 다른 가상의 컴퓨터를 띄우는 기술을 말하는데 MAC컴퓨터에 windows를, Windows컴퓨터에서..
WEB개발이야기/웹퍼블리싱 2019. 5. 24.
현재 가장 모던한 모바일 터치 슬라이더 swiper
현재 github에서 거의 20,000에 달하는 Star을 받고 있는 모던한 모바일 터치슬라이더 플러그인입니다. 모바일뿐 아니라 Web화면에서도 아주 잘 작동하는 검증된 플러그인이라고 보시면됩니다. MIT 라이선스를 가지고 있어서 부담없이 사용할 수 있고 데모 사이트에서 다양한 Swipe DEMO를 보고 쉽게 적용할 수 있습니다. 홈페이지http://www.idangero.us/swiper DEMOhttp://www.idangero.us/swiper/demos/Install아래와 같은 다양한 방법으로 소스를 적용할 수 있습니다. bower로 설치할 경우 $ bower install swiper또는 Atmosphere as Meteor 패키지로 설치할 경우 $ meteor add nolimits4web:s..
IT이야기/Office프로그램 2019. 4. 25.
알아두면 편리한 엑셀의 조건부서식 작성하는 방법
엑셀을 작업할 때 조건부서식이라는 유용한 기능이 있어서 포스팅합니다. 조건부 서식은 말 그대로 셀 안의 내용이 어떤 조건에 해당 하면 그 셀 또는 셀이 속해있는 행 전체에 대해서 서식(스타일)을 자동으로 지정하는 것을 말합니다. 예를 들면 아래의 1번 처럼 완료라는 글자를 썼을 때 해당 행 전체가 회색바탕에 이탤릭체, 취소선이 적용되는 것을 말합니다. 이제 설정하는 방법을 하나하나 말씀드리겠습니다. 홈 메뉴를 선택합니다. 적용 하고자 하는 영역을 선택합니다. D, E 컬럼을 모두 선택하는 것도 좋은 방법입니다. 조건부서식을 선택하고 새규칙을 선택합니다. 6가지 메뉴가 있지만 그중에서 수식을 사용하여 서식을 지정할 셀 결정을 선택합니다. 서식이 적용될 조건을 입력합니다. 자세한 내용은 아래를 참조하세요. ..
WEB개발이야기/Vue.js 2019. 4. 24.
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은 설치라..
WEB개발이야기/Vue.js 2019. 4. 24.
Vue.js에서 axios를 사용하여 서버통신하는 방법
웹 또는 앱을 개발하다 보면 거의 대부분이 서버가 필요하게 됩니다. 서버에 내용을 저장하고 웹이나 앱에서 서버의 저장된 내용을 불러다가 사용자에게 보여주게 되는데요. 이때 javascript에는 axios라는 아주 훌륭한 플러그인이 있습니다. axios는 javascript용 플러그인으로 많이 사용하지만 Vue.js에서도 매우 요긴하게 사용되어 집니다. axios는 Promise 기반의 자바스크립트 비동기 처리방식을 사용합니다. 그래서 요청후 .then()으로 결과값을 받아서 처리를 하는 형식으로 구성되어 있습니다. axios.get('/api/data').then(res => { console.log(res.data) }) /api/data에서 데이터를 불러옵니다. 불러온 데이터는 .then()의 re..
WEB개발이야기/Vue.js 2019. 4. 17.
Vuejs의 컴포넌트 사용 시 알아두면 좋은 6가지
Vue.js의 컴포넌트를 사용할때 알아두면 유용한 6가지에 대해서 포스팅을 해보겠습니다. 이것을 알게계시면 소스코드도 많이 줄일 수 있고 보기에도 좋은 코딩을 할 수 있습니다. 케밥표현과 카멜표현 컴포넌트의 영역에서 다른 컴포넌트 명을 작성할 때 2개 이상의 단어가 조합된 이름 일 경우 꼭 케밥(-) 형식으로 작성해야 합니다. HTML에서는 대소문자를 구별하지 않기 떄문에 hongGilDong 과 honggildong을 동일하게 처리하기 때문입니다. 컴포넌트의 영역에서 이름을 카멜형식(hongGilDong)으로 작성했더라도 영역에 작성할 때는 케밥형식으로 변경하여 작성하면 됩니다. Vue.js가 자동으로 같은 컴포넌트로 인식을 합니다. 케밥 형식 : 단어와 단어 사이를 '-'로 연결시키는 표현 (예 : ..
WEB개발이야기/Vue.js 2019. 3. 29.
Vue-CLI 도구 활용방법
Vue를 활용하여 개발 한다면 Vue-CLI는 반드시 알고 있어야 하는 도구 입니다. Vue-CLI가 Vue의 코어는 아니지만 개발자가 쉽게 Vue 프로젝트를 개발 할 수 있게 해주는 아주 유용한 도구입니다. Vue-CLI 란 무엇인가??? Vue-CLI에서 CLI는 Command Line Interface의 약자로 윈도우에서는 Command 창, 맥에서는 터미널 창에서 타이핑으로 명령어를 입력하여 원하는 바를 실행 시키는 도구를 말합니다. Vue-CLI은 내부적으로 Webpack을 활용합니다. Vue-cli로 명령을 실행 시키면 cli가 자동으로 최적화된 Webpack 형태의 결과물을 생성 시켜 줍니다. Vue-CLI로 할 수 있는 것은 무엇인가??? 그럼 Vue-cli로 할 수 있는 것이 무엇이냐??..
WEB개발이야기/Vue.js 2019. 3. 27.
javascript(Vue.js)로 배열에서 ID를 활용하여 Index값을 찾을때 요긴한 함수
Vue.js에서 배열에 있는 특정 id의 Index값을 찾아서 그 배열을 처리하는 요긴하면서 쉬운 함수를 공유합니다. 아래의 예제는 todolist배열을 화면에 나열해 놓고 그 중에 항목을 하나 클릭할 경우 doneToggle(id) 또는 deleteTodo(id)를 불러와서 반대 값으로 토글 시키거나 항목을 삭제하는 함수입니다. {{ a.todo }} (완료) × doneToggle : function(id) { var index = this.todolist.findIndex(function(item){ return item.id === id; }) this.todolist[index].done = !this.todolist[index].done } 핵심은 findIndex() 함수입니다. 함수에서 받..
