728x90
728x90

3.4.1 비주얼 스튜디오란?

비주얼 스튜디오(Visual Studio)는 Microsoft에서 개발한 통합 개발 환경(IDE) 중 하나이다.

대부분의 개발자들에게 인기 있는 이유는 .NET Framework, C#, C++, Python 등 다양한 언어를 지원하기 때문이라고 본다.

또한, 디버깅, 테스트, 빌드 등 개발 과정에서 필요한 기능들을 모두 제공힌디

보통 이렇게 생겼다.

기본적인 사용법은 다들 알 테니 부가적인 걸 공유하자면, 왼쪽에 고양이 키울 수 있다!

vs-code-extension에서 vs-code-pets 확장팩 다운로드하면 된다

3.4.2 내장 터미널

Vs code에는 터미널(윈도우에서는 명령 프롬프트)가 내장되어 있다. 내장 터미널을 열려먼 CTRL + ‘ 단축키를 누르면 된다

3.4.3 Code Runner 확장 플러그인

확장 프로그램이란? 앞서 내가 소개했던 고양이 … 이런걸 확장 플러그이;ㄴ이라 한다

마켓플레이스에서 설치가능

→ code runner 확장 플러그인에서는 다음과 같은 단축키를 통해 현재 표시중인 자바스크립ㅊ트 파일을 실행할 수 있다

→ 원래는 node + 파일명 이렇게 적어야 했는데 말이다…

const arr = [1,2,3];
arr.foreach(alert);

이걸 노드 환경에서 진행한다면 “ reference : alert is not defined “ 에러가 발생할 것이다.

→ 브라우저에 알림창을 띄우는 alert 함수는 브라우저에서만 동작하는 클라이언트 사이드 Web API

<aside> 💡 클라이언트 사이드 WebAPI는 Node.js 환경에서 실행할 수 없다는 점에 주목하자

</aside>

3.4.4 Live Server 확장 플러그인

클라이언트 사이드 WebAPI가 포함된 자바스크립트 코드를 실행하려면 Node.js환경이 아닌 브라우저에서 실행해야 함.

<!DOCTYPE html>
<html>
<body>
	<script src="index.js"></script>
</body>
</html>

위 예제를 실행하려면 개발자 도구의 콘솔에서 실행하거나 자바스크립트 코드를 HTML에 삽입한 다음 HTML 파일을 브라우저에서 열어야 한다

  • 위 파일을 브라우저에서 직접 연다면

→ 가능하긴 함

→ 파일 경로의 문제가 발생할 수 있음

→ 소스코드를 수정할 때마다 매번 새로고침 해야하므로 번거로움

  • live Server와 함께라면

→ 소스코드르 수정하면 수정 사항이 가상 서버에 자동으로 저장됨

→ 가상 서버가 기동되어 브라우저에 html파일이 자동 로딩된다

728x90
300x250

+ Recent posts