다른 에디터 사용하기

칸아카데미 웹 페이지 밖에서 ProcessingJS로 프로그래밍 하는 법을 보았으니 다른 코드 에디터를 사용해 볼 준비가 되었습니다. 물론 여러분이 원한다면요.

어떤 에디터를 사용하던 주요 파일 이름을 .html으로 끝내도록 하세요. 이것은 HTML 페이지의 파일 확장자인데 에디터와 브라우저가 파일이 무엇인지 알게 해줍니다. HTML에서 JavaScript를 분리하고 싶다면, .js 확장자로 따로 저장한 후 <script> 태그로 참조하면 됩니다.

또 다른 선택은 칸아카데미의 것과 유사하지만 더 많은 기능들을 갖춘 온라인 에디터를 사용하는 것입니다. 만약 응용 프로그램을 다운로드할 수 없는 컴퓨터를 사용하고 있거나, 같은 에디터를 여러 컴퓨터에서 같이 사용하고 싶다면 아마 온라인 에디터가 좋을 것입니다. 온라인 에디터들은 실시간 다중 편집 도구를 갖고 있는 경우가 많습니다. 유명한 온라인 에디터에는 JSBin, Glitch, Repl.it이 있습니다. 크롬북을 사용하고 있다면 크롬 웹 응용 프로그램인 Caret이나 Zed 등이 있습니다.

이 동영상은 Cloud9에서 웹 페이지를 편집하는 동영상입니다 (칸아카데미 웹 페이지 제작 수업의 일부입니다):

또 다른 방법은 데스크톱 에디터를 사용하는 것입니다: 컴퓨터에 응용 프로그램을 다운로드하고 하드 드라이브에 파일을 저장해 사용합니다. 운영체제와 가격에 따라 고를 수 있는 데스크톱 에디터들이 수 없이 많습니다. 유명한 데스크톱 에디터로는 Visual Studio Code, Atom, Sublime Text, Adobe Brackets, Notepad++ (윈도우즈용) 등이 있습니다.

이 동영상은 Sublime Text로 웹 페이지를 편집하는 동영상입니다 (칸아카데미 웹 페이지 제작 수업의 일부입니다):

세 번째 방법은 커맨드 라인 에디터를 사용하는 것입니다. 만약 커맨드 라인과 친숙하지 않다면, 먼저 커맨드 라인에 대해서 많은 것을 배워야 하기 때문에 이 방법은 좋지 않습니다. 반면에, 만약 마우스를 사용하는 대신에 키보드를 사용하는 것을 좋아한다면, 아마도 커맨드 라인 도구들을 좋아하는 자신을 발견할지도 모르겠습니다. 유명한 커맨드 라인 에디터들에는 Emacs나 Vim이 있으며, Macs과 Linux와 같은 Unix 기반의 시스템에 미리 설치되어 있는 경우가 많습니다.

이 동영상은 Vim에서 웹 페이지를 편집하는 동영상입니다 (칸아카데미 웹 페이지 제작 수업의 일부입니다):

어떤 것을 선택해야 할까요? 지금으로써는 칸아카데미 에디터를 계속 사용해도 괜찮습니다. 그렇지만 나중엔 적어도 하나의 에디터는 능숙히 사용할 줄 아는 것이 좋습니다. 그리고 프로그래머로서 여러 가지 에디터를 쓸 줄 알면 좋습니다. 학교나 직장에서 다른 에디터를 써야 할 수도 있으니까요.

몇 개의 무료 에디터를 시도해보고 가장 맘에 들어하는 것을 골라 보세요. 또한 주변 친구들이나 동료들이 무엇을 사용하는지 물어봐도 좋습니다. 주변 사람들이 가장 많이 사용하는 도구를 이용하는 것이 도움이 될 수도 있습니다. 어려울 때 주변에 도움을 요청할 수 있으니까요.

다음은 제 칸아카데미 동료들이 무엇을 사용하는지 나타내는 그래프입니다:

이것을 보고 있는데 이미 웹 페이지 개발에 다른 에디터를 쓰고 있다면 밑에 어떤 것을 쓰는지, 왜 그것을 좋아하는지 써 보세요. 그리고 그 에디터에서 ProcessingJS 프로그램을 만드는 데 팁이 있다면 공유해 보세요.