ch1 - 1. 에디터 설정

Index

Index 1. 에디터 설정 1.1 Visual Studio Code 설치 및 실행 웹 개발을 위한 Extension 소개 및 설치 1.2 Atom 설치 및 실행 기본 사용법 Atom의 특징 1.3 Brackets Brackets의 특징 설치 및 실행 실시간 미리보기 1.4 Sublime Text Sublime Text의 특징 설치 및 실행 1.5 구름 IDE 구름 IDE의 특징

1. 에디터 설정

우리는 평소에 문서를 작성할 때 워드, 한글 그리고 간혹 메모장을 이용합니다. 이러한 문서를 작성하거나 편집하는 프로그램을 문서 편집기(Text Editor)라고 합니다. 이렇게 문서를 작성할 때 워드, 한글, 메모장 등을 이용하듯이 코드 작성을 위한 문서 편집기가 따로 존재합니다. 물론 프로그래밍 코드는 텍스트로 이루어져 있기 때문에 메모장이나 워드 같은 일반적인 문서 편집기로 작성하더라도 확장자만 올바르다면 실행에는 큰 문제가 없습니다. 하지만 문서를 작성하는데 유용한 도구가 있는 워드를 사용하듯, 코드 작성을 위한 편리한 도구가 있는 전용 코드 에디터를 이용하는 것이 코드를 더 쉽게 작성하고 작성한 결과를 확인하기 편합니다. 웹 개발에서 주로 사용하는 에디터는 Atom, Sublime text, Brackets, VS Code 등이 있습니다. 그 중 Visual Studio Code(VS Code)와 Atom을 설치하여 활용하는 법에 대해 간략히 설명해 드리겠습니다.

1.1 Visual Studio Code

설치 및 실행

VS Code는 마이크로소프트사에서 제작한 코드 에디터입니다.

VS Code 공식 페이지에서 무료로 다운로드해서 사용할 수 있습니다.

VS Code는 윈도우, 리눅스 그리고 macOS 모두 지원하며 각 운영체제(OS)에 맞게 설치하여 쉽게 사용할 수 있습니다.

웹 개발을 위한 Extension 소개 및 설치

VS Code는 처음에 설치 시 기본적인 개발 도구를 제공합니다. 이로 인해 프로그램 자체가 가볍지만, 편의를 목적으로 하는 프로그램인 점을 고려했을 때 도구가 다소 부족하다고 생각할 수 있습니다.

이를 위해 VS Code에서는 Extension이라는 확장 기능을 제공합니다.

VS Code를 쓰는 유저들이 직접 필요에 의해 만든 도구들을 쉽게 가져다 쓸 수 있습니다.

구글 크롬 브라우저의 애드 블럭과 같은 Extension이라고 생각하면 이해가 편합니다.

현재 강의에서는 HTML과 CSS를 다루기 때문에 아래의 세 가지 Extension만 설치하시면 조금 더 편하게 코드를 작성할 수 있습니다.

Live Server

익스텐션 이름 그대로 HTML 코드를 저장한 그대로 live로 반영합니다. 원래는 저장을 하더라도 브라우저 리프레쉬가 필요한데 라이브 서버 익스텐션이 있으면 쉽게 즉각적으로 반영할 수 있습니다.

HTML Snippets

기본적으로 제공되는 기능이지만 좀 더 강력한 기능을 제공합니다. HTML태그를 자동 완성하며 태그별 기본적으로 갖고 있는 속성(Attribute)까지 제공합니다.

HTML CSS Support

HTML에서 CSS를 지원합니다. 깔끔한 문법 하이라이팅과 코드 제안을 제공합니다.

1.2 Atom

다음은 Atom을 소개하겠습니다. Atom은 Github에서 만든 에디터이며 다양한 프로그래밍 언어를 편집할 수 있습니다. 무료이고 필요한 기능을 패키지 설치로 쉽게 확장할 수 있습니다. Sublime Text와 Textmate와 비슷하며, Node.js와 Electron을 기반으로 구성되어 있습니다.

