JavaScript intro - 온더테크

Contents

1. 자바스크립트 소개

자바스크립트(JavaScript)는 웹 페이지를 동적으로 만들어주는 스크립팅 언어입니다. 자바스크립트는 주로 웹 브라우저에서 클라이언트 측 스크립트로 실행되지만, 서버 측에서도 Node.js와 같은 환경에서 실행할 수 있습니다. HTML과 CSS와 함께 웹 개발의 핵심 기술 중 하나로 간주됩니다.

1.1 자바스크립트의 주요 특징

동적 타이핑(Dynamic Typing): 변수의 타입을 명시하지 않고 값에 따라 타입이 결정됩니다.
인터프리터 언어(Interpreter Language): 코드가 실행 시점에 한 줄씩 해석되고 실행됩니다.
프로토타입 기반 객체지향 프로그래밍: 클래스 기반 객체지향 언어와 달리 프로토타입을 통해 상속과 객체 생성을 수행합니다.
이벤트 기반 프로그래밍: 사용자의 동작이나 기타 이벤트에 반응하는 코드를 작성할 수 있습니다.
비동기 처리(Asynchronous Processing): 콜백, 프로미스, async/await 등을 통해 비동기 작업을 처리할 수 있습니다.

2. 개발 환경 설정

자바스크립트를 사용하기 위해 필요한 개발 환경을 설정하는 방법을 알아보겠습니다.

2.1 텍스트 에디터/통합 개발 환경(IDE)

자바스크립트를 작성하려면 텍스트 에디터나 통합 개발 환경(IDE)이 필요합니다. 다음은 인기 있는 몇 가지 텍스트 에디터와 IDE입니다.

Visual Studio Code (VSCode): 강력한 확장 기능과 디버깅 도구를 제공하는 무료 IDE입니다.
Sublime Text: 빠르고 가벼운 텍스트 에디터로, 다양한 플러그인을 통해 기능을 확장할 수 있습니다.
Atom: GitHub에서 만든 오픈 소스 텍스트 에디터로, 커스터마이징이 용이합니다.
WebStorm: JetBrains에서 제공하는 강력한 JavaScript 개발을 지원하는 IDE입니다(유료).

2.2 웹 브라우저

자바스크립트는 주로 웹 브라우저에서 실행됩니다. 주요 브라우저는 다음과 같습니다.

Google Chrome
Mozilla Firefox
Microsoft Edge
Safari

이들 브라우저는 모두 자바스크립트를 실행할 수 있으며, 개발자 도구를 통해 디버깅과 성능 분석을 지원합니다.

2.3 Node.js

Node.js는 자바스크립트를 서버 측에서 실행할 수 있게 해주는 런타임 환경입니다. 다음은 Node.js를 설치하는 방법입니다.

Node.js 공식 웹사이트에서 최신 LTS(Long Term Support) 버전을 다운로드합니다.
다운로드한 설치 파일을 실행하여 설치를 완료합니다.
설치가 완료되면 명령 프롬프트나 터미널을 열고 다음 명령어를 입력하여 설치된 Node.js와 npm(Node Package Manager)의 버전을 확인합니다.

node -v
npm -v

2.4 기본 HTML 파일 생성

자바스크립트를 실행하기 위한 기본 HTML 파일을 생성합니다. 다음은 간단한 HTML 파일 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Example</title>
</head>
<body>
  <h1>Hello, JavaScript!</h1>
  <script src="script.js"></script>
</body>
</html>

위의 HTML 파일은 index.html로 저장하고, 자바스크립트 코드는 script.js 파일에 작성하여 HTML 파일에서 불러옵니다.

2.5 기본 자바스크립트 파일 생성

script.js 파일을 생성하고 다음과 같이 간단한 자바스크립트 코드를 작성합니다.

document.addEventListener('DOMContentLoaded', (event) => {
  console.log('Hello, JavaScript!');
  alert('Hello, JavaScript!');
});

이제 index.html 파일을 웹 브라우저에서 열면 “Hello, JavaScript!” 메시지가 콘솔에 출력되고 알림 창이 나타납니다.

이제 자바스크립트를 작성하고 실행할 수 있는 기본적인 개발 환경이 설정되었습니다. 다음 단계로 자바스크립트의 문법과 구조를 학습해 나가면 됩니다.

Post Views: 123