JavaScript

JavaScript는 열리고 닫히는 메뉴, 입력값을 확인하는 폼, 새로고침 없이 바뀌는 콘텐츠처럼 웹 페이지를 인터랙티브하게 만드는 데 사용됩니다. Node.js를 통해 서버에서도 실행되며 많은 모바일 앱과 데스크톱 앱을 움직입니다. 모든 최신 브라우저는 JavaScript를 기본으로 실행합니다.

JavaScript와 Java는 이름 일부만 같을 뿐 완전히 다른 프로그래밍 언어입니다. JavaScript는 주로 브라우저에서 실행되는 동적 타입 언어이고, Java는 정적 타입 언어로 Java 가상 머신용 바이트코드로 컴파일됩니다. 이름이 비슷한 것은 1990년대의 마케팅 결정 때문입니다.

DOM(Document Object Model)은 브라우저가 HTML 페이지를 바탕으로 만든 객체 트리로, JavaScript가 이를 통해 페이지를 읽고 바꿀 수 있습니다. DOM을 이용하면 요소를 찾고, 텍스트를 바꾸고, 클래스를 추가하고, 새 요소를 만들 수 있습니다. 스크립트가 페이지에 일으키는 눈에 보이는 변화는 모두 DOM을 거칩니다.

HTML 페이지에는 script 태그로 JavaScript를 추가하며, 태그 안에 코드를 직접 쓰거나 src 속성으로 별도의 JavaScript 파일을 가리킬 수 있습니다. script 태그를 body 끝에 두거나 defer 속성을 붙이면 HTML이 먼저 로드됩니다. 별도 파일로 분리한 JavaScript는 캐시하기도, 관리하기도 더 쉽습니다.

JavaScript에서 let과 const는 블록 범위를 가지며, var는 함수 범위를 가지고 다시 선언할 수도 있습니다. const 변수는 다시 할당할 수 없지만, const에 담긴 객체의 내부 값은 여전히 바뀔 수 있습니다. 최신 JavaScript에서는 기본적으로 const를 쓰고, 값이 바뀌어야 할 때만 let을 쓰며, var는 피합니다.

JavaScript의 이벤트는 클릭, 키 입력, 폼 제출, 페이지 로드 완료처럼 무언가가 일어났을 때 브라우저가 보내는 신호입니다. 스크립트는 addEventListener로 리스너 함수를 연결해 이벤트에 반응합니다. 이벤트 리스너 덕분에 JavaScript가 사용자의 행동에 페이지가 반응하도록 만들 수 있습니다.

JavaScript의 이벤트 위임은 자식 요소마다 리스너를 하나씩 다는 대신 부모 요소에 이벤트 리스너 하나만 다는 방식입니다. 리스너는 이벤트 대상(target)을 확인해 어떤 자식이 클릭되었는지 알아냅니다. 이벤트 위임은 메모리를 덜 쓰고, 나중에 페이지에 추가된 요소에도 그대로 작동합니다.

JavaScript에서는 fetch 함수로 API에 데이터를 요청한 뒤, 응답의 json 메서드로 본문을 읽습니다. fetch 함수는 프로미스를 반환하므로 보통 async와 await로 결과를 기다립니다. 응답 상태를 확인하고 오류를 잡아 두면 네트워크에 문제가 생겨도 페이지가 계속 작동합니다.

JavaScript의 프로미스는 네트워크 요청 결과처럼 나중에 준비될 값을 나타내는 객체입니다. 프로미스는 대기(pending), 이행(fulfilled), 거부(rejected) 중 하나의 상태를 가집니다. 코드는 then과 catch, 또는 async와 await로 그 결과에 반응합니다.

async와 await는 JavaScript 코드가 프로미스를 기다리는 과정을 평범한 순서대로의 코드처럼 읽히게 해 줍니다. async가 붙은 함수는 항상 프로미스를 반환하고, await는 프로미스가 끝날 때까지 그 함수를 잠시 멈춥니다. async 함수 안의 오류는 일반적인 try와 catch 블록으로 처리합니다.

ES6는 ECMAScript 2015라고도 하며, 2015년에 나온 JavaScript 언어 표준의 대규모 업데이트입니다. ES6에서 let과 const, 화살표 함수, 클래스, 템플릿 리터럴, 구조 분해 할당, 모듈, 프로미스가 추가되었습니다. 모든 최신 브라우저가 ES6를 지원하며, 그 이후로도 매년 새로운 기능이 추가되고 있습니다.

JavaScript의 화살표 함수는 => 문법을 사용해 함수를 더 짧게 쓰는 방법입니다. 화살표 함수에는 자기만의 this가 없어서 this가 바깥 코드의 값을 그대로 유지합니다. map이나 filter에 넘기는 콜백처럼 짧은 콜백에 많이 쓰입니다.

JSON(JavaScript Object Notation)은 데이터를 키와 값으로 저장하고 주고받기 위한 텍스트 형식입니다. JavaScript는 JSON.stringify로 객체를 JSON 텍스트로 바꾸고, JSON.parse로 JSON 텍스트를 다시 객체로 바꿉니다. 대부분의 웹 API는 데이터를 JSON으로 주고받습니다.

