분류 전체보기 1222

[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

제네시스 GV80 경쟁차 비교 4탄 - 볼보 XC90

"2 세대 볼보 XC90은 넉넉한 공간과 새로운 스타일, 놀라운 안전 기술을 갖춘 환상적인 SUV입니다." XC90이 나온지 10년 반이 훨씬 넘었기 때문에 볼보가 SUV를 만들기 전의 시간은 상상하기 어렵습니다. 이제 2세대에 접어든 볼보 XC90은 도로에서 멋진 차로 대표되며 또한 센서블한 안전 기능을 제공합니다. 이전 모델보다 더 큰 최신 XC90은 아우디 Q7, BMW X5 및 랜드 로버 Discovery를 고려하는 구매자에게 딱입니다. XC90은 진정한 럭셔리와 내부 혁신을 동시에 제공하는 가족 친화적인 차입니다. 외관은 단순하지만 스타일리시합니다. '토르의 해머' 같은 독특한 LED 주행 라이트와 수직 그릴은 존재감을 뽐내고 있으며, 범퍼와 측면은 많은 라이벌의 단순한 모양을 우습게 만듭니다...

자동차 2020.12.19

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

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

코딩/Javascript 2020.12.19

제네시스 GV80 경쟁차 비교 3탄 - 아우디 Q7

"Audi Q7은 크고 강력한 파워와 환상적인 인테리어를 갖추고 있으며, 그럼에도 불구하고 놀랍도록 저렴하게 살 수 있습니다." 아우디 SUV를 오랫동안 기다려온 열성적인 매니아에게는 아우디 Q7이 단비와 같습니다. 현재는 BMW X5, 벤츠 GLE, 레인지 로버 Sport, Porsche Cayenne, Volvo XC90, 랜드 로버 Defender와 라이벌이지만 실제로는 사이즈만 볼때는 Range Rover 및 벤츠 GLS에 더 가깝습니다. 새로 나온 아우디는 기존에 큰 성공 포인트였던 크고 효율적인 7인승 인테리어를 유지했지만, 보기에도 크고 운전하기에도 부피가 크고 위협적이라는 점이 옥의 티라는 비판이 있습니다. 그러나 최신 버전은 인상적인 존재감을 잃지 않고도 이전보다 더 가늘고 민첩합니다. ..

자동차 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

제네시스 GV80 경쟁차 비교 2탄 - 벤츠 GLE

메르세데스는 1990년대 후반에 레인지 로버의 도전자로서 ML 모델을 제공하면서 SUV 사업에 진출한 최초의 프리미엄 자동차 제조업체 중 하나였습니다. 메르세데스 GLE는 오늘날 다양한 브랜드와의 경쟁에 직면하고 있으며 특히, Audi Q7, Land Rover Discovery, Volvo XC90 및 BMW X5와 치열하게 싸우고 있습니다. GLE는 더 이상 직접적인 라이벌로서 Range Rover와 대결하지 않으며 그 역할은 더 큰 메르세데스 GLS의 일입니다. 그러나 Range Rover Sport는 Porsche Cayenne과 마찬가지로 Mercedes GLE Range처럼 빠른 모델에서 경쟁 중입니다. GLE는 성능이 부족한 것은 아닙니다. 4 개의 디젤 (그중 하나는 플러그인 하이브리드)과..

자동차 2020.12.17

[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