드리프트의 코-자-경

오늘은 프리미티브와 객체 간의 관계가 특히 빌트인 타입을 다룰 때 왜 복잡한 지 알아보겠습니다. 이전 문자열 튜토리얼과 객체 및 타입 튜토리얼에서 약간 이상한 점을 느꼈을 겁니다. 프리미티브는 매우 단순하다고 여러 번 언급했습니다. 객체(Objects)와는 달리 조작할 수 있는 속성이 없습니다. 그러나 아래 코드에서 보듯이 프리미티브는 약간의 이상함을 가지고 있는거 같습니다. let greeting = "Hello, everyone!"; let shouting = greeting.toUpperCase(); //toUpperCase 함수는 무엇이고 어디서 왔나요? 이 간단한 코드에서 알 수 있듯이 텍스트 형식으로 기본 값을 저장하는 greeting 변수는 toUpperCase 메서드에 액세스 할 수 있는 ..

이번 시간에는 자바스크립트에서 문자열과 변수를 결합하는 테크닉에 대해 알아보겠습니다. 자바스크립트로 작업하면서 만든 변수에 스트링 리터럴(정적 스트링)을 결합하여 우리가 원하는 문자열을 만들어 보겠습니다. 이렇게 만든 문자열로 우리는 콘솔에 출력도 할 수 있고, 객체에 대한 작업 및 복잡한 CSS 속성 값을 만들거나, 다른 중요한 작업도 할 수 있습니다. 다음 섹션에서는 문자열과 변수를 결합하기 위해 JavaScript에서 사용할 수있는 가장 좋은 두 가지 접근 방식을 살펴 보겠습니다. 사전 준비 작업 두 가지 접근 방식을 강조하기 위해 예를 들어 보겠습니다. 이 예에서는 sayGreeting이라는 함수를 사용할 것입니다. 세 개의 인수 (인사말 인수, 인사말 대상 인수, 이모티콘 표시 인수)가 필요합니..

인간으로서 살아가면서 가장 중요한 게 아마 말, 글 아닐까요? 말과 글이 없다면 의사소통이 전혀 되지 않아 그것을 생각하면 아마 원시시대를 떠올리게 됩니다. 그래서 문득 떠오를 수 있는건 컴퓨터 세계, 더 나아가 자바스크립트 세계에서도 중요한건 말이겠죠? 오늘 주제는 그 말, 즉 문자열에 대해 좀 더 깊숙히 공부해 볼 예정입니다. 기초 말과 글을 이용해 작업할려면 단순히 코드에서 문자열을 사용하면 됩니다. 다음은 몇 가지 예입니다. let text = "this is some text"; let moreText = 'I am in single quotes!'; alert("this is some more text"); 문자열을 나열하는 것 외에도 종종 두 개의 문자열을 함께 결합할 수 있습니다. + 연산..

종이에 목록을 적고 있다고 가정해 봅시다. 식료품들이라고 부릅시다. 이제 종이에 0으로 시작하는 번호 목록과 원하는 식료품들 이름을 작성합니다. 위 그림처럼 단순히 사물의 목록을 작성한 건데, 사실 위 그림이 배열의 실제 사례가 됩니다. 식료품이라는 종이가 당신의 배열이 될 것입니다. 구입해야 하는 식료품 항목을 배열 값이라고 합니다. 이 튜토리얼에서는 식료품 쇼핑을 통해 자바스크립트에서 가장 일반적인 빌트인 타입인 배열(Array)에 대해 알아보겠습니다. 배열 만들기 배열을 만드는 가장 쉬운 방법은 브래킷을 사용하는 것입니다. 다음은 빈 배열로 초기화된 groceries 변수입니다. var groceries = []; 왼쪽에는 변수 이름이 있고 오른쪽에는 이 변수를 빈 배열로 초기화하는 한 쌍의 브래킷..

자바스크립트 강좌 초급 편에 비해 중급 편에서는 조금은 진지해질 필요가 있습니다. 지난 몇 번의 강좌에서 우리는 모든 종류의 값을 다루었습니다. 문자열 (텍스트), 숫자, 부울 (일명 true 및 false), 함수(function) 및 JavaScript의 빌트인 등이 있었습니다. 다음은 우리의 기억을 되살리는 몇 가지 예입니다. let someText = "hello, world!"; let count = 50; let isActive = true; 다른 언어와는 달리 JavaScript는 빌트인 기능을 사용하는 것이 정말 쉽습니다. 그걸 사용하기 위해 미리 생각하거나 계획할 필요조차 없습니다. 다양한 종류의 빌트인 기능을 사용하는 것이 얼마나 간단한 지에도 불구하고 우리에게는 숨겨진 많은 세부 사항..

