WEB/JavaScript

[JavaScript] 자바스크립트를 배워보자 - JavaScript란 무엇인가?

Dunhill6mg 2025. 3. 12. 11:16
반응형

웹 개발을 공부하기 위해 JavaScript에 대해 공부하기로 했다.
 

 
생활코딩 웹페이지를 통해 대충은 어떻게 사용하는지 한번은 살펴보았지만, 한번 살펴본다고 다 알 수가 있는 것이 아니기에 다시 한번 공부하면서 기록을 남겨보고자 한다.
 
아래의 JavaScript에 대한 정의는 챗GPT를 통해 JavaScript에 대해 알려달라고 해서 얻은 내용들이다.
이해하고 있는 내용도 이해 못하는 내용도 있지만, 앞으로 공부해나가면서 차근차근 배워볼 생각이다.
 
기록 남기기가 끊기지를 않길 바라며 JavaScript가 무엇인지에 대해 알아보자.
 

JavaScript란 무엇인가?

자바스크립트(JS)는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나다.
HTML, CSS와 함께 웹을 구성하는 3대 요소 중 하나이며,
웹 브라우저에서 동적인 기능을 구현하는 데 필수적인 언어이다.

 

1. JavaScript의 정의

   - 프로그래밍 언어의 한 종류
   - 객체 기반 (Object-Oriented) 언어
   - 동적(Dynamic) 타입 언어
   - 브라우저에서 동작하는 인터프리터 언어
   - 웹의 동적 기능(이벤트 처리, DOM 조작, AJAX 요청 등)을 담당
 

2. JavaScript의 역사

   - 1995년 넷스케이프의 브렌던 아이크가 개발
   - 원래 이름은 LiveScript였지만, Java의 인기에 편승하기 위해 JavaScript로 이름 변경
   - 이후 표준화 단체(ECMA)에서 **ECMAScript(ES)**로 표준화
 

3. JavaScript의 주요 특징

  • 인터프리터 언어
    • 코드가 작성되면 브라우저에서 곧바로 실행됨 -> 컴파일 과정이 필요 없음
    • 따라서 수정 후 바로 결과 확인 가능

 

  • 동적 타입(Dynamic Typing)
    • 변수 선언 시 타입 지정이 필요 없음 -> 런타임에 타입이 결정됨
let a = 10; // 숫자형
a = "Hello"; // 문자열형 → 문제없이 동작

 

  • 객체 기반(Object-Oriented)
    • 모든 값이 객체처럼 동작 가능
    • 객체, 함수, 배열 등을 자유롭게 정의하고 사용할 수 있음
let person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

person.greet(); // Hello, John

 

  • 이벤트 기반(Asynchronous)
    • 특정 이벤트(클릭, 입력 등)가 발생했을 때 반응하도록 프로그래밍 가능
    • 비동기 처리 및 콜백 함수 사용 가능
document.querySelector('button').addEventListener('click', function() {
  console.log('Button clicked!');
});

 

  • 프로토타입 기반 상속
    • 자바스크립트는 클래스 기반이 아닌 프로토타입 기반 상속 사용
    • 모든 객체는 프로토타입을 상속받아 동작
let animal = {
  speak() {
    console.log('Animal speaking');
  }
};

let dog = Object.create(animal);
dog.speak(); // Animal speaking

 

4. JavaScript의 주요 기능

  • DOM 조작
    • HTML 문서를 자바스크립트로 조작 가능
document.querySelector('h1').innerText = 'Hello, JavaScript!';

 

  • 이벤트 처리
    • 사용자의 입력이나 상호작용에 반응 가능
document.querySelector('button').addEventListener('click', () => {
  alert('Button clicked!');
});

 

  • 비동기 처리 (Async)
    • 비동기 처리로 네트워크 요청이나 파일 로딩 등을 효율적으로 처리 가능
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data));

 

  • JSON 데이터 처리
    • JavaScript Object Notation (JSON) 형식으로 데이터를 주고 받음
const jsonData = '{"name": "John", "age": 30}';
const obj = JSON.parse(jsonData);
console.log(obj.name); // John

 

  • 모듈 시스템
    • 코드의 재사용성과 유지보수성을 높이는 ES6의 모듈 시스템 사용가능
// person.js
export const person = {
  name: 'John',
  age: 30
};

// main.js
import { person } from './person.js';
console.log(person.name); // John

 
 

5. JavaScript의 실행 환경

   - 실행 환경에 따라 2가지로 분류된다.

  • 브라우저 환경
    • 크롬, 사파리, 파이어폭스 등 브라우저에서 동작
    • 브라우저에서 DOM 조작, 이벤트 처리, AJAX 등 수행
  • Node.js 환경
    • Node.js는 자바스크립트 실행 엔진인 V8 엔진 기반
    • 서버 사이드 프로그래밍, 파일 시스템 접근, 네트워크 통신 가능
const http = require('http');

http.createServer((req, res) => {
  res.write('Hello, World!');
  res.end();
}).listen(3000);

 

6. JavaScript의 주요 문법

  • 변수 선언
// var → 함수 범위
var x = 10;

// let → 블록 범위
let y = 20;

// const → 블록 범위, 재할당 불가
const z = 30;

 

  • 함수 정의
// 일반 함수
function sum(a, b) {
  return a + b;
}

// 화살표 함수
const sum = (a, b) => a + b;

 

  • 클래스
class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

const person = new Person('John');
person.greet(); // Hello, John

 

  • 비동기 처리 (async/await)
async function fetchData() {
  let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  let data = await response.json();
  console.log(data);
}

fetchData();

 

  • 최신 JavaScript(ES6+) 추가 기능
    • let / const (블록 스코프 변수)
    • 화살표 함수 (=>)
    • 템플릿 리터럴
    • 클래스 및 모듈 시스템
    • Promise 및 async/await
    • 스프레드 연산자 (...)
    • 객체 및 배열 구조 분해

 

8. JavaScript의 활용 분야

  • 웹 프론트엔드 -> DOM 조작, 이벤트 처리, 사용자 인터페이스
  • 웹 백엔드 -> Node.js 기반 서버 개발
  • 모바일 앱 -> React Native, lonic 등
  • 게임 개발 -> Phaser.js, Three.js 등
  • 머신러닝 -> TensorFlow.js

 

결론

  • JavaScript는 웹 개발의 핵심 언어
  • 최신 JavaScript(ES6+)는 성능과 생산성이 매우 향상됨
  • 프론트엔드, 백엔드, 모바일, 데스크탑, 머신러닝까지 활용 가능

 

 
여기까지가 챗GPT가 나에게 JavaScript에 대해 가르쳐준 내용이다.
서두에 언급한 것처럼 내용 중에는 아는 내용도 있지만, 모르는 내용도 많다.
지금 당장은 몰라도 공부를 해나가다보면 모든 내용을 이해할 수 있는 그날이 올 것이라 생각한다.
앞으로 힘내서 JavaScript에 익숙해져보도록 하자.
 
 
* 마지막으로 챗GPT가 남긴 말

  • JavaScript는 현대 프로그래밍에서 필수적인 언어다
  • JavaScript에 익숙해지면 React, Node.js까지 자연스럽게 확장 가능하다

내가 원하는 바다.
 
끝

반응형