개발/유틸리티

온라인 코드 에디터를 활용해서 소스코드를 공유하는 방법 - CodeSandbox

블로그를 돌아다니다 보면 온라인 코드 에디터를 활용해서 소스코드를 공유하는 모습을 종종 보신 적이 있을 것입니다. 사람들에게 정말 많이 알려진 JSFiddle, CodePen이 있지만, 오늘 제가 소개해드릴 온라인 코드 에디터는 위에 두 서비스는 아니고 제가 요즘 애용하고 있는 서비스인 CodeSandbox입니다! CodeSandbox에 대해서 간단히 알아보고 사용법까지 알아보겠습니다. 코드샌드박스(CodeSandbox) ? CodeSandbox는 빠른 웹 개발을 위한 프로토타이핑 툴입니다. 웹 개발에서 사용되는 정말 다양한 기술 스택들을 제공하고 있습니다. 프론트엔드 사이드에서 굉장히 많이 사용되고 있는 React, Vue도 CodeSandbox에서 간단하게 구동 가능합니다. 설정에 대한 번거로움 단 ..

개발/유틸리티

맥북에서 화면 녹화한 후 바로 GIF로 다운받는 방법

맥북에서 화면을 녹화할 수 있는 방법은 굉장히 많습니다. 가장 간단한 방법으로는 맥북 자체 기능을 활용하면 됩니다. 맥북에서 shift-command-5 키를 사용하는 방법이 있고 또 다른 방법으로는 QuickTime Player를 사용하여 화면을 녹화할 수도 있습니다. 해당 방법은 맥북 공식 홈페이지에서 굉장히 상세히 설명하고 있으니 참고하시면 됩니다. 해당 기능도 굉장히 강력하고 좋지만, 제가 원했던 기능은 화면을 녹화한 후 동영상으로 export 받는 게 아닌 GIF 형식으로 바로 받는 것이었습니다. 그래서 여러 유틸리티 프로그램을 찾는 와중에 괜찮은 맥북 화면 녹화 어플이 있어서 소개하도록 하겠습니다. (심지어 저는 유료로 구매까지 마쳤습니다. 제 돈주고 삿으니 걱정 마시...) Gifox 제가 ..

개발/유틸리티

vscode(Visual Studio Code) 초간단 설치 및 사용방법 - Mac, Linux, Windows

개발을 하기 위해서는 에디터를 선택하는 것은 필수사항입니다. 저도 여러 에디터(Sublime Text 3, Atom 그리고 지금 vscode)를 개발하면서 사용해봤고, 현재는 VSCode로 정착하게 되었습니다. 그 이유는 무료임에도 불구하고 굉장히 강력한 기능들을 탑재하고 있고, 꾸준히 업데이트가 이뤄지고(제가 생각하기에 가장 중요한 부분) 마지막으로 이 에디터를 관리하고 있는 곳은 무려 마이크로소프트라는 점입니다. 굉장히 메리트가 있죠. (문득 든 생각이 Github가 Atom 에디터를 개발했는데 Github는 마이크로소프트가 인수했으니까 Atom도 마이크로소프트꺼라고 봐야되겠네요....?) 어떻게 관리하는지 궁금하시면 아래 마이크로소프트의 VSCode 깃허브 저장소에서 구경하시면 될 것 같습니다. m..

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(Atom HTML Preview)

아톰에서 코딩을 하면서 실시간으로 HTML 파일의 상태를 확인하게 해주는 패키지입니다.프론트엔드 작업을 할 때 꽤나 유용하게 쓰이는 패키지죠.프론트엔드 개발자라면 꼭 이 패키지를 설치해서 사용해보도록 하세요. 설치법 사용예시 Atom-HTML-Preview 명세 A live preview tool for Atom Editor.Install:apm install atom-html-previewToggle HTML Preview:Press CTRL-SHIFT-H in the editor to open the preview pane.An example with Twitter Bootstrap 3 Package

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(color-picker)

color picker 구글 확장프로그램이나 기타 응용프로그램에서 자주 사용되는 color picker입니다. 꽤나 유용한 소프트웨어죠 !원하는 색상이 있으면, 찍어서 색상코드를 볼 수 있는 소프트웨어입니다. 그 기능을 Atom에서도 사용하게 도와주는 패키지가 있는데요. 바로 아래처럼 색상을 바로 뽑아볼 수 있습니다. Preview 매우 편리한 기능이죠? 설치법 아래는 color picker 명세입니다. A Color Picker for AtomRight click and select Color Picker, or hit CMD-SHIFT-C/CTRL-ALT-C to open it. Currently reads HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and..

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(file-icons)

