IDE(Visual Studio Code) 이용하여 js 환경 구성하기

처음 소개글에 한번 언급한 것과 같이

js의 경우 브라우저만으로도 테스트 및 연습이 가능하지만

효율적인 면에서 IDE나 코드에디터를 별도로 사용하는게 좋다.

 

나같은 경우, Visual Studio Code 가 가장 익숙하기 때문에

몇가지 추가 설치로 Visual Studio Code 내에서 JS를 연습하는 환경을 구성하기로 했다.

 

1. Visual Studio Code 설치

Download : https://code.visualstudio.com/

 - 사전에 Visual Studio Code가 설치되어 있어 별도의 설치 과정에 대한 설명은 없으나,

   해당 링크에서 설치 파일을 다운로드 받고 특별한 설정 없이 Next 만 진행하면 된다.

 

설치가 완료되고 나면

왼쪽과 같은 아이콘이 나타난다.

 

 

 

사용해본 경험이 있거나 사용 방법을 아시는 분들은 2번부터 읽어보시면 됩니다.

Visual Studio Code 사용이 처음인 분들만...

반응형

 

1-1) 화면 구성

  Visual Studio Code는 프로그래밍을 더 효율적으로 할 수 있도록 여러 기능이 결합되어 있는데,

  대표적인 기능이

    - 파일탐색기(빨강/좌측 영역),

    - Code 입력 부분(주황 / 우측 상단 영역),

    - 결과 확인이 가능한 터미널 부분(노랑 / 우측 하단 영역)  이다.

 

  1-2) 작업 폴더 열기 - 폴더 설정하기

  일반적으로 작업 중 발생하는 코드를 프로젝트별로 관리하기 위해 별도의 폴더를 설정하게 되는데,

  메뉴바(File) -> Open Folder를 선택 한 뒤,

  원하는 경로에 폴더 생성하거나 기존에 있는 폴더를 선택해준다.

1-3) 좌측 상단에 설정한 폴더가 나타나며, 

       마우스 우클릭 -> New File 또는 아래 그림과 같은 아이콘을 선택하여 작업할 파일을 만들어준다.

       JavaScript의 확장자는 .js를 사용한다.

 1-4) 만들어진 파일에 js code를 입력할 수 있다.

          (*code를 실행(run)을 하기 위해서는 아래 과정이 필요하다)

 

 

2. Code Runner 설치

 2-1) Visual Studio Code만을 설치할 경우, 아래 그림과 같은 Run 아이콘이 생기지 않는다.

        해당 code를 실행하기 위해서 Code Runner의 추가 설치가 필요하다.(비교 사진)

Code Runner 미설치 화면 / 실행 아이콘 없음

 

Code Runner 설치 후 화면 / 실행 아이콘 있음

  2-2) Extension (Ctrl + Shift + X) 를 선택 후, Code Runner 를 입력한다.

   2-3) Error 포함 결과 값 확인

          해당 Extension을 설치하고 나면 2-1의 실행 아이콘이 나타나게 되는데,

          해당 아이콘을 실행하게 되면 다음과 같은 에러 메세지가 발생한다.

          해당 에러는 nodejs를 설치하여 해결 할 수 있다.

 

 

3. Node.js 설치

  3-1) Download 경로 (https://nodejs.org/ko/download) 이동

 

  3-2) 사용자의 운영체제에 맞는 버전으로 설치 진행

   * 작성일(2023-05-08)일 기준 LTS 버전은 18.16.0 / 현재(최신)버전은 20.1.0 이다.

   * 조금 추가 설명을 더하면, LTS(Long Term Support)는 장기 지원 버전을 지칭 하는데,

     해당 소프트웨어에 대한 배포자의 관리적인 측면에 대한 내용이다.

     최신 버전으로 변경되며 내가 사용하던 기능이 사라지거나 수정되는 경우,

     유지보수 측면에서 많은 부담과 위험을 가질 수 있는데,

     해당 버전을 사용함으로써 소프트웨어 배포의 위험부담, 비용 및 급작스런 중단을 줄이고,

     소프트웨어의 신뢰성을 향상시킬 수 있다.

   * 유지보수적인 측면 등 다방면을 고려한다면, 최신 기능이 마냥 좋은 것 만은 아니라는 뜻이다.

 

   3-3) Node.js 설치

   - 특이사항이 없어 설치 과정 생략(특이사항 없이 Next만 입력)

 

4. 결과 확인

  4-1) Visual Studio Code 설치, Code Runner 미설치 일 때, 실행(Run) 버튼이 없음.

  4-2) Code Runner 설치, Node.js 미설치 일 때, 실행 결과가 나타나지 않음.

  4-3) Node.js 까지 완료 후, 최종 결과

      코드의 결과 값이 결과 창에서 확인 가능(위 과정이 완료시에도 적용 안될 경우, 재부팅 후 확인)