설치 및 실행

https://atom.io 홈페이지에 접속합니다.

아래 사진의 노란색 버튼(Download)을 클릭해서 다운 받으세요.

💡

(윈도우, 리눅스, macOS를 모두 지원합니다!)

다음과 같이 실행이 됩니다.

💡

File을 누라고 Setting을 통해 Themes 변경 및 Install에서 커스터마이징할 수 있는 패키지를 설치 가능합니다!

기본 사용법

Atom을 실행하고 File > New File을 선택합니다. 단축키는 Ctrl + N 입니다.

untilted 창에서 File, Save를 클릭해 저장합니다. 저장할 때는 파일명 ’.html’로 저장해야 합니다. ‘.html’로 저장한 파일에서는 코드 하이라이팅이 적용됩니다. 패키지를 설치하지 않은 상태에서는 Text Edit 창에 html이라고 입력 후 Tab을 입력하면 자동 완성이 됩니다.

환경세팅

File을 누르고 Settings를 누릅니다.

Install에서 Editor를 Customizing 할 수 있는 몇 가지 Packages를 설치하도록 하겠습니다.

wrap이라 검색하고 엔터를 치면 wrap-guide가 나올 것입니다. 에디터 안에서 오른쪽에 라인을 그려주는 Package인데 지워 사용하는 편이 더 깔끔하기 때문에 Disable 시키도록 하겠 습니다.

오른쪽 상단에 map이라 검색을 하면 minimap이 검색됩니다. Code mini Map을 그려주는 유용한 Package이니 설치하도록 합니다.

emmet 패키지는 웹 관련 코드를 자동완성 시켜주는 패키지입니다. 상당히 유용하지만 사용법을 어느 정도 숙지해야 하기 때문에 인터넷에서 emmet 사용법을 검색해보시고 사용해보시기 바랍니다.

이번에는 Editor로 들어와서 Soft Wrap에 체킹을 해줍니다. 라인이 허용치를 넘어가면 옆으로 스크롤이 생기는데 스크롤이 생기지 않고 아래로 넘어가도록 하는 옵션입니다.

Atom의 특징

CSS, Javascript와 같은 웹 기술로 만들었기 때문에 웹페이지를 편집하듯이 UI 조작이 가능합니다. 하지만 속도가 조금 느린 단점이 있습니다.

1.3 Brackets

Brackets의 특징

브라켓 많이 들어보셨죠? 요즘은 새로 급부상하고 있는 Visual Studio Code나 Atom에는 살짝 밀리지만 여전히 막강한 장점들을 가지고 있는 브라켓! 브라켓을 설명해드릴게요.

Adobe 사에서 만들었습니다. 그래서 psd 파일을 열어서 확인할 수 있습니다. 해당 레이어(layer)의 정보 값을 얻어 이를 활용할 수 있죠.

실시간 미리 보기 기능이 있습니다. 바로 구글 크롬(chrome)에서 지금 작성한 html 혹은 css 파일을 확인할 수 있게 합니다.

가벼운 에디터! atom에 비해 차지하는 용량이 작아 가벼운 웹 에디터 중 하나입니다.

무료로 설치할 수 있으며 확장 기능(extension)을 활용해 내 입맛대로 에디터를 다듬을 수 있습니다. (타 에디터들도 이런 특징이 있긴 하죠.)

설치 및 실행

자 그럼 브라켓 공식홈페이지에서 다운을 받아 설치해볼까요?

첫 화면은 다음과 같습니다. 브라켓을 사용할 수 있는 기본 내용이 적혀있는 index.html이 열리게 되죠.

실시간 미리보기

브라켓의 오른쪽 상단의 번개(⚡️)모양을 눌러보세요. 실시간 미리 보기가 가능해집니다. 저는 창을 두개로 나눠서 한번 해보았어요.

