jQuery의 강점 중 하나는 확장성이다.

기본 기능 외에도 다양한 기능을 플러그인 형태로 추가할 수 있다.

1. 제이쿼리 플러그인

플러그인은 jQuery 기능을 확장해주는 외부 라이브러리다.

• 슬라이드
• 달력
• 모달
• 애니메이션
• 쿠키 관리

등을 쉽게 구현할 수 있다.

플러그인은 jQuery 문법 체계를 그대로 따른다.

$("#slider").bxSlider();

2. 제이쿼리 UI 플러그인

1) 제이쿼리 UI 플러그인이란?

jQuery UI는 UI 관련 기능을 제공하는 공식 플러그인 모음이다.

① CDN 연동

<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

② 주요 기능

• Draggable(드래그)
• Droppable(드롭)
• Datepicker(달력)
• Dialog(팝업창)
• Accordion(아코디언)
• Tabs(탭)

ex.

$("#date").datepicker();

3. bxSlider 플러그인

bxSlider는 이미지 슬라이드 구현 플러그인이다.

• 배너 슬라이드
• 자동 재생
• 좌우 이동
• 반응형 지원

기본 사용

<link rel="stylesheet" href="jquery.bxslider.css">
<script src="jquery.bxslider.min.js"></script>

$(function() {
  $(".slider").bxSlider({
    auto: true,
    pause: 3000,
    speed: 500
  });
});

옵션 예시

4. jQuery-cookie 플러그인

쿠키를 쉽게 관리하기 위한 플러그인이다.

1) 쿠키 저장

$.cookie("username", "John", { expires: 7 });

2) 쿠키 읽기

$.cookie("username");

3) 쿠키 삭제

$.removeCookie("username");

5. 플러그인 직접 제작하기

jQuery는 직접 플러그인을 제작할 수 있다.

1) $.fn.extend() 메서드

$.fn은 jQuery의 프로토타입 객체다.

여기에 메서드를 추가하면 플러그인이 된다.,

① 기본 구조

$.fn.extend({
  highlight: function(color) {
    return this.css("background", color);
  }
});

사용

$(".box").highlight("yellow");

② 내부 동작 원리

• this → 선택된 요소 집합
• return this → 메서드 체이닝 가능

③ 체이닝 유지 예시

$.fn.extend({
  borderRed: function() {
    this.css("border", "2px solid red");
    return this;
  }
});

$(".box").borderRed().fadeOut();

웹 페이지는 새로고침 없이 서버와 데이터를 주고받을 수 있다.

이 방식이 바로 AJAX다.

1. AJAX

1) AJAX란?

AJAX(Asynchronous JavaScript And XML)는 페이지를 새로고침하지 않고 서버와 데이터를 주고 받는 기술이다.

기존 방식

• 요청 → 전체 페이지 새로고침 → 응답

AJAX 방식

• 요청 → 데이터만 응답 → 화면 일부만 변경

즉, 비동기 통신 방식이다.

2. AJAX 관련 메서드

jQuery는 AJAX를 간단하게 사용할 수 있는 메서드를 제공한다.

1) AJAX 관련 메서드들

① $.ajax()

가장 기본이 되는 메서드

$.ajax({
  url: "data.json",
  type: "GET",
  dataType: "json",
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.log("에러 발생");
  }
});

옵션 설명

② $.get()

$.get("data.json", function(data) {
  console.log(data);
});

GET 요청 전용

③ $.post()

$.post("server.php", { name: "John" }, function(data) {
  console.log(data);
});

POST 요청 전용

④ $.getJSON()

$.getJSON("data.json", function(data) {
  console.log(data);
});

JSON 데이터 전용

3. AJAX로 JSON 데이터 바인딩하기

JSON은 가장 많이 사용하는 데이터 형식이다.

[
  {"name": "Tom", "age": 20},
  {"name": "Jane", "age": 25}
]

바인딩 예시

$.getJSON("data.json", function(data) {
  let output = "";

  $.each(data, function(index, item) {
    output += "<p>" + item.name + " - " + item.age + "</p>";
  });

  $("#result").html(output);
});

• $.each() → 반복 처리
• html() → 화면 출력

4. AJAX로 XML 데이터 바인딩하기

XML도 지원 가능하다.

