프로그래밍 이야기/JavaScript 공부
-
[JavaScript] 자바스크립트 window 객체 이해하기프로그래밍 이야기/JavaScript 공부 2020. 6. 25. 00:14
많은 시간에 걸쳐 진화를 거듭하면서 다양한 사용처와 플랫폼을 지원하게 된 자바스크립트는 본래 웹 브라우저에서 사용하려고 만든 언어이다. 그래서 사실 '웹'이라는 분야에서 자바스크립트는 거의 독보적인 존재라고 할 수 있는데 자바스크립트로 웹 브라우저를 자유롭게 다루려면 DOM, BOM, 그리고 window 객체와 document 객체를 이해해야 한다. 그중에서 이번 포스팅에서는 window 객체에 대해서 좀 살펴보자. Window 객체란? window 객체는 두 가지 역할을 하는데, 1. 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 '전역 객체'라고도 부른다. 2. 일반적으로 우리가 열고 있는 브라우저의 창(browser window)을 의미하고, 이 ..
-
[JavaScript] 자바스크립트 소수점 계산 오류 가볍게 이해하기프로그래밍 이야기/JavaScript 공부 2020. 6. 23. 00:55
자바스크립트로 숫자를 조금 다루다 보면, 분명히 우리가 상식적으로 생각했을 때 너무나도 당연하고 올바른 계산식을 컴퓨터에게 맡겼는데, 흔하지 않지만 나름 흔한 확률(?)로 계산 오류가 발생하는 경험을 마주하게 된다. 대부분 피연산자들이 소수점(floating point)을 가진 경우에 발생하는데, 이번 포스트에서는 자바스크립트의 부정확한 계산 오류에 대해서 조금 정리를 해보고자 한다. 특히나, 만일 자바스크립트로 계산기를 만들고자 한다면 이 부분은 명확하게 짚고 넘어가야 될 부분이라고 할 수 있겠다. 가장 대표적인 자바스크립트 소숫점 계산 오류 아마 구글에 자바스크립트 소숫점 계산 오류라고 검색하면 굉장히 높은 확률로 0.1 + 0.2를 보게 된다. 그렇다. 0.1과 0.2를 더하면 분명히 0.3이 나와..
-
[JavaScript] 자바스크립트 Date 객체 이해하기 - 2프로그래밍 이야기/JavaScript 공부 2020. 6. 21. 22:36
[JavaScript] 자바스크립트 Date 객체 이해하기 - 1에서 살펴본 Date객체는 여러 가지 메서드를 통해서 다양하게 활용될 수 있다. Date객체 메서드 1. get메서드 Date 객체에는 get으로 시작하는 메서드가 몇 가지 있는데, 말 그대로 Date객체에서 필요한 정보를 가져오는 기능을 한다. Date 객체에서 가장 자주 사용되는 메서드들이다. const myDate = new Date(2020, 6, 22); myDate.getFullYear(); myDate.getMonth(); myDate.getDate(); myDate.getHours(); myDate.getMinutes(); myDate.getSeconds(); myDate.getMilliseconds; myDate.getDay..
-
[JavaScript] 자바스크립트 Date 객체 이해하기 - 1프로그래밍 이야기/JavaScript 공부 2020. 6. 17. 00:05
자바스크립트에서 날짜와 시간과 관련된 부분을 다룰 때는 Date 객체를 유용하게 활용할 수 있다. Date 객체 만드는 법 객체를 만드는 방법은 총 4가지가 있는데 하나씩 살펴보자. 1. 파라미터로 아무 값도 전달하지 않는 경우 // new Date() const date = new Date(); Date 객체는 new 연산자를 통해서 새로운 객체를 만들어 주어야 한다. 이렇게 Date 객체를 생성할 때, 소괄호 안에 아무런 값도 전달해주지 않으면, 현재시간으로 객체가 생성된다. 2. 파라미터로 숫자 값을 전달하는 경우 // new Date(milliseconds) const date = new Date(1000); console.log(date); // Thu Jan 01 1970 09:00:01 GM..
-
[JavaScript] 자바스크립트 this 가볍게 이해하기프로그래밍 이야기/JavaScript 공부 2020. 6. 14. 23:06
자바스크립트를 공부하다 보면 객체와 메서드를 다룬 뒤부터는 this라는 키워드가 심심찮게 등장한다. 만약 react 같은 라이브러리를 다루기 시작하면 훨씬 더 this라는 키워드를 자주 보게 되는데, 과연 this란 무엇일까? this란? 결국 이 this는 함수에서 나타나는데, this키워드를 사용하면 그 함수를 호출한 주체(객체)를 가리키게 된다. 쉽게 말해서 '누가 이 함수를 불렀느냐'가 된다. const myObject = { printThis: function() { console.log(this); } } function printThis() { console.log(this); } myObject.printThis(); // {printThis: ƒ} printThis(); // Window..
-
[JavaScript] 자바스크립트 배열 메서드 (Array Method) 가볍게 이해하기프로그래밍 이야기/JavaScript 공부 2020. 6. 13. 20:01
메서드를 활용하면 배열을 훨씬 더 자유롭게 다룰 수 있다. 배열이 기본적으로 갖추고 있는 다양한 메서드들 중에서 기본적으로 배열을 다루는 몇 가지들을 가볍게 정리해 보고자 한다. 배열의 끝 요소를 다루는 push, pop push와 pop은 배열의 끝부분을 다루는 메서드이다. push는 파라미터로 넘겨준 값을 배열 끝에 요소로 추가하고, pop은 파라미터 없이 해당 배열의 가장 끝에 있는 요소를 제거한다. const numbers = [1, 2, 3, 4, 5]; numbers.push(6); console.log(numbers); // (6) [1, 2, 3, 4, 5, 6] numbers.pop(); console.log(numbers); // (5) [1, 2, 3, 4, 5] 한 가지 독특한 점은..
-
[JavaScript] 자바스크립트 메서드 (Method) 가볍게 이해하기프로그래밍 이야기/JavaScript 공부 2020. 6. 11. 18:30
메서드(method)란? 때로는 메소드라고 불리기도 하는 메서드는 어떤 객체가 가지고 있는 어떤 동작을 말한다. 언어마다 조금씩 의미가 다르긴 하지만 자바스크립트에서는 일반적으로 객체 안에 프로퍼티로 정의된 함수를 메서드라고 부른다. 메서드 만들기 객체 안에 메서드를 만들어 보자. 메서드는 간단하게 [JavaScript] 자바스크립트 객체(Object) 이해하기 - 1에서 정리한 것 처럼 객체를 정의할 때 프로퍼티 값으로 함수를 선언하는 것으로 만들 수 있다. const bigtop = { sayHi: function() { console.log('Hi!?'); } }; 당연히 화살표 함수로도 정의할 수 있다. const bigtop = { sayHi: () => { console.log('Hi!?');..
-
[JavaScript] 자바스크립트 화살표 함수(Arrow Function) 가볍게 이해하기프로그래밍 이야기/JavaScript 공부 2020. 6. 7. 00:41
화살표 함수(Arrow Function)란? ECMA2015 이후에 등장한 화살표 함수는 기존의 방식보다 상대적으로 함수를 좀 더 간결하게 표현하는 새로운 방식이다. 이름에서도 유추할 수 있듯이 화살표 함수는 화살표 모양의 => 기호를 사용한다. 화살표 함수도 생각보다 다뤄야 할 것들이 많은데, 이번 포스트에서는 화살표 함수에 대해서 가볍게만 정리해보자. 기본 문법 화살표 함수는 함수 표현식에 사용되는데 function 키워드 대신에 화살표 모양의 기호를 소괄호 뒤에 작성한다. // 일반 함수 표현식 let myFunction = function (파라미터1, 파라미터2, ...파라미터들) { return '이것은 함수 표현식 입니다.'; } // 화살표 함수 표현식 let myArrow = (파라미터1..