Programming/Javascript

[2일차] JavaScript 개발 환경 설정과 간단한 코드 작성

tech-living 2024. 11. 8. 19:53

목차:

  1. JavaScript 코딩 환경 소개
  2. 브라우저 콘솔에서 코드 실행하기
  3. 코드 에디터 설치 및 사용법 (VS Code 추천)
  4. HTML 파일에서 JavaScript 연결하기
  5. 간단한 JavaScript 코드 실행
  6. 다음 수업을 위한 준비

 

1. JavaScript 코딩 환경 소개

JavaScript는 특별한 프로그램 없이도 웹 브라우저와 간단한 코드 편집기만 있으면 코딩을 시작할 수 있습니다. 이 장점 덕분에 JavaScript는 배우기 쉬운 언어 중 하나로 꼽힙니다. 오늘은 브라우저 콘솔과 코드 에디터 두 가지 환경에서 JavaScript를 작성하고 실행하는 방법을 알아보겠습니다.

 

2. 브라우저 콘솔에서 코드 실행하기

브라우저 콘솔을 활용하면 JavaScript를 빠르게 테스트해 볼 수 있습니다. 1일 차에서 간단히 사용해 보았습니다. 다시 정리해 보겠습니다.

  1. 콘솔 열기:
    • Chrome: Ctrl + Shift + J (또는 Cmd + Option + J for Mac)
    • Firefox: Ctrl + Shift + K (또는 Cmd + Option + K for Mac)
  2. 코드 입력:
    콘솔(Console)창에서 다음 코드를 입력하고 실행합니다. 콘솔창에 "JavaScript 시작하기!"라는 문구가 나타납니다. 이처럼 콘솔창은 JavaScript를 학습하면서 간단히 코드를 테스트하기에 유용합니다.
  3. console.log("JavaScript 시작하기!");

 

3. 코드 에디터 설치 및 사용법

효율적인 코딩을 위해 전문 코드 에디터를 사용하는 것을 추천합니다. Visual Studio Code (VS Code)는 무료이고, JavaScript 코딩에 편리한 기능을 제공합니다.

  1. VS Code 설치:
  2. 기본 사용법:
    • VS Code를 실행하고, 새 파일을 만듭니다. 파일 이름은 example.html로 설정합니다.
    • HTML 파일에서 JavaScript 코드를 작성하면, 파일과 JavaScript 코드를 같은 공간에서 관리할 수 있습니다.

 

 

4. HTML 파일에서 JavaScript 연결하기

JavaScript는 HTML 파일 안에서 <script> 태그를 사용하여 작성할 수 있습니다. 이제 간단한 HTML 파일을 만들어 보고 JavaScript 코드를 추가해 보겠습니다.

  1. HTML 파일 생성:
    VS Code에서 example.html 파일을 생성한 뒤, 아래 코드를 입력합니다.
  2.  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 연습</title>
</head>
<body>
    <h1>JavaScript와 HTML</h1>
    <p>콘솔을 확인해 보세요!</p>

    <!-- JavaScript 코드 작성 부분 -->
    <script>
        console.log("HTML 파일에서 JavaScript 실행하기!");
    </script>
</body>
</html>
  1. 코드 설명:
    • <h1>과 <p> 태그는 HTML의 제목과 본문 텍스트를 표시하는 부분입니다.
    • <script> 태그 안에 JavaScript 코드를 작성하여 HTML 파일에서 직접 JavaScript를 실행할 수 있습니다.
    • 이 코드가 브라우저에서 실행되면 콘솔에 "HTML 파일에서 JavaScript 실행하기!"라는 메시지가 표시됩니다.
  2. 실행 방법:
    • example.html 파일을 저장한 후, 파일을 더블 클릭하여 브라우저에서 실행합니다.
    • 브라우저의 개발자 도구(F12키)를 누릅니다.  콘솔(console) 탭을 보면 console.log 메시지가 나타날 것입니다.

 

5. 간단한 JavaScript 코드 실행

HTML 파일과 JavaScript 코드가 정상적으로 연결되었다면 간단한 계산 코드를 추가해 보겠습니다. <script> 태그 안에 다음 코드를 추가합니다.

let num1 = 10;
let num2 = 5;
console.log("덧셈 결과:", num1 + num2);

이 코드는 num1과 num2라는 변수를 선언하고, 두 값을 더한 결과를 콘솔에 출력합니다. HTML 파일을 새로고침 하면 콘솔에서 덧셈 결과를 확인할 수 있습니다.

 

 

 

6. 다음 수업을 위한 준비

오늘은 JavaScript 개발 환경을 설정하고, 브라우저 콘솔과 VS Code를 통해 HTML과 JavaScript를 연결하는 방법을 배웠습니다. 다음 시간에는 JavaScript의 기본 문법에 대해 알아보겠습니다.

 

 

감사합니다.