JavaScript란 무엇인가

docs.scrimba.com

웹 페이지를 열고 메뉴를 여는 버튼을 클릭하거나, 입력하면서 결과를 제안하는 검색 상자에 입력하거나, 스크롤할 때 피드가 더 많은 게시물을 로드하는 것을 본 적이 있나요? 이것은 HTML도 아니고 CSS도 아닙니다. 이것은 JavaScript입니다. 브라우저 내에서 실행되며 페이지가 당신의 행동에 반응하도록 만드는 언어입니다. 이 장은 그 언어가 무엇인지, 어디서 실행되는지, 그리고 이미 알고 있는 HTML과 CSS와 어떻게 맞춰지는지에 관한 것입니다.

페이지를 동작하게 만드는 언어

JavaScript는 **프로그래밍 언어**입니다. 컴퓨터가 단계별로 실행하는 지시사항을 작성하는 방식입니다. HTML이 페이지에 무엇이 있는지를 설명하고 CSS가 어떻게 보이는지를 설명한다면, JavaScript는 무엇이 일어나는지를 설명합니다. 그것은 반응하는 부분입니다.

웹 페이지를 집이라고 생각해 보세요. HTML은 구조, 즉 벽과 방입니다. CSS는 페인트와 가구입니다. JavaScript는 전기와 배관입니다. 스위치가 불을 켜거나 수도꼭지가 물을 나오게 하는 배선입니다. 누군가 페이지와 상호작용할 때 페이지가 뭔가를 하도록 만드는 것입니다.

JavaScript는 웹 페이지의 행동 계층입니다. HTML은 구조를 제공하고 CSS는 표현을 제공합니다. JavaScript는 논리와 상호작용을 추가합니다. 페이지가 로드된 후에 페이지를 읽고 변경하며, 클릭 및 키 누름 같은 이벤트에 응답하고, 상태를 추적하며, 새로운 데이터를 로드하기 위해 서버와 통신할 수 있습니다.

HTML과 CSS와 달리 결과를 설명하지만, JavaScript는 완전한 프로그래밍 언어입니다. 변수, 조건, 반복문, 함수를 가지고 있습니다. 원하는 것을 선언하는 것뿐만 아니라 브라우저가 실행하는 단계를 작성하는 것입니다. 이것이 이 핸드북이 다루는 변화입니다. 페이지를 설명하는 것에서 페이지를 프로그래밍하는 것으로의 변화입니다.

JavaScript는 고급, 동적 타입 프로그래밍 언어입니다 (값은 타입을 가지지만, 변수는 하나의 타입에 고정되지 않으므로 이름이 지금은 숫자를 보유하고 나중에 문자열을 보유할 수 있습니다). 브라우저에서는 행동 계층입니다. DOM (Document Object Model, 브라우저가 HTML에서 빌드하는 메모리 내 트리)을 이벤트에 응답하여 조작하고, 상태를 관리하며, 네트워크 요청을 수행합니다.

유지할 가치가 있는 틀은 HTML과 CSS는 선언적이고 JavaScript는 명령형이며 튜링 완전하다는 것입니다. 당신은 원하는 결과뿐만 아니라 계산을 표현합니다. 이 힘이 전체 웹의 상호작용을 담당하는 이유이며, 논리가 페이지에 들어오는 순간 HTML과 CSS가 거의 필요하지 않은 규칙인 명명, 구조, 오류 처리가 당신의 책임이 되는 이유이기도 합니다. 이 핸드북의 대부분은 당신만 읽을 수 있는 혼란을 만들지 않으면서 그 힘을 행사하는 것에 관한 것입니다.

// HTML은 당신에게 버튼을 제공합니다. JavaScript는 그것이 뭔가를 하도록 만듭니다.
const button = document.querySelector(".menu-toggle");
button.addEventListener("click", openMenu);

