JavaScript 소개

Juno

JavaScript 핸드북에 오신 걸 환영합니다! 저는 주노이고, 이 과목을 가르치는 걸 정말 좋아합니다. HTML이 페이지에 구조를 주고 CSS가 모양을 준다면, JavaScript는 페이지가 실제로 뭔가를 하게 만드는 역할을 합니다. 클릭에 반응하고, 페이지를 갱신하고, 새로운 데이터를 가져오는 것들이죠.

가장 첫 줄의 코드부터 시작해서, 한 번에 하나씩 천천히 쌓아 올려 갈 거예요. 아무런 경험도 필요 없고, 여기서는 너무 기초적이라서 물어보면 안 되는 질문 같은 건 없습니다.

편한 속도로 진행하면서 함께 도착해봅시다!

Juno

JavaScript 핸드북에 오신 걸 환영합니다. 저는 에이스이고, 실용적인 걸 좋아합니다. 여기서부터 웹은 정적인 존재를 벗어나 사람들에게 반응하기 시작합니다. 그래서 우리도 직접 손을 움직입니다. 개념을 읽고, 직접 해보고, 그걸로 무언가를 만들어 보는 식으로요.

JavaScript는 웹 개발자로서 가장 많은 시간을 쓰게 될 언어이니, 어떤 메서드가 무엇을 하는지 아는 것뿐 아니라 이 언어가 실제로 어떻게 동작하는지 감을 잡아두는 게 그만큼 값어치가 있습니다.

Juno

JavaScript 핸드북에 오신 걸 환영합니다. 저는 솔이고, JavaScript를 오래 써오면서 이 언어의 웬만한 함정들에는 다 한 번씩 데어본 사람입니다. 이 문서는 어떤 문법이 동작하는지가 아니라, 언어가 실제로 어떻게 동작하는지를 알고 싶은 사람들을 위한 것입니다.

타입 강제 변환 규칙, 비동기 모델, 그리고 대부분의 튜토리얼이 건너뛰는 브라우저의 세부 사항들을 다룰 예정입니다. JavaScript는 버그를 감춰버릴 정도로 관대한 언어이고, 그저 동작하는 코드와 실제로 버텨내는 코드 사이의 그 간극이야말로 진짜 작업이 이루어지는 곳입니다. 꼼꼼히 읽고, 저를 포함해서 모든 걸 의심해 보세요.

이 핸드북은 웹 프로그래밍을 배우려는 모든 사람을 위한 것입니다. JavaScript는 모든 브라우저에서 실행되는 언어이고, 정적인 페이지를 반응하는 무언가로 바꿔주는 것이 바로 이 언어입니다. 버튼을 클릭하면 반응하고, 폼을 보내기 전에 검사하고, 새로고침 없이 페이지의 일부를 갱신하고, 서버에서 새로운 데이터를 가져옵니다. HTML은 페이지에 무엇이 있는지를 말하고 CSS는 그것이 어떻게 보이는지를 말하며, JavaScript는 그것이 무엇을 하는지를 말합니다. 앞으로 계속 나올 두 용어에 대해 짚고 넘어가겠습니다. **값(value)**은 숫자 42나 텍스트 "hello"처럼 하나의 데이터 조각을 말하고, **변수(variable)**는 나중에 다시 쓸 수 있도록 값에 붙이는 이름입니다. 이 핸드북의 모든 개념은 깊이와 예시를 갖춰 온전히 풀어서 설명되며, 필요할 때 빠르게 답을 찾아볼 수 있도록 되어 있습니다.

시작하는 데 사전 코딩 경험은 전혀 필요하지 않습니다. HTML을 조금이라도 다뤄봤다면 그것만으로 충분하고, 나머지는 필요할 때마다 하나씩 소개됩니다. JavaScript는 대부분의 웹 개발자가 처음으로 실제 프로그래밍을 배우게 되는 언어입니다. 브라우저가 직접 실행하는 유일한 언어이기 때문이죠.

이 핸드북은 기초부터 차근차근 쌓아 올라갑니다. 값을 저장하고 바꾸는 방법, 조건을 판단하고 작업을 반복하는 방법, 코드를 함수로 정리하는 방법, 배열과 객체에 데이터 모음을 담는 방법을 배우고, 그다음 웹 페이지에 접근해서 읽고 바꾸는 방법, 사용자의 행동에 반응하는 방법, 페이지를 새로고침하지 않고 데이터를 불러오는 방법을 배웁니다. 각 개념은 그 자체로는 작지만, 쌓이고 나면 실제로 무언가를 해내는 페이지가 됩니다.

