728x90
반응형
 포스팅 썸네일 이미지

개발/유틸리티

텍스트 에디터 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..

2016.10.17 게시됨

 포스팅 썸네일 이미지

개발/유틸리티

텍스트 에디터 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..

2016.10.17 게시됨

 포스팅 썸네일 이미지

개발/유틸리티

텍스트 에디터 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..

2016.10.17 게시됨

 포스팅 썸네일 이미지

개발/유틸리티

텍스트 에디터 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..

2016.10.17 게시됨

 포스팅 썸네일 이미지

개발/유틸리티

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

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

2016.10.17 게시됨

 포스팅 썸네일 이미지

개발/유틸리티

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

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

2016.10.17 게시됨

 포스팅 썸네일 이미지

일상/컴퓨터 관련 팁

[PC 최적화] 시스템 최적화 프로그램 고클린 사용법

시스템 최적화 프로그램 고클린 사용법입니다. 고클린이라는 프로그램을 아시나요. 인터넷이 느려지거나, 컴퓨터 속도가 느려질때는 여러가지 문제가 있겠지만 대부분은 파일 문제가 많습니다. 그럴때 가끔 사용하는 고클린을 소개해드리도록 하겠습니다. 우선, 고클린 다운로드 부터 알려드릴께요. http://software.naver.com/software/summary.nhn?softwareId=MFS_100029 네이버에 고클린을 검색하시면, 네이버 자료실에서 받으실 수 있습니다.이 프로그램은 시스템 최적화분야에서 1위를 하고 있으며, 다음으로 많이 사용하는것이 패스트 핑과 네이버 클리너 컴퓨터에 조금 아는 분들은 프로세스 클린이라고 생각할 수있습니다.그만큼 간단하게 클릭 몇번으로 효과를 볼 수 있어서 많은 분들이..

2016.10.17 게시됨

 포스팅 썸네일 이미지

개발/CSS3

[CSS3] emmet을 통해 효율적으로 CSS를 작성해보자

Emmet? Emmet이란 editor plugin으로써 단축키를 이용해 HTML, XML, XSL 코딩 속도를 비약적으로 향상시켜주는 툴입니다. 가령 긴 테이블을 코딩할 때, 손으로 입력하는 건 누가봐도 바보같은 짓이고 줄줄이 복사해 붙이는 것도 별반 나을 게 없어 보입니다. 물론 테이블 만드는 툴을 쓰는 게 가장 일반적인 방법이긴 합니다. 근데 언뜻 봐도 같은 태그의 반복임을 알 수 있는데요. 아래와 같이 자동완성을 해보면 어떨까요? table>tr*5>td*5 table 태그로 열고 그 아래 tr 태그 5개 열고 그 아래 td 태그 5개 열라는 뜻입니다. Emmet은 대부분 코딩을 하는 사람이라면 다른 툴과 달리 기본은 금세 배울 수 있습니다. 기본적으로 Emmet의 약어는 단어의 첫 글자를 따서 ..

2016.10.17 게시됨

 포스팅 썸네일 이미지

개발/Bootstrap

[Bootstrap] 부트스트랩의 그리드 시스템을 쉽게 사용하는 방법 (bootstrap - grid system)

부트스트랩5 알파가 런칭되었습니다! 아래에서 확인해봐요! 부트스트랩 5(Bootstrap 5) 알파버전 출시! 남들보다 빠르게 공부해보자! 🎉 Bootstrap 5 Alpa 드디어 부트스트랩 5 알파버전이 나왔습니다. 제가 학부시절에 부트스트랩 관련 글을 썼던게 엊그제 같은데 벌써 부트스트랩 5 알파가 나오다니.. 정말 세월이 빠른 것 같습니다 webruden.tistory.com 부트스트랩 (Bootstrap) 부트스트랩은 트위터의 웹 디자이너와 개발자가 만든 오픈형 UI 플러그인이라고 할 수 있습니다. 전 세계의 웹제작자들에게 편리성을 주고자 만들어졌으며 보다 편리하고 빠르게 레이아웃을 구성하고 다양한 인터페이스를 사용할 수 있습니다. 부트스트랩은 미리 정의된 스타일시트와 자바스크립트로 구동하는 플러..

2016.10.17 게시됨

 포스팅 썸네일 이미지

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Sum of two lowest positive integers