오른쪽 코드창에서 <h1>태그 내의 명을 다른 걸로 바꿔보았어요. 크롬의 개발자 도구에서 고치듯이 브라켓에서 고치면 바로 크롬에서 확인이 가능합니다.

1.4 Sublime Text

Sublime Text의 특징

많은 에디터 중에 비교적 최근에 생긴 sublime text 또한 많은 장점이 있는 에디터입니다.

GUI 자체가 매우 단순합니다. 'Goto Anything'이라는 기능을 통해 마우스로 이곳저곳 클릭하는 것이 아닌, 적은 키보드 조합을 통해 단어, 코드 줄, 상징 등으로 뛰어다니는 것을 중요시합니다.

에디터가 python 코어 부분을 내장하고 있어 매크로, 플러그인 등으로 확장해 에디터 환경을 구축할 수 있습니다.

가장 큰 특징으로는 유료입니다.. 80달러이지만 꼭 구입하지 않아도 사용하는 데에 제한은 없습니다.

윈도우 한글 IME를 지원하지 않아 오류가 생기기도 합니다. 하지만 여러 지식인들이 찾아둔 방법이 있으니 큰 문제는 되지 않습니다!

최근 버전은 3.0으로 2017년 9월이 마지막입니다.

설치 및 실행

공식 홈페이지 (https://www.sublimetext.com/)에서 다운을 받아줍니다.

맥으로 홈페이지를 열었더니 자동으로 for Mac을 소개해주네요. 다른 운영체제라면 옆에 'Changelog'를 통해 맞는 운영체제를 설치하세요.

1.5 구름 IDE

구름 IDE의 특징

구름IDE는 웹 환경에서 통합개발 환경을 빠르게 구축할 수 있게 해줍니다. 거의 대부분의 개발 스택을 제공하고 있는데요. 컨테이너 5개까지는(5개의 환경 구성까지는) 무료로 이용이 가능합니다.

컴퓨터 환경에 영향을 받지 않고 어디서나 동일한 환경으로 코딩이 가능합니다.

컨테이너 공유 기능을 이용하여 협업이 가능합니다. 채팅 기능이나 파일 공유 기능을 제공합니다.

빠르게 환경 세팅이 가능합니다.

터미널로 리눅스 환경에 접속이 가능합니다.

서비스 배포가 바로 가능합니다.

로그인 후에 대시보드 화면으로 들어가주세요. 새 컨테이너 생성을 누르셔서 컨테이너를 생성해 주세요. 하나의 컨테이너는 하나의 컴퓨터를 세팅하는 것과 같습니다. 컨테이너 이름을 작성해주시고 HTML/CSS/JS를 선택하신 다음 생성하기를 눌러주세요.

나중에 실행하실 때에는 대시보드로 이동하여 아래와 같이 실행이 가능합니다.

화면구성입니다.

폴더 구조를 볼 수 있는 공간입니다. 우측 상단에 보시면 새로 고침 버튼이 있어요. 콘솔 창에서 뭔가 작업을 했는데 보이지 않는다면 새로 고침을 해보시기 바랍니다.

txt, html, py 파일 등 다양한 파일을 edit 할 수 있는 공간입니다.

협업을 위한 공간이에요. 이 책에서는 사용하지 않는 기능입니다. 채팅 등 협업을 위한 다양한 기능을 제공합니다.

콘솔 창입니다. 우리는 대부분의 명령어를 이곳에 입력하게 됩니다.

안에 있는 내용을 수정하면 상단 화살표로 그려 넣은 곳이 ‘*’로 바뀝니다. 해당 표시는 저장이 안 되었다는 표시입니다. Ctrl + S를 누르시면 저장이 되고 다시 ‘X’로 돌아옵니다.

내용을 작성하신 후 Open Preview를 눌러주시면 실행되는 화면이 실시간으로 보입니다.