코딩 192

[JS-중급편-OOP] 2.배열(Array)

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

코딩/Javascript 2020.12.20

[JS-중급편-OOP] 1.객체, 타입

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

코딩/Javascript 2020.12.20

[JS-기초편] 11.콘솔 로그

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

코딩/Javascript 2020.12.19

[JS-기초편] 10.코드 위치

이번화는 잠깐 쉬어가는 편입니다. 지금까지 우리가 작성한 모든 코드는 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 2020.12.19

[JS-기초편] 9.클로저(Closures)

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

코딩/Javascript 2020.12.17

[JS-기초편] 8.변수 유효 범위(variable scope)

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

코딩/Javascript 2020.12.16

[JS-기초편] 7.타이머(Timers)

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

코딩/Javascript 2020.12.15

[JS-기초편] 6.주석 달기(comments)

우리가 작성한 코드는 브라우저를 위한 것으로 보일 수 있습니다. let xPos = -500; function boringComputerStuff() { xPos += 5; if (xPos > 1000) { xPos = -500; } } boringComputerStuff(); 곧 알게 되겠지만 그렇지 않습니다. 우리 코드에 대한 또 다른 청중이 있습니다. 그 청중은 인간으로 구성되어 있습니다. 여러분과 제가 다른 자바스크립트 개발자들과 함께 일하는 경우가 있습니다. 우리는 종종 남들의 코드를 볼 것이고 남들은 종종 우리의 코드를 볼 것입니다. 이 모든 코드를 가능한 한 효율적으로 보이게 하려면 우리가 아닌 다른 사람이 코드를 보고있을 때 코드가 뭘 의미하고 있는지 명확하게 전달해야 합니다. 솔로 작업을..

코딩/Javascript 2020.12.14

[JS-기초편] 5.반복문 (For, While, Do...While)

무언가를 코딩 할 때 작업을 반복하거나 일부 코드를 여러 번 실행해야 할 때가 있습니다. 예를 들어, 10 번 반복해서 호출하고 싶은 saySomething이라는 함수가 있다고 가정 해 보겠습니다. 한 가지 방법은 복사 및 붙여넣기를 사용하여 함수를 10번 호출하는 것입니다. saySomething(); saySomething(); saySomething(); saySomething(); saySomething(); saySomething(); saySomething(); saySomething(); saySomething(); saySomething(); 위 코드는 우리가 하려고 했던 것을 이루었지만 ... 우리는 이와 같은 방식을 택해서는 안됩니다. 결국 코드 복제는 결코 좋은 생각이 아닙니다. 이제..

코딩/Javascript 2020.12.14

[JS-기초편] 4.조건문 (If, Else, Switch)

우리는 깨어 난 순간부터 깨닫든 모르든 결정을 내리기 시작합니다. 알람을 끕니다. 불을 켜시오. 날씨가 어떤지 보기 위해 밖을 보십시오. 양치질하기. 가운과 모자를 착용하십시오. 달력을 확인하십시오. 문 밖으로 나갈 때 쯤이면 의식적으로 또는 무의식적으로 수백 가지 결정을 내렸을 것입니다. 각 결정은 결국 오늘 하게 될 일에 특정 영향을 미칩니다. 예를 들어 외부 날씨가 추워 보인다면 후드 티나 재킷을 입기로 결정할 수 있습니다. 이 결정을 다음과 같이 모델링 할 수 있습니다. 결정을 내리는 각 단계에서 참 또는 거짓으로 대답 할 수 있는 질문을 스스로에게 물어 봅니다. 이 질문에 대한 답은 다음 단계를 결정하고 궁극적으로 당신이 티셔츠, 후드 티, 재킷인지를 결정합니다. 더 광범위하게 말하면 여러분과 ..

코딩/Javascript 2020.12.14