당신은 나중의 장에서 그것의 모든 부분을 만날 것입니다. 지금은 형태를 주목하세요. JavaScript는 페이지로 도달하고 (document.querySelector), 사용자가 하는 것에 응답합니다 (addEventListener). 도달하고 응답하는 것이 브라우저 JavaScript가 하는 대부분의 것입니다.

Juno페이지를 동작하게 만드는 언어 HTML은 구조, CSS는 스타일, JavaScript는 행동입니다. 누군가 페이지를 사용할 때 반응하는 부분입니다. 이것은 실제 프로그래밍 언어이므로 브라우저가 따르는 단계별 지시사항을 작성합니다. 이것이 당신이 시작하는 변화입니다. 페이지를 설명하는 것에서 그것이 무엇을 할지 말하는 것으로의 변화입니다.

Juno페이지를 동작하게 만드는 언어 JavaScript는 행동 계층입니다. 페이지를 읽고 변경하며, 이벤트에 응답하고, 서버와 통신합니다. HTML과 CSS와 달리 논리와 상태를 가진 완전한 언어이므로 페이지를 선언하지 않고 프로그래밍합니다. 그 작업을 당신의 머릿속에서 명확하게 유지하면 다른 두 개를 더 쉽게 배치할 수 있습니다.

Juno페이지를 동작하게 만드는 언어 JavaScript는 명령형이고 튜링 완전하므로, 전체 웹의 상호작용을 담당하며, 논리가 나타나는 순간 구조가 당신의 작업이 됩니다. 그것은 동적으로 타입되므로 이름이 어떤 타입이든 보유할 수 있고 타입 검사는 런타임에 발생합니다. 여기의 대부분의 기술은 당신만 읽을 수 있는 코드를 쓰지 않으면서 그 힘을 행사하는 것입니다.

JavaScript가 실행되는 곳

JavaScript는 브라우저 내에서 실행됩니다. Chrome, Safari, Firefox 등 모든 브라우저에는 당신의 JavaScript를 읽고 실행하는 내장 **엔진**이 있습니다. 이는 시작하기 위해 설치할 것이 없다는 의미입니다. 웹 페이지를 열 수 있다면 JavaScript를 실행할 수 있습니다.

<script> 태그를 사용하여 페이지에 JavaScript를 추가합니다. 보통 닫는 </body> 태그 바로 앞에 추가합니다. 코드를 자신의 파일에 유지하려면 이미지 태그가 이미지를 가리키는 방식과 같은 방식으로 파일 이름을 지정하는 src 속성으로 태그를 가리킵니다.

코드 라인을 시도할 가장 빠른 장소는 브라우저 콘솔입니다. 개발자 도구의 패널에서 JavaScript를 입력하고 결과를 바로 볼 수 있습니다.

JavaScript는 **런타임**에서 실행됩니다. 코드를 실행하는 엔진과 그 코드가 사용할 수 있는 추가 기능을 제공하는 환경입니다. 브라우저에서 런타임은 페이지의 document, 브라우저 탭의 window, 네트워크 요청의 fetch 등을 제공합니다. 언어 자체는 작습니다. 브라우저에서 사용하는 대부분은 주변의 런타임에서 옵니다. <script> 태그와 src 속성으로 외부 스크립트를 로드하고 defer를 추가하면 브라우저가 스크립트를 실행하기 전에 페이지 빌드를 마치므로 "요소를 찾을 수 없음" 버그 종류를 피할 수 있습니다. 개발자 도구의 콘솔은 입력할 수 있는 라이브 런타임이며, 당신이 아이디어를 가장 빠르게 테스트할 수 있는 곳입니다.

JavaScript는 언어 명세 (ECMAScript)로 정의되고 V8 (Chrome, Node) 또는 JavaScriptCore (Safari) 같은 엔진에 의해 실행됩니다. 엔진은 이야기의 절반일 뿐입니다. 유용한 기능은 **호스트 환경**인 엔진을 포함하고 API를 노출하는 런타임에서 옵니다. 브라우저에서 그 호스트는 페이지이고 DOM, 타이머, fetch, 저장소, 이벤트를 제공합니다. Node 같은 서버 런타임에서는 운영체제이고 파일과 소켓을 대신 제공합니다.