JavaScript는 브라우저와 텍스트 편집기만 있으면 되기 때문에 초보자가 시작하기 쉬운 언어입니다. 비동기 코드, 스코프, 언어를 둘러싼 다양한 도구처럼 어려운 부분은 조금 뒤에 나옵니다. 꾸준히 연습하면 대부분의 학습자가 몇 주 안에 쓸모 있는 인터랙티브 페이지를 만듭니다.

네, React나 Vue보다 순수 JavaScript를 먼저 배우면 어느 프레임워크든 훨씬 쉽게 이해할 수 있습니다. 두 프레임워크 모두 함수, 배열, 객체, 모듈, 프로미스 같은 JavaScript 핵심 기능 위에 만들어져 있습니다. 기초를 아는 개발자는 프레임워크 코드에서 문제가 생겨도 추측하지 않고 직접 디버깅할 수 있습니다.

TypeScript는 JavaScript에 정적 타입을 더한 언어로, Microsoft가 개발했으며 일반 JavaScript로 컴파일됩니다. 타입 덕분에 코드 편집기가 코드를 실행하기 전에 많은 실수를 잡아 줍니다. 여러 개발자가 같은 코드를 함께 다루는 대규모 프로젝트에서 특히 인기가 높습니다.

JavaScript를 덜 보내고, 스크립트를 defer나 async로 로드하고, 큰 번들을 나눠 각 페이지가 필요한 것만 불러오게 하면 페이지가 더 빨리 로드됩니다. 파일을 압축(minify)하고 전송 압축을 쓰면 다운로드 크기가 줄어듭니다. 무거운 작업을 메인 스레드에서 떼어 내면 클릭과 입력에 대한 반응도 빠르게 유지됩니다.

JavaScript에서 ===는 값과 타입을 모두 비교하고, ==는 비교하기 전에 타입을 변환합니다. 예를 들어 0 == "0"은 true이지만 0 === "0"은 false입니다. ===를 쓰면 예상치 못한 결과를 피할 수 있어 최신 JavaScript 코드에서는 이것이 일반적인 규칙입니다.

JavaScript 모듈은 함수나 값을 내보내고(export) 필요한 것을 다른 파일에서 가져오는(import) 독립된 파일입니다. 모듈을 쓰면 코드가 정리되고 전역 변수를 피할 수 있어 대규모 프로젝트를 관리하기 쉬워집니다. 브라우저는 type 속성을 module로 지정한 script 태그로 모듈을 불러옵니다.

브라우저에서는 F12를 누르거나 페이지를 마우스 오른쪽 버튼으로 클릭해 검사를 선택하면 열리는 개발자 도구로 JavaScript를 디버깅합니다. Console 패널은 오류와 출력한 값을 보여 주고, Sources 패널에서는 중단점을 설정해 코드를 한 줄씩 실행해 볼 수 있습니다. Network 패널은 페이지가 보내는 모든 요청과 각각의 응답을 보여 줍니다.

이벤트 루프는 단일 스레드인 JavaScript가 멈추지 않고 여러 작업을 처리할 수 있게 해 주는 구조입니다. 타이머나 네트워크 요청처럼 느린 작업은 백그라운드에서 기다리고, 콜 스택이 비면 이벤트 루프가 완료된 콜백을 하나씩 실행합니다. 오래 실행되는 코드는 여전히 이벤트 루프를 막기 때문에 무거운 반복문이 있으면 페이지가 반응하지 않게 됩니다.

네, JavaScript는 Node.js, Deno, Bun 같은 런타임을 통해 서버에서도 실행됩니다. 서버 측 JavaScript로 API를 만들고, 파일을 읽고, 데이터베이스에 연결할 수 있습니다. 브라우저와 서버에서 같은 언어를 쓰면 팀이 코드와 기술을 함께 나눌 수 있습니다.

신뢰할 수 없는 텍스트를 innerHTML로 페이지에 넣지 않고, 모든 입력값을 서버에서 다시 검증하고, 비밀 정보를 프론트엔드 코드에 두지 않으면 JavaScript 코드를 안전하게 유지할 수 있습니다. API 키를 포함해 브라우저로 보낸 것은 무엇이든 사용자가 읽을 수 있습니다. 콘텐츠 보안 정책(CSP)과 최신 상태의 의존성 패키지는 흔한 공격을 많이 막아 줍니다.

JavaScript에서 localStorage는 데이터를 브라우저에만 보관하고, 쿠키는 요청할 때마다 서버로 전송됩니다. localStorage는 더 많은 데이터를 담을 수 있어 선택한 테마 같은 설정을 저장하기에 알맞습니다. 로그인 세션은 스크립트가 읽을 수 없는 HttpOnly와 Secure 속성의 쿠키에 두는 것이 더 안전합니다.

작은 함수, 명확한 이름, 모듈, 일관된 코드 형식, 그리고 ESLint 같은 린터를 사용하면 유지보수하기 좋은 JavaScript 코드를 작성할 수 있습니다. 전역 변수를 피하고, DOM을 바꾸는 코드와 데이터를 처리하는 코드를 분리하세요. 자동화된 테스트가 있으면 나중에 코드를 고쳐도 안심할 수 있습니다.