코딩 프로그램 설치 및 설정(Sublime Text 3)

대표 이미지

웹퍼블리셔를 하기 위해서는 웹 관련 코딩을 할 수 있어야 합니다.

그러기 위해선 기본적으로 HTML, CSS, JavaScript를 코딩할 수 있는 에디터가 필요한데, 

기본적으로 메모장에서 하드코딩을 하며 코딩을 할 수 있지만, 쉽고 편하게 하기 위해서 코딩 에디터를 설치하여 사용하죠!

여러가지 편리한 에디터들이 많지만, 

그중에서 서브라임 텍스트(Sublime Text 3)를 설치 방법과 설정법을 소개합니다.

 

서브라임 텍스트는 기본적으로 무료로 다운 받으실 수 있으며, 설치 후 사용하시면 됩니다. 사용중에 가끔씩 구매를 요청하는 문구들이 나오지만 전혀 거슬리지 않을 정도라서 무시하시고 계속 사용하시면 되죠!

 

서브라임 텍스트를 설치하기 전에 먼저해주어야 할 것이 있습니다.

 

바로 node.js 설치이죠!

 

코드 에디터를 다운 받기전 node.js를 설치 해 주어야 합니다.

여러 에디터의 기능을 활용하기 위해서 필요한 프로그램입니다.

 

1. node.js 설치

https://nodejs.org/en/ 

Node.js

Node.js 에 들어 가시면 2가지의 초록색 버튼이 나오는데, 추천하는 버전과 가장 최신 버전의 링크가 나옵니다.

 

저는 개인적으로 첫번째의 recommended 링크를 추천드리며! 클릭하셔서 다운로드 하시고,

다음 버튼을 계속 눌러 설치하시면 됩니다.

 

다음으로는, 서브라임 텍스트(Sublime Text3)를 설치합니다.

 

2. Sublime Text3 설치

http://www.sublimetext.com/

Sublime Text - A sophisticated text editor for code, markup and prose

2020년 1월 1일 기준으로 Build 3211버전 까지 올라와 있고 

들어가자마자 적혀있는 DOWNLOAD FOR WINDOWS 링크 버튼을 눌려서 다운 받으시면 됩니다.

 

마찬가지로, 파일을 실행하여 설치해주시면 서브라임텍스트를 사용하실 수 있습니다.

 

여기까지 간단한 프로그램 설치 방법 이었습니다.

 

 

 

다음으로는, 서브라임텍스트 프로그램 내에서 추가적으로 설치할 것들에 대한 내용입니다.

3. Package Control 설치

#2020년 기준 들어갔을 때 이미 Package Control이 설치되어 있네요.
이 부분은 지나가시면 됩니다.

 

서브라임을 더 활용도 높게 사용하시려면 패키지 컨트롤을 설치하셔야 하는데 설치법은 아래와 같습니다.

 

https://packagecontrol.io/installation

Installation - Package Control

위 링크를 타고 들어가시면 SUBLIMETEXT 3 라고 적혀있는 회색박스 안의 글들을 보실 수 있으실 겁니다.

이 TEXT를 복사하여 서브라임텍스트에서 View > Show Console 로 들어가서 붙여넣고 엔터를 눌려 줍니다.

 

아래의 글을 복사하셔도 됩니다.

 

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

 

Ctrl + ` 이 단축키

Console 창에 붙여넣기 한 모습

이 상태에서 엔트를 누르고 잠깐 기다려 주시면 됩니다.

 

그런 후,

Preference > Package Control 창이 생성 되었는지 확인하시면 됩니다.

 

 

다음으로는 한결 빠르고 편한 코딩 작업을 위해서 코딩을 도와주는 패키지를 설치합니다.

 

4. 패키지 설치

 

Ctrl + Shift + P 를 누르거나

아래와 같이 들어가서 패키지 컨트롤을 실행해줍니다.

Package Control 열기

- Package Control: Install Package 검색

패키지 컨트롤에서 간단하게 PCI를 치시면 위의 인스톨 패키지라는 부분이 나올 것입니다.

 

엔터를 누르고 잠깐 기다리시면 인스톨 패키지 검색창이 뜹니다.

 

모양이 동일하니 당황하지 마시고 창이 새로 뜬 곳에서,

- Prettify 검색 후,  HTML-CSS-JS Prettify를 선택하여 설치해 줍니다.

 

이 패키지는 html, css, javaScript를 예쁘고, 보기 쉽게 정리 해주는 패키지입니다.

코딩을 계속하다보면 줄정리가 잘 되어 있어야 위치나 묶임 등을 확인하기 편한데 그러한 부분을

단축키 하나로 정리해주는 좋은 기능을 가지고 있죠.

 

설치 후

-  Ctrl + Shif + H 를 눌리시면 작업한 코딩들이 알아서 척척 줄정리가 되는 것을 보실 수 있으실 겁니다.

 

다음 패키지로는,

- IME 검색 : ImeSupport 선택 설치하시면 됩니다.

 

서브라임 텍스트에서 한글을 입력하면 글씨가 바로 출력되지 않는 현상을 보실 수 있으실 텐데,

그러한 불편한 현상을 보안하는 패키지입니다.

 

다시 Package Controll > Package Controll:Install Package로 들어가셔서,

IME를 검색하시고 선택 후 설치를 하시면 됩니다.

위의 두 패키지를 설치하시면 기본적인 세팅은 준비되었습니다.