강의 실습/웹 프론트엔드를 위한 자바스크립트 첫 걸음

VSCode 설치 및 설정

Jint 2023. 11. 3. 14:37

1. VSCode란
vscode는 microsoft에서 개발한 무료 에디터로, 다양한 플랫폼에서 실행 가능하며, 여러가지 기능들을 제공해, 코드를 쉽게 작성하고 수정할 수 있다. 또한 다양한 확장 팩을 제공해 원하는 개발 환경에 맞게 기능을 추가하고 확장 할 수 있어 많은 개발자들이 사용하고 있는 에디터이다. 지금까지 사용했던 코드 샌드박스는 보통 간단한 개인적인 학습을 할 때 자주 사용되는 에디터이고, vscode는 이 보다 훨씬 많은 기능을 제공하고, 여러가지 도구들을 설치할 수 있어 개발을 더욱 쉽게 진행할 수 있게 도와주기 때문에 지금부터는 vscode를 사용해 자바스크립트 코드를 작성해보도록 한다.

1) VSCode 설치
https://code.visualstudio.com/ 에 접속해 다운로드라는 버튼을 누르면, vscode를 다운로드 받을 수 있는 화면이 나오는데, 여기서 맥북을 사용하면 mac 전용으로, window 노트북을 사용하면 window 아래있는 다운로드 버튼을 눌러 안내에 따라 설치를 한다.

2) 실습 파일 생성
왼쪽 상단의 탐색기를 누르고, "폴더 열기"를 누른다. vscode는 특정 폴더의 모든 파일 및 폴더들을 선택해 왼쪽 탐색기에 표시해, 프로젝트의 전체적인 구조를 한 눈에 파악할 수 있게 도와주고, 여러 파일들을 쉽게 찾고 열 수 있게 도와준다. vscode-test 라는 이름의 폴더를 임의로 생성한 다음 해당 폴더를 선택하고, 왼쪽의 탐색기에서 '우클릭 > 새폴더'를 통해 새로운 index.html 파일과 index.js 라는 파일을 만들어본다. 파일을 생성하면, 파일의 이름 옆에 각각 html, js 라는 아이콘이 자동으로 생긴 것을 볼 수 있고, 실제로 vscode-test 폴더에 index.js 파일이 생성된 것을 볼 수 있다.

3) html 파일 작성

- index.html

 

<!DOCTYPE html>
<html>

    <head>
        <title>vscode-test</title>
        <meta charset="UTF-8"/>
    </head>

    <body>
        <div class="today-info">
            <div class="date" id="date">
                02.10.금요일
            </div>
            <div class="clock" id="clock">
                15:03
            </div>
        </div>
        <script src="./index.js"></script>
    </body>

</html>

 

html 파일에는 가장 먼저 <!DOCTYPE html> 를 작성해준다. <!DOCTYPE html>은 이 html 문서는 HTML5를 따르는 문서라고 브라우저에 알려주는 역할을 하는 코드라고 알고 넘어가면 된다. 그리고 html 태그를 사용해 html 문서의 시작을 알려주고, head, body 태그를 작성한다.
head 태그 안에는 제목을 나타내는 title 태그와, html 문서에서 한글을 인식할 수 있게 도와주는 <meta charset="utf-8"> 를 작성한다.
body 태그 안에는 실제 웹 페이지의 내용들을 작성해주는데, today-info 라는 class 이름을 갖는 div 태그를 만들고 이 div 안에 id와 class 이름이 date인 div와 clock 인 div를 만들어준다.
body 태그의 가장 아래에는 생성한 자바스크립트 파일을 html 페이지에 포함시켜주기 위해 script 태그를 작성한다. 이 script 태그는 body 태그의 어디에 작성해도 상관 없지만, 가장 아래에 위치해야 그 위에 작성된 html 코드를 완전히 실행한 다음, 스크립트를 실행하기 때문에 스크립트의 누락이나 오류 등을 방지할 수 있다. 자바스크립트 코드는 script 태그의 안에 직접 작성할 수도 있지만, 자바스크립트로 작성된 코드의 길이가 길어지게 되면 가독성이 떨어지고 많은 오류를 발생시킬 수 있기 때문에 보통은 이렇게 src를 사용해 자바스크립트 파일을 경로로 표시한다.

4) js 파일 작성

- index.js

 

console.log("자바스크립트");

 

코드 샌드박스에서는 오른쪽에 위치한 콘솔 탭에서 자바스크립트로 작성된 코드의 실행결과를 확인 할 수 있었는데 vscode에서는 콘솔 탭이 보이지 않는 것 같다. 코드 실행 결과를 확인하기 위해 도구를 설치해준다.
왼쪽 탭의 가장 아래에 있는 "확장" 버튼을 눌러, 'Live Server'라는 확장팩을 설치한다. vscode에서 자바스크립트 코드의 실행 결과를 확인하는 방법에는 여러가지가 있겠지만, liveserver를 사용해본다. 이 확장팩을 사용하면 html, css, js 와 같은 파일들을, 현재 사용하는 컴퓨터에서 동작하는 서버, 즉 로컬 서버에서 실행할 수 있어 웹 개발을 할 때 아주 편리하게 개발할 수 있다.
liveserver를 설치하고, index.js에서 오른쪽 하단의 Go Live를 눌러보면, 이렇게 127.0.0.1:5500 이라는 주소로 웹 페이지가 나오게 되는데, 이 127.0.0.1은 현재 컴퓨터에서 동작하는 로컬 서버의 주소이고, 그 주소의 5500번 포트를 사용한다 라는 뜻이다. 여기서 주소와 서버는 집과 문 정도로 생각하면 되는데, 127.0.0.1 이라는 집에 있는 문 중에, 5500번의 문으로 들어와서 이 코드를 웹에 표시해주고 있다 라고 이해하면 된다.
vscode에서는 개발을 편리하게 할 수 있도록 도와주는 도구인, liveserver라는 확장팩을 이용해 자바스크립트의 코드 실행 결과를 개발자 도구의 콘솔탭에서 확인 할 수 있다. liveserver는 코드가 변경되면 실시간으로 변경사항들을 웹에 적용해주기 때문에 새로 고침 없이 빠르게 웹 개발을 할 수 있다.
정말 실시간으로 변경되는지 확인해보기위해 index.js에서 "02.10.금요일" 이라는 텍스트의 크기와 색상을 변경한다.

 

const dateElement = document.getElementById("date");
dateElement.style.color = "blue";
dateElement.style.fontSize = "30px";

 

코드를 작성하고 저장하면 실시간으로 글자의 크기와 색상이 변경된 것을 확인할 수 있다.

 

 

참고강의 : https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

 

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의

웹 프론트엔드 개발자를 희망한다면? 친절하고 꼼꼼한 자바스크립트 강의로 첫걸음을 내딛어보세요✨, 쉽고 자세하게 배우는 자바스크립트🤓나만의 크롬 개발화면까지 뚝딱! 학생 50% 할인 쿠

www.inflearn.com