개발 환경 구축
먼저 개발 환경을 구축한다.
일반적인 상황(입대 전)이었다면 필자가 원래 사용하던 비주얼 스튜디오 코드(VisualStudio Code)를 사용하겠으나, 상황적 여건의 제한으로 인해 웹 브라우저 프로그래밍 편집기를 이용하도록 하겠다.
VisualStudio Code Web 사용하기
이름에서 볼 수 있듯, 비주얼 스튜디오의 웹 버전이다. 원래는 다운로드를 하는 코딩 프로그램이었지만 작년에 웹 브라우저 형식으로 사용이 가능해졌다. 웹 브라우저의 형태로 접속할 수 있다는 큰 장점과 단점이 공존한다.
장점: 공간에서의 자유
웹 브라우저만 접속할 수 있다면, 깃허브의 레포지터리를 이용하여 코드를 확인하거나 편집할 수 있다. 기본적으로 Vscode의 자동완성을 사용 가능하다. 다만 깃허브에 연동되지 않았다면(깃허브 레포지터리를 생성하지 않은 경우) 제한 사항이 크다.
커밋과 풀 기능이 가능하여 코딩 편집 후 원래 클론 된 파일과 클라이언트와 연동이 빠르다. C, C++과 같은 언어는 사용이 불가하지만 파이썬과 같은 언어는 사용할 수 있다.
단점: 확장 프로그램의 제한과 코딩 컴파일 제한
컴퓨터를 이용한 컴파일이 아닌 브라우저 형식이다 보니 gcc를 이용한 C언어 등을 컴파일할 수 없다는 큰 단점이 존재한다. 이러한 이유로 사실상 코딩 편집 및 확인만 Vscode Web을 이용하고 컴파일은 다른 브라우저 컴파일 사이트를 이용해야 한다.
Gitpod 사용하기
gitpod은 Vscode Web과 비슷한 개발 환경을 만들어주는 개발 브라우저이다.
사용방법은 접속을 원하는 깃허브 레포지터리에 접속한 후 아래 링크와 같이 자신의 레포지터리 링크 앞에 gitpod.io#를 붙여준 후 엔터를 누르면 접속이 된다.
해당 브라우저는 회원제이며, 깃허브로 무료 로그인이 가능하다. 한 달 50시간 무료 기능을 지원하며 깃허브 Student 인증을 하면 한 달 최대 100시간을 지원한다고 한다.
예시)
https://gitpod.io#github.com/oldcast1e/JS
http://gitpod.io# +자신의 레포지터리 주소
해당 브라우저를 이용하면 Vscode에서 사용하는 거의 대부분의 확장 프로그램을 이용할 수 있으며 설정 동기화도 가능하다. 다만 C와 같은 별도의 프로그램을 설치하는 언어는 불가하며, HTML과 같은 웹 프로그램에 용이한 확장 프로그램인 Live Server가 사용이 가능하다.
Vscode와 같이 깃허브 레포지터리 연동이 가능하기 때문에 커밋과 푸시 모두 가능하다. 앞으로 블로그 작성은 해당 프로그램을 이용한다.
라이브 서버 확장 기능 사용하기
비주얼 스튜디오 코드에는 확장 기능의 사용이 편리한데, 이러한 확장 기능을 추가하면 프로그램을 좀 더 편리하게 개발하기 용이하여 많은 개발자들이 이용한다. 특히 방금 언급한 라이브 서버는 작성한 소스를 웹 브라우저에서 바로 확인할 수 있으므로 빠른 프로그래밍과 직관적인 편집에 용이하다.
해당 코드를 실행해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- helloworld! -->
<h1>자바스크립트의 시작</h1>
<script src="main.js"></script>
</body>
</html>위의 코드를 복사 & 붙여 넣기 하고 우측 하단의 라이브 서버를 클릭하게 되면 다음과 같이 실행 결과를 볼 수 있다.
해당 사진의 주소는 라이브 서버 확장 기능이 가상으로 만든 서버 주소이다.
라이브 서버는 소스를 수정한 다음 저장하기만 해도 웹 브라우저에서 수정한 결과에 따라 실행된다.
'JavaScript > [theory]' 카테고리의 다른 글
| [변수와 자료형] #1. 변수와 <meta> 태그 (1) | 2022.09.21 |
|---|---|
| [자바스크립트의 기본 문법] #4-2. 자바스크립트의 구조 복습 (1) | 2022.09.20 |
| [자바스크립트의 기본 문법] #4-1. 자바스크립트의 입출력 (0) | 2022.09.20 |
| [자바스크립트의 기본 문법] #3. 자바스크립트 소스 작성 (2) | 2022.09.19 |
| [자바스크립트의 기본 문법] #1. 웹 프로그래밍과 자바 스크립트 (0) | 2022.09.18 |
