|
웹 개발을 위한 아톰 에디터 설치, 사용하는 방법 |
|
환경: ATOM Editor |
웹 개발을 위해서는 개발 능률을 높일 수 있는 에디터가 필요합니다. 특히 클라이언트 영역에 해당하는 HTML, CSS, Javascript, PHP 를 효과적으로 프로그래밍할 수 있는 에디터는 개발 생산성과 퀄리티에 직접적인 관련이 있습니다. 지금까지 이클립스를 사용하고 있었는데 이번 기회에 경험 삼아 프로그래밍 툴을 바꿔 보려고 합니다. 앞으로 어떤 장점이 있는지 하나씩 분석해서 올리도록 하겠습니다.
▼ 먼저 프로그램을 다운받아야겠죠. 프로그램명은 텍스트 에디터로 유명한 아톰(Atom) 입니다. 아래 링크 주소를 클릭해서 홈페이지로 접속한 후 프로그램을 다운 받습니다.
▼ 그런데 윈도우용 Installer 를 받았는데 파일에 exe 확장자가 안 붙어 있었습니다. 저는 설치 파일인줄 알고 더블 클릭을 했는데 연결 프로그램을 어떤 걸로 사용할 것인지 묻는 팝업창이 뜨더군요. 이것이 사이트에 문제인지 모르겠지만 다시 다운 받거나 고민하지 않아도 됩니다. 다운 받은 파일의 이름 끝에 “.exe” 를 넣어서 실행 파일로 만드시면 됩니다. 그 전에 탐색기에서 확장자가 보이도록 옵션을 설정해 놔야겠죠.
▼ 윈도우에 Net Framework 4.5 가 설치되어 있지 않다면 아래와 같은 메시지가 뜰 겁니다. Install 버튼을 눌러서 Net Framework 과 Atom 프로그램을 동시에 설치합니다.
▼ 프로그램 설치가 끝나고 개발을 진행하려면 제일 먼저 다른 GUI 툴과 마찬가지로 프로젝트를 생성해야 합니다. [파일] > [Add Project Folder] 메뉴를 선택해서 첫 프로젝트를 생성합니다.
▼ 다음은 프로젝트 내부에 개발에 필요한 파일을 생성해야 합니다. 왼쪽 사이드바에 오른 마우스를 눌러 New File 메뉴를 선택합니다.
▼ 화면 상단에 뜨는 에디터 박스에 파일명과 파일 확장자를 넣고 Enter 를 누릅니다. 그럼 프로젝트에 파일이 추가가 됩니다.
▼ 이제 HTML 파일이 생성되었으니 코딩을 해서 실행해 봐야겠죠. 상세한 내용은 다음에 하기로 하고 프로그래밍할 때 없어서는 안되는 자동 완성 기능에 대해서만 언급하겠습니다. 기본적으로 내장되어 있는 자동 완성 기능은 HTML 코드를 입력하게 되면 관련 태그 목록이 팝업으로 뜨게 됩니다.
▼ 목록에서 하나를 선택하면 자동으로 문장이 완성됩니다. HTML 태그와 함께 반드시 입력되어야 할 내용들이 추가가 되는 것이죠. 이 기능에 익숙하면 아주 편하고 빠른 코딩 작업이 가능해 집니다.
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트(Javascript) form 의 submit (전송)을 자바스크립트로 실행하는 방법 (1) | 2023.09.22 |
|---|---|
| 자바스크립트 크롬 브라우저로 디버깅 하는 방법 (0) | 2022.08.17 |
| 자바스크립트(Javascript) 뒤로 가기 막는 방법 (1) | 2020.01.08 |
| 자바스크립트 구구단 출력하는 방법 (0) | 2019.11.06 |
| 자바스크립트(Javascript) 수학, 난수 계산 Math 객체 4부, Max, Min 함수 (0) | 2019.06.15 |
| 자바스크립트(Javascript) 수학, 난수 계산에 쓰이는 Math 객체 3부, Random 함수 (0) | 2019.06.08 |
| 자바스크립트(Javascript) 수학과 난수 Math 객체 사용하기 2부, Ceil, Floor, Round (0) | 2019.06.02 |
| 자바스크립트(Javascript) 수학과 난수 Math 객체 사용하기 1부, cos, sin, tan 함수 (0) | 2019.05.27 |