두 가지 실제 결과가 있습니다. 첫째, 같은 언어가 매우 다른 곳에서 실행되므로 "이것은 JavaScript인가 또는 브라우저 기능인가"는 실제 구분입니다. Array와 Promise는 언어이지만 document와 localStorage는 브라우저입니다. 둘째, 스크립트가 로드되는 방식이 행동에 영향을 줍니다. 클래식 <script>는 구문 분석을 차단하고, defer는 DOM이 빌드된 후 순서대로 실행하며, type="module"은 기본적으로 지연되고 import/export와 자체 범위를 제공합니다. 어떤 것을 사용하고 있는지 알면 "왜 이것이 페이지가 존재하기 전에 실행되었나"라는 혼란을 많이 설명합니다.

JunoJavaScript가 실행되는 곳 JavaScript는 브라우저에서 실행되며, 이미 실행할 엔진이 있으므로 설치할 것이 없습니다. <script> 태그를 사용하여 페이지에 추가하고, 코드 라인을 시도할 가장 빠른 장소는 브라우저의 개발자 도구에 있는 콘솔입니다. 열고 뭔가 입력하세요. 어떤 것도 깨뜨릴 수 없습니다.

JunoJavaScript가 실행되는 곳 브라우저는 런타임을 제공합니다. 엔진과 document, fetch 같은 추가 기능입니다. <script src>로 코드를 로드하고 페이지가 빌드된 후 실행되도록 defer를 추가하세요. 콘솔은 아이디어를 테스트하기 위한 라이브 런타임이며, 당신이 얻을 가장 빠른 피드백입니다.

JunoJavaScript가 실행되는 곳 엔진은 언어를 실행합니다 (ECMAScript). 호스트 환경은 API를 공급합니다. 이것이 Array는 JavaScript이지만 document는 브라우저인 이유입니다. 스크립트가 로드되는 방식도 중요합니다. 클래식 스크립트는 구문 분석을 차단하고, defer는 DOM이 순서대로 후에 실행되고, type="module"은 지연되고 import 범위를 추가합니다. 그 구분은 대부분의 "그것이 페이지가 존재하기 전에 실행되었다"는 버그를 설명합니다.

JavaScript에 대한 첫 번째 살펴보기

여기 작은 프로그램이 있습니다. 아직 모든 부분을 이해할 필요는 없습니다. 다음 장에서 각각을 다룹니다. 하지만 당신은 이미 그것의 형태를 읽을 수 있습니다.

let name = "민준";
console.log("안녕 " + name); // 안녕 민준

첫 번째 라인은 텍스트 "민준"을 이름 name 아래에 저장합니다. 두 번째 라인은 콘솔에 메시지를 인쇄합니다. "안녕 "과 저장된 이름을 함께 결합합니다. console.log는 배우면서 JavaScript에 값을 보여달라고 요청하는 방법입니다. 당신은 이것을 끊임없이 사용할 것입니다.

작지만 완전한 첫 번째 프로그램입니다.

let name = "민준";
let greeting = "안녕 " + name;
console.log(greeting); // 안녕 민준

세 가지 아이디어가 이미 여기에 있습니다. 값을 보유하는 변수, 값을 결합하는 표현식 ("안녕 " + name), 그리고 결과에 대해 뭔가를 하는 문 (console.log). JavaScript의 거의 모든 것은 이 세 가지가 쌓여있습니다. 일부 값에 이름을 지정하고, 그들과 함께 계산하고, 결과에 대해 행동합니다. console.log는 콘솔에 인쇄하고, 당신의 코드가 실제로 무엇을 하고 있는지 보는 기본 도구입니다.