<people>
  <person>
    <name>Tom</name>
    <age>20</age>
  </person>
</people>

XML 바인딩 예시

$.ajax({
  url: "data.xml",
  dataType: "xml",
  success: function(data) {
    $(data).find("person").each(function() {
      let name = $(this).find("name").text();
      let age = $(this).find("age").text();
      $("#result").append("<p>" + name + " - " + age + "</p>");
    });
  }
});

5. 자바스크립트의 보안 정책과 외부 데이터 바인딩

브라우저에는 Same-Origin-Policy(동일 출처 정책)가 있다.

즉,

• 다른 도메인
• 다른 포트
• 다른 프로토콜

에서 직접 데이터를 요청하면 차단된다.

① CORS(Cross-Origin Resource Sharing)

서버에서 허용해야 외부 요청이 가능하다.

응답 헤더에 아래 코드 명시

Access-Control-Allow-Origin: *

또는 특정 도메인 지정

② JSONP(구버전 방식)

CORS 이전에는 JSONP를 사용했다.

$.ajax({
  url: "https://example.com/data",
  dataType: "jsonp"
});

현재는 거의 사용되지 않는다.

jQuery는 요소의 표시/숨김, 이동, 크기 반경 등을 간단한 메서드로 처리할 수 있도록 지원한다.

1. 효과 및 애니메이션 메서드

1) 효과 메서드

요소를 단순히 보이거나 숨기는 기능이다.

① show() / hide()

$("#box").hide();
$("#box").show();

시간 지정 가능

$("#box").hide(1000);

② toggle()

보이기/숨기기를 전환한다.

$("#box").toggle();

③ fade 효과

$("#menu").slideToggle(500);

2) 애니메이션 메서드

① animate()

CSS 속성을 점진적으로 변경한다.

$("#box").animate({
  width: "200px",
  height: "200px",
  opacity: 0.5
}, 1000);

형식

.animate(속성, 시간, 가속도, 콜백 함수)

② 가속도 옵션

• "linear"
• "swing" (기본)

③ 콜백 함수

애니메이션 종료 후 실행된다.

$("#box").animate({left: "200px"}, 1000, function() {
  alert("완료");
});

2. 애니메이션 효과 제어 메서드

1) 애니메이션 효과 제어 메서드란?

실행 중인 애니메이션을 제어하는 기능이다.

① stop()

현재 실행 중인 애니메이션을 중지한다.

$("#box").stop();

옵션

.stop(애니메이션 큐 삭제, 현재 애니메이션 완료 여부)

ex.

.stop(true, true);

• true → 대기 중 애니메이션 제거
• true → 현재 애니메이션 즉시 완료

② delay()

애니메이션의 실행을 지연한다.

$("#box").delay(500).fadeOut();

③ finish()

대기 중인 애니메이션을 포함하여 즉시 종료한다.

$("#box").finish();

④ clearQueue()

대기열에 있는 애니메이션을 제거한다.

$("#box").clearQueue();

웹 페이지는 사용자와의 상호작용을 기반으로 동작한다.

클릭, 입력, 마우스 이동 등 이러한 동작을 이벤트(Event)라고 한다.

jQuery는 이벤트 처리를 간결하게 작성할 수 있도록 도와준다.

1. 이벤트 등록 메서드

1) 이벤트 등록 메서드란?

특정 요소에 이벤트가 발생했을 때 실행할 함수를 연결하는 것

기본 구조

$("선택자").이벤트명(function() {
  실행코드;
});

2) 이벤트 등록 방식

① 직접 등록 방식

$("#btn").click(function() {
  alert("클릭됨");
});

② on() 메서드 방식(권장)

$("#btn").on("click", function() {
  alert("클릭됨");
});

on()은

• 동적 요소 대응 가능
• 여러 이벤트 등록 가능

3) 마우스 이벤트

ex.

$(".box").mouseenter(function() {
  $(this).css("background", "red");
});

4) 이벤트 객체와 종류

이벤트가 발생하면 이벤트 객체(Event Object)가 생성된다.

$("#btn").click(function(e) {
  console.log(e.type);
});

주요 속성

5) 포커스 이벤트

입력 요소에 사용한다.

$("input").focus(function() {
  $(this).css("border", "2px solid blue");
});

6) 키보드로 마우스 이벤트 대응하기