코드를 작성할 때 종종 두 가지 상황 중 하나에 처하게 됩니다. 한 가지 상황은 방금 작성한 코드가 실행될지 안될지 궁금한 경우이고 다른 상황은 코드가 실행되는 건 알겠는데 올바르게 되고 있는지 궁금한 경우입니다. 이 두 가지 상황에서 필요한 것은 코드가 실행되는 결과에 대한 가시성입니다. 이러한 가시성을 제공하는 가장 기초적인 방법은 지금까지 예제에 봐왔던 "alert"함수를 쓰는 겁니다. let myButton = document.querySelector("#myButton"); myButton.addEventListener("click", doSomething, false); function doSomething(e) { alert("Is this working?"); // 가장 기초적이며 원시적인..

이번화는 잠깐 쉬어가는 편입니다. 지금까지 우리가 작성한 모든 코드는 HTML 문서에 포함되어 있었습니다. Are you ready for this? Are you ready for seeing the most amazing dialog you will have ever seen? 동일한 문서에 HTML, CSS, JS를 다 위치시키는 구조가 적합한지 알아 봅시다. 문서 구조에 대한 이해를 돕기 위해 코드를 좀 더 멋지게 바꿔 보겠습니다. JavaScript로부터 HTML 문서를 보호하는 것은 스크립트 태그 뿐입니다. 근데, 자바 스크립트가 HTML 문서 안에 있을 필요가 없습니다. 다른 방법이 있습니다. 이 방법은 JavaScript를 별도의 파일에 저장하는 방법입니다. 이 방법은 위 그림에서처럼 HT..

지금 쯤이면 함수와 함수의 기능에 대해 많이 알고 계실 거라고 생각합니다. JavaScript의 함수 관련에서 가장 중요한 부분은 아마 클로저라고 생각합니다. 클로저는 함수(function)와 변수 유효 범위(variable scope)가 교차하는 교집합이라고 볼 수 있습니다. 이제는 클로저에 대해 말로만 할게 아니라 이제는 코드를 보면서 설명하겠습니다. 클로저가 무엇인지 설명하기 위해 여기서 더 얘기한들 더 혼란스러울 뿐입니다. 다음 섹션에서는 익숙한 영역에서 시작해서 클로저랑 관계있는 좀더 어려운 영역으로 진행하면서 설명해 보겠습니다. 함수 내 함수 첫 번째로 할 일은 함수 내에 함수가 있고 내부 함수가 반환될 때 어떤 일이 발생하는지 자세히 살펴 보는 것입니다. 일단 먼저 함수의 역할을 다시 한번 ..

변수와 관련된 것을 다시 살펴보겠습니다. 우리가 선언하는 변수에는 실제로 언제 사용할 수 있는지 결정하는 어떤 레벨의 가시성이 있습니다. 사람이 이해할 수 있는 뜻으로 바꿔 말하면 우리가 변수를 선언한다고 해서 코드의 아무 곳에서나 액세스 할 수 있다는 의미는 아닙니다. 우리가 이해해야 할 몇 가지 기본 사항이 있으며, 이는 변수 유효 범위(variable scope)라는 주제에 속합니다. 이번 튜토리얼에서는 이미 기존에 본 적이 있는 사례를 살펴봄으로써 변수 유효 범위(variable scope)를 설명 할 것입니다. 변수 유효 범위는 매우 어려운 내용이지만, 일단 여기서는 수박 겉핧기 식으로 간단히 살펴볼 예정입니다. Global Scope (전역) 글로벌 스코프(global scope)를 먼저 알아..

기본적으로 코드는 동기적으로 실행됩니다. 동기적이라는 뜻은 명령문을 실행해야 할 때 즉시 실행한다는 뜻입니다. 실행을 지연시키거나 작업을 나중으로 지연시키는 개념은 JavaScript의 기본 동작이 아니며 자바스크립트 루프 편 공부할 때 잠깐 겪었을 겁니다. 루프는 각 사이클을 지연 없이 번개처럼 빠른 속도로 실행합니다. 이는 빠른 계산에 적합하지만 우리가 어떤 경우 좀 더 느린 속도로 무언가를 업데이트하려는 경우에는 좋지 않습니다. 즉시 실행되고 있는 작업을 중지 할 수 있는 기능이 존재하지 않는다는 것은 아닙니다. 그에 해당하는 기능은 setTimeout, setInterval 그리고 requestAnimationFrame의 세 가지가 있습니다. 이 기능에 대해 좀 더 알아봅시다. setTimeout..