Category 개발도구
Git GUI 클라이언트 중에 근래 사용하는 것은 git fork클라이언트입니다. 인터페이스가 제일 깔끔한 것은 Git Kraken이지만 멀티 계정 및 비공개 repository 등 모든 항목을 이용하려면 려면 결제를 해야 사용할 수 있습니다. github desktop은 github에 한정되어 있으며 여러 계정을 사용할 수 없습니다…. Continue Reading →
개요 2019년 VS Code 설치 및 확장 프로그램 추천을 올린적이 있습니다.아래 이전에 추가한 확장 프로그램에 이어 확장 프로그램을 추가 공유합니다. 확장 프로그램 추천 Live Server 쉽게 서버를 띄울 수 있었고 웹 브라우저에서 바로 확인 가능하며, 실시간으로 반영되어 편리한 확장 프로그램입니다…. Continue Reading →
구문이 계속 변경이 될 수 있기 때문에 플로그인을 업데이트를 해줘야 한다. 일괄 업데이트를 해야하는데 이것이 생각보다 플로그인 방법은 생각보다 간단하다. 라이브러리 설치 npm-check-updates 설치한다. npm install -g npm-check-updates 버전 체크 npm-check-updates -u 위의 명령어로 package.json에 있는 dependency 정보를 읽어 현재… Continue Reading →
안녕하세요.이번 글에는 Git 클라이언트 중에 소개가 안된 Fork 클라이언트에 대해서 짧게 소개를 하려고합니다. Git 대표 클라이언트를 보시려면 아래 링크로 가시면 많이 사용하는 클라이언트들을 보실 수 있습니다. 제가 오늘 소개할 클라이언트는 git-fork입니다. https://git-fork.com/Mac과 Window버전을 다운 받을 수 있으며 아직까지 리눅스 버전은… Continue Reading →
VSCODE를 실행하면 저같은 경우는 bitbucket 자격증명하라고 계속 팝업창이 뜹니다.처음에 한두번은 그냥 끄거나 로그인을 했는데요… 실행할 때마다 뜨니깐 은근 짜증이 나고 신경이 쓰이더군요. 열심히 구글링한 결과 알아냈습니다. ㅎㅎ 기본설정이 들어갑니다.검색에 autofetch라고 검색하면 위의 이미지처럼 나옵니다.체크해제를 하면 더이상 팝업창이 안뜹니다.참 쉽죠?ㅋㅋ 즐거운… Continue Reading →
저는 그동안 소스트리를 사용하면서 업데이트를 안하고 있다가 3.1.2버전으로 업데이트를 하게 되었습니다. 제가 업데이트 전과 후의 내역을 짧게 소개하겠습니다. 로컬저장소의 왼쪽 사이트 메뉴 UI가 변경, 다른 로컬 저장소 바로 이동 가능 뉴탭 로컬 저장소 폴더 UI가 변경. 하단으로 이동 되었음. 계정을… Continue Reading →
중요한 프로젝트를 즐겨찾기 하여 프로젝트간에 쉽게 전환이 가능하게 해주는 확장 프로그램입니다. 기능 어떤 프로젝트라도 즐겨찾기로 만들 수 있습니다. VSCode, Git, Mercurial or SVN 저장소 자동 검색 같은 창이나 새 창으로 프로젝트 열기 가능 현재 프로젝트를 식별하는 상태바 표시 전용 사이드바… Continue Reading →
Visual Studio Code를 사용해보다. 에 처음 글을 올린 후 사용을 안하다가 약 2년이 흐른 후 다시 사용을 해보려고 합니다. 기존에보다 기능이 업데이트 되어있다고 들어서 사용해보기로 했습니다. 1. VS Code 설치 [contentcards url=”https://code.visualstudio.com/” target=”_blank”] 위의 사이트에 접속해서 본인에 맞는 OS맞게 다운로드… Continue Reading →
요즘 형성관리를 많이 하면서 git의 사용자가 많이 늘어나고 있습니다. 그중에 대표적인 github, bitbucket 같은 git을 좀 더 쉽게 사용할 수 있는 응용프로그램들이 출시 되면서 git 사용자가 더 늘어난 것 같습니다. 아래 순서는 제가 임의로 작성한 것이며, 사용률에 대한 것과는 상관없습니다…. Continue Reading →
프론트단에서 npm, gulp, grunt, yarn 등 사용을 하려면 터미널을 사용해야하는데 Atom(아톰) 에디터에서도 터미널을 사용할 수 있다. 기본적으로 terminal-plus 패키지를 많이 사용했지만 호환이 제대로 안되서 그런건지 몰라도 platformio-ide-terminal를 많이 사용하여 이것을 다운받아서 사용했다. 설치 setting -> install에서 platformio-ide-terminal를 검색하여 설치를 하면된다…. Continue Reading →
UI 개발을 하다보면 실시간으로 확인을 한 것이 필요할때가 있고 또 소스를 일부 공유 해야할 때가 있습니다. 아직 비공개이거나 일부 내용만 공개 하고 싶을 때 사용할 수 있는 온라인에서 코드 작성할 수 있는 에디터들을 몇가지 소개를 하려고 합니다. UI Development Online… Continue Reading →
F12키나 Ctrl+Shift+i을 누르면 개발자 도구가 나오는 것은 이쪽에서 일하는 사람은 다 알 것이다. 개발자 도구는 웹페이지의 구성요소를 확인할 수 있고, 바로 코드를 삽입하거나 수정해서 변화된 페이지를 바로 볼 수 있다. UI개발자라면 이 페이지에서는 CSS의 칼라값이 몇 개가 사용되고 몇개의 이미지가… Continue Reading →
사이드바(tree view)에 파일 자동 선택하기가 생소할 수 있지만 설명을 들으면 ‘아 그거~’ 할 수 있겠다. 아톰에서 화면 탭을 선택했을 경우 트리뷰에서도 자동적으로 선택해주는 것을 말한다. ‘기존에 되었던 것 아니야?’라고 할 수 있겠지만 사용자가 찾아서 선택하지 않으면 되지 않았던 부분이다. 처음부터… Continue Reading →
BLISK란 무엇인가? Blisk는 모든 기기에서 원활히 잘 작동하고 웹사이트 개발과 테스트를 위한 브라우저이다. Blisk의 특징은 공식사이트 메인에서도 안내하고 있는데 다음과 같다. 스마트 폰과 태블릿을 완전히 동일하게 작동할 수 있다. 데스크탑과 모바일의 URL과 스크롤이 동기화 된다. 파일 변경시 자동으로 페이지를 새로고침한다…. Continue Reading →
아톰을 실행할 때마다 그리고 새 창을 띄울 때 마다 Welcome Guide 창이 열려서 번거로워서 구글링을 해보았다. ctrl+,를 Settings 화면에 들어가는 방법 및 File » Settings..선택해서 들어갈 수 있다. Packages에서 Welcome을 검색해서 아래의 이미지 처럼 나올 것이다. 1. 비활성화(disabled)를 한다. 2…. Continue Reading →
크롬 브라우저를 사용하다보면 앱, 테마, 앱, 게임등을 받을 수 있다. 이번에 테마를 변경함으로써 다양한 테마들이 존재하여 공유하고자 이렇게 글을 남긴다. 필자가 적용한 테마는 아래의 Deadpool이다. 필자가 같은 테마를 받으려면 다운받기받기를 누르면 된다. 그러면 크롬의 테마 링크로 이동 될것이다. 이 테마외에… Continue Reading →
서브라임 텍스트에서는 기본적으로 레이아웃을 나눌 수 있었다. 단축키는 이미지에 나와있는거처럼 가능하다. 이렇게 하려면 아톰은 패키지를 이용해야 하는거 같아서 구글링을 검색을 해봤다. 아톰에서는 Pane Layout Package를 설치하면 비슷하게 사용가능하다.
서브라임 텍스트 테마 중에 Seti_UI 테마를 추천하려고 한다. 서브라임 텍스트를 쓰면 대부분 Theme – Soda를 많이 사용하고 있었는데 필자도 Soda를 사용하다가 최근에 Seti_UI로 변경하였다. 바꾸게 된 계기는 Soda를 계속 썼더니 질린것도 있고 폴더구조에서 Seti는 아이콘도 제공되서 굳이 자세히 보고 있지… Continue Reading →
Sublime Text에서는 기본 기능이였던 감싸는 태그가 아톰에서는 패키지를 설치를 해야한다. Sublime Text에서 단축키는 Ctrl+Shift+Enter이다. Atom wrap in tag 설치 ※ 필자는 윈도우 환경이라 항상 윈도우만 설명합니다. Ctrl+, (comma)를 눌러 세팅(Settings)메뉴가 나온다. 아래 이미지처럼 메뉴를 눌러서 들어가도 된다. 기본 단축키는 alt+shift+w이다…. Continue Reading →
Snippets은 정기적으로 사용되는 코드 덩어리로 프로그램 파일에 빠르게 삽입할 수 있다. 유용하고 Atom 텍스트 편집기의 핵심 기능이다. 아톰 패키지와 언어 문법은 종종 미리 정의된 snippets함께 정의 된다. img입력 한 후 Enter을 치면 다음 코드가 나타난다. <img src=”” alt=”” /> 커서는… Continue Reading →
아톰 에디터는 커서 좌/우 키는 있지만 상/하 이동 키가 없다. 이것은 Sublime Text와 동일하다. Sublime Text에서는 Horizontal Scroll를 설치를 하여 사용했었다. Sublime Text에서는 바로 키맵을 바꿀 수가 있었다. 서브라임 텍스트에서는 아래와 같이 설정해서 썼었다. [ { “keys”: [“alt+down”], “command”: “scroll_width”,… Continue Reading →
Atom(아톰)을 사용하기전에는 Source Tree App를 이용해서 형성관리를 했었다. Sublime Text를 사용할 때에는 플러그인들이 있었지만 딱히 만족한 것들이 없어서 소스트리를 이용했던 것이다. Atom(아톰)에서 git plus를 이용하면 소스트리 사용을 안할 수 있다. Git plus 소스트리를 이용 안하고 git 주소 clone을 하고 싶다면… Continue Reading →
에디터를 살표보면 가운데든 구석이든… 위에서 아래까지 쭉 그어진 라인이 보인다. 코딩을 할 때마다 거슬려서 구글링을 해보았다. 메뉴에서 File -> Stylesheet를 선택하면 된다. 선택해서 styles.less 화면이 나오면 아래 코드를 작성하면 된다. // 가운데 줄 제거 atom-text-editor::shadow { .wrap-guide { visibility:hidden; }… Continue Reading →
아톰을 처음 사용하다보면은 엔터를 쳤을 때 해당 {}안으로 들어가야하는데 1컬럼으로 갈 것이다. 그러면 탭키로 다시 안쪽으로 와야하는데 이것이 많이 불편하다. 방법은 다음과 같다. Files -> Settings단축키는 ctrl + , 세팅화면으로 들어간다. Settings화면 왼쪽에 core, editor가 있을껀데 editor 탭을 선택 후… Continue Reading →
Atom의 소개 및 설치방법 그리고 패키지 안내는 이전 포스트에서 다뤘다. 아톰의 다른 패키지를 보고 싶다면 아래 링크로 가면 된다. 아톰 유용한 패키지 리스트 보러가기 이 글에서는 sync-setting 패키지에서만 다룰 것이다. 설치 요약: 단축키 Ctrl+,를 눌러서 Settings에 들어간다. Install 탭을 눌러서… Continue Reading →
소개하기 Github에서 공개한 텍스트 편집기이다. 무료이면서 개인적으로 필요한 기능들에 대해 추가적으로 제작도 가능하며, 이를 패키지로 배포하여 서로 공유할 수 있다. 아톰에서 만든 짧은 소개 영상은 아래에서 볼 수 있다. (자막 有) 장점 오픈소스로 관리, 100% 무료 Git 연동이 기본으로 들어있다…. Continue Reading →
메뉴 Preferences => Browse Packages… 탐색기를 연다. 폴더에 \CSS\css_completions.py 파일을 연다. ※ 혹시나 이 파일을 없을 경우 일전에 글을 올린 PackageResourceViewer 플로그인 설치 후에 아래 그림처럼 커맨드창을 열어 플로그인을 실행하면 된다. l.append((prop, prop + “: “)) 이 소스에서 “: “사이의 공백을… Continue Reading →
PackageResourceViewer를 사용해보자. Sublime Text 2 및 Sublime Text 3에서 패키지 리소스를 보고 편집하는 것을 돕는 플러그인이다. 커맨드창CTRL+SHIFT+P 에서 pci타이핑 후 설치하면 된다. 설치 후에 커맨드 창에서 위의 그림처럼 명령어를 치면 PackageResourceViewer를 이용할 수 있다.
소개 서브라임 텍스트를 몇년째 사용하고 있는지 모른다. 그러나 최근에 무료배포 에디터중 1위인 Visual Studio Code를 접하게 되었다. 필자가 늦게 접한게 있긴 했다 ^^;; 비주얼 스튜디오 패밀리이며 줄여서 VSCode라고도 한다. 윈도우, 리눅스, 맥에서도 사용할 수 있다는 점이 놀라운점인듯하다 MS사는 보통 자기네… Continue Reading →
<header>, <nav>, <footer>같은 공통적으로 사용 태그나 내용을 .html파일마다 다 넣지 않아도 사용하려는(예: header.html) 한 파일을 만들어 모든 페이지에 호출하여 사용할 수 있다. gulp 플러그인 중에 gulp-html-tag-include를 사용해보려고 한다. 설치하기 npm install –save-dev gulp-html-tag-include gulpfile.js에 추가해보자. var gulp = require(‘gulp’), include… Continue Reading →