가장 작은 유용한 프로그램도 여전히 언어의 핵심 루프를 보여줍니다.

const name = "민준";
const greeting = `안녕 ${name}`;
console.log(greeting); // 안녕 민준

작동하는 개발자가 무의식적으로 여기서 하는 선택들에 주목하세요. 바인딩이 절대 변경되지 않으므로 let보다 const (의도를 신호하고 우발적인 재할당을 방지함), 그리고 + 연결보다는 템플릿 리터럴 (백틱 문자열에 ${...}). 더 깔끔하게 읽히고 타입을 더 예측 가능하게 처리하기 때문입니다. 이것 중 어떤 것도 라인을 실행하는 데 필요하지는 않습니다. 정확히 이것이 요점입니다. JavaScript는 느슨한 버전을 행복하게 수용합니다. 따라서 코드의 품질은 언어가 강제하지 않는 결정에서 나옵니다. 이 핸드북은 다음의 변수로 시작하여 이 결정에 많은 시간을 할애합니다.

JunoJavaScript에 대한 첫 번째 살펴보기 프로그램은 대부분 이것입니다. 일부 값을 저장하고, 그들을 결합하고, 결과에 대해 뭔가를 하세요. console.log는 값을 인쇄하므로 당신은 그것을 볼 수 있습니다. 그리고 그것은 학습하는 동안 당신의 가장 친한 친구입니다. 아직 세부사항을 걱정하지 마세요. 당신은 다음 장에서 각 부분을 올바르게 만날 것입니다.

JunoJavaScript에 대한 첫 번째 살펴보기 JavaScript의 대부분은 이 세 가지가 쌓여있습니다. 값을 보유하는 변수, 그들을 결합하는 표현식, 그리고 결과에 대해 행동하는 문. 어떤 스니펫에서든 이 세 가지를 인식하면 낯선 코드가 훨씬 덜 위협적입니다. console.log를 가까이에 두세요. 그것은 당신의 코드가 정말로 무엇을 하고 있는지 확인하는 방법입니다.

JunoJavaScript에 대한 첫 번째 살펴보기 언어는 느슨한 버전과 신중한 버전을 똑같이 실행합니다. 따라서 품질은 언어가 절대 강제하지 않는 선택에서 옵니다. 바인딩이 고정되었을 때 let보다 const, 가독성을 위해 +보다는 템플릿 리터럴. 그 자유는 JavaScript의 축복과 함정입니다. 다음 장은 주로 변수로 시작하는 이 호출을 잘하는 것에 관한 것입니다.

"모던 JavaScript"의 의미

사람들이 **모던 JavaScript**에 대해 얘기하는 것을 들을 것입니다. JavaScript는 1995년 이후로 있었고 매년 새로운 기능을 얻습니다. 하지만 오래된 코드는 계속 작동하므로, 언어는 지난 몇 년에 같은 것을 하는 여러 가지 다른 방법을 만들었습니다.

좋은 소식입니다. 당신은 역사를 필요로 하지 않습니다. 이 핸드북은 각 것을 작성하는 현재의 권장 방법을 가르칩니다. 당신이 var를 사용하여 변수를 만드는 오래된 튜토리얼을 본다면, 그것은 오래된 스타일입니다. 당신은 대신 개발자가 오늘 사용하는 let과 const를 배울 것입니다.

"모던 JavaScript"는 보통 큰 2015년 업데이트 (ES2015, 또는 ES6) 이후 언어와 그 이후의 연간 추가를 의미합니다. 그 업데이트는 let과 const, 화살표 함수, 템플릿 리터럴 등을 추가했으며, 이것이 모든 현재 브라우저가 지원하는 기준입니다.

