JavaScript 개발 환경을 설정하는 방법-JS 튜토리얼-php.cn

JavaScript 개발 환경을 설정하는 방법

Barbara Streisand

풀어 주다： 2024-10-22 20:00:44

원래의

790명이 탐색했습니다.

기사 2: JavaScript 개발 환경을 설정하는 방법

소개

브라우저 콘솔에서 첫 번째 JavaScript 프로그램을 작성했으므로 이제 적절한 개발 환경을 설정할 차례입니다. 이는 과정을 진행하면서 더욱 복잡한 코드를 효율적으로 작성하고 테스트하는 데 도움이 됩니다.

이번 게시물에서는 개발자들 사이에서 가장 인기 있는 코드 편집기 중 하나인 Visual Studio Code(VS Code)를 사용하여 개발 환경을 설정하는 방법을 안내하겠습니다.

1단계: Visual Studio Code 설치

Visual Studio Code(VS Code)는 가볍지만 강력한 코드 편집기입니다. 무료이고 사용하기 쉬우며 JavaScript와 잘 작동합니다.

VS Code 설치 지침:

VS 코드 다운로드: 공식 웹사이트를 방문하여 운영 체제(Windows, macOS, Linux)에 맞는 설치 프로그램을 다운로드하세요.
애플리케이션 설치: 시스템에 따라 설치 단계를 따르십시오. 일반적으로 다운로드한 파일을 두 번 클릭하고 프롬프트를 따르기만 하면 됩니다.

설치가 완료되면 Visual Studio Code를 엽니다. 다음과 같아야 합니다.

How to Set Up Your JavaScript Development Environment

(VS Code 인터페이스 샘플 이미지입니다)

2단계: Node.js 설치(선택 사항이지만 권장됨)

JavaScript는 브라우저에서 실행되지만 Node.js를 설치하면 브라우저 외부에서 JavaScript를 실행할 수 있어 개발 환경이 더욱 다양해집니다.

Node.js 설치 지침:

Node.js 다운로드: Node.js 웹사이트로 이동하여 운영 체제에 맞는 LTS(Long Term Support) 버전을 다운로드하세요.
Node.js 설치: 지침에 따라 설치하세요.

설치 후 명령 프롬프트(Windows) 또는 터미널(macOS/Linux)을 열고 다음 명령을 입력하여 Node.js가 설치되어 있는지 확인하세요.

node -v

로그인 후 복사

이렇게 하면 Node.js 버전 번호가 반환되어 설치가 확인됩니다.

3단계: 첫 번째 JavaScript 파일 만들기

이제 VS Code가 설치되었으므로 첫 번째 JavaScript 파일을 만들어 보겠습니다.

JavaScript 파일 생성 지침:

VS 코드 열기.
새 폴더 만들기: 컴퓨터에서 JavaScript 프로젝트용 폴더를 만듭니다. javascript-learning과 같은 이름으로 부를 수 있습니다.
VS Code에서 폴더 열기: VS Code에서 파일 > 폴더를 열고 방금 생성한 폴더를 선택하세요.
새 JavaScript 파일 만들기: 왼쪽 탐색기 패널에서 새 파일 버튼을 클릭하거나 Ctrl N을 누르고 파일 이름을 script.js로 지정합니다.

4단계: VS Code에서 JavaScript 작성 및 실행

이제 새 script.js 파일에 몇 가지 기본 JavaScript를 작성해 보겠습니다.

예:

script.js에서 다음 코드를 작성하세요.

node -v

로그인 후 복사

이 JavaScript 파일을 실행하려면 다음과 같은 몇 가지 옵션이 있습니다.

옵션 1: 브라우저에서 JavaScript 실행

같은 폴더에 HTML 파일(예: index.html)을 만듭니다.
다음 기본 HTML 코드를 추가하세요.

console.log("Hello, World from VS Code!");

로그인 후 복사

브라우저에서 index.html을 엽니다. 파일을 마우스 오른쪽 버튼으로 클릭하고 Chrome으로 열기 또는 원하는 브라우저를 선택할 수 있습니다.
브라우저 콘솔(F12 또는 Ctrl Shift I)을 열면 다음 메시지가 표시됩니다.

<!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>JavaScript Test</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

로그인 후 복사

옵션 2: Node.js로 JavaScript 실행(설치된 경우)

명령 프롬프트 또는 터미널을 엽니다.
cd 명령을 사용하여 script.js가 있는 폴더로 이동하세요. 예를 들어:

Hello, World from VS Code!

로그인 후 복사

다음 명령을 실행하여 JavaScript 파일을 실행하세요.

cd path/to/javascript-learning

로그인 후 복사

다음 메시지가 표시됩니다.

node script.js

로그인 후 복사

다음 단계

이제 개발 환경이 설정되었고 브라우저와 Node.js 모두에서 JavaScript를 성공적으로 실행했으므로 JavaScript 프로그래밍에 대해 더 깊이 알아볼 준비가 되었습니다! 다음 게시물에서는 JavaScript의 변수와 이를 사용하여 데이터를 저장하는 방법

을 살펴보겠습니다.

더 흥미로운 수업을 기대해주세요!

프로 팁:

VS Code에 익숙해지면 코드 린팅을 위한 ESLint 및 변경 시 브라우저를 자동으로 다시 로드할 수 있는 Live Server와 같은 확장 프로그램을 설치하여 워크플로를 향상할 수 있습니다.

내 웹사이트 방문-Ridoy hasan 포트폴리오
내 LinkedIn 프로필을 방문하세요 - Ridoy Hasan

위 내용은 JavaScript 개발 환경을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!