시각적으로 파일관리를 편리하게 도와주는 file-icons file-icons는 좌측이나 상단에 문서의 유형을 아이콘을 통해 시각적으로 구별하기 쉽게 만들어주는 패키지입니다. 이렇게 상단이나 왼쪽에 있는 네비게이션 부분의 문서들의 아이콘을 만들어줌으로써 시각적으로 어떤 파일인지 구별이 쉽게 만들어줍니다. 전에 소개드린 pigments와 함께 꼭 같이 사용하셨으면 할 패키지입니다. 설치법 아래는 file-icons의 명세입니다. file-icons If you've just updated and your icons are all messed up, please restart Atom before filing an issue.Some of the underlying icon fonts have updated..

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(pigments)

이번에 다룰 패키지는 pigments입니다.프론트엔드 개발을 하면서 가장 소름돋고 필요하다고 생각했던 기능을 atom에서 제공을 해줍니다. 바로 css 파일에서 backgorund나 color에 색상을 적용할 때 코드 안에 컬러가 들어가는 것을 알 수 있습니다. 정말 효율적인 패키지이므로, atom을 사용하시는 분은 꼭 이 패키지를 받아서 사용하시길 바랍니다. 설치법 pigments 명세 A package to display colors in project and files:Pigments will scan source files in your project directories looking for colors and will build a palette with all of them. Then for..

개발/유틸리티

텍스트 에디터 Atom(아톰) 테마(theme) 추천 (atom-material-syntax)

제가 사용하는 Atom Material Syntax입니다.제가 코딩할 때 눈에 확확 들어와서 사용하게 된 syntax입니다. 설치방법 A syntax theme for Atom Material UI. Inspired by Mattia Astorino's SublimeText theme.

개발/유틸리티

텍스트 에디터 Atom(아톰) 테마(theme) 추천(atom-material-ui)

이번 포스팅에서는 제가 사용하는 아톰 테마에 대해서 소개하도록 하겠습니다.저는 Atom Material UI를 사용하고 있습니다. 깔끔한 UI를 좋아하시는 분에게는 정말 최고의 테마라고 생각합니다. 필자의 atom 에디터 UI 설치법 atom setting 탭에 Install에서 쉽게 설치해서 사용하실 수 있습니다. 아래는 Atom Material UI 영문 명세입니다. A dynamic UI theme for Atom that (kinda) follows Google's Material Design Guidelines. Best with Atom Material Syntax.Inspired by Mattia Astorino's SublimeText theme.InstallationFire up a co..

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(Activate Power Mode)

Activate Power Mode아톰 패키지 중에 Activate Power Mode가 있는데, 기존에 조금 심심했던 코딩을 게임처럼 즐겁게 할 수 있게 바꿔주는 패키지입니다.저도 사용하고 있는데, 정말 단조로웠던 코딩을 재밌게할 수 있게 도와주는 패키지더라구요. 이렇게 콤보가 계속되면, 저렇게 화면에 이펙트 효과까지 나오게 됩니다. 아래에 설치 방법과 명세를 추가해 놨습니다. For a list of power mode packages to other editors, check out codeinthedark/awesome-power-mode.InstallWith the atom package manager:apm install activate-power-modeOr Settings ➔ Package..

개발/유틸리티

텍스트 에디터 Atom(아톰)의 설치와 기본설정

Atom 이란? Github에서 만든 에디터로써 다양한 프로그래밍 언어의 편집이 가능하고 웹언어를 사용하여 에디터를 커스터마이징할 수 있는 가장 큰 장점이 있습니다. + 극강의 UI를 가지고 있습니다. Atom의 특징 1. 무료이다. - 많은 사용자들을 보유하고 있는 Sublime Text, Edit Plus 등과는 반대로 무료로 지원한다는 점 2. 플러그인으로 기능을 확장할 수 있다. 3. HTML / CSS /JavaScript와 같은 웹기술들로 구현되었다. - 앞서 말했듯이 웹페이지를 만들듯이 커스터마이징하여 사용할 수 있다는 것이다. 4. Windows / MAC / Linux 모두 설치 가능하다. 5. 마지막으로 이쁘다. ★★★★★ Atom 설치 아톰은 아래 주소를 통하여 다운로드 받을 수 있습..

개발/유틸리티

서브라임 텍스트(Sublime Text) 소개 및 설치

학부시절 웹기반 시스템 수업을 들었던 당시 에디트플러스를 사용하면서 코딩을 했던 기억이납니다, 메모장에 비해서는 정말 편한 방식이라 그때 당시에는 만족했지만, 서브라임 텍스트(sublime text)라는 신세계를 마주하게 되었고, 지금까지 웹 프론트엔드 코딩을 할 때 이 에디터를 사용하고 있습니다. 오늘은 무료버전을 사용해도 제약이 없다시피한 서브라임 텍스트에 대하여 알아봅니다. 서브라임 텍스트(Sublime Text) 소개 서브라임 텍스트는 가볍고 확장성이 좋은 편집기로서, 국내뿐 아니라 외국에서도 많은 개발자들이 사용하고 있는 에디터입니다. 기본적으로 하드코딩을 염두에 두고 개발되었는데 여러가지 플러그인들이 붙으면서 그 편의성이 날로 좋아지고 있는 추세입니다. 기본적으로 제공되는 Monokai 테마도..