웹 개발을 위한 아톰 에디터 설치, 사용하는 방법

자바스크립트

웹 개발을 위한 아톰 에디터 설치, 사용하는 방법

 

환경: ATOM Editor

 

웹 개발을 위해서는 개발 능률을 높일 수 있는 에디터가 필요합니다. 특히 클라이언트 영역에 해당하는 HTML, CSS, Javascript, PHP 를 효과적으로 프로그래밍할 수 있는 에디터는 개발 생산성과 퀄리티에 직접적인 관련이 있습니다. 지금까지 이클립스를 사용하고 있었는데 이번 기회에 경험 삼아 프로그래밍 툴을 바꿔 보려고 합니다. 앞으로 어떤 장점이 있는지 하나씩 분석해서 올리도록 하겠습니다.

 

먼저 프로그램을 다운받아야겠죠. 프로그램명은 텍스트 에디터로 유명한 아톰(Atom) 입니다. 아래 링크 주소를 클릭해서 홈페이지로 접속한 후 프로그램을 다운 받습니다.

https://atom.io/

웹 개발을 위한 아톰 에디터 설치, 사용하는 방법

 

그런데 윈도우용 Installer 를 받았는데 파일에 exe 확장자가 안 붙어 있었습니다. 저는 설치 파일인줄 알고 더블 클릭을 했는데 연결 프로그램을 어떤 걸로 사용할 것인지 묻는 팝업창이 뜨더군요. 이것이 사이트에 문제인지 모르겠지만 다시 다운 받거나 고민하지 않아도 됩니다. 다운 받은 파일의 이름 끝에 “.exe” 를 넣어서 실행 파일로 만드시면 됩니다. 그 전에 탐색기에서 확장자가 보이도록 옵션을 설정해 놔야겠죠

웹 개발을 위한 아톰 에디터 설치, 사용하는 방법

 

윈도우에 Net Framework 4.5 가 설치되어 있지 않다면 아래와 같은 메시지가 뜰 겁니다. Install 버튼을 눌러서 Net Framework Atom 프로그램을 동시에 설치합니다

웹 개발을 위한 아톰 에디터 설치, 사용하는 방법

 

프로그램 설치가 끝나고 개발을 진행하려면 제일 먼저 다른 GUI 툴과 마찬가지로 프로젝트를 생성해야 합니다. [파일] > [Add Project Folder] 메뉴를 선택해서 첫 프로젝트를 생성합니다

웹 개발을 위한 아톰 에디터 설치, 사용하는 방법

 

다음은 프로젝트 내부에 개발에 필요한 파일을 생성해야 합니다. 왼쪽 사이드바에 오른 마우스를 눌러 New File 메뉴를 선택합니다

웹 개발을 위한 아톰 에디터 설치, 사용하는 방법

 

화면 상단에 뜨는 에디터 박스에 파일명과 파일 확장자를 넣고 Enter 를 누릅니다. 그럼 프로젝트에 파일이 추가가 됩니다

웹 개발을 위한 아톰 에디터 설치, 사용하는 방법

 

이제 HTML 파일이 생성되었으니 코딩을 해서 실행해 봐야겠죠. 상세한 내용은 다음에 하기로 하고 프로그래밍할 때 없어서는 안되는 자동 완성 기능에 대해서만 언급하겠습니다. 기본적으로 내장되어 있는 자동 완성 기능은 HTML 코드를 입력하게 되면 관련 태그 목록이 팝업으로 뜨게 됩니다

웹 개발을 위한 아톰 에디터 설치, 사용하는 방법

 

목록에서 하나를 선택하면 자동으로 문장이 완성됩니다. HTML 태그와 함께 반드시 입력되어야 할 내용들이 추가가 되는 것이죠. 이 기능에 익숙하면 아주 편하고 빠른 코딩 작업이 가능해 집니다

웹 개발을 위한 아톰 에디터 설치, 사용하는 방법


저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군


티스토리 툴바