키 입력을 통해 클릭과 같은 효과를 구현한다.

$(document).keydown(function(e) {
  if (e.key === "Enter") {
    $("#btn").click();
  }
});

7) 키보드 이벤트

$("input").keyup(function() {
  console.log($(this).val());
});

8) 이벤트가 발생한 요소 추적하기

this 또는 e.target 사용

$("li").click(function() {
  console.log($(this).text());
});

this는 이벤트가 발생한 요소를 가리킨다.

2. 그룹 이벤트 등록 및 삭제

1) 그룹 이벤트 등록 메서드

여러 이벤트를 동시에 등록

$("#btn").on("mouseenter mouseleave", function() {
  $(this).toggleClass("active");
});

또는 객체 형태

$("#btn").on({
  mouseenter: function() {
    $(this).css("color", "red");
  },
  mouseleave: function() {
    $(this).css("color", "black");
  }
});

2) 이벤트 제거 메서드

off()

$("#btn").off("click");

특정 이벤트 제거

one()

한 번만 실행된다.

$("#btn").one("click", function() {
  alert("한 번만 실행");
});

1. 제이쿼리 기본 다지기

1) 제이쿼리(jQuery)란?

jQuery는 JavaScript 라이브러리다.

DOM 조작, 이벤트 처리, 애니메이션, AJAX 등을 간결하게 작성할 수 있도록 도와준다.

📌 기존 JavaScript

document.getElementById("title").style.color = "red";

📌jQuery

$("#title").css("color", "red");

코드를 단순화하고 브라우저 호환 문제를 해결해준다.

2) 제이쿼리 라이브러리 연동하기

CDN 방식

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

로컬 파일 방식

<script src="js/jquery.min.js"></script>

기본 구조

$(document).ready(function() {
  // 실행 코드
});

또는 축약형

$(function() {
  // 실행 코드
});

DOM 로드 완료 후 실행된다.

2. 선택자

jQuery의 핵심은 선택자다.

1) 선택자란?

HTML 요소를 선택하는 방법

$("선택자")

2) 기본 선택자

ex.

$("p")
$("#header")
$(".box")

3) 직접 선택자

4) 인접 관계 선택자

$("div + p")

div 바로 다음 p 선택

3. 제이쿼리 탐색 선택자

선택한 요소를 기준으로 다시 탐색하는 기능이다.

1) 탐색 선택자

2) 위치 탐색 선택자

ex.

$("li:eq(2)")

3) jQuery 배열 관련 메서드

$("li").each(function(index) {
	console.log(index);
});

4) 속성 탐색 선택자

$("input[type = 'text']")
$("a[herf]")

5) 컨텐츠 탐색 선택자

6) 유용한 메서드

4. 객체 조작

1) 객체 조작 메서드

2) 속성 조작 메서드

$("#img").attr("src", "image.jpg");

3) 수치 조작 메서드

4) 객체 편집 메서드

$(".box").addClass("active");

1. 함수란?

함수는 특정 작업을 수행하는 코드의 묶음이다.

필요할 때 호출하여 재사용할 수 있다.

• 코드 재사용
• 가독성 향상
• 유지보수 용이

1) 기본 함수 정의문

function greet() {
	console.log("Hello");
}

호출

greet();

2) 매개 변수가 있는 함수

function add(a, b) {
	return a + b;
}

add(3, 5);

• a, b → 매개변수(Parameter)
• 3, 5 → 인수(Argument)

3) 매개 변수 없이 전달 값 받기

arguments 객체를 사용할 수 있다.

function sum() {
	console.log(arguments[0] + arguments[1]);
}

sum(2, 3);

※ ES6 이후에는 Rest Parameter 권장

function sum(...nums) {
	return nums.reduce((a, b), => a + b);
}

2. return문

• 값을 호출한 곳으로 반환
• 함수 실행 즉시 종료

function multiply(a, b) {
	return a * b;
}

강제 종료 예시

function test() {
	console.log("실행");
    return;
    console.log("이 코드는 실행되지 않음.");
}

3. 재귀 함수

함수 내부에서 자기 자신을 호출하는 구조

function factorial(n) {
	if (n === 1) return 1;
    return n * factorial(n - 1);
}

종료 조건이 반드시 필요하다.

4. 함수 스코프(Scope)

