화면을 개발할 때 자주 나오는 구성 요소 중 하나가 바로 모달(Modal) 창입니다. 팝업(Popup) 창과 약간 혼동해서 쓰는 경향이 있기는 한데 Modal과 Popup는 개념이 다릅니다. 팝업(Popup)은 현재 화면에 다른 화면을 하나의 창(Browser)으로 보여주는 기능이고, 모달(Modal)은 화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리할 수 있게 만드는 기능입니다. 모달은 Winform에서 말하는 Dialog와 같은 개념이기도 합니다. 오늘은 자바스크립트를 사용해서 모달 창을 만드는 방법을 알아보도록 하겠습니다. 자바스크립트로 모달(Modal) 만들기 Modal Modal 띄우기 먼저 CSS를 사용해서 Modal이 되는 대상의 position을 absoulte로 설정하고, ..
자바스크립트에서 제공하는 기본 자료 구조(Struct) 중에 가장 많이 쓰이고 잘 사용하면 좋은 녀석은 배열(Array)입니다. 배열의 기능 중 꼭 알아야 할 몇 가지 기능이 있는데, 바로 map(), filter(), reduce()입니다. 이미 이전에 map(), filter(), reduce()의 정의와 활용 방법에 대해 글을 올렸지만, 다시 한번 더 정리해보려고 합니다. 자바스크립트의 발전이 있기 이전에 배열을 잘 사용하기 위해서는 lodash, underscore와 같은 라이브러리를 사용했습니다. map(), filter(), reduce()와 같은 기능을 포함해 자료 구조를 편리하게 사용하는 기능들을 제공해주었기 때문입니다. 지금의 모던한 자바스크립트는 인기 있는 여러 가지의 라이브러리의 장점..
call by value와 call by reference는 프로그래밍을 배우게 되면 꼭 알아야 하는 필수 개념 중 하나입니다. 만약 call by value, call by reference 개념을 잘 이해하지 않고 코드를 작성하면, 의도하지 않은 곳에서 생각지 못한 오류를 만날 확률이 높아집니다. 코드는 논리를 기반으로 동작하기 때문에 정확한 논리가 없다면 의도하지 않은 결과를 내놓기 때문입니다. 처음 프로그래밍을 배우신다면 call by value와 call by reference는 어려울 수 있지만 꼭 알아야 하는 부분입니다. c# 혹은 자바, 하물며 c++ 까지도 이 개념을 사용하고 있다는 점을 잊지 말아 주세요. 만약 아직 자바스크립트에서 이야기하는 변수에 대해서 잘 모르신다면 이전에 발행한 ..
함수란 무엇일까요? 일반적으로 프로그래밍에서 함수는 특정 목적을 달성하기 위해 설계된 동작 혹은 코드라고 말할 수 있습니다. 예를 들어 안녕하세요 라는 메시지를 출력하는 프로그램을 만들어야 한다고 하면 이렇게 작성해 볼 수 있습니다. // "안녕하세요!" 메시지를 출력하는 함수를 정의한다. function sayHello() { console.log('안녕하세요!'); } // 함수를 실행시킨다. sayHello(); 어떻게 보면 함수는 프로그래밍의 본질이라고도 말할 수 있습니다. 특히 자바스크립트에서의 함수가 가진 역할은 C#이나 Java와 같은 언어에서 예기하는 함수와는 본질적으로 다른 부분이 많습니다. 객체지향 언어들이 몇 년 전부터 함수형 프로그래밍의 패러다임을 도입하고는 있지만 프로그램 언어가 ..
자바스크립트는 자바의 Connections.shuffle()와 같은 배열의 요소를 랜덤 한 방법으로 바꾸는 기능을 제공하지 않습니다. 그렇기 때문에 자바스크립트에서는 배열의 요소를 무작위로 섞기 위해서는 기능을 구현해서 사용해야 합니다. 자바스크립트로 배열의 요소를 무작위로 섞기 자바스크립트에서 배열 요소를 무작위로 섞기 위해서는 Array.sort()와 Math.random()를 사용하면 됩니다. 그럼 예제를 통해서 정확히 어떻게 사용하는지 알아보겠습니다. function shuffle(array) { array.sort(() => Math.random() - 0.5); } const numbers = [1, 2, 3]; shuffle(numbers); shuffle라는 이름을 가진 함수는 배열(arr..
오늘은 키보드 이벤트의 key를 알아보려고 합니다. 지금 인터넷에 올라와있는 키보드 이벤트를 설명하는 글들은 예전 사양(keycode)을 기준으로 만들어져 있어, 모처럼 새로운 사양을 기준으로 키보드 이벤트를 설명해보려고 합니다. KeyboardEvent만 가지고 설명하면 재미가 없을 것 같아 키보드 이벤트를 활용해 상, 하, 좌, 우 키보드를 누르면 움직이는 이미지를 만들어보았습니다. 생각했던 그림은 게임처럼 좌우를 누르면 자연스럽게 움직이는 그림이었는데 결과는 생각과는 달라서 슬프네요. 자연스러운 움직임을 만들려면 setInterval()을 사용하면 될 것 같기는 한데 이번에는 키보드 이벤트를 알아보기 위해 작성한 글이니 나중에 setInterval()을 통해 기능을 업데이트해보겠습니다. Keyboa..
실무에서는 console.log()를 어떻게 하면 잘 사용할까요? 이전 글(console.log() 사용하는 팁)에 이어 console.log()를 활용하는 방법에 대해 더 구체적으로 알아보겠습니다. 기본 출력문 - log, info, debug, warn, error console.log('기본'); console.info('정보'); console.debug('디버그'); console.warn('경고'); console.error('에러'); console로 출력할 수 있는 출력문은 level(중요도)로 분류해서 사용할 수 있습니다. log4j처럼 말이죠. 만약 console.debug()로 출력한 내용이 나오지 않으면 콘솔에 출력 옵션을 확인해보시면 됩니다. 크롬 같은 경우 console 출력 설..
웹 브라우저는 사용자와 상호작용이 가능한 기능들을 몇 가지 제공합니다. 오늘은 그중 대표적인 alert(), confrim(), prompt()를 알아보려고 합니다. 흔히 사용자에 알림을 표시할 때는 Modal을 사용합니다. alert(), confrim(), prompt()는 바로 그 Modal의 기본 개념을 가지고 있는 기능입니다. 이 3가지 기능은 쓰임새가 좋고 사용하기도 편리하니 한 번 알아두시면 좋습니다. 알림창을 띄우는 alert() alert() 기능은 사용자에게 메시지를 전달할 수 있는 알림창을 띄웁니다. 다른 행동을 필요로 하지 않고 오로지 사용자에게 메시지를 전달하기 위한 알림 용도로 사용됩니다. 문법 window.alert([message]); 매개변수 message(옵션) : 알림창..
자바스크립트를 통해 브라우저 창이나 탭을 닫는 방법은 간단합니다. window.close()는 함수를 호출하면 됩니다. 단 window.close() 함수를 사용할 때는 한 가지를 주의해야 합니다. 바로 스크립트나 Link를 기준으로 열린 창만 닫힌다는 부분입니다. 자 그럼 브라우저 창을 닫는 window.close()는 어떻게 써야 잘 사용할 수 있는지 알아보도록 하죠. 문법 window.close(); 웹 페이지를 닫는 방법은 window.close() 함수를 호출하면 됩니다. 하지만 window.close() 함수가 문제없이 동작하려면 window.open() 함수를 통해서 열린 웹 페이지여야 한다는 조건이 있습니다. Link를 통해 열린 웹 페이지도 window.open() 함수를 통해 열린 웹 ..
자바스크립트는 변수 타입을 문자로 반환하는 함수인 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 문서를 정의하기 위한 인터페이스였지만,..
웹 페이지에서 데이터를 보여주기 위해서는 서버와 통신을 해야 합니다. 통신을 하는 일련의 과정으로는 서버에 데이터를 달라고 요청을 보내고 결과를 받아와야 하는데요. 이때 서버와 주고받는 데이터를 쉽게 다룰 수 있는 방법이 XMLHttpRequest를 사용하는 방법입니다. 웹 개발 방법 중 하나인 AJAX(Asynchronous Javascript And Xml)를 이야기할 때 사용하는 통신 객체이기도 합니다. 문법 const xhr = new XMLHttpRequest(); const method = "GET"; const url = "https://7942yongdae.tistory.com/"; // 요청을 초기화 합니다. xhr.open(method, url); // onreadystatechange..