당신이 두 시대의 코드를 만날 것이기 때문에 중요합니다. 더 오래된 자료는 var, 어디서나 function 표현식, 그리고 문자열 연결을 사용합니다. 현재 코드는 const/let, 화살표 함수, 템플릿 리터럴을 사용합니다. 이 핸드북은 모던 스타일을 전체적으로 가르치고 더 오래된 형식을 이름 지을 뿐입니다. 당신은 그들을 야생에서 인식하기 위해. 어떤 것도 빌드 도구나 설정이 필요하지 않습니다. 그것은 그대로 브라우저에서 실행됩니다.

JavaScript는 ECMAScript로 표준화되고, ES2015 이후로 명세는 매년 배송됩니다 (ES2016, ES2017 등). 각각 작고 역호환되는 기능 세트를 추가합니다. "모던 JavaScript"는 그 진화한 언어에 대해 쓰는 것의 약자입니다. const/let, 화살표 함수, 템플릿 리터럴, 구조 분해, 모듈, async/await. 2015년 이전의 관용구보다는요.

이것이 실제로 단순하게 유지되는 이유는 JavaScript의 거의 절대적인 역호환성 약속입니다. 새로운 구문이 추가되고, 오래된 구문은 거의 깨지지 않습니다. 따라서 십년 된 스크립트도 여전히 실행됩니다. 이것이 당신이 모던 형식만 배우고 안전하게 var와 그 시대를 오래된 코드를 유지하기 위한 읽기 전용 지식으로 취급할 수 있는 이유입니다. 과거가 침입하는 한 곳은 누군가 다른 사람의 오래된 코드베이스를 읽을 때이고, 이 핸드북은 이 오래된 형식을 이름 지을 때마다 깃발을 꽂으므로 그들이 당신을 놀라게 하지 않습니다. 다음 장, 변수, 정확히 거기서 시작합니다. 모던한 방식으로 이름을 지정하고 값을 저장합니다.

Juno모던 JavaScript의 의미 JavaScript는 오래되었고 오래된 코드를 계속 작동하므로, 일부 것을 하는 몇 가지 방법이 있습니다. 당신은 역사를 필요로 하지 않습니다. 이 핸드북은 각 번 현재의 권장 방법을 가르칩니다. 튜토리얼이 var를 사용하면, 그것은 오래된 스타일이고, 당신은 let과 const를 배울 것입니다.

Juno모던 JavaScript의 의미 모던 JavaScript는 2015년 업데이트 이후 언어를 의미합니다. const와 let, 화살표 함수, 템플릿 리터럴. 당신은 var와 연결을 사용하는 오래된 코드를 만날 것입니다. 따라서 이 핸드북은 모던 스타일을 가르치고 더 오래된 형식을 이름 지을 뿐입니다. 그것은 모두 빌드 단계 없이 브라우저에서 실행됩니다.

Juno모던 JavaScript의 의미 ECMAScript는 매년 배송되고 역호환성을 유지하므로, 새로운 구문이 추가되고 오래된 구문은 거의 깨지지 않습니다. 이것이 당신이 모던 형식만 배우고 var와 그 시대를 오래된 코드베이스를 위한 읽기 전용 지식으로 취급할 수 있는 이유입니다. 진화한 언어에 대해 쓰세요. 핸드북이 레거시 형식을 나타나는 때마다 표시하게 하세요.

JavaScript가 여기서 어디로 가는가

JavaScript는 큰 언어이지만, 작게 시작합니다. 값, 그들을 위한 이름, 그리고 그들을 결합하고 행동하는 방법. 이것들이 클릭하면, 이 핸드북의 나머지는 바깥쪽으로 빌드됩니다. 결정을 하고 작업을 반복하고, 코드를 함수로 구성하고, 컬렉션을 배열과 객체에 보유하고, 그 다음 페이지 자체로 DOM으로 도달하여 사람들이 실제로 사용할 수 있는 것을 빌드합니다.

다음 장, 변수, 실제 작업이 시작되는 곳입니다. 값을 저장하는 방법, let과 const 사이의 차이, 그리고 전체 나머지 언어가 구축되는 작은 규칙 세트.