스코프(Scope)는 변수의 유효 범위를 의미한다.

1) 전역 변수

함수 외부에서 선언한다.

let globalVar = 10;

• 어디서든 접근 가능
• 남용 시 충돌 위험

2) 지역 변수

함수 내부에서 선언한다.

function test() {
	let localVar = 5;
}

• 함수 내부에서만 접근 가능

ℹ️ 전역 변수 vs. 지역 변수

3) 전역 함수 vs. 지역 함수

전역 함수

function globalFunc() {}

어디서든 호출 가능

지역 함수

function outer() {
	function inner() {
    	console.log("내부 함수");
    }
}

inner는 outer 내부에서만 사용 가능

4) 전역과 지역을 나누는 이유

• 변수 충돌 방지
• 메모리 효율 관리
• 코드 안정성 확보
• 모듈화

5. 객체 생성자 함수

객체를 여러 개 만들기 위한 템플릿 역할을 한다.

function Person(name, age) {
	this.name = name;
    this.age = age;
}

사용

let p1 = new Person("John", 30);

1) 생성자 함수의 활용

• 동일 구조 객체 반복 생성
• 인스턴스별 데이터 관리

2) 프로토타입(Prototype)

생성자 함수 내부에 메서드를 작성하면 객체마다 메서드가 새로 생성된다.

function Person(name) {
	this.name = name;
    this.sayHello = function() {
    	console.log("Hi");	
   };
}

비효율적이다.

프로토타입의 사용

Person.prototype.sayHello = function() {
	console.log("Hi");
};

• 메서드를 공유
• 메모리 절약
• 성능 향상

6. JavaScript 내장 함수

JavaScript는 기본적으로 여러 전역 함수를 제공한다.

JavaScript는 객체 기반(Object-Based) 언어다.

거의 모든 것이 객체로 구성되어 있다.

1. 객체란?

객체는 속성(Property)과 기능(Method)을 하나로 묶은 데이터 구조다.

let person = {
	name = "John",
    age = 30,
    greet : function() {
    	console.log("Hello");
    }
};

• name, age →  속성
• greet() → 메서드

객체는 현실 세계의 개념을 프로그램 안에서 표현한 구조라고 볼 수 있다.

2. 객체의 종류

JavaScript 객체는 크게 세 가지로 나뉜다.

1. 사용자 정의 객체
2. 내장 객체
3. 브라우저 객체(BOM)

3. 내장 객체(Built-in Object)

JavaScript가 기본적으로 제공하는 객체들이다.

1) 내장 객체 생성 방법

let obj1 = new Object();
let arr = new Array();
let date = new Date();

또는 리터럴 방식이 더 많이 사용된다.

let arr = [];
let obj = {};

2) 날짜 정보 객체(Date)

날짜와 시간 처리

let today = new Date();

주요 메서드

today.getFullYear();
today.getMonth();
today.getDate();
today.getDay();
today.getHours();

특징

• 월은 0부터 시작(1월 = 0)
• 요일은 0-6(일요일 = 0)

3) 수학 객체(Math)

수학 계산용 객체로, 객체 생성 없이 바로 사용한다.

Math.PI
Math.abs(-10)
Math.max(3, 5)
Math.random()
Math.floor(3.7)

4) 배열 객체(Array)

여러 데이터를 순서대로 저장한다.

let arr = [1, 2, 3];

주요 메서드

arr.push(4);
arr.pop();
arr.length;
arr.splice(1, 1);
arr.indexOf(2);

5) 문자열 객체(String)

문자열을 처리한다.

let str = "JavaScript";

주요 메서드

str.length;
str.charAt(0);
str.substring(0, 4);
str.indexOf("S");
str.toUpperCase();

4. 브라우저 객체 모델(BOM)

BOM은 브라우저를 제어하기 위한 객체 집합이다.

1) 브라우저 객체란?

웹 브라우저 자체를 객체로 다루는 구조다.

최상위 객체는 window다.

2) window 객체

모든 브라우저 객체의 최상위 객체

window.alert("Hello");

window는 생략 가능하다.

alert("Hello");

3) 일정한 간격으로 코드 실행하기

setTimeout(function()) {
	console.log("3초 후 실행");
}, 3000);

setInterval(function() {
	console.log("1초마다 실행")
}, 1000)

