[Javascript] 자바스크립트 개발환경 세팅 (비쥬얼스튜디오코드 설치)

개발에 필요한 크롬과 비쥬얼 스튜디오 코드(visual studio code)를 설치하는 방법을 알아보겠습니다.

먼저 크롬 브라우저가 필요합니다.

 

크롬 설치 및 개발자도구 확인

1. http://goo.gl/bcamzC 사이트로 이동한 후 [Chome 다운로드] 버튼을 클릭해 설치해주세요.

2. 메뉴 펼침 버튼을 누르거나 F12를 눌러 개발자 도구를 열어주세요.

 

 

개발자 도구를 보면 Elements, Console, Source 등의 패널이 있습니다.

Elements	HTML(Element), 요소에 적용된 스타일(CSS)를 검사할 수 있습니다.
Console	자바스크립트 오류 체크는 물론 디버깅을 할 수 있습니다.
Source	브라우저가 자바스크립트 소스를 파싱(parsing)해오는 과정을 보여줍니다. 오류체크와 디버깅을 할 수도 있습니다.

---

비주얼스튜디오코드 설치하기

1. 비주얼스튜디오코드를 https://code.visualstudio.com/ 에서 내려받아 설치해주세요.

 

 

2.'사용권 계약에 동의함' 항목 체크하고 [다음] 버튼을 눌러 진행하고 설치를 완료해주세요.

---

비주얼스튜디오코드 화면 알아보기

화면은 뷰바, 사이드바, 편집기그룹, 패널, 상태바로 나누어져 있습니다. 사이드바가 보이지 않다면 뷰 바의 아이콘을 누르면 나타납니다.

비주얼 스튜디오 기본 환경 구성

 

A 뷰 바	사이드 바의 기능(탐색, 검색, 깃, 디버그, 확장)을 바꿀 수 있습니다.
B 사이드 바	프로젝트 작업을 수행하는 동안 탐색, 검색, 깃 디버그, 확장 기능으로 바꾸며 사용할 수 있습니다.
C 편집기 그룹	소스를 편집하는 영역입니다. 최대 3개까지 창을 분할 할 수 있고 동시에 여러 파일을 불러와 편집할 수 있습니다.
D 패널	출력, 디버그 정보, 오류 및 경고 등이 표시됩니다.
E 상태 바	현재 프로젝트와 편집하고 있는 파일의 정보를 제공합니다.

 

 

다들 화이팅 하세요