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..
이미지 스프라이트의 정의 스프라이트(Sprite)라는 용어는 컴퓨터 그래픽스에서 2차원의 비트맵 이미지나 애니메이션을 합성하는 기술을 말합니다. 웹 기술에서는 여러 개의 이미지를 하나의 이미지로 만들어 놓은 것을 의미합니다. 이미지 스프라이트(Image Sprite)를 사용하면 생기는 장점은 크게 2가지를 이야기할 수 있습니다. 1. 요청을 단 한번 만한다. 브라우저는 화면을 그릴 때 필요한 모든 자원(이미지, CSS, JS 등)을 서버에 요청하고 가져와 사용합니다. 서버에 요청하고 가져오는 작업은 일괄적으로 한 번에 이루어지지 않습니다. 서버에 자원을 요청하는 구문이 사용된 횟수만큼 서버에 자원을 요청합니다. // 서로 다른 아이콘 이미지 3개를 선언하고 사용하는 코드 예를 들어 위와 같은 예제는 서버..
오늘은 키보드 이벤트의 key를 알아보려고 합니다. 지금 인터넷에 올라와있는 키보드 이벤트를 설명하는 글들은 예전 사양(keycode)을 기준으로 만들어져 있어, 모처럼 새로운 사양을 기준으로 키보드 이벤트를 설명해보려고 합니다. KeyboardEvent만 가지고 설명하면 재미가 없을 것 같아 키보드 이벤트를 활용해 상, 하, 좌, 우 키보드를 누르면 움직이는 이미지를 만들어보았습니다. 생각했던 그림은 게임처럼 좌우를 누르면 자연스럽게 움직이는 그림이었는데 결과는 생각과는 달라서 슬프네요. 자연스러운 움직임을 만들려면 setInterval()을 사용하면 될 것 같기는 한데 이번에는 키보드 이벤트를 알아보기 위해 작성한 글이니 나중에 setInterval()을 통해 기능을 업데이트해보겠습니다. Keyboa..
리액트를 기반으로 개발된 프로젝트들을 보면 가끔 의미 없이 루트 요소를 를 정의한 코드들을 확인할 수 있습니다. 사용되지 않는 를 쓰는 이유는 리액트에서 정의한 render() 함수는 반환 값의 루트 요소는 하나만 정의되어야 하기 때문입니다. const Example = () => { return ( Hello World ); }; 예제 코드를 사용한 결과물은 아래와 같습니다. 실제로 사용하지는 않지만 JSX 규칙에 의해 와 같이 감싸는 요소를 정의하면 HTML의 DOM 구조에도 는 적용됩니다. Fragment를 사용하자 import React, { Fragment } from 'react'; const Example = () => { return ( Hello World ); }; 앞서 작성한 예제 코..
실무에서는 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 출력 설..
이번에는 간단한 회원가입 양식(Form) 화면을 만들어 보려고 합니다. 단순히 HTML만 사용하지 않고, UI 라이브러리인 Bootstrap도 이용해서 조금 더 유려하고, 유효성 검사까지 포함한 회원가입 폼을 만들어보겠습니다. 시작하기 회원가입 화면은 프로젝트를 시작하면 필수적으로 개발하는 화면 중에 하나 입니다. 가장 기본적인 화면이지만 입력 값의 유효성 검사부터 데이터를 서버로 전송하는 일까지 처리하기 때문에 많은 기능을 요구하는 화면 입니다. 이 글에서는 HTML의 기초적인 부분을 다루며, 서버와 통신하는 부분까지는 이야기 하지 않습니다. 화면을 개발하는 도구로는 HTML, CSS 만을 사용하며, CSS의 경우 Boostrap의 스타일을 활용합니다. Boostrap은 twitter에서 만든 UI 라..
웹 브라우저는 사용자와 상호작용이 가능한 기능들을 몇 가지 제공합니다. 오늘은 그중 대표적인 alert(), confrim(), prompt()를 알아보려고 합니다. 흔히 사용자에 알림을 표시할 때는 Modal을 사용합니다. alert(), confrim(), prompt()는 바로 그 Modal의 기본 개념을 가지고 있는 기능입니다. 이 3가지 기능은 쓰임새가 좋고 사용하기도 편리하니 한 번 알아두시면 좋습니다. 알림창을 띄우는 alert() alert() 기능은 사용자에게 메시지를 전달할 수 있는 알림창을 띄웁니다. 다른 행동을 필요로 하지 않고 오로지 사용자에게 메시지를 전달하기 위한 알림 용도로 사용됩니다. 문법 window.alert([message]); 매개변수 message(옵션) : 알림창..
jQuery를 사용하게 되면 바로 학습하게 되는 Event가 바로 $(document). ready()입니다. 왜 jQuery 배우게 되면 이 Event를 알게 되는 걸까요? 오늘은 jQuery의 대표 기능 중 하나인 $(document). ready() Event를 알아보도록 하겠습니다. 문법 .ready(handler) .ready()는 DOM(Document Object Model)이 완전히 불러와지면 실행되는 Event입니다. 일반적으로 브라우저가 HTML을 보여주기 위해서는 먼저 문서 구조를 만들고 만들어진 문서 구조 위에 디자인을 입히는 형식을 취합니다. 이 과정에서 디자인이 입혀지지 않은 상태로 문서 구조가 만들어진 시점에 실행되는 Event가 바로. ready()입니다. 대부분의 브라우저에..
자바스크립트를 통해 브라우저 창이나 탭을 닫는 방법은 간단합니다. window.close()는 함수를 호출하면 됩니다. 단 window.close() 함수를 사용할 때는 한 가지를 주의해야 합니다. 바로 스크립트나 Link를 기준으로 열린 창만 닫힌다는 부분입니다. 자 그럼 브라우저 창을 닫는 window.close()는 어떻게 써야 잘 사용할 수 있는지 알아보도록 하죠. 문법 window.close(); 웹 페이지를 닫는 방법은 window.close() 함수를 호출하면 됩니다. 하지만 window.close() 함수가 문제없이 동작하려면 window.open() 함수를 통해서 열린 웹 페이지여야 한다는 조건이 있습니다. Link를 통해 열린 웹 페이지도 window.open() 함수를 통해 열린 웹 ..
오늘은 아직은 초안(Working Draft)이지만 알아두면 좋은 가상 클래스(pseudo-class)인 :where()와 :is()에 대해서 알아볼까 합니다. :where(), :is()는 CSS Selectors Level 4에 포함된 가상 클래스입니다. :where() 반복 선택을 줄이자 article h2, article h3, article p { color: blue; } CSS Selector를 사용해 article 요소의 h2, h3, p 문자 색을 바꾸는 예제 코드입니다. 이 예제는 article 요소 선택자를 중복으로 선언해서 사용해야 하는 불편함이 있습니다. article :where(h2, h3, p) { color: blue; } 앞서 작성한 예제 코드를 :where()를 사용해서..