자바스크립트는 변수 타입을 문자로 반환하는 함수인 typeof 연산자를 제공합니다. typeof 연산자는 undefined, null, boolean, number, string, symbol, object, function의 자바스크립트가 가진 7가지 변수 타입을 구분하는 용도로 사용합니다. 문법 typeof operand typeof(operand) typeof 연산자는 타입을 확인해야 하는 피연산자 앞에 위치합니다. typeof는 연산자이므로 함수처럼 괄호[()]를 사용할 필요가 없습니다. 즉 피연산자의 타입을 확인할 때는 typeof(operand)가 아니라 typeof operand를 사용하는 것이 맞습니다. typeof(operand)도 사용 가능한 문법이지만, 불필요한 괄호[()]를 넣은 사..
Javascript는 브라우저가 정의하고 사용하는 DOM(Document Object Model)을 다룰 수 있습니다. DOM을 처음 접하시거나 아직은 잘 모르겠다고 생각하시는 분은 DOM을 HTML의 구조적인 정의를 다루는 요소라고 생각하시면 됩니다. HTML과 DOM을 구체적으로 정의 내리면 다음과 같습니다. HTML은 웹 페이지의 문서 구조를 생성하는 태그 시스템이고 DOM은 HTML이 가지는 문서 구조를 다룰 수 있는 인터페이스입니다. DOM은 HTML의 구조를 계층형 트리 형태로 정의합니다. 그리고 브라우저는 HTML이 가진 구조를 Style Sheet인 CSS를 사용해 화면을 그려 사용자가 쉽게 웹 페이지를 이용할 수 있도록 합니다. DOM은 원래 XML 문서를 정의하기 위한 인터페이스였지만,..
CSS의 애니메이션을 사용해서 HTML의 blink 태그처럼 깜빡이는 효과를 만드는 방법을 알아보겠습니다. HTML의 blink 태그는 더 이상 지원을 하지 않는 방법이니 혹시라도 사용하고 계시거나 사용할 예정이라면 CSS의 애니메이션을 사용하시는 게 더 좋은 방법입니다. 커서처럼 깜빡이는 효과 만들기 - Blink Effect @keyframes blink-effect { 50% { opacity: 0; } } .blink { animation: blink-effect 1s step-end infinite; /* animation-name: blink-effect; animation-duration: 1s; animation-iteration-count:infinite; animation-timing-..
웹 페이지에서 데이터를 보여주기 위해서는 서버와 통신을 해야 합니다. 통신을 하는 일련의 과정으로는 서버에 데이터를 달라고 요청을 보내고 결과를 받아와야 하는데요. 이때 서버와 주고받는 데이터를 쉽게 다룰 수 있는 방법이 XMLHttpRequest를 사용하는 방법입니다. 웹 개발 방법 중 하나인 AJAX(Asynchronous Javascript And Xml)를 이야기할 때 사용하는 통신 객체이기도 합니다. 문법 const xhr = new XMLHttpRequest(); const method = "GET"; const url = "https://7942yongdae.tistory.com/"; // 요청을 초기화 합니다. xhr.open(method, url); // onreadystatechange..
HTML의 이벤트 중 beforeunload를 이용하면 브라우저 닫기나 새로고침을 감지할 수 있습니다. 일반적으로 화면에서 저장하지 않은 데이터가 있거나, 사용자의 실수로 인해 페이지를 나가려고 할 때 알림을 주는 용도로 사용됩니다. 예시로는 블로그에 글을 작성하다가 도중에 페이지를 나가려는 경우 사용자에게 알림 창을 보여 줄 수 있습니다. beforeunload 이벤트를 사용하면 사용자가 페이지를 떠날 때, 페이지를 떠날 것인지 여부를 묻는 대화 상자를 표시할 수 있습니다. 사용자가 확인을 누르면 페이지는 닫히며, 취소를 누르면 페이지를 떠나지 않고 현재 페이지에 머무릅니다. 문법 beforeunload 이벤트를 사용해서 사용자가 페이지를 떠나는 것을 확인하는 방법은 다음과 같습니다. window.ad..
이번에는 Javascript를 통해 디바이스를 확인하는 방법을 알아보겠습니다. 일반적으로 디바이스를 구분하기 위해서는 브라우저가 가지고 있는 navigator.userAgent를 사용합니다. 여기서 에이전트라는 의미는 사용자를 대신해서 웹 페이지를 보여주는 디바이스를 말하는데요. 바로 웹 페이지를 보실 때 사용하고 계신 도구를 말한다고 생각하시면 됩니다. PC를 이용해 웹 페이지를 보고 있다면 PC가 에이전트이고, 핸드폰을 통해 웹 페이지를 보고 계신다면 핸드폰이 에이전트가 됩니다. Navigator.userAgent 브라우저의 콘솔 기능을 이용해 navigagor.userAgent를 출력한 내용입니다. userAgent는 브라우저 이름, 브라우저 버전, 렌더링 엔진, 렌더링 엔진 버전, OS 등 현재 ..
모든 엔티티를 작게 유지한다. 이 규칙이 가지는 의미 이 말은 50줄 이상 되는 클래스와 10개 파일 이상 되는 패키지는 없어야 한다는 뜻이다. 이 규칙을 책에서는 위와 같이 설명했다. 이 말은 어느 정도 공감하지만 실제로 만들어지는 응용 소프트웨어에서도 가능한가?라고 했을 때의 답은 잘 모르겠다. 하다못해 어떤 객체에 기능이 5줄짜리인 메서드가 10개만 있어도 이 객체에는 더 이상 기능을 추가하기 어렵다. 말이 10개의 메서드이지 객체를 만들다 보면 10개의 기능은 금방 추가된다. 여기서 공감할 수 있는 부분은 객체가 가진 코드 줄의 수가 100줄만 이상만 돼도 그 객체가 무슨 행동을 하는지 파악하기가 어려운 것은 사실이다. 또한 패키지도 객체처럼 응집력이 있고 단일한 목표가 있어야 한다고 말한다. 이..
ES6에서는 let, const라는 새로운 키워드가 도입이 되었습니다. const는 한번 값이 정해지면 변경이 불가능한 값을 담을 때 사용하고, let은 동적으로 바뀌는 값을 담을 때 사용하는 변수 타입입니다. 자바스크립트의 변수에 대한 설명은 이전에 발행한 글을 확인해주세요. 오늘은 ES6이전에 주로 사용하던 var와 ES6에서 새롭게 추가된 let, const의 차이점을 통해 var, let, const에 대해 학습해보도록 하겠습니다. var, let, const의 사용법에 대한 결론을 먼저 내린다면 var의 사용을 지양해주세요. let과 const를 사용해 코드를 작성하세요. 1. var의 scope는 함수 단위이고 let, const의 scope는 블록 단위입니다. var 타입은 스코프가 함수 단..
이번에는 자바스크립트로 프로그래밍을 할 때 꼭 알아야 할 변수와 상수 그리고 리터럴에 대해 알아보도록 하겠습니다. 조금은 다른 이야기지만 프로그래밍에 있어 용어가 가지는 개념은 중요합니다. 예를 들어 변수와 리터럴과 같은 용어들이 정확히 무슨 의미를 어떻게 가지는지 잘 모른다면 개발자들끼리 소통을 할 때 사소하지만 이해 포인트가 다르거나 오해를 하능 경우가 생깁니다. 프로그래밍에서 사용되는 용어들은 자바스크립트뿐만 아니라 컴퓨터 과학 전반에서 사용하기 때문에 용어를 잘 알고 기억해둔다면 다른 언어를 가지고 프로그래밍을 할 때도 도움이 됩니다. 변수와 상수의 정의 그리고 사용법 일반적으로 변수의 정의는 값을 가지고 있고 이 값은 언제든 바뀔 수 있으며 사용할 수 있다고 설명합니다. 간단히 말해 변수란 '값..
자바스크립트에서는 문자열을 자르는 방법으로 split, substring, substr 함수를 제공합니다. 단순히 문자 값을 자르는 데에 왜 이렇게 많은 split(), substring(), substr() 함수들이 제공되고 있는 걸까요? 오늘은 split(), substring(), substr() 각 각의 함수들이 가지는 정의와 사용법에 대해 알아보도록 하겠습니다. split 정의와 사용법 str.split([separator[, limit]]) 반환 : split은 문자열을 separator를 기준으로 limit 만큼의 크기를 가진 새로운 문자 배열을 반환합니다. separator [옵션] : 구분자는 문자열을 나눌 때 기준이 되는 값으로 문자(character)이나 정규표현식을 사용할 수 있습니..
이번에는 자바스크립트를 사용해 페이지를 새로 고침 하는 방법에 대해 알아보려고 합니다. 화면 개발을 하다 보면 페이지 전체를 다시 불러와야 하거나 특정 영역을 갱신해야 하는 경우가 발생하는데 이런 경우 일반적으로는 location을 사용합니다. 특정 부분을 갱신해야 할 필요가 있다면 iframe을 사용하거나 jQuery의 load를 사용해야 하는데 이번 글에서 다루기에는 내용이 많아 이 부분까지는 다루지 않고 전체 페이지 새로 고침에 대해서만 이야기해보도록 하겠습니다. location.reload() 인터넷 자료를 찾아보면 자바스크립트를 통해 페이지를 새로 고침을 하는 방법은 일반적으로 location과 history를 사용합니다. // location을 사용하는 방법 location.reload(); ..
이번에는 Javascript의 array가 가진 filter 함수의 정의와 사용법 더불어 활용법에 대해 이야기해보려고 합니다. array의 함수 중 map, filter만큼 잘 쓰이는 함수는 아니지만 함수 결과를 체이닝 형식으로 사용하기 때문에 합산과 같은 연속적인 일들의 결과를 만들어 낼 때 자주 사용됩니다. reduce 정의 Array.prototype.reduce ( callbackfn [ , initialValue ] ) reduce는 단어 의미 그대로 해석하면 줄이다는 표현인데, 함수로 정의된 내용은 배열의 값을 하나씩 줄여가면서 모든 배열을 순회할 때까지 결과를 callbackfn에 전달합니다. 주로 그룹 지어진 데이터의 결과를 도출할 때 사용하는 편입니다. 예를 든다면 덧셈이나 곱셈 같은 합..