• setTimeout → 한 번 실행
• setInterval → 반복 실행

4) screen 객체

사용자의 화면 정보를 제공한다.

screen.width;
screen.height;
screen.availWidth;
screen.availHeight;

5) location 객체

현재 URL 정보 및 이동을 제어한다.

location.herf;
location.reload();
location.assign("onseyoo.tistory.com");

6) history 객체

브라우저 방문 기록을 제어한다.

history.back();
history.forward();
history.go(-1);

7) navigator 객체

브라우저 및 운영 체제 정보를 제공한다.

navigator.userAgent;
navigator.platform;
navigator.language;

객체(Object)

├─ 사용자 정의 객체

├─ 내장 객체 (Date, Math, Array, String 등)

└─ 브라우저 객체 (window, location, history 등)

프로그램은 기본적으로 위에서 아래로 순차 실행된다.

하지만 모든 코드가 항상 같은 흐름으로 실행되지는 않는다.

• 조건에 따라 실행을 분기하거나
• 같은 작업을 반복해야 하는 경우

이처럼 코드의 실행 흐름을 제어하는 문법을 제어문이라고 한다.

JavaScript의 제어문은 크게 다음과 같다.

1. 조건문
2. 선택문
3. 반복문

1. 조건문(if)

조건이 참(true)일 때 특정 코드를 실행한다.

1) if문

if (조건식) {
	실행문;
}

let age = 20;
if (age >= 19) {
	console.log("성인입니다.");
}

2) if - else

조건이 거짓일 경우 실행할 코드를 지정한다.

if (age >= 19) {
	console.log("성인");
} else {
	console.log("미성년자");
}

3) else if

여러 조건을 순차적으로 검사한다.

let score = 85;

if (score >= 90) {
	console.log("A");
} else if (score >= 80) {
	console.log("B");
} else {
	console.log("C");
}

위에서부터 조건을 검사하며,

처음으로 true가 되는 블록만 실행된다.

4) 중첩 if

if문 안에 또 다른 if문을 사용하는 구조

if (age >= 19) {
	if (gender === "male") {
    	console.log("성인 남성");
    }
}

중첩이 깊어질 수록 가독성이 떨어지므로 주의해야 한다.

2. 선택문(switch)

하나의 값을 여러 경우와 비교할 때 사용한다.

switch (값) {
	case 값1;
    실행문;
    break;
    
    case 값2;
    실행문;
    break;
    
    default :
    실행문;
}

let menu = 1;

switch (menu) {
	case 1;
    console.log("아메리카노");
    break;
    
    case 2;
    console.log("라떼");
    break;
    
    default :
    console.log("기타");
}

주의 사항

• break를 쓰지 않으면 아래 case로 계속 실행된다.
• 값 비교는 엄격 비교(===) 기반으로 동작한다.

3. 반복문(Loop)

같은 코드를 여러 번 실행할 때 사용한다.

1) while문

조건이 참인 동안 반복

let i = 0;

while (i < 5) {
	console.log(i);
    i++;
}

조건이 처음부터 false면 실행되지 않는다.

2) do while문

최소 한 번은 실행된다.

let i = 0;
do {
	console.log(i);
    i++;
} while (i < 5);

조건을 나중에 검사한다는 점이 다르다.

3) for문

반복 횟수가 명확할 때 사용한다.

for (초기 값; 조건식; 증감식) {
	실행문;
}

for (let i = 0; i < 5; i++) {
	console.log(i);
}

가장 많이 사용되는 반복문이다.

4) break

반복문을 즉시 종료한다.

for (let i = 0; i < 10; i++) {
	if (i === 5) break;
}

5) continue

현재 반복을 건너뛰고 다음 반복으로 이동

for (let i = 0; i < 5; i++) {
	if (i === 2) continue;
    console.log(i);
}

6) 중첩 for

for문 안에 또 다른 for문을 사용하는 구조이다.

for (let i = 0; i < 3; i++) {
	for (let j = 0; j < 3; j++) {
    	console.log(i, j);
    }
}

2차원 구조 처리, 테이블 생성 등에 사용된다.

JavaScript는 문법이 비교적 간단하지만,

동적 타입 언어이기 때문에 주의해야 할 부분이 많다.

1. 선언문

JavaScript 코드는 <script> 태그 안에서 작성한다.

