Index

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만 설치하시면 조금 더 편하게 코드를 작성할 수 있습니다.

  1. Live Server

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

       https://s3-us-west-2.amazonaws.com/secure.notion-static.com/65baafd2-46fa-4384-a800-7df36c458776/untitled

  2. HTML Snippets

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

       

  3. HTML CSS Support

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

       

1.2 Atom