Description: Create a function that returns the sum of the two lowest positive numbers given an array of minimum 4 integers. No floats or empty arrays will be passed. For example, when an array is passed like [19,5,42,2,77], the output should be 7. [10,343445353,3453445,3453545353453] should return 3453455. Hint: Do not modify the original array. 전과 비슷한 문제입니다. 이번 문제는 배열에서 가장 낮은 숫자 2개를 구해서 그 숫자 2..

2016.10.16 게시됨

 포스팅 썸네일 이미지

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Largest Elements

Write a program that outputs the top n elements from a list. Example: largest(2, [7,6,5,4,3,2,1]) // => [6,7] 배열의 정렬 메소드와 slice() 메소드를 활용해서 배열에서 제일 큰 값 n개를 뽑아내는 알고리즘입니다.정렬메소드는 문자열 기준으로 동작하므로 숫자를 배열하려면 비교함수를 인자로 넣어줘야되는데요return a - b 를 하면 오름차순return b - a 를 하면 내림차순으로 적용됩니다.

2016.10.16 게시됨

 포스팅 썸네일 이미지

일상/면접

웹퍼블리싱 인터뷰 예상질문

웹퍼블리싱(웹퍼블리셔)으로 이직 또는 취업을 준비하는 사람이라면 실무 면접과 면접 전 테스트 등이 있을 수 있다. 과연 퍼블리싱 분야에 지원하기 위해서는 어떤 준비를 해야할까? 또한 취업까지는 어떤 과정이 있는지 알아보고자 한다. 기본적으로 웹퍼블리셔 또는 프론트엔드 개발자에게 요구하는 역량은 html과 css 그리고 자바스크립트가 있다 하겠다. 일반적으로 회사에서는 실무 면접을 통해 인터뷰에 응시자의 능력을 판단하지만 면접 전 간단한 테스트도 종종 치뤄지고 있다. 테스트라면 어떤 테스트가 있을까? 회사에서 요구하는 웹퍼블리싱 사전 테스트 테스트의 경우 회사마다 다르다. 프론트엔드 중 자바스크립트를 많이 사용하는 회사는 대게 질문지 형태의 서술형 문제가 더 많이 사용된다. 아무래도 얼마나 심도있게 자바스..

2016.10.16 게시됨

 포스팅 썸네일 이미지

개발/Javascript

[자바스크립트] javascript - this

자바스크립트에서 함수를 호출할 때 기존 매개변수로 전달되는 인자 값에 더해, arguments 객체 및 this 인자가 함수 내부로 암묵적으로 전달되어집니다. this 인자는 이해하기 조금 까다롭습니다. this가 이해하기 어려운 이유는 자바스클비트의 여러가지 함수가 호출 패턴에 따라 this가 다른 객체를 참조(this 바인딩)하기 때문입니다. 아래와 같이 this 바인딩에는 3가지 패턴이 있습니다. 객체의 메소드를 호출 -> 해당 메소드를 호출한 객체로 바인딩함수를 호출 -> 전역 객체에 바인딩샘성자 함수를 호출 -> 새로 생성되는 객체에 바인딩 오늘 차근차근 이 this 바인딩에 대해서 정복해 나가도록 하겠습니다. 1. 객체를 호출할 때 this 바인딩 객체의 메소드를 호출할 경우, 메소드 내부 코..

2016.10.16 게시됨

 포스팅 썸네일 이미지

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Fizz / Buzz

Description: Write a function that takes an integer and returns an Array [A, B, C] where A is the number of multiples of 3 (but not 5) less than the given integer, B is the number of multiples of 5 (but not 3) less than the given integer and C is the number of multiples of 3 and 5 less than the given integer. For example, solution(20) should return [5, 2, 1] 3의 배수와 5의 배수 그리고 3과 5의 배수가 동시에 충족시키는 ..

2016.10.16 게시됨

 포스팅 썸네일 이미지

개발/Javascript

[자바스크립트] javascript array (자바스크립트 배열) 정리 2

최근 배열 위주로 코딩을 많이 해야하는 상황을 접하며 생각보다 모르고 있던 ES5 스펙의 Array 메서드들이 많이 있음을 알게 되었습니다. ECMA Script6의 새로운 스펙들이 하나 둘 최신 브라우저에 적용되고 있는 상황에서 기존 ES5에 이미 구현되어 있는 배열의 메서드들 조차도 제대로 파악하고 있지 못하는 사람들을 위해 for 문으로 돌리기 쉬운 몇 가지 메서드들을 정리해보겠습니다. Array 객체에서 제공하고 있는, 배열 전체를 돌며 어떤 작업을 할 때 유용한 다양한 메소드들을 하나씩 살펴보도록 하겠습니다. 배열 작업을 할 때 for문이 먼저 생각나는 사람이라면 꼭 보시면 좋을 것 같습니다. join() .join()은 배열의 원소들을 연결하여 하나의 값으로 만듭니다. arr 배열에 있는 원소..

