2.1.2 코드와 콘솔의 상호 작용 안내
이 책의 코드는 두 가지 포맷으로 제공됩니다. 첫 번째 포맷은 깃허브(github) 저장소에서 찾을 수 있는 구조적인 코드를 제공합니다. 예를 들어 코드 2-1은 매우 짧은 HTML 코드를 담고 있습니다. 그대로 복사해서 /tmp/tmp.html 같은 파일을 컴퓨터에 만들 수 있습니다. 그다음, 웹 브라우저로 file:///tmp/tmp.html 파일을 엽니다. 하지만 이 파일이 많은 일을 하지는 않습니다.
두 번째 코드 포맷은 콘솔 상호 작용입니다. 브라우저 자바스크립트 콘솔처럼 자바스크립트 REPL1에서 상호 작용 예를 보여 주는 구조적이지 않은 코드 블록입니다(크롬에서는 Cmd-Opt-J, Ctrl+Shift+J, F12를 눌러 자바스크립트 콘솔을 열지만, 브라우저나 운영체제에 따라 다를 수 있습니다). 크롬이나 파이어폭스처럼 콘솔 상호 작용은 > 기호가 앞에 표시됩니다. 출력은 콘솔과 마찬가지로 다음 줄에 표시됩니다. 예를 들어 다음 상호 작용은 배열을 만들어 그 값을 출력합니다. 자바스크립트 콘솔마다 출력이 조금 다를 수 있지만 핵심 내용은 같습니다.
> let a = ['hello', 'world', 2 * 1009] > a; (3) ["hello", "world", 2018]
이 책의 코드를 테스트, 실행, 학습하는 가장 좋은 방법은 깃허브 저장소를 클론하여 자유롭게 실험해 보는 것입니다. 책을 만드는 동안 간단하고 공유 가능한 저장소인 CodePen(http://codepen.io)을 자주 사용했습니다. 예를 들어 코드 2-1은 https://codepen.io/tfjs-book/pen/VEVMbx에서 볼 수 있습니다. CodePen에서 작성한 것은 자동으로 실행됩니다. 따라서 콘솔로 출력된 결과를 볼 수 있습니다. 왼쪽 아래의 Console 버튼을 클릭하여 콘솔을 열어 보세요. CodePen이 자동으로 실행되지 않는다면 마지막에 공백을 추가하는 것과 같이 작은 수정을 가해서 동작시켜 보세요.
이 절의 코드는 CodePen 컬렉션인 https://codepen.io/collection/Xzwavm/에 있습니다. CodePen은 자바스크립트 파일이 하나일 때 잘 동작합니다. 나중에 볼 크고 복잡한 예제는 깃허브 저장소2에 있습니다. 이 예제의 경우 이 절을 읽고 나서 연관된 CodePen의 코드를 순서대로 실행해 보는 것이 좋습니다.