한 입 크기로 잘라먹는 리액트Table Of Contents
지금까지 자바스크립트를 실습할 때는 코드샌드박스를 이용했습니다. 코드샌드박스는 웹 브라우저 기반 소스 코드 에디터입니다. 코드샌드박스는 파일을 저장하면 자동으로 코드 라인을 정렬해주는 등 소스 코드 편집에 특화된 여러 기능을 제공합니다.
그러나 이제부터는 자바스크립트를 웹 브라우저가 아닌 Node.js를 이용해 실행하기 때문에 더 이상 코드샌드박스를 이용하지 않습니다. 따라서 이번 절에는 데스크탑 환경의 소스 코드 에디터 비주얼 스튜디오 코드(Visual Studio Code)를 설치하고 사용하는 방법을 알아보겠습니다.
비주얼 스튜디오 코드 설치하기
비주얼 스튜디오 코드는 마이크로소프트가 개발한 오픈소스 코드 에디터입니다.
국내 및 전 세계 개발자들이 많이 사용하는 소스 코드 에디터로, 윈도우, MacOS, 리눅스 운영체제를 모두 지원합니다. 2022년 스택오버플로 개발자 설문에서 가장 많은 개발자가 사용하고 있는 소스 코드 에디터로 선정되기도 하였습니다. 만약 비주얼 스튜디오 코드를 이미 사용하고 있고, 능숙하게 다룬다면 이번 단원의 내용은 건너뛰어도 괜찮습니다.
비주얼 스튜디오 코드 공식 홈페이지에 접속합니다.
홈페이지에 중간에 있는 <Download for …> 버튼을 클릭해 설치 파일을 다운로드합니다. 자신의 시스템 환경에 따라 버튼의 내용은 바뀝니다. 저자처럼 윈도우를 사용하는 사용자라면 <Download for Windows> 버튼이 나올 것이고, 맥 사용자라면 <Download for Mac> 버튼이 나올 겁니다.
운영체제에 맞게 다운로드한 파일은 특별한 설정을 하지 않았다면 다운로드 폴더에 저장됩니다. 다운로드 폴더에서 파일을 더블 클릭하여 설치를 시작합니다.
비주얼 스튜디오 코드 설치는 다음 과정을 따라 진행하면 됩니다. 대부분 설치마법사가 제시하는 기본 설정 그대로 따라 설치하면 됩니다.
- 설치 프로그램을 실행하면 라이선스 계약에 동의하는지 묻는 대화상자가 나타납니다. 비주얼 스튜디오 코드 역시 MIT 라이선스를 따르는 오픈소스 프로젝트로 누구나 무료로 사용할 수 있습니다. 라이선스 약관에 동의 한 후 <다음> 버튼을 클릭합니다.
- 프로그램을 설치할 경로를 결정하는 대화상자입니다. 기본으로 설정된 곳에 설치할 것을 권장합니다. <다음> 버튼을 클릭합니다.
- [시작] 메뉴에 등록할 프로그램 이름을 설정하는 대화상자입니다. 별도 수정 없이 <다음> 버튼을 클릭합니다.
- 비주얼 스튜디오 코드를 설치하면서 추가로 수행할 작업을 선택하는 대화상자입니다. 기본값으로 아래 2개의 체크박스에 이미 표시되어 있습니다. 수정 없이 기본 설정을 유지한 채, <다음> 버튼을 클릭합니다.
- 설치 준비가 모두 완료되었습니다. <설치> 버튼을 클릭해 설치합니다.
- 설치가 실행되고 나서 3~5분이 지나면 모두 완료됩니다. 만약 문제가 발생했다면 설치 파일을 다시 다운로드받아 이 과정을 처음부터 다시 진행하길 바랍니다.
- 설치가 모두 완료되었습니다. <종료> 버튼을 클릭해 종료합니다.
한국어 설정을 위한 확장 기능 설치하기
비주얼 스튜디오 코드의 기본 언어 설정은 영어입니다. 언어 설정을 한국어로 변경하기 위해 확장 기능(Extension)을 설치하겠습니다. 설치할 확장 기능은 한국어 팩(Korea Lanaguage Pack for Visual Studio Code)입니다.
설치가 완료된 비주얼 스튜디오 코드를 실행합니다. 정상적으로 설치되었다면 윈도우 [시작] 메뉴에서 [Visual Studio Code]를 클릭하면 됩니다.
비주얼 스튜디오 코드의 첫 화면이 실행됩니다.
[그림 3-14]와 같이 화면 맨 왼쪽에 나열된 5개의 아이콘 중 마지막에 있는 Extensions 아이콘을 클릭합니다.
그러면 확장 기능을 검색하는 Search Extensions in Marketplace 검색 폼이 나옵니다. 이 검색 폼에서 korean을 입력했을 때, 최상단에 나오는 아이템을 클릭하면 한국어 팩을 설치할 수 있습니다.
오른쪽에 나타난 페이 지에서 <Install> 버튼을 클릭해 확장 기능을 설치합니다.
확장 기능을 설치하면 <Install> 대신 <Uninstall> 버튼이표시됩니다. 그리고 페이지 오른쪽 하단에 다시 시작하겠냐고 묻는 알림(Notification) 대화상자가 나타납니다.
한국어 팩은 설치 이후 비주얼 스튜디오 코드를 다시 시작해야 적용되므로 알림 대화상자에서
<Change Language and Restart> 버튼을 클릭합니다.
만약 알림 대화상자가 보이지 않으면 수동으로 직접 프로그램을 종료한 다음, 다시 실행하면 됩니다. 다시 실행하면 비주얼 스튜디오 코드가 한국어로 표시됩니다.
Node.js로 자바스크립트 실행하기
비주얼 스튜디오 코드에서 자바스크립트 코드를 작성하고 Node.js로 실행하겠습니다. 이번 장에서 사용할 실습 코드를 저장하기 위해 C 드라이브의 문서에 새로운 폴더 chapter3을 만듭니다.
계속해서 비주얼 스튜디오 코드 왼쪽 탐색기 창에 있는 <폴더 열기> 버튼을 클릭한 다음, 문서 폴더에 있는 chapter3을 찾아서 엽니다.
비주얼 스튜디오 코드에서 폴더를 열면 “이 폴더에 있는 파일의 작성자를 신뢰합니까?”라는 경고 대화상자가 나타납니다. <예, 작성자를 신뢰합니다. …>를 클릭합니다.
비주얼 스튜디오 코드 탐색기 창에 현재 열린 폴더의 이름이 표시됩니다. 폴더명에 마우스 포인터를 갖다 대면 나타나는 아이콘 중에서 파일을 새로 만드는 아이콘을 클릭합니다.
그럼 새 파일명을 입력할 수 있는데, 이름은 ‘sample.js’라고 명명합니다.
파일을 만들고 이름을 입력했다면 다음과 같이 간단한 자바스크립트 코드를 작성합니다.
코드를 불러오는 중 입니다 ...
단축키 <Ctrl>+<S>를 눌러 sample.js 파일에서 변경한 내용을 저장합니다.
이제 Node.js로 sample.js를 실행하겠습니다. Node.js로 자바스크립트 파일을 실행하려면 터미널에서 명령어를 입력해야 합니다. 단축키 <Ctrl>+<J>를 눌러 비주얼 스튜디오 코드의 터미널을 엽니다.
비주얼 스튜디오 코드의 터미널은 소스 코드를 입력하는 편집기 하단에 새 창이 열리면서 표시됩니다. 이 창에는 모두 5개의 탭 메뉴가 있습니다. 만일 터미널이 활성화되어 있지 않다면 [터미널] 탭을 클릭하면 됩니다.
터미널이 열리면 커서가 깜빡이면서 명령을 받아 실행할 수 있는 프롬프트 상태가 나타납니다. 프롬프트 왼쪽에는 현재 비주얼 스튜디오 코드가 접근하고 있는 폴더 경로가 있습니다. 앞서 폴더 열기로 불러왔으므로, 경로가 chapter3에 있는지 확인하길 바랍니다.
터미널에서 다음 명령어를 입력해 sample.js를 실행합니다.
코드를 불러오는 중 입니다 ...node sample.js는 Node.js에게 sample.js를 실행하라는 명령입니다.
이에 따라 sample.js가 실행되어 터미널에는 hello가 출력됩니다.
