WEB개발이야기/Vue.js 2020. 7. 23. 1
vuex-persistedstate 덕분에 Vue.js 화면을 새로고침 해도 안전해요.
Vue.js로 프로젝트를 개발하는 경우 화면을 이동 할 때 일반 웹페이지처럼 페이지 전체를 새로 고침하는 방식이 아니라 SPA(Single Page Application)와 같이 javascript로 필요한 부분만 교체하는 식으로 개발을 하게 됩니다. 이런 SPA방식의 개발은 모던한 웹사이트 개발에서 많은 잇점을 주고 있는 것이 사실이지만 몇가지 불편한 부분도 있습니다. 지금 소개하려고 하는 vuex-persistedstate는 이러한 불편을 해소해 주는 Vue플러그인이라고 생각하면 됩니다. 보통 모바일 웹이나 앱일 경우는 크게 착각하지 않는데 일반 웹브라우저에서 띄운 경우 습관적으로 뒤로가기 버튼을 클릭 할 때 화면이 새로고침이 되어 버립니다. 또는 기타 다른 이유로 화면을 새로고침하는 경우가 발생하게..
WEB개발이야기/Vue.js 2020. 7. 21. 0
Vue.js에서 fortawesome아이콘 라이브러리 사용하기
현재 가장 영향력 있는 무료 아이콘 제공처는 Fortawesome일 것입니다. Fortawesome은 초창기 유행하던 Font의 딩벳 형태로 아이콘을 제공하며 많은 개발자들의 사랑을 받았었습니다. Font Awesome 5를 슬기롭게 사용하는 방법 하지만 아이콘을 폰트형태로 만들어서 사용하는 방식에는 한가지 큰 문제가 있었습니다. 아이콘을 하나만 사용하던지, 100개를 사용하던지, 폰트에 포함되어 있는 아이콘을 일단 한번은 모두 다운로드 받아야 한다는 점입니다. 이럴 경우 몇개의 아이콘만 사용하면 되는데 너무 큰 트래픽의 손해를 봐야한다는 점입니다. 트래픽은 바로 비용과 연결이 되기 때문에 규모가 큰 웹사이트는 잘 사용하지 않게 됩니다. 그래서 현재 아이콘을 사용하는 방법의 유행이 fonts방식에서 SV..
티스토리 스킨/T스킨 공지사항 2020. 7. 20. 142
UX공작소 T스킨 BASIC 2번째 버전을 배포합니다 (Version 2)
티스토리 스킨 T스킨 BASIC의 2번째 버전을 배포합니다 Version 1에서 불편했던 점과 개선점들을 반영하여 좀더 완성도 높은 Version 2을 제작했습니다. 와이드 모니터가 넘쳐나는 시대에 티스토리 블로그를 좀 더 효율적으로 사용할 수 있게 댓글 창을 화면의 우측으로 배치하고 기능의 확장성을 고려하여 기능 버튼을 본문의 좌측으로 배치 했습니다.BASIC 버전이 어느정도 안정화되면 여행가를 위한 블로그, 포토크래퍼를 위한 블로그 등 전문적인 용도로 사용 가능한 티스토리로 변신시켜 줄 스킨을 만들 계획입니다. 좀 더 많은 정보 보기 아래의 링크를 통해 티스토리 샘플 블로그롤 보시거나 구입을 하실 수 있습니다. Version1과 달라진 점 포스팅 보기 샘플 블로그 보기 (https://stories...
WEB개발이야기/웹퍼블리싱 2020. 7. 16. 0
CSS position:sticky로만 레이아웃 슬기롭게 만들기
프론트엔드 개발을 하다보면 javascript를 많이 사용하게 됩니다. 하지만 javascript를 너무 많이 사용하다 보면 코드가 복잡해 지기도 하고 퍼포먼스도 점점 떨어지는 것을 느끼게 됩니다. Affix 같은 기능을 구현하려면 부트스트랩같은 특정 프레임워크를 사용하거나 별도로 개발을 해야 했으나 CSS의 position:sticky를 이용하면 javascript를 전혀 사용하지 않고도 멋진 기능을 구현해 낼 수 있습니다. sticky란 무엇인가? sticky는 CSS의 Position의 속성으로 사용되어 집니다. Fixed가 브라우저 화면의 절대 위치를 사용하는 반면 Sticky는 부모 태그의 절대위치값을 사용하는 방법입니다. 그래서 반드시 Sticky의 상위에 부모 컨테이너가 존재해야 합니다. p..
티스토리 스킨/T스킨 공지사항 2020. 7. 14. 0
UX공작소 T스킨 BASIC 2번째 버전이 이렇게 달라졌어요(Version 2)
T스킨 BASIC을 기준으로 레이아웃이 많이 변경되어서 T스킨 BASIC Version 2로 새롭게 배포 합니다. (기존에 T스킨 BASIC을 구매하셨던 분은 T스킨 BASIC Version 2을 무료로 다운로드 받을 수 있습니다) T스킨 BASIC Version 2는 T스킨 BASIC Version 1이 가지고 있던 몇가지 오류를 해결하고 코드를 정리했으며 무엇보다 아래와 같은 레이아웃 변경이 있습니다. Header의 변경 Version 1의 형태 Version 2의 형태 각 아이콘의 크기를 키웠습니다. 홈으로 이동하는 버튼을 상단바의 중앙으로 이동했습니다. 댓글창 보기 버튼을 상단바의 오른쪽으로 이동했습니다. 이 위치가 적당한지는 좀더 지켜보고 수정이 될 수도 있습니다. 기능버튼의 위치 변경 와이드한..
WEB개발이야기 2020. 6. 30. 0
javascript에서 동적으로 변수를 만들 수 있는 eval()
javascript로 프로그래밍을 하다가 보면 변수를 동적으로 생성하거나 변수와 텍스트를 결합해서 다른 변수를 생성해야 할 경우가 있습니다. 그냥 서로 합친다고 새로이 변수가 생성되는 것이 아니고 eval()라는 함수를 이용해야 합니다. eval() 함수 eval()의 괄호 안에 들어 있는 모든 내용을 스크립트로 인식을 합니다. 사용법 var key = "nara"; eval("var haha" + key + "= 100"); console.log(hahanara) => 100 위의 코드 처럼 문자열처럼 변수를 생성할 수 있습니다. hahanara 변수를 확인해 보면 결과 값은 100이 표시됩니다. 객체의 key값을 변수 형태로 사용하기 또하나는 객체를 사용할때 애를 먹었던 건데.. 객체의 key값을 기..
WEB개발이야기/Vue.js 2020. 6. 12. 0
Vue.js에서 Vue-infinite-loading으로 firebase(firestore) 데이터 불러오기
Vue로 웹페이지나 모바일 페이지를 제작할 때 대부분 데이터베이스를 연동해서 불러와 사용하게 됩니다. 트래픽이 많지 않거나 용량을 많이 사용하지 않을 경우 또는 개발자가 테스트용으로 개발을 할때 Google의 Firebase는 매우 유용한 서비스 입니다. 사용량이 많지 않다면 무료로 사용을 할 수 있으닌까요. 만약 게시판의 리스트 형태로 데이터를 보여 줄 경우 일반적으로 페이지를 나누어서 데이터베이스에서 긁어와서 보여주는 것이 일반적입니다. 하지만 요즘 트랜드나 모바일에서는 옛날처럼 페이지를 나누는 것이 아니라 리스트의 가장 아래쪽으로 이동 했을 때 다음 페이지를 불러와서 보여주는 식으로 많이 구현을 하고 있습니다. 그런 것을 보통 infinite-scroll 또는 infinite-loading 이라고 ..
WEB개발이야기/Vue.js 2020. 6. 11. 0
vue.js가 객체변수의 변화 감지를 못해 깊은 빡침이 있을 때 해결방법
근래의 javascript가 좋아진 이유 중 하나는 ajax와 더불어 실시간 데이터의 변화를 감지해서 바로바로 적용해 주는 것 입니다. vue.js도 그중에 하나라고 할 수 있습니다. vue.js는 data로 선언된 객체변수를 computed나 getters를 사용해서 조건에 부합하는 데이터를 실시간으로 filtering해서 가져올 수 있습니다. 예를들면 아래와 같습니다. data() { return { todos: [ { id: 1, name: '...', age: '...', sex: '...', done: false}, { id: 2, name: '...', age: '...', sex: '...', done: true} { id: 3, name: '...', age: '...', sex: '.....
WEB개발이야기/Git 2020. 5. 15. 0
오픈소스인 Gitlab의 가격정책(라이선스 정책)
Gitlab은 설치형 GIt서버로 상당히 유명하고 유용한 도구입니다. Gitlab의 CE(Community Edition)는 오픈소스로 무료로 사용할 수 있지만 EE(Enterprise Edition)는 유료로 구매를 해야 사용할 수 있습니다. Gitlab홈페이지에 접속해 보면 모든 것이 영어로 되어 있어서 한쿡인이 보면 뭐가 뭔지 이해하기 쉽지 않을 것 같아 간단하고 쉽게 전체적인 설명을 요약을 해 볼까 합니다. Gitlab은 서비스형이야? 아니면 설치형이야? 처음 Gitlab 홈페이지에 접속을 하면 프로그램 Download 버튼부터 찾는데, Download 버튼을 클릭해서 들어가 보면 이걸 다운로드 하라는 건지 회원가입을 하라는 건지 헛갈리게 되어 있습니다. 다운로드 화면에 접속을 하면 정말 우리를 ..
WEB개발이야기/Git 2020. 5. 11. 0
gitlab DATA 저장폴더(git-data)를 다른 위치로 변경하는 방법
Gitlab 서버를 설치하고 바로 DATA저장소 위치를 적절한 곳으로 설정한다면 아주 간단한 문제입니다. 그냥 gitlab.rb에서 git_data_dirs({"default" => { "path" => "/var/opt/gitlab/git-data" }})의 위치만 변경해 주면 되기 때문입니다. 하지만… 큰 문제는 미처 DATA저장소 위치를 변경하지 않고 운영을 하던 중 늦게 실수를 깨닫게 된 경우 입니다. "지금까지 열심히 쌓여있는 DATA는 어떻게 되는거지!!! 아!! 어떡하지.. 어떡하지…" 이런 탄식이 절로 나옵니다. 제가 그랬으닌까요 ㅠㅠ 저는 불행히도 에러를 만나고서야 무언가 잘못되었다는 것을 알게 되었습니다. 클라우드를 사용하고 있었는데 시스템이 설치되어 있는 작은 용량의 드라이브에 많은 ..
WEB개발이야기/Git 2020. 5. 7. 0
gitlab에서 push오류가 발생할 때 해결하는 방법
gitlab을 사용하다가 회원의 권한을 Developer로 설정했음에도 불구하고 push할 때 git did not exit cleanly (exit code 1)와 같은 오류 메시지를 내뱉을 때가 있습니다. 순간 당황하겠지만 아래의 내용을 보시면 한줄기 빛과 같은 희망을 만날 수 있습니다. gitlab의 권한체계를 보면 Guest, Reporter, Developer, Maintainer, Owner* 의 5개 권한을 운영하고 있고 push는 보통 Developer, Maintainer, Owner*의 권한에 대해서 가능합니다. 그러나 프로젝트에 따라 Developer도 안되는 경우가 있는데 아래의 설정으로 해결을 할 수 있습니다. 프로젝트 Push 설정 설정 > 저장소를 선택합니다. Protected..
WEB개발이야기/Vue.js 2020. 4. 8. 6
Vue에서 moment사용하기 (feat. vue-moment)
자바스크립트에서 거의 표준으로 사용되고 있는 날짜관련 라이브러리인 Moment를 Vue에서 쉽게 사용할 수 있는 라이브러리가 있습니다. vue-moment는 Vue에서 필터 형식으로 Moment를 사용할 수 있게 해 줍니다. 설치하기 설치는 아래와 같이 패키지 형태로 설치합니다. npm 패키지로 설치할 경우는 아래의 명령어로 설치하세요. $ npm install vue-moment --save 또는 yarn 패키지로 설치할 경우는 아래의 명령어로 설치하시면 됩니다. $ yarn add vue-moment 사용하기 사용하는 법은 간단합니다. 일단 해당 라이브러리를 불러와서 선언해 준다음 HTML에서 필터형태로 사용하면 됩니다. 먼저 아래와 같이 로딩 후 선언을 해 줍니다. import Vue from 'v..
WEB개발이야기/VScode 2020. 4. 1. 23
[Extensions] VScode에서 이미지 캡쳐를 슬기롭게 사용하는 방법(feat. Paste Image)
저는 블로그 글을 VScode에서 마크다운(Markdown)을 이용하여 작성을 합니다. 그때 자주 사용하는 것이 스크린캡쳐 받은 이미지를 저장하고 링크를 거는 것입니다. 크게 어려운 작업은 아니지만 이미지가 많을 경우 여간 성가신 것이 아닙니다. 이런 불편함이 나뿐만이 아닌지 누군가 익스텐션으로 개발을 해 놓은 것이 있어 소개합니다. 이름에서도 알수 있듯이 클립보드에 저장되어 있는 이미지를 붙혀넣기 하는 것이 주요 기능입니다. 현재 46,438건의 다운로드가있었고 24명이 5점의 평점을 주었습니다. 익스텐션이 훌륭하다는 뜻입니다. ^^ Paste Image 기본 사용법 설치하는 방법은 간단하기 때문에 생략합니다. 1. 내PC에서 이미지 복사하기 먼저 내PC의 이미지나 웹브라우저의 이미지를 Ctrl+C나 ..
WEB개발이야기/웹퍼블리싱 2020. 3. 27. 1
Font Awesome 5를 슬기롭게 사용하는 방법
웹사이트를 개발하다 보면 아이콘이 필요한 경우가 많습니다. 인터넷을 찾아보면 다양한 방법과 형식으로 무료로 제공해 주는 웹사이트가 많이 있는데요. 그중에서도 가장 많이 사용되는 폰트어썸(Font Awesome)이라는 웹사이트가 있습니다. 예전에는 사용하는 방법에 대해서 이해하기도 쉽고 사용하기도 쉬웠는데 Font Awesome 5로 업데이트되면서 사용법이 상당히 복잡해 졌습니다. 그러면.. 복잡해져서 나빠진 것이냐? 하면 그렇지 않습니다. 잘 알고 슬기롭게 사용하면 이전 버전보다 더 좋아지고 더 많은 플랫폼을 지원하고 있다는 것을 알게 됩니다. 사실 폰트어썸에서도 먹고 살아야 하니 유료화 정책을 적용하기 위해 복잡해진 것도 없잖아 있습니다. ^^; 웹사이트에 폰트어썸(Font Awesome 5) 적용하기..
WEB개발이야기/Vue.js 2020. 3. 24. 0
Vue.js와 NativeScript로 앱개발을 하기위한 환경 세팅하는 방법
Vue.js로 스마트폰 앱을 개발할 때 가장 많이 사용하는 것이 아마도 네이티브스크립트(NativeScript)일 것입니다. 그냥 웹을 개발하는 것과 달리 모바일 앱을 개발할 때는 JDK나 SDK등 여러가지를 설치하고 세팅하는 것이 헷갈리고 번거로울 수 있는데 그 환경 세팅을 하는 것에 대해서 포스팅하려고 합니다. 사전설치 장비는 Windows 10과 갤럭시 S10을 기준으로 설명하도록 하겠습니다. Chocolatey 설치 Chocolatey는 Windows용 패키지 관리툴이라고 보시면 됩니다. 리눅스나 맥OS는 패키지 관리툴을 많이 사용하지만 Windows는 패키지 관리툴이 있는지도 잘 모르는 사람들이 많습니다. 쉽게 설명하면 보통 윈도우에 프로그램을 설치하려면 웹사이트에 접속해서 설치프로그램을 다운로..
WEB개발이야기/VScode 2020. 3. 17. 0
[Extensions] VScode에서 코멘트를 슬기롭게 사용하는 방법 (feat. Better Comments)
VScode를 사용할 때 유용한 익스텐션(Extensions)을 소개해 드리겠습니다. 이번에 소개할 익스텐션은 Better Comments입니다. 현재 72명에게 별5개 추천을 받고 있으니 어느정도 입증이 됬다고 볼 수 있겠네요. Better Comments 소개 코딩을 하다보면 반드시 주석을 달게 되는데요. Better Comments는 코드의 주석(코멘트)를 좀더 직관적으로 볼 수 있게 특정 특수문자에 대해 색상으로 설명을 볼 수 있게 해주는 기능을 합니다. 위의 이미지에서 주석 부분만 참고하면 됩니다. 주석표시 뒤에 특수문자에 따라 그 줄의 색상이 구분되어 집니다. * 문자 : 초록색으로 표시 - 일반 정보 ! 문자 : 빨간색으로 표시 - 중요한 주의사항 ? 문자 : 파란색으로 표시 - 궁금한 사항..
WEB개발이야기/Git 2020. 3. 12. 0
Git Flow 개념 이해하기
Git으로 협업을 하는 것이 매우 좋다라고는 알고 있으나 실제로 서로 다른 그 사람들이 어떻게 각자 작성한 코드를 합치고 배포하는지가 궁금해 졌습니다. Git-flow 이해하기 Git-flow는 Git이 새롭게 활성화되기 시작하는 10년전 쯤에 Vincent Driessen이라는 사람의 블로그 글에 의해 널리 퍼지기 시작했고 현재는 Git으로 개발할 때 거의 표준과 같이 사용되는 방법론입니다. 말하자면 Git-flow는 기능이 아니고 서로간의 약속인 방법론이라는 점입니다. Vincent Driessen도 언급했듯이 Git-flow가 완벽한 방법론은 아니고 각자 개발 환경에 따라 수정하고 변형해서 사용하라고 언급했습니다. Git-flow는 총 5가지의 브랜치를 사용해서 운영을 합니다. master : 기준..
WEB개발이야기/Git 2020. 3. 11. 0
그림으로 보는 Git의 개념 이해하기
Git은 Svn 이후로 현재 가장 많이 사용되어지는 형상관리 툴입니다. 위키백과를 보면 아래와 같이 정의를 하고 있습니다. 깃(Git /ɡɪt/)은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템이다. 소프트웨어 개발에서 소스 코드 관리에 주로 사용되지만 어떠한 집합의 파일의 변경사항을 지속적으로 추적하기 위해 사용될 수 있다. 기하학적 불변 이론을 바탕으로 설계됐고, 분산 버전 관리 시스템으로서 빠른 수행 속도에 중점을 두고 있는 것이 특징이며 데이터 무결성, 분산, 비선형 워크플로를 지원한다. 위키백과 참조 처음 Git을 접할 때 그 개념을 이해하는데 어려움이 많습니다. 그래서 간단하게 기초적인 이해를 그림으로 설명해 볼까 합니다...
WEB개발이야기/Git 2020. 3. 10. 148
Git GUI 소스트리(SourceTree) 설치방법과 사용방법
멋찐 개발자 같은 경우 검정 화면에 하얀색 글씨로 타이핑을 치며 Git 명령어를 실행시킬텐데요. 그게 멋지긴 하지만 편한 형태는 아닙니다. Git을 좀더 편하게 사용하기 위해서는 Git GUI(Graphic User Interface)를 사용하는 것입니다. Git GUI 중 대표적인 툴이 바로 소스트리(SourceTree) 입니다. SourceTree 설치하기 먼저 소스트리(SourceTree) 홈페이지에 접속합니다. 소스트리(SourceTree) 홈페이지 바로가기 홈페이지에 접속을 하면 다운로드를 받을 수 있는 버튼이 보입니다. 소스트리는 윈도우즈와 Mac OS를 지원하고 있으므로 원하는 시스템의 파일을 다운로드 받으면 됩니다. 다운받은 설치파일을 실행시킵니다. 설치는 아무나 할 수 있는 것은 아니고 ..
IT이야기/시놀로지 2020. 3. 9. 0
시놀로지 나스 DS918+ NVMe SSD 캐쉬 업그레이드하는 방법
노트북의 SSD를 업그레이드하고 나서 남은 128GB NVMe SSD를 DS918+의 캐쉬 SSD로 사용해 보려고 합니다. 설치는 상당히 쉽습니다. SSD 캐시 장착 준비하기 일단 기존의 DSM의 저장소관리자 화면을 보겠습니다. HDD/SDD 메뉴를 보면 저는 HDD가 3개 밖에 없어서 3개가 표시되어 있습니다. SSD 캐시 메뉴를 보게 되면 사용할 SSD가 없다고 표시 되고 있습니다. 먼저 SSD 캐시 어드바이저를 보면 현재 필요한 권장크기의 캐시가 얼마나 되는지 알려줍니다. 저는 대략 54.5GB가 필요하다고 하네요.128GB를 장착하려고하니 용량은 충분하지 않을까 합니다. 장착하기 전에 먼저 나스를 종료해야 합니다. 종료는 전원버튼을 3초이상 눌러도 되지만 DSM화면에서도 종료를 할 수 있습니다. ..
IT이야기/컴퓨터 2020. 3. 6. 0
Windows 10 설치 USB를 만드는 방법
예전에는 Windows를 CD로 구매하거나, 다운로드받은 파일을 CD로 부팅이 되게 제작해서 설치하고는 했는데, 이제는 USB메모리만 있으면 쉽게 설치USB를 만들 수 있게 되었습니다. 뭐.. 사실 좀 오래전에 구현이 되었던 기능이긴 합니다. ^^ 제작하는 순서는 아래와 같습니다. USB메모리 준비 Microsoft에서 Windows10 설치 프로그램 다운로드 Windows10 설치 USB 만들기 1. USB메모리 준비 먼저 USB메모리를 준비해야 합니다. 메모리는 최소한 8BG이상의 용량이어야 합니다. 그 정도면 2~3천원이면 구매할 수있습니다. 택배비가 더 많이 들기 때문에 가까운 다이소나 편의점, 대형마트 같은 곳에서 구입하는것이 더 저렴합니다. 부팅이 되는 USB가 만들어지기 때문에 USB가 포멧..
IT이야기/컴퓨터 2020. 3. 5. 0
내가 방문한 비밀스러운 기록을 제거하는 방법 (feat. 윈도우10)
나를 잘 알고 내가 원하는 것을 미리 제공해 준다는 것은 매우 편리한 기능임에는 분명합니다. 하지만 그 이 면에는 내 정보를 그만큼 많이 가져가서 분석 했다라고 할 수도 있습니다. 그리고 불안한건 이 걸 어디에 어떻게 사용하는지는 우리가 모른다는데 있습니다. 이런한 편리한 기능이 때로는 우리를 압박하는 불필요한 기능이 될 수 있습니다. 내가 컴퓨터로 사용한 폴더와 파일이 무엇인지 다른 사람이 다 알게된다는 것은 너무나도 싫을 수 있습니다. 누군가가 탐색기를 열었는데 내가 방문했던 기록들이 쫘악~ 보여진다면 마치 발가벗겨진 채로 무대 위에 서있는 느낌이 들 수도 있습니다. 자주 사용하는 폴더 최근에 사용한 파일 그래서 이번에는 이 쓸데없는 기능을 꺼볼까 합니다. 최근에 사용한 폴더와 파일 숨기기 먼저 최근..
WEB개발이야기 2020. 3. 5. 1
코딩을 위한 최적의 폰트 Naver D2Coding Font
한국의 개발자인 경우 코딩을 할때 한번쯤 고민했던 부분이 있을 것입니다. 오로지 영문으로만 코딩을 하는 경우 Consolas, Courier New 같은 영문 코딩폰트를 사용하면 되지만 한글이 섞여 버리면 글자의 미세한 차이 때문에 코딩하기가 여간 찜찜한 것이 아닙니다. 자간도 밀리고 폰트도 이쁘지 않고 크기도 안맞고.. 기존에는 Hack이라는 오픈소스 폰트를 사용했었는데, 지금은 아무래도 한글에 대해서 잘 알고 개발한 네이버의 개발 전용 폰트, D2Coding Font을 사용하고 있습니다. 한글 코딩 폰트라고 하면 일단 특수문자, 숫자, 영문, 국문에 대해서 가독성이 좋아야 하고 글자의 폭도 동일하게 고정되어 있어야 합니다. Naver D2 coding font는 한글, 영문자 및 확장자 332자에 대..
WEB개발이야기/Git 2020. 3. 4. 0
Git으로 프로젝트 개발 할 때 작업 순서
Git으로 형상관리를 하며 작업을 할 때 여러가지 방법과 기능이 있지만 보편적으로 사용하는 순서에 대해서 포스팅하겠습니다. Git에 관한 기타 다른 정보는 해당 카테고리를 찾아 보시면 됩니다. Git 카테고리 바로가기 순서 순서는 사람마다 조금씩 다르긴 하지만 제가 주로 사용하는 방법은 아래와 같습니다. 한번만 하는 명령어 GitLab(또는 Github) 사이트에 프로젝트 저장소 만들기 Git 사용 선언 또는 원격 저장소에서 Clone 해오기 ( git init 또는 git clone ) 내 로컬PC와 원격 저장소 간 링크 연결하기 ( git remote ) 반복적으로 하는 명령어 코딩 작업하기 코딩 파일 중 내가 관리하고 싶은 파일로 선정하기 ( git add ) 기능 별 선정한 파일을 한 묶음으로 만..
UXUI이야기 2020. 3. 4. 0
이젠 택배물품 분류도 인공지능(AI)이 합니다.(Covariant Brain)
현재 우리나라에서 일자리 때문에 한창 이슈인것이 타다, 카카오택시, 우버 등과 같은 4차 산업혁명에 대한 갈망과 기존에 자리를 잡고있던 택시업계의 충돌 일 텐데요. 이것이 이제는 택배업계에 까지 밀려오고 있습니다. 예전에 이세돌과 바둑으로 싸워서 이슈가 되었던 알파고같은 인공지능(AI)이 이제는 택배 업계에까지 들어섰다는 소식입니다. 미국 버클리대학(UC Berkeley)에서 출발한 인공지능 스타트업 회사인 Covariant Brain이란 회사가 AI의 강화학습 알고리즘을 이용하여 택배를 잘 분류할 수 있는 로봇을 내 놓았기 때문입니다. Covariant Brain과 Knapp이 합작하여 베를린에 인공지능을 이용하여 택배를 분류하는 물류창고를 구축했다고 합니다. 여기서 우리가 주목해야 할 부분은 바로 인..
IT이야기/Office프로그램 2020. 3. 3. 0
[파워포인트] 글꼴 사용에 관한 모든것
PPT 디자인에 있어 글꼴(폰트)은 상당히 중요한 요소에 속합니다. PPT작업을 멋지게 하고 작업한 결과물을 다른 사람에게 전송을 하면 다른 사람이 디자인을 보고 욕을 할 경우가 있습니다. 그중에 가장 큰 이유는 글꼴(폰트)일 이유가 큽니다. 그래서 PPT의 글꼴(폰트) 사용에 관해서 포스팅을 해보려고 합니다. PPT파일에 글꼴(폰트) 포함하기 PPT도 다양한 폰트를 사용할 수 있습니다. 하지만 나만의 특별한 폰트를 사용했을 경우 이 PPT문서를 다른사람(다른 컴퓨터)에게 보냈을 때 그 사람의 컴퓨터에 똑같은 글꼴이 없다면 임의의 폰트가 적용되어 디자인이 깨져 보이는 경우가 있습니다. 이럴경우 몇가지 해결책이 있는데, 일단 맑은 고딕과 같은 누구나 다 사용하는 범용적인 글꼴을 사용하거나 아니면 사용한 글..
IT이야기/Office프로그램 2020. 3. 3. 0
[파워포인트] 서식 복사하고 붙혀넣기
파워포인트를 사용하면서 요긴하면서도 잘 모르는 사람은 쓰지 못하는 기능이 있습니다. 대부분 Ctrl + C, Ctrl + V는 많이 알고 사용하지만, Ctrl + Shift + C, Ctrl + Shift + V 는 잘 모르는 사람이 많습니다. 서식 복사하기 PPT 전문가라면 꼭 써야할 기능!! 서식 복사하기 기능입니다. 내용을 복사해서 붙혀 넣는 것이 아니라 서식을 복사해서 붙혀넣기 하는 단축키 입니다. 먼저 원하는 서식이 있는 텍스트를 선택한 다음 Ctrl + Shift + C를 클릭하여 클립보드에 서식을 복사 합니다. 이제 붙혀넣어야 할 문서를 선택한 다음 Ctrl + Shift + V를 클릭하여 서식을 붙혀넣습니다. 이런식으로 아주쉽게 서식을 복사 할 수 있습니다. 움짤 움짤 ~~
IT이야기/Google프로그램 2020. 2. 29. 0
[Gmail] 원치않는 발송자의 메일 스팸처리하고 모두 지우기
저는 주로 지메일(Gmail)을 사용합니다. 사용은 하지만 적극적으로 관리를 하지 않는 덕에 아주~ 지메일이 난장판이 되어 있습니다. 그래서 이참에 한번 정리를 해보려고 합니다. 첫 단계는 사용하지 않는 발신자의 메일을 스팸처리하고 지금까지 온 모든 이메일을 삭제하는 것입니다. 원치않는 사용자에게 온 메일을 스팸처리하기 당연히 Gmail에 로그인은 해야 겠지요.. 그리고 나머지 순서는 아래와 같습니다. 원치않는 발신자의 메일 상세히 보기 설정메뉴에서 스팸처리하기 원치않는 발신자의 메일 상세히 보기 저는 영어가 정말 싫습니다. 그런데 예전에 한번 이것을 극복해 보고자 해커스영어 이메일 발송을 신청한 적이 있었는데, 정말~ 성실하게도 매일 매일 계속 날라오고 있습니다. 몇년째…. 그래서 일단 해커스를 스팸처..
WEB개발이야기/웹퍼블리싱 2020. 2. 29. 5
DOM의 변화를 감시하는 javascript MutationObserver
Tistory같은 경우 스킨을 만들때 내가 모든 Event를 통제 할 수 없기 때문에 DOM의 변화를 감지하는 javascript 장치가 필요합니다. 옛날에는 DOMSubtreeModified 를 많이 사용했었지만 DOMSubtreeModified을 잘못 사용하면 무한루프에 빠지기 떄문에 성능을 저해해서 DOM 이벤트 표준에서 지원이 중단되었습니다. 그래서 대체로 사용할 수 있는 것이 MutationObserver입니다. MutationObserver 는 DOM의 변화를 감시합니다. 기본 사용법 가장 기본적인 사용법은 아래와 같습니다. 상세한 설정은 config를 통해 할 수 있습니다. // 1. 대상 선정 var target = document.getElementById('some-id'); // 2...