2016.10.16 게시됨

 포스팅 썸네일 이미지

개발/Javascript

[2020 최신 ES6+] 자바스크립트 배열 기본부터 응용까지 완벽 정리

자바스크립트로 개발을 하다 보면 배열이라는 자료구조를 접하게 됩니다. 배열이란 무엇일까요? 그리고 배열은 어떤 경우에 사용이 되고 어떤 기능을 가지고 있을까요? 이번 포스팅에서는 배열을 다루기 위한 모든 것을 설명하려고 합니다. 배열이란? 배열은 모든 언어(파이썬(Python), 자바(Java), C, 자바스크립트(Javascript))에서 지원하고 있는 자료구조입니다. 배열을 간단히 설명드리면 연관된 데이터를 하나의 틀에서 관리하기 위한 자료구조입니다. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있습니다. 사용하는 언어에 따라서 배열의 특성이 조금 다를 수 있지만, 기본적인 동작 원리는 동일하기 때문에 다른 언어를 사용하시더라도..

2016.10.15 게시됨

 포스팅 썸네일 이미지

개발/CSS3

[CSS3] Position : Float의 부모 height가 적용이 안되는 현상 해결법

css3에서 자식요소에 float를 적용하면 부모의 height가 0으로 되어버리는 경우가 있습니다. 오늘은 이 현상을 해결하는 법을 알아보도록 하겠습니다. 위 코드를 보시면 nav의 부모태그인 header의 height가 0가 되는 현상을 확인할 수 있습니다. 이유는 float 속성은 쉽게 말해 오른쪽이나 왼쪽으로 붕~띄운다는 뜻입니다. 한마디로 부모를 float로 설정하지 않는 이상, 거기에 적용받지 않고 독립적으로 위로 떠있는 상태죠. 이 상태를 부모요소까지 적용을 시키려면 다른 방법이 필요합니다. 방법 1 (가상 선택자 :after로 clear 하는 방법) 가장 탁월하다고 생각하는 방법이라 첫번째로 소개합니다. 우선 "가상 선택자"라는 개념을 이해하셔야 하기 때문에 약간 이해가 필요한데요. 가상선..

2016.10.14 게시됨

 포스팅 썸네일 이미지

개발/Javascript

[자바스크립트] 이벤트 리스너와 콜백함수(javascript callback)

오늘은 자바스크립트 이벤트 리스너와 콜백함수를 다뤄보도록 하겠습니다. 이벤트 리스너 ? 이벤트 리스너는 쉽게 말해 어떠한 이벤트에 대해 대기중인 상태를 말합니다. 항상 리스닝(들으며) 대기중인거죠. 해당 이벤트가 발생했을 때 등록해놨던 이벤트 리스너가 실행됩니다. 위의 코드를 아마 한버 보신 적이 있을겁니다. 이 코드가 대표적인 이벤트 리스너인데요. window가 load될 때 function 부분이 실행이 되는겁니다. 그럼 load 되었다는 것을 누가 알려줄까요? 바로 브라우저가 알려줍니다.비슷한 코드로, 그리고 자주 사용하는 코드로 onclick이 있습니다. 이벤트 리스너는 항상 on + "이벤트 명"으로 명명됩니다.onclick, onkeypress, onmousemove 등 처럼요. window ..

2016.10.14 게시됨

 포스팅 썸네일 이미지

Computer science/알고리즘

[자바스크립트로 구현한 알고리즘] Sum of odd numbers

Given the triangle of consecutive odd numbers: 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 ... Calculate the row sums of this triangle from the row index (starting at index 1) e.g.: rowSumOddNumbers(1); // 1 rowSumOddNumbers(2); // 3 + 5 = 8 너무 어렵게 생각했다..조금만 더 쉽게 생각했으면 훨씬 쉬운 방법을 생각해낼 수 있었는데..간단하게 바로 생각할 수 있는 문제해결능력을 키우도록 노력해야겠다. 왜 이방법을 생각을 못했을꼬...

2016.10.14 게시됨

728x90
반응형