여기서 취하는 방식은 무엇을 입력해야 하는지만이 아니라, JavaScript의 각 부분이 무엇을 하고 왜 그렇게 동작하는지를 설명하는 것입니다. 코드 조각을 복사해서 한 번 실행해 보는 건 누구나 할 수 있습니다. 그것과 6개월 뒤에도 읽을 수 있고, 믿을 수 있고, 고칠 수 있는 코드를 쓰는 것 사이의 거리는, 언어가 실행될 때 실제로 무엇을 하는지 이해하고 있느냐로 좌우됩니다. 그 이해력이야말로 어떤 프로젝트보다 오래 남는 것입니다.

이 핸드북이 다루는 범위가 어디까지인지 짚어 두겠습니다. JavaScript는 방대한 언어이고, 어떤 단일 문서도 그 전체를 다룰 수는 없습니다. 여기서 배우게 될 것은 기초입니다. 첫 스크립트부터 실제 애플리케이션까지, 거의 모든 JavaScript 코드에서 손을 뻗게 되는 핵심 부분이죠. 서버에서 데이터를 불러오는 부분까지 다루는데, 많은 입문 과정이 여기서 끝납니다. 그 너머에는 바로 이 기초 위에 세워진 도구와 라이브러리들, 즉 React 같은 프레임워크, Node로 브라우저 밖에서 JavaScript를 실행하는 것, TypeScript로 타입을 추가하는 것 등이 있습니다. 기초를 단단히 다져두면 그다음 오르는 길은 훨씬 짧아집니다.

JunoJavaScript는 브라우저에서 바로 실행됩니다 JavaScript를 배울 때 좋은 점 하나: 이미 설치되어 있다는 겁니다. 모든 브라우저가 실행할 수 있으니 따로 설정할 게 없습니다. 코드 한 줄을 쓰고, 페이지를 새로고침하고, 무슨 일이 일어나는지 보면 됩니다. 이 빠른 순환 덕분에 직접 이것저것 시도해 보면서 배우기에 가장 친절한 언어 중 하나입니다.

JunoJavaScript는 브라우저에서 바로 실행됩니다 JavaScript는 브라우저에 이미 딸려 있으니, 피드백 순환이 최대한 짧습니다. 작성하고, 새로고침하고, 관찰하고, 콘솔로 값을 실시간으로 건드려 볼 수 있죠. 이 점을 최대한 활용하세요. 이 핸드북의 모든 내용은 읽기만 하는 게 아니라 직접 실행해보라고 있는 것이고, 브라우저 개발자 도구에서 가장 많은 걸 배우게 될 겁니다.

JunoJavaScript는 브라우저에서 바로 실행됩니다 브라우저는 여러분의 런타임이자 실험실입니다. 콘솔은 표현식을 즉시 평가하고, 디버거는 실행을 멈춰 세우고, 네트워크 패널은 모든 요청을 보여줍니다. 첫날부터 이것들을 쓰세요. 어떤 값이 어떻게 동작하는지 글로 읽는 것과, 무언가가 예상을 벗어나는 순간 콘솔에서 직접 지켜보는 것은 전혀 다릅니다. 후자가 그 동작 원리를 몸에 붙게 만듭니다.

가이드를 소개합니다

이 핸드북에는 세 명의 가이드가 있고, 누가 안내할지는 여러분이 고를 수 있습니다. 내용 자체는 모두 같고, 가이드에 따라 설명하는 어투가 달라지며, 내용이 달라지는 페이지에서는 각 섹션을 얼마나 깊이 다루는지도 달라집니다.

가이드는 어느 페이지에서든 상단의 선택 메뉴로 언제든 바꿀 수 있고, 우측 하단의 환경설정을 열면 가이드, 언어, 글자 크기를 바꿀 수 있습니다.

준비가 됐다면 이제 본격적으로 핸드북을 시작해봅시다. 다음 장인 JavaScript란 무엇인가에서는 JavaScript가 정확히 무엇인지, 어디서 실행되는지, 그리고 여러분이 이미 알고 있는 HTML, CSS와 어떻게 어우러지는지를 다룹니다.

만들면서 배우는 걸 선호하시나요?Scrimba의 무료 9시간 JavaScript 강의에서는 승객 수 계산기, 블랙잭 게임, 크롬 확장 프로그램, 모바일 앱을 만들며 곳곳에 인터랙티브 과제가 함께합니다.→