고객센터

​​자 비주얼 스튜디오 코드 설치 다운로드 오늘은 자바스크립트를 배우기 위해 개발 환경 세팅을 해보자! 자바스크립트는 웹 브라우저에서 작동하므로, 웹 브라우저 그리고 편한 코드 에디터만 준비하면 누구나 시작할 수 있다. (둘 다 무료)​이 글에선 자바스크립트를 처음 접하는 사람이 개발 환경을 빠르게 세팅할 수 있도록 웹 브라우저와 코드 편집기를 설치하고 기본 설정하는 방법까지 설명드리도록 하겠다.​​1. 준비물 : 브라우저, 코드 에디터1) 웹 브라우저자바스크립트 코드를 실행하기 위해선 크롬이나, 파이어 폭스 같은 최신 브라우저가 필요하다. 해당 비주얼 스튜디오 코드 설치 다운로드 브라우저들은 자바스크립트를 잘 지원해 주고, 오류 확인과 디버깅 기능도 갖추고 있다.​2) 코드 에디터코드를 작성하기 위해 코드 에디터를 설치하는 것을 추천한다. 메모장 같은 데서 코딩하는 건 정말 힘든 일이다. 가장 유명하고 많이 사용하는 에디터는 Visual Studio Code (VS Code)이다. 무료로 사용할 수 있고, 다양한 확장 기능을 설치해 더 편리하게 자바스크립트를 사용할 수 있다. 다른 에디터도 있으니 취향껏 선택하길 바람.​​2. VS Code 설치하기1) 비주얼 스튜디오 코드 공식 비주얼 스튜디오 코드 설치 다운로드 웹사이트에 접속해, 본인의 운영체제에 맞는 설치 파일을 다운로드한다.​​2) 설치 후 비주얼 스튜디오 코드를 실행한다. 바로 사용할 수 있다. 하지만 보여줄 확장 프로그램을 설치하면 개발이 더 쉬워진다.*왼쪽 아이콘 메뉴 마지막 클릭!​​3. 추천 확장 프로그램 설치1) javascript(ES6) code snippets자바스크립트 코드를 작성할 때 문법 오류를 미리 알려주는 기능 제공​2) Korean Language Pack for Visual Studio Code한국어 UI를 제공하는 플러그인. 공식 플러그인이라 사용하기 좋은 편이다. 영어를 잘한다면 굳이 안 비주얼 스튜디오 코드 설치 다운로드 깔아도 됨.​​3) Live Server HTML 파일을 실시간으로 브라우저에서 확인할 수 있는 확장 프로그램이다. 저장할 때마다 페이지가 자동으로 새로고침되어, 즉시 결과를 볼 수 있다.​​4. 프로젝트 폴더 생성1) 프로젝트 폴더 생성자바스크립트 코드 파일을 모아둘 폴더를 만든다. 가급적 영어로 띄어쓰기 없이 만든다. ex) myProject, my_project 등바탕화면 등 아무 곳에 만드세요.​2) 폴더 열기비주얼 스튜디오 코드에서 상단 메뉴 - 파일 - 폴더 열기를 선택하고, 방금 만든 폴더를 연다. 해당 방식으로 비주얼 스튜디오 코드 설치 다운로드 폴더를 열면 프로젝트 폴더 내에서 파일을 체계적으로 관리할 수 있음.저는 폴더 이름 js로 지었습니다.​​5. 첫 html 파일 생성html 파일을 통해 자바스크립트 코드를 웹 페이지에서 실행할 수 있다. 탐색기 폴더명 위에 마우스를 갖다 댄 뒤, 첫 번째 아이콘 새 파일 - 파일명 입력을 진행한다. html 파일은 index.html으로 짓는 것이 일반적이다. ​1) html 파일 작성하기index.html 파일에서 아래와 같은 기본 html 코드를 작성한다. 하나하나 입력해 봐도 되고,​키보드에서!(느낌표) 누르고 비주얼 스튜디오 코드 설치 다운로드 enter(엔터) 누르면 기본 코드가 쭉 뜨니 여기 맞춰 사용해도 된다. 느낌표&엔터 시 위 내용은 쭉 나옴​2) 코드 설명 버튼을 클릭하면 greet()라는 자바스크립트 함수가 실행된다.​스크립트는 html 안에 자바스크립트를 작성하는 부분이다. 여기서 alert() 함수로 인사말을 알림 창으로 띄운다.* alert는 경고라는 뜻을 가지고 있음.​​6. 코드 실행과 테스트아까 플러그인에서 다운로드한 라이브 서버를 실행할 차례다. 에디터 안에서 마우스 오른쪽을 클릭한 뒤 Open with Live Server를 선택한다. 이 기능으로 html 파일을 비주얼 스튜디오 코드 설치 다운로드 열고, 변경 사항을 실시간으로 확인할 수 있다.​브라우저가 열림​버튼을 클릭해 보자. 버튼을 클릭하면 '자바스크립트 개발 환경이 준비되었습니다!'라는 알림 창이 뜨는지 확인하자. 알림 창이 제대로 뜬다면, 잘 해낸 것이다.Good​​7. 개발자 도구 활용하기자바스크립트 개발 시 오류를 확인하고 디버깅하기 위해 브라우저의 개발자 도구를 사용할 수 있다.​1) 개발자 도구 열기단축키는 F12 또는 Ctrl+Shift+I를 눌러 개발자 도구를 연다.​2) Console(콘솔) 탭 활용하기콘솔 탭에서는 자바스크립트 코드 오류 메시지를 확인하거나, 자바스크립트 명령을 직접 해 비주얼 스튜디오 코드 설치 다운로드 볼 수 있다.* 나도 오류가 났는데, 작성한 파일 문제는 아니고 브라우저에서 폰트 로드하다 생긴 오류다.​​이처럼 자바스크립트 개발 환경 세팅은 이처럼 매우 간단하다. 웹 브라우저와 코드 에디터만 있으면 누구나 자바스크립트 개발을 시작할 수 있다.​Live Server와 같은 편리한 확장 프로그램을 사용하면 실시간으로 결과를 확인하며 학습할 수 있다. 이외에도 다양한 확장 프로그램이 많으니, 입맛 따라 다운로드해 보길 바란다.​다음 시간에는 Hello World를 출력하며 진짜 첫 번째 자바스크립트 코드를 작성해 비주얼 스튜디오 코드 설치 다운로드 보겠다. 끝! ​​