<script>
	console.log("Hello JavaScript");
</script>

내부 스크립트

HTML 문서 내부에 직접 작성

<script>
 alert("Hello");
</script>

외부 스크립트 분리

유지보수를 위해 JS 파일을 따로 분리하는 것이 일반적이다.

<script src="main.js"></script>

• 보통 <body> 끝 부분에 위치
• 또는 defer 속성 사용

<script src="main.js" defer></script>

2. 주석

코드 설명을 위한 문법

//한 줄 주석
/*
여러 줄 주석
*/

3. 코드 작성 시 주의 사항

1. 대소문자 구분
2. 세미콜론(;)은 자동 삽입되지만, 명시 권장
3. 변수 선언 없이 사용 금지
4. 전역 변수 남용 금지
5. let, const 사용 권장 (var 지양)

4. 변수

JavaScript는 동적 타입 언어다.

변수 선언

var a = 10;
var b = 20;
const c = 30;

var vs. let vs. const

현대 JavaScript에서는 let, const 사용이 표준이다.

자료형

JavaScript의 기본 자료형

• Number
• String
• Boolean
• Null
• Undifined
• Object
• Symbol
• BigInt

typeof 연산자

자료형 확인

typeof 10; //number
typeof "Hello"; //string

주의 사항

let  x;
console.log(x); //undifined

• undifined : 값이 할당되지 않음
• null : 의도적으로 비어 있음

5. 연산자

연산자는 값을 계산하거나 비교하는 기호다.

1) 산술 연산자

10 % 3; //1

2) 문자 결합 연산자

+는 문자열 연결에도 사용된다.

"Hello" + "World";

3) 대입 연산자

4) 증감 연산자

let a = 5;
a++;
a--;

5) 비교 연산자

권장 : === 사용

5 == "5"; //true
5 === "5"; //false

6) 논리 연산자

7) 연산자 우선 순위

기본 우선 순위

1. 괄호()
2. 증감
3. 산술
4. 비교
5. 논리
6. 대입

가독성을 위해 괄호 사용 권장

8) 삼항 조건 연산자

조건에 따라 값을 반환

조건 ? 참일 때 : 거짓일 때;

let result = (age >= 19) ? "성인" : "미성년자";

JavaScript란 웹 브라우저에서 동작하는 프로그래밍 언어다.

현재는 브라우저를 넘어 서버(Node.js), 모바일, 데스크탑까지 확장된 범용 언어로 사용된다.

처음에는 단순한 웹 페이지 동작 제어용 스크립트 언어였지만,

지금은 프론트엔드 생태계의 중심 언어다.

1. JavaScript의 정의

JavaScript는 동적인 웹 페이지를 만들기 위한 스크립트 언어다.

• HTML → 구조
• CSS → 스타일
• JavaScript → 동작

ex.

• 버튼 클릭 이벤트 처리
• 입력 값 검증
• 화면 동적 변경
• 비동기 서버 통신(AJAX)

2. Java와의 차이

이름은 비슷하지만 완전히 다른 언어다.

JavaScript는 실행 시점에 타입이 결정되는 동적 타입 언어다.

3. 실행 방식

• Chrome → V8 엔진
• Firefox → SpiderMonkey
• Edge → Chakra

HTML 안에 직접 작성하거나, 외부 파일로 분리할 수 있다.

<script>
	console.log("Hello, World");
</script>

4. JavaScript의 특징

1) 동적 타입

let x = 10;
x = "문자열";

타입을 명시하지 않아도 된다.

2) 함수형 프로그래밍 지원

함수를 변수처럼 사용할 수 있다.

functionh add(a, b) {
	return a + b;
}

또는

const add = (a, b) => a + b;

3) 비동기 처리

JavaScript는 기본적으로 이벤트 처리 + 비동기 처리 구조다.

• setTimeout
• Promise
• async/await

4) DOM 제어

JavaScript는 HTML 요소를 직접 제어할 수 있다.

document.getElementById("title").innerText = "변경";

5. 왜 중요한가?

• 모든 웹 브라우저가 지원
• 프론트엔드 표준 언어
• React, Vue, Angular 등 프레임워크 기반
• Node.js로 서버 개발 가능

웹 개발을 한다면 반드시 다루게 되는 언어다.