함수란 무엇일까요? 일반적으로 프로그래밍에서 함수는 특정 목적을 달성하기 위해 설계된 동작 혹은 코드라고 말할 수 있습니다. 예를 들어 안녕하세요 라는 메시지를 출력하는 프로그램을 만들어야 한다고 하면 이렇게 작성해 볼 수 있습니다. // "안녕하세요!" 메시지를 출력하는 함수를 정의한다. 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..
티스토리와 같은 블로그를 운영할 때 가장 신경 쓰는 부분은 검색 유입량입니다. 검색의 관점에서는 철저히 폐쇄적인 네이버 블로그가 아닌 이상에야 웹 사이트는 필연적으로 검색 최적화(SEO)를 하기 위해 부단히 애를 씁니다. 하지만 블로그를 처음 접하시거나 IT 용어가 생소하신 분들은 이런 개념을 이해하고 사용하기나 무척이나 버겁고 어렵습니다. 그래서 이번에는 다른 검색 엔진은 제외하고 오로지 구글의, 구글을 위한, 구글에 의한 검색 엔진 최적화 방법을 말해보려고 합니다. 글 제목에서는 2가지 방법이라고 단정적으로 글의 목표를 한정지 었지만, 구글의 검색 유입량을 높이는 방법은 여러 가지가 있습니다. 여기서 이야기하려는 구글 서치 콘솔, 구글 애널리틱스 아니면 지금은 아니지만 나중에 이야기할 백링크나 키워드..
금주 주간 목표 1일 1회 글쓰기 [완료] 책 읽기 - 트렌드 코리아 2021 [완료] 구글 애널리틱스 사용법 정리 [완료] - 1일 1회 글쓰기 이번 주도 1일 1회 글쓰기 목표는 달성했다. 어떻게든 이 목표를 달성하고 있는 나 자신이 뿌듯한 반면, 무엇을 위해 이렇게까지 하나 싶기도 한 한주였다. 처음 이런 목표를 세운 이유로 첫 번째는 글을 잘 쓰는 능력을 기르고 싶어서고, 두 번째는 프로그래밍 기술을 높이고 싶어서였는데, 효과가 없는 것은 아니지만 이렇게까지? 할 정도로 라는 생각이 들었다. 그렇다고 포기하겠다는 이야기는 아니지만, 그런 생각이 들었다는 이야기다. 조금은 남들과 달리 재미있게 글을 쓰고 싶고, 논리 정연하게 머릿속 생각을 정리하고 싶은데 얼마의 시간이 더 지나고 어떤 고민을 더 한..
구글 애널리틱스(Google Analytics)를 이미 적용해서 사용하고 계신가요? 그렇다면 이 글은 보지 않으셔도 됩니다. 이 글은 아직 구글 애널리틱스를 사용하지 않는 분들을 위해 연재하는 GA(Google Analytics) 사용기 이야기입니다. 지금 웹사이트 혹은 블로그를 운영 중이신가요? 그렇다면 자신이 운영하고 있는 사이트에 방문한 사람이 어떤 글을 보고, 얼마 동안 체류하고, 무엇을 하는지 얼마만큼 알고 계신가요? 잘 모르시겠다면 구글 애널리틱스를 사용해보세요. 전문적인 지식이 있다면 더 좋겠지만 간단한 설정만으로도 웹 사이트 잘 운영하기 위한 사용자의 데이터를 분석할 수 있게 도와줍니다. 이전에 2021.05.14 - [IT 지식] - 웹 로그(Web Log)란 무엇이고 어떻게 사용하는가라..
2021년 중반이 되어서야 작년에 수강한 TDD, Clean Code 강의 후기를 작성하고 있습니다. 원래는 진작부터 쓰고 싶었던 이야기입니다. 글 솜씨가 부족하고 하고 싶은 이야기가 있어도 잘 정리가 되지 않아 미루고 미루었습니다. 하지만 더 늦어진다면 왠지 쓰지 못할 이야기가 될 것 같아 지금에서야 쓰게 되었습니다. 강의를 수강하게 된 이유 그리고 결론 작년에 했던 일들 중에 기억에 남는 일이 있다면 그것은 박재성님의 TDD(TDD, Clean Code)를 수강했던 것이 아닐까라고 생각합니다. 비전공자가 국비 지원 학원을 통해 막연히 시작하게 된 개발 일은 쉽지 않았습니다. 처음에도 어려웠지만 시간이 어느 정도 지난 지금도 개발은 어렵습니다. 사실은 시간이 흐를수록 프로그래밍을 하는 것이 더 어렵게 ..
리액트를 기반으로 개발된 프로젝트들을 보면 가끔 의미 없이 루트 요소를 를 정의한 코드들을 확인할 수 있습니다. 사용되지 않는 를 쓰는 이유는 리액트에서 정의한 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(옵션) : 알림창..