7942yongdae의 등록된 링크

키자드에 등록된 총 186개의 포스트를 확인하실 수 있습니다.

Tistory

CSS - 이미지 스프라이트(Sprite)의 정의와 사용하는 2가지 방법

이미지 스프라이트의 정의 스프라이트(Sprite)라는 용어는 컴퓨터 그래픽스에서 2차원의 비트맵 이미지나 애니메이션을 합성하는 기술을 말합니다. 웹 기술에서는 여러 개의 이미지를 하나의 이미지로 만들어 놓은 것을 의미합니다. 이미지 스프라이트(Image Sprite)를 사용하면 생기는 장점은 크게 2가지를 이야기할 수 있습니다. 1. 요청을 단 한번 만한다. 브라우저는 화면을 그릴 때 필요한 모든 자원(이미지, CSS, JS 등)을 서버에 요청하고 가져와 사용합니다. 서버에 요청하고 가져오는 작업은 일괄적으로 한 번에 이루어지지 않습니다. 서버에 자원을 요청하는 구문이 사용된 횟수만큼 서버에 자원을 요청합니다. // 서로 다른 아이콘 이미지 3개를 선언하고 사용하는 코드 예를 들어 위와 같은 예제는 서버..

원문보기 내부링크
Tistory

Javascript - 배열의 요소를 무작위로 섞는 방법 [array, shuffle]

자바스크립트는 자바의 Connections.shuffle()와 같은 배열의 요소를 랜덤 한 방법으로 바꾸는 기능을 제공하지 않습니다. 그렇기 때문에 자바스크립트에서는 배열의 요소를 무작위로 섞기 위해서는 기능을 구현해서 사용해야 합니다. 자바스크립트로 배열의 요소를 무작위로 섞기 자바스크립트에서 배열 요소를 무작위로 섞기 위해서는 Array.sort()와 Math.random()를 사용하면 됩니다. 그럼 예제를 통해서 정확히 어떻게 사용하는지 알아보겠습니다. function shuffle(array) { array.sort(() => Math.random() - 0.5); } const numbers = [1, 2, 3]; shuffle(numbers); shuffle라는 이름을 가진 함수는 배열(arr..

원문보기 내부링크
Tistory

블로그의 구글 검색의 유입량을 높이는 2가지 방법

티스토리와 같은 블로그를 운영할 때 가장 신경 쓰는 부분은 검색 유입량입니다. 검색의 관점에서는 철저히 폐쇄적인 네이버 블로그가 아닌 이상에야 웹 사이트는 필연적으로 검색 최적화(SEO)를 하기 위해 부단히 애를 씁니다. 하지만 블로그를 처음 접하시거나 IT 용어가 생소하신 분들은 이런 개념을 이해하고 사용하기나 무척이나 버겁고 어렵습니다. 그래서 이번에는 다른 검색 엔진은 제외하고 오로지 구글의, 구글을 위한, 구글에 의한 검색 엔진 최적화 방법을 말해보려고 합니다. 글 제목에서는 2가지 방법이라고 단정적으로 글의 목표를 한정지 었지만, 구글의 검색 유입량을 높이는 방법은 여러 가지가 있습니다. 여기서 이야기하려는 구글 서치 콘솔, 구글 애널리틱스 아니면 지금은 아니지만 나중에 이야기할 백링크나 키워드..

원문보기 내부링크
Tistory

Javascript - 키보드 이벤트를 활용한 움직이는 이미지 만들기

오늘은 키보드 이벤트의 key를 알아보려고 합니다. 지금 인터넷에 올라와있는 키보드 이벤트를 설명하는 글들은 예전 사양(keycode)을 기준으로 만들어져 있어, 모처럼 새로운 사양을 기준으로 키보드 이벤트를 설명해보려고 합니다. KeyboardEvent만 가지고 설명하면 재미가 없을 것 같아 키보드 이벤트를 활용해 상, 하, 좌, 우 키보드를 누르면 움직이는 이미지를 만들어보았습니다. 생각했던 그림은 게임처럼 좌우를 누르면 자연스럽게 움직이는 그림이었는데 결과는 생각과는 달라서 슬프네요. 자연스러운 움직임을 만들려면 setInterval()을 사용하면 될 것 같기는 한데 이번에는 키보드 이벤트를 알아보기 위해 작성한 글이니 나중에 setInterval()을 통해 기능을 업데이트해보겠습니다. Keyboa..

원문보기 내부링크
Tistory

TDD, Clean Code With Java 수강 후기

2021년 중반이 되어서야 작년에 수강한 TDD, Clean Code 강의 후기를 작성하고 있습니다. 원래는 진작부터 쓰고 싶었던 이야기입니다. 글 솜씨가 부족하고 하고 싶은 이야기가 있어도 잘 정리가 되지 않아 미루고 미루었습니다. 하지만 더 늦어진다면 왠지 쓰지 못할 이야기가 될 것 같아 지금에서야 쓰게 되었습니다. 강의를 수강하게 된 이유 그리고 결론 작년에 했던 일들 중에 기억에 남는 일이 있다면 그것은 박재성님의 TDD(TDD, Clean Code)를 수강했던 것이 아닐까라고 생각합니다. 비전공자가 국비 지원 학원을 통해 막연히 시작하게 된 개발 일은 쉽지 않았습니다. 처음에도 어려웠지만 시간이 어느 정도 지난 지금도 개발은 어렵습니다. 사실은 시간이 흐를수록 프로그래밍을 하는 것이 더 어렵게 ..

원문보기 내부링크
Tistory

GA 사용기 - 웹 사이트에 구글 애널리틱스를 설정하는 방법

구글 애널리틱스(Google Analytics)를 이미 적용해서 사용하고 계신가요? 그렇다면 이 글은 보지 않으셔도 됩니다. 이 글은 아직 구글 애널리틱스를 사용하지 않는 분들을 위해 연재하는 GA(Google Analytics) 사용기 이야기입니다. 지금 웹사이트 혹은 블로그를 운영 중이신가요? 그렇다면 자신이 운영하고 있는 사이트에 방문한 사람이 어떤 글을 보고, 얼마 동안 체류하고, 무엇을 하는지 얼마만큼 알고 계신가요? 잘 모르시겠다면 구글 애널리틱스를 사용해보세요. 전문적인 지식이 있다면 더 좋겠지만 간단한 설정만으로도 웹 사이트 잘 운영하기 위한 사용자의 데이터를 분석할 수 있게 도와줍니다. 이전에 2021.05.14 - [IT 지식] - 웹 로그(Web Log)란 무엇이고 어떻게 사용하는가라..

원문보기 내부링크
Tistory

2021.05.23 주간회고

금주 주간 목표 1일 1회 글쓰기 [완료] 책 읽기 - 트렌드 코리아 2021 [완료] 구글 애널리틱스 사용법 정리 [완료] - 1일 1회 글쓰기 이번 주도 1일 1회 글쓰기 목표는 달성했다. 어떻게든 이 목표를 달성하고 있는 나 자신이 뿌듯한 반면, 무엇을 위해 이렇게까지 하나 싶기도 한 한주였다. 처음 이런 목표를 세운 이유로 첫 번째는 글을 잘 쓰는 능력을 기르고 싶어서고, 두 번째는 프로그래밍 기술을 높이고 싶어서였는데, 효과가 없는 것은 아니지만 이렇게까지? 할 정도로 라는 생각이 들었다. 그렇다고 포기하겠다는 이야기는 아니지만, 그런 생각이 들었다는 이야기다. 조금은 남들과 달리 재미있게 글을 쓰고 싶고, 논리 정연하게 머릿속 생각을 정리하고 싶은데 얼마의 시간이 더 지나고 어떤 고민을 더 한..

원문보기 내부링크
Tistory

HTML - 부트스트랩으로 회원가입 양식(Form) 화면 만들기

이번에는 간단한 회원가입 양식(Form) 화면을 만들어 보려고 합니다. 단순히 HTML만 사용하지 않고, UI 라이브러리인 Bootstrap도 이용해서 조금 더 유려하고, 유효성 검사까지 포함한 회원가입 폼을 만들어보겠습니다. 시작하기 회원가입 화면은 프로젝트를 시작하면 필수적으로 개발하는 화면 중에 하나 입니다. 가장 기본적인 화면이지만 입력 값의 유효성 검사부터 데이터를 서버로 전송하는 일까지 처리하기 때문에 많은 기능을 요구하는 화면 입니다. 이 글에서는 HTML의 기초적인 부분을 다루며, 서버와 통신하는 부분까지는 이야기 하지 않습니다. 화면을 개발하는 도구로는 HTML, CSS 만을 사용하며, CSS의 경우 Boostrap의 스타일을 활용합니다. Boostrap은 twitter에서 만든 UI 라..

원문보기 내부링크
Tistory

Javascript - 실무에서 활용하는 console.log() 사용 방법

실무에서는 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 출력 설..

원문보기 내부링크
Tistory

React - 의미없는 div 대신 Fragment를 사용하자

리액트를 기반으로 개발된 프로젝트들을 보면 가끔 의미 없이 루트 요소를 를 정의한 코드들을 확인할 수 있습니다. 사용되지 않는 를 쓰는 이유는 리액트에서 정의한 render() 함수는 반환 값의 루트 요소는 하나만 정의되어야 하기 때문입니다. const Example = () => { return ( Hello World ); }; 예제 코드를 사용한 결과물은 아래와 같습니다. 실제로 사용하지는 않지만 JSX 규칙에 의해 와 같이 감싸는 요소를 정의하면 HTML의 DOM 구조에도 는 적용됩니다. Fragment를 사용하자 import React, { Fragment } from 'react'; const Example = () => { return ( Hello World ); }; 앞서 작성한 예제 코..

원문보기 내부링크
Tistory

온프레미스(On-premise)와 클라우드(Cloud) 차이점

온프레미스(On-premise)와 클라우드(Cloud) 시스템의 장단점을 말하기에 앞서 두 시스템의 정의를 먼저 이야기해볼까 합니다. 두 시스템의 정의를 알면 장단점을 조금 더 쉽게 이해할 수 있습니다. 기본적으로 두 시스템은 모두 서비스(게임, 웹 애플리케이션, 쇼핑몰, 실시간 채팅, 기타 등)를 만들 때 필요한 재료(자원)들을 구성하는 방법에 대한 이야기입니다. 온프레미스는 집을 짓는다고 할 때 집을 짓기 위한 자제 구매부터 건물 도면 그리는 작업, 시공, 건축, 그리고 인테리어까지 모든 과정을 누구의 도움 없이 집을 필요로 하는 사람이 혼자서 다 처리하는 방법입니다. 처음 집을 집는 사람뿐만 아니라 여러 번 집을 지어본 사람도 혼자서는 쉽게 할 수 있는 일이 아닙니다. 클라우드 시스템도 온프레미스처..

원문보기 내부링크
Tistory

갑자기 크롬에서 웹 사이트가 동작을 안해요 [자바스크립트가 차단됨]

크롬 브라우저를 업데이트한 후 갑자기 웹 사이트가 동작을 안 합니다. 컴퓨터 문제가 있는 건지 사이트에 문제가 있는 건지 알 수 없지만 일단 컴퓨터를 재부팅해봅니다. 여전히 웹 사이트를 정상적으로 볼 수 없습니다. 크롬 브라우저 버전을 업데이트 후 웹 페이지가 동작하지 않습니다. 이번에 최신으로 릴리즈 된 크롬 버전 90.0.4430.212로 업데이트를 한 후 네이버 웹 사이트가 정상적으로 보이지 않는 현상이 발생했습니다. 처음에는 컴퓨터에 문제가 있나 싶어 재부팅을 해보았지만 여전히 웹 사이트는 제대로 동작하지 않습니다. 알고 보니 크롬에서 보안 설정 중 하나인 자바스크립트 자동으로 차단(JavaScript blocked) 기능이 활성화되면서 생긴 문제였습니다. 크롬은 파이어 폭스보다는 보안적인 측면이..

원문보기 내부링크
Tistory

Javascript - 기본 대화상자 사용법 [alert(), confirm(), prompt()]

웹 브라우저는 사용자와 상호작용이 가능한 기능들을 몇 가지 제공합니다. 오늘은 그중 대표적인 alert(), confrim(), prompt()를 알아보려고 합니다. 흔히 사용자에 알림을 표시할 때는 Modal을 사용합니다. alert(), confrim(), prompt()는 바로 그 Modal의 기본 개념을 가지고 있는 기능입니다. 이 3가지 기능은 쓰임새가 좋고 사용하기도 편리하니 한 번 알아두시면 좋습니다. 알림창을 띄우는 alert() alert() 기능은 사용자에게 메시지를 전달할 수 있는 알림창을 띄웁니다. 다른 행동을 필요로 하지 않고 오로지 사용자에게 메시지를 전달하기 위한 알림 용도로 사용됩니다. 문법 window.alert([message]); 매개변수 message(옵션) : 알림창..

원문보기 내부링크
Tistory

구글 서치 콘솔을 이용해 티스토리 블로그 검색이 잘 되게하는 방법

블로그를 운영할 때 중요하게 생각하는 부분 중 하나가 검색을 통해 블로그에 유입되는 수입니다. 검색으로 블로그에 유입이 되는 수를 늘리려면 중요하다고 여기는 부분은 두 가지라고 생각합니다. 1. 작성한 글을 많은 사람들에게 알려야 한다. 2. 글을 통해 독자를 잘 설득할 수 있어야 한다. 거창한 이야기를 하는 것처럼 들릴 수 있지만, 블로그를 운영함에 있어서 이 두 가지만큼 중요한 사실은 없지 않을까요? 오늘은 이 두 가지 주제 중 구글 서치 콘솔을 사용해 티스토리 블로그를 마케팅하는 방법을 알아보려고 합니다. 마케팅이라는 단어가 약간 어렵게 느껴지실 수 있지만 마케팅은 "홍보"입니다. 홍보를 유식한 척해보려고 "마케팅"이라는 단어를 사용해보았습니다. 자 그런데 구글 서치 콘솔을 통해 티스토리 블로그를 ..

원문보기 내부링크
Tistory

2021.05.16 주간회고

금주 목표 1일 1회 글쓰기 [완료] 책 읽기 - 트렌드 코리아 2021 [실패] 구글 애널리틱스 사용법 정리 [완료] - 1일 1회 글쓰기 이번 주 1일 1회 글쓰기 목포는 어떻게든 달성했다. 그런데 만족스럽지 못하다. 기술을 주제로 한 글의 개수가 3개로 50%가 되지 않는다. 흐음.. 뭔가 아직 잘 정리가 되지 않기도 하고 이제는 글을 쓰려면 이전보다 시간이 많이 필요해서 난감하다. 읽는 사람한테 조금이라도 도움이 되려고 하다 보니 내용을 조금은 더 상세하게 작성해야 돼서 글 쓰는 시간이 늘어나고 있다. 지금 생활 패턴으로는 감당이 조금씩 안되고 있어서 힘들다. 그래도 일단은 계속해봐야지 - 책 읽기 [트렌드 코리아 2021] 책 내용이 재미있다.. 가십거리 정도의 책으로 생각하고 가볍게 빌린 책인..

원문보기 내부링크
Tistory

Javascript - 브라우저 창 혹은 탭 닫기 [window.close()]

자바스크립트를 통해 브라우저 창이나 탭을 닫는 방법은 간단합니다. window.close()는 함수를 호출하면 됩니다. 단 window.close() 함수를 사용할 때는 한 가지를 주의해야 합니다. 바로 스크립트나 Link를 기준으로 열린 창만 닫힌다는 부분입니다. 자 그럼 브라우저 창을 닫는 window.close()는 어떻게 써야 잘 사용할 수 있는지 알아보도록 하죠. 문법 window.close(); 웹 페이지를 닫는 방법은 window.close() 함수를 호출하면 됩니다. 하지만 window.close() 함수가 문제없이 동작하려면 window.open() 함수를 통해서 열린 웹 페이지여야 한다는 조건이 있습니다. Link를 통해 열린 웹 페이지도 window.open() 함수를 통해 열린 웹 ..

원문보기 내부링크
Tistory

jQuery - $(document).ready() 대신 $()를 사용하자

jQuery를 사용하게 되면 바로 학습하게 되는 Event가 바로 $(document). ready()입니다. 왜 jQuery 배우게 되면 이 Event를 알게 되는 걸까요? 오늘은 jQuery의 대표 기능 중 하나인 $(document). ready() Event를 알아보도록 하겠습니다. 문법 .ready(handler) .ready()는 DOM(Document Object Model)이 완전히 불러와지면 실행되는 Event입니다. 일반적으로 브라우저가 HTML을 보여주기 위해서는 먼저 문서 구조를 만들고 만들어진 문서 구조 위에 디자인을 입히는 형식을 취합니다. 이 과정에서 디자인이 입혀지지 않은 상태로 문서 구조가 만들어진 시점에 실행되는 Event가 바로. ready()입니다. 대부분의 브라우저에..

원문보기 내부링크
Tistory

웹 로그(Web Log)란 무엇이고 어떻게 사용하는가

웹 로그(Web Log)란? 일반적으로 웹 로그(Web Log)는 웹 서버가 가지고 있는 기록(Log)을 말합니다. 웹 로그는 서버에서 이루어지는 모든 일들을 구체적으로 기록해서 보관한 데이터입니다. 웹 로그는 상황에 따라 어떤 기록을 어떻게 보관할지 정의할 수 있습니다. 즉 사용자가 웹 사이트를 방문하고 떠나기 전까지의 일련의 과정이나 서버가 제공하는 서비스 기능 처리 내역까지 서버에서 일어난 모든 일은 기록(Log) 될 수 있고 필요에 따라 수집하고 사용할 수 있습니다. 구체적으로 예를 들면 A라는 사용자가 저녁 6시 10분에 회원 가입 페이지에 방문해서, 10분 뒤 회원 가입 완료 페이지로 이동했다면 다음과 같은 데이터를 수집할 수 있습니다. 순서 사용자 시간 내용 1 A 오후 6시 10분 회원 가..

원문보기 내부링크
Tistory

XML 사이트 맵 정의와 만드는 방법 - sitemap.xml

웹 사이트에서 XML 사이트 맵은 어떤 의미를 가지고 있는 걸까요? 웹 사이트를 만들거나 블로그를 운영하면 한 번씩 보이는 sitemap.xml이 무슨 의미로 만들어지고 사용되는지 알아보겠습니다. XML Sitemap의 정의 XML Sitemap 공식 사이트에서는 XML 사이트 맵을 다음과 같이 정의하고 있습니다. Sitemap은 웹마스터가 크롤링에 사용할 수 있는 사이트의 페이지에 대한 정보를 검색 엔진에 알리는 손쉬운 방법입니다. Sitemap의 가장 간단한 형식은 검색 엔진에서 사이트를 보다 지능적으로 크롤링할 수 있도록 각 URL에 대한 추가 메타데이터(마지막 업데이트된 날짜, 변경 빈도, 사이트의 다른 URL에 상대적인 중요도)와 함께 사이트에 대한 URL을 나열하는 XML 파일입니다. XML ..

원문보기 내부링크
Tistory

RSS(Really Simple Syndication)는 무엇인가요?

RSS는 Really Simple Syndication라는 말로, 뉴스나 블로그의 콘텐츠를 표현하는 방식입니다. RSS는 웹 사이트에 새로운 콘텐츠가 발행되면 사용자가 직접 방문하지 않고도 알 수 있게 제안된 방법입니다. 웹 버전의 유튜브 구독 기능이라고 생각하시면 이해하기 쉽습니다. 즉 RSS를 사용하면 사용자는 자신이 좋아하는 여러 웹 사이트를 돌아다니지 않고 신규로 만들어진 콘텐츠를 편하게 즐길 수 있습니다. RSS를 사용하면 좋은 점 - 정보를 바로 편리하게 제공 : 새로 만들어진 콘텐츠를 확인하기 위해 지속적으로 방문하지 않아도 쉽고 편리하게 확인하고 볼 수 있습니다. - 개인형 맞춤 정보 배달 : 관심 있는 뉴스 및 새로운 정보를 해당 웹 페이지에 접속하지 않아도 실시간 직접 제공받는 맞춤 정..

원문보기 내부링크
Tistory

유비쿼터스의 정의는 무엇인가? [IoT]

유비쿼터스의 정의 유비쿼터스란 "Ubiquitous"([신은] 어디에나 널리 존재한다)라는 단어에 컴퓨팅을 결합해서 만든 것으로 '언제, 어디서나 어떠한 통신 단말기를 가지고, 어느 정보통신망(네트워크)을 통해서든, 원하는 정보통신 서비스를 받을 수 있는 것'을 말합니다. 1988년 제록스의 팰로앨토 연구소의 마크 와이저가 ‘유비쿼터스 컴퓨팅이란 컴퓨터 패러다임의 제3의 물결로서 네트워크 기반의 확장형 컴퓨팅 환경을 뜻하며, 머지않아 수 백 대의 컴퓨터가 한 명의 사람을 위해서 존재하는 유비쿼터스 시대 즉, 언제 어디서나 컴퓨터에 접속할 수 있는 세계가 도래할 것’이라고 말하였고 이때를 기점으로 실질적인 연구가 시작되었습니다. 마크 와이저는 '보이지 않는 컴퓨팅' (invisible computing),..

원문보기 내부링크
Tistory

2021.05.09 주간회고

금주 목표 1일 1회 글쓰기 [완료] 책 다시 읽기 - 마케터의 문장 [완료] 구글 애널리틱스 사용법 정리 [실패] - 1일 1회 글쓰기 1일 1회 글쓰기는 달성했다. 2주 정도 주말을 포함해서 1일 1회 글 작성하기를 하고 있다. 시간이 지날수록 더 글이 가지는 정보의 질을 높이기 위해 노력하다 보니 글을 작성하는 시간이 줄기는커녕 늘어나기만 한다. 다른 목표에도 영향을 끼치고 있어 어떻게 해야 할지 고민이 된다. 아무래도 기술과 관련된 이야기다 보니 정리할 부분도 많고 말도 풀어서 쓰려고 하다 보니 더 어렵다. 날이 갈수록 고민은 풀리지 않고 쌓여만 가서 걱정이다. - 책 다시 읽기 [마케터의 문장] 마케터의 문장 책은 지난주 완독 후 이번 주에 한번 더 완독을 했다. 결론적으로 나쁘지 않은 선택이라..

원문보기 내부링크
Tistory

CSS - :where()와 :is()를 사용해보자 [Selectors Level 4]

오늘은 아직은 초안(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()를 사용해서..

원문보기 내부링크
Tistory

CSS - 깜빡이는 효과 [Blink Effect]

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-..

원문보기 내부링크
Tistory

Javascript - DocumentFragment를 사용해보자 [성능 최적화]

Javascript는 브라우저가 정의하고 사용하는 DOM(Document Object Model)을 다룰 수 있습니다. DOM을 처음 접하시거나 아직은 잘 모르겠다고 생각하시는 분은 DOM을 HTML의 구조적인 정의를 다루는 요소라고 생각하시면 됩니다. HTML과 DOM을 구체적으로 정의 내리면 다음과 같습니다. HTML은 웹 페이지의 문서 구조를 생성하는 태그 시스템이고 DOM은 HTML이 가지는 문서 구조를 다룰 수 있는 인터페이스입니다. DOM은 HTML의 구조를 계층형 트리 형태로 정의합니다. 그리고 브라우저는 HTML이 가진 구조를 Style Sheet인 CSS를 사용해 화면을 그려 사용자가 쉽게 웹 페이지를 이용할 수 있도록 합니다. DOM은 원래 XML 문서를 정의하기 위한 인터페이스였지만,..

원문보기 내부링크
Tistory

Javascript - typeof 연산자 사용법을 알아보자

자바스크립트는 변수 타입을 문자로 반환하는 함수인 typeof 연산자를 제공합니다. typeof 연산자는 undefined, null, boolean, number, string, symbol, object, function의 자바스크립트가 가진 7가지 변수 타입을 구분하는 용도로 사용합니다. 문법 typeof operand typeof(operand) typeof 연산자는 타입을 확인해야 하는 피연산자 앞에 위치합니다. typeof는 연산자이므로 함수처럼 괄호[()]를 사용할 필요가 없습니다. 즉 피연산자의 타입을 확인할 때는 typeof(operand)가 아니라 typeof operand를 사용하는 것이 맞습니다. typeof(operand)도 사용 가능한 문법이지만, 불필요한 괄호[()]를 넣은 사..

원문보기 내부링크
Tistory

티스토리 블로그 첫 달 애드센스 수익 인증하기!

오늘은 구글 애드센스 승인 후 애드센스 첫 달 수익에 대해 이야기해보려고 합니다. 애드센스 승인 메일을 받은 지 약 한 달 정도가 지났습니다. 블로그 운영을 시작한 지 약 2개월이 되어가는 시점에서 블로그의 처음 모습과 지금 모습은 여러 가지 측면에서 많이 달라졌습니다. 4월 방문 통계 블로그를 시작한 첫 달인 3월은 방문자가 390명이었는데요. 4월 기준으로 방문자가 2,888명이네요. 아직은 블로그가 만들어진 시점이 얼마 되지 않고, 등록된 글의 숫자가 적다 보니 검색을 통해 유입이 되는 수가 적습니다. 검색을 통해서 유입이 된 비율은 19%, SNS는 7%, 기타가 74%로 기타가 압도적으로 높은 비율을 차지하네요. 포럼을 통해서 지속적으로 블로그를 홍보했고, 여러 블로그를 구독하고 소통을 하다 보..

원문보기 내부링크
Tistory

Javascript - 디바이스 구분하기 [Mobile, PC]

이번에는 Javascript를 통해 디바이스를 확인하는 방법을 알아보겠습니다. 일반적으로 디바이스를 구분하기 위해서는 브라우저가 가지고 있는 navigator.userAgent를 사용합니다. 여기서 에이전트라는 의미는 사용자를 대신해서 웹 페이지를 보여주는 디바이스를 말하는데요. 바로 웹 페이지를 보실 때 사용하고 계신 도구를 말한다고 생각하시면 됩니다. PC를 이용해 웹 페이지를 보고 있다면 PC가 에이전트이고, 핸드폰을 통해 웹 페이지를 보고 계신다면 핸드폰이 에이전트가 됩니다. Navigator.userAgent 브라우저의 콘솔 기능을 이용해 navigagor.userAgent를 출력한 내용입니다. userAgent는 브라우저 이름, 브라우저 버전, 렌더링 엔진, 렌더링 엔진 버전, OS 등 현재 ..

원문보기 내부링크
Tistory

Javascript - 브라우저 닫기 혹은 새로고침 감지하기

HTML의 이벤트 중 beforeunload를 이용하면 브라우저 닫기나 새로고침을 감지할 수 있습니다. 일반적으로 화면에서 저장하지 않은 데이터가 있거나, 사용자의 실수로 인해 페이지를 나가려고 할 때 알림을 주는 용도로 사용됩니다. 예시로는 블로그에 글을 작성하다가 도중에 페이지를 나가려는 경우 사용자에게 알림 창을 보여 줄 수 있습니다. beforeunload 이벤트를 사용하면 사용자가 페이지를 떠날 때, 페이지를 떠날 것인지 여부를 묻는 대화 상자를 표시할 수 있습니다. 사용자가 확인을 누르면 페이지는 닫히며, 취소를 누르면 페이지를 떠나지 않고 현재 페이지에 머무릅니다. 문법 beforeunload 이벤트를 사용해서 사용자가 페이지를 떠나는 것을 확인하는 방법은 다음과 같습니다. window.ad..

원문보기 내부링크
Tistory

Javascript - XMLHttpRequest 사용하기

웹 페이지에서 데이터를 보여주기 위해서는 서버와 통신을 해야 합니다. 통신을 하는 일련의 과정으로는 서버에 데이터를 달라고 요청을 보내고 결과를 받아와야 하는데요. 이때 서버와 주고받는 데이터를 쉽게 다룰 수 있는 방법이 XMLHttpRequest를 사용하는 방법입니다. 웹 개발 방법 중 하나인 AJAX(Asynchronous Javascript And Xml)를 이야기할 때 사용하는 통신 객체이기도 합니다. 문법 const xhr = new XMLHttpRequest(); const method = "GET"; const url = "https://7942yongdae.tistory.com/"; // 요청을 초기화 합니다. xhr.open(method, url); // onreadystatechange..

원문보기 내부링크
Tistory

클라우드 컴퓨팅과 클라우드 서비스 [SaaS, PaaS, IaaS]

클라우드 컴퓨팅은 무슨 말일까요? 요즘은 IT 기술들을 사람들이 대중적으로 접할 수 있다 보니 클라우드 혹은 클라우드 컴퓨터와 같은 단어를 간혹 접하게 되는데요. 클라우드 컴퓨팅은 알아두면 유식해 보일 수 있는 IT 기술입니다. 비슷한 개념으로 유비쿼터스라는 개념이 있는데요. 얼핏 개념을 들으면 클라우드 컴퓨팅과 유비쿼터스는 매우 유사해 보이지만 실체는 엄연히 다른 개념을 가지고 있는 기술들입니다. 오늘은 클라우드 컴퓨팅이 어떤 개념인지 알아보도록 하겠습니다. 클라우드 컴퓨팅 개념 및 정의 클라우드 컴퓨팅의 사전적인 의미는 인터넷 상의 서버를 통하여 데이터 저장, 네트워크, 콘텐츠 사용 등 IT 관련 서비스를 한 번에 사용할 수 있는 컴퓨팅 환경입니다. 즉 네트워크를 이용해 사용이 가능한 컴퓨터로 존재하..

원문보기 내부링크
Tistory

Javascript - ES6의 let과 const 그리고 var의 차이

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 타입은 스코프가 함수 단..

원문보기 내부링크
Tistory

객체지향 생활 체조 - 규칙 6: 모든 엔티티를 작게 유지

모든 엔티티를 작게 유지한다. 이 규칙이 가지는 의미 이 말은 50줄 이상 되는 클래스와 10개 파일 이상 되는 패키지는 없어야 한다는 뜻이다. 이 규칙을 책에서는 위와 같이 설명했다. 이 말은 어느 정도 공감하지만 실제로 만들어지는 응용 소프트웨어에서도 가능한가?라고 했을 때의 답은 잘 모르겠다. 하다못해 어떤 객체에 기능이 5줄짜리인 메서드가 10개만 있어도 이 객체에는 더 이상 기능을 추가하기 어렵다. 말이 10개의 메서드이지 객체를 만들다 보면 10개의 기능은 금방 추가된다. 여기서 공감할 수 있는 부분은 객체가 가진 코드 줄의 수가 100줄만 이상만 돼도 그 객체가 무슨 행동을 하는지 파악하기가 어려운 것은 사실이다. 또한 패키지도 객체처럼 응집력이 있고 단일한 목표가 있어야 한다고 말한다. 이..

원문보기 내부링크
Tistory

블로그 주제를 잘 선정해야하는 3가지 이유

이번에는 블로그 주제 선정의 중요성을 이야기해보려고 합니다. 블로그를 운영할 때 주제가 중요하다고 이야기합니다. 블로그 주제는 왜 중요한 걸까요? 단순히 수익하고 관련이 되어 있어서 그렇게 이야기하는 걸까요? 열심히 책도 보고 블로그 운영 자료도 보면서 블로그 주제를 잘 선정해야 하는 이유를 추론해보았습니다. 완전히 맞는 결론이라고 생각하지는 않지만 큰 그림에서의 기준은 바뀌지 않을 것 같다는 생각이 드네요. 1. 블로그 주제는 앞으로 쓸 글의 가짓수를 결정한다. 블로그의 주제는 블로그에 포스팅 할 수 있는 글의 개수를 정한다고 이야기할 수 있습니다. 주제에 대해 얼마나 잘 아느냐 모르느냐는 크게 중요하지 않습니다. 자신이 잘 아는 분야를 바탕으로 글을 쓸면 전문적인 지식을 조금 더 가지고 쓸 수 있을 ..

원문보기 내부링크
Tistory

2021.05.02 주간회고

금주 목표 1일 1회 글쓰기 책 한 권 읽기 - 마케터의 문장 애드센스 자료 정리 1개 - 1일 1회 글쓰기 이번 주 1일 1회 글쓰기 목표는 달성했다. 이번 주는 여태까지와는 조금 다르게 코드를 위주로 글을 작성하기보다는 생각을 정리한 글을 많이 작성한 것 같다. 지난주 계획을 할 때는 구체적인 조건을 정의하고 글을 쓰기로 했는데, 그 부분은 실패했다. 구체적인 조건은 딱 한 가지만 정했다. 제한 시간을 정하고 그 시간 안에 글을 쓰자라고.. 정말 어렵다. 글의 내용은 완전히 산으로 가고.. 어떻게 해야 할지는 모르겠고.. 이번 주 한주도 이번 주와 똑같은 조건으로 한번 더 해보려고 하는데 어떻게 될지 잘 모르겠다. 이번 주 1일 1회 글쓰기를 하면서 느낀 점은 이전보다 분명 글을 쓰는 속도는 빨라지고..

원문보기 내부링크
Tistory

블로그 글을 잘 쓰는 방법 - 퇴고하기

요즘 블로그를 운영하면서 글을 쓴다는 것은 무척이나 어렵다는 것을 느낍니다. 물론 연습도 없이 처음부터 좋은 글을 쓰는 것은 쉬운 일은 아니겠죠. 하지만 가벼운 주제라고 생각하고 써 내려가던 글이 어느 순간 막혀서 기약 없이 시간을 보내거나, 글 쓰기가 어려워 처음부터 아무것도 못하고 멍한 상태인 경우가 다반사네요. 글을 쓰는 게 어렵다는 이야기는 둘째로 치고, 어떻게든 완성한 글이 마음에 안 드는 이유는 왜일까요? 어떻게 해야 만족스러운 글을 아니, 문장을 쓸 수 있는 걸까요? 글을 잘 쓰는 사람들이 쓴 글 잘 쓰기 방법에 관련된 책들을 보면 공통적으로 이야기하는 내용이 한 가지 있습니다. 바로 '퇴고'를 해라입니다. 문장의 질은 '퇴고'를 통해서 높아지고, 결국 문장의 질은 글의 품격을 높여준다고 말..

원문보기 내부링크
Tistory

네카라쿠배당토 - 개발자 이야기

네카라쿠배당토는 무슨 말인가요? 네카라쿠배당토는 개발자 취업 준비를 하는 사람들이 가고 싶어 하는, 인기 있는 IT 기업들의 이름 앞글자를 따서 부르는 말로 네이버, 카카오, 라인, 쿠팡, 배달의 민족(우아한 형제들), 당근 마켓, 토스를 말합니다. "네카라"로 시작해서 "네카라쿠배", "네카라쿠배당토" 그리고 최근에는 직방과 야놀자가 추가되어 "네카라쿠배당토직야"라고도 합니다. 최근 IT 기업들은 채용을 늘리고 있습니다. IT는 비대면 사업들과 밀접한 관계를 가지기도 하고, 실제로 규모가 점점 커지다 보니 자연스러운 현상입니다. 장기화된 코로나 19로 인해 경제 상황이 좋지 않아, 채용을 줄이는 일반적인 회사와는 다른 행보를 걷고 있습니다. 그렇다 보니 IT로 취업을 하려는 사람들은 많아지고, 취업하고..

원문보기 내부링크
Tistory

Javascript - 문자열 자르기 [split, substring, substr]

자바스크립트에서는 문자열을 자르는 방법으로 split, substring, substr 함수를 제공합니다. 단순히 문자 값을 자르는 데에 왜 이렇게 많은 split(), substring(), substr() 함수들이 제공되고 있는 걸까요? 오늘은 split(), substring(), substr() 각 각의 함수들이 가지는 정의와 사용법에 대해 알아보도록 하겠습니다. split 정의와 사용법 str.split([separator[, limit]]) 반환 : split은 문자열을 separator를 기준으로 limit 만큼의 크기를 가진 새로운 문자 배열을 반환합니다. separator [옵션] : 구분자는 문자열을 나눌 때 기준이 되는 값으로 문자(character)이나 정규표현식을 사용할 수 있습니..

원문보기 내부링크
Tistory

웹 개발자는 어떤 일을 하나요? [풀스택, 프론트엔드, 백엔드, 퍼블리셔]

웹 개발자는 회사에 출근하면 어떤 일을 할까요. IT 직군과 접점을 가지고 있는 사람이라면 모를까 일반적으로 사람들이 접하는 IT라는 개념은 핸드폰으로 사용하는 애플리케이션이나 컴퓨터를 통해 이용하는 엑셀, 한컴 같은 프로그램 같은 프로그래밍의 산출물이다 보니 개발자가 일하는 모습을 이미지로 떠올리기가 쉽지 않습니다. 만약 아니라면 영화나 드라마에서 나오는 단 몇 초만에 해킹에 성공하는 만능 해커나 뚝딱 페이스북 같은 프로그램을 만드는 천재 프로그래머의 모습을 떠올리시나요? 웹 개발자의 정의 식상할 수도 있지만 웹 개발자가 어떤 일을 하는지 알아보기 전에 웹 개발자에 대한 정의를 먼저 내려보려고 합니다. Wiki에는 "HTTP 프로토콜을 커뮤니케이션 매체로 사용하는 웹 페이지, 웹 사이트 등 WWW 기반..

원문보기 내부링크
Tistory

Javascript - 변수와 상수 그리고 리터럴

이번에는 자바스크립트로 프로그래밍을 할 때 꼭 알아야 할 변수와 상수 그리고 리터럴에 대해 알아보도록 하겠습니다. 조금은 다른 이야기지만 프로그래밍에 있어 용어가 가지는 개념은 중요합니다. 예를 들어 변수와 리터럴과 같은 용어들이 정확히 무슨 의미를 어떻게 가지는지 잘 모른다면 개발자들끼리 소통을 할 때 사소하지만 이해 포인트가 다르거나 오해를 하능 경우가 생깁니다. 프로그래밍에서 사용되는 용어들은 자바스크립트뿐만 아니라 컴퓨터 과학 전반에서 사용하기 때문에 용어를 잘 알고 기억해둔다면 다른 언어를 가지고 프로그래밍을 할 때도 도움이 됩니다. 변수와 상수의 정의 그리고 사용법 일반적으로 변수의 정의는 값을 가지고 있고 이 값은 언제든 바뀔 수 있으며 사용할 수 있다고 설명합니다. 간단히 말해 변수란 '값..

원문보기 내부링크
Tistory

2021.04.25 주간회고

금주 목표 1일 1회 글쓰기 책 한 권 읽기 - 1만 시간의 재발견 애드센스 자료 정리 1개 - 1일 1회 글쓰기 이번 주에도 1일 1회 글쓰기 목표는 달성했다. 매주 회고할 때마다 다음 주는 못해, 안 해를 반복하면서도 어떻게든 목표로 정해놓고 하다 보니 아슬아슬할 때도 있지만 달성은 하고 있다. 주로 이번 주는 Javascript 위주로 글을 작성했다. 프로그래밍 내용이다 보니 글을 보는 사람이 코드를 읽기 쉽게 하기 위해 Codepen과 에디터의 코드 블록 기능을 번갈아 사용하면서 어떻게 더 좋을지 실험해보고 있다. 현재는 코드 블록이 더 좋다고 판단하고 있는데 확실한 결정은 한 달 내지 두 달 정도의 시간이 흐르면 자연스레 확정이 될 것 같다. 그리고 이번 주부터는 글을 작성할 때 글을 작성하는 ..

원문보기 내부링크
Tistory

Javascript - Array reduce, reduceRight 사용법

이번에는 Javascript의 array가 가진 filter 함수의 정의와 사용법 더불어 활용법에 대해 이야기해보려고 합니다. array의 함수 중 map, filter만큼 잘 쓰이는 함수는 아니지만 함수 결과를 체이닝 형식으로 사용하기 때문에 합산과 같은 연속적인 일들의 결과를 만들어 낼 때 자주 사용됩니다. reduce 정의 Array.prototype.reduce ( callbackfn [ , initialValue ] ) reduce는 단어 의미 그대로 해석하면 줄이다는 표현인데, 함수로 정의된 내용은 배열의 값을 하나씩 줄여가면서 모든 배열을 순회할 때까지 결과를 callbackfn에 전달합니다. 주로 그룹 지어진 데이터의 결과를 도출할 때 사용하는 편입니다. 예를 든다면 덧셈이나 곱셈 같은 합..

원문보기 내부링크
Tistory

Javascript - 새로 고침 [reload]

이번에는 자바스크립트를 사용해 페이지를 새로 고침 하는 방법에 대해 알아보려고 합니다. 화면 개발을 하다 보면 페이지 전체를 다시 불러와야 하거나 특정 영역을 갱신해야 하는 경우가 발생하는데 이런 경우 일반적으로는 location을 사용합니다. 특정 부분을 갱신해야 할 필요가 있다면 iframe을 사용하거나 jQuery의 load를 사용해야 하는데 이번 글에서 다루기에는 내용이 많아 이 부분까지는 다루지 않고 전체 페이지 새로 고침에 대해서만 이야기해보도록 하겠습니다. location.reload() 인터넷 자료를 찾아보면 자바스크립트를 통해 페이지를 새로 고침을 하는 방법은 일반적으로 location과 history를 사용합니다. // location을 사용하는 방법 location.reload(); ..

원문보기 내부링크
Tistory

macOS Big Sur 11.3 정식 버전 릴리즈

오늘 macOS Big Sur 11.3 정식 버전이 릴리즈 되었습니다. 이번 배포는 지난 2021년 4월 21일 발표한 AirTag 지원을 포함하고 있습니다. 아직 한국에서는 공식적으로 판매되는 제품이 아니라 AirTag의 기능을 사용해볼 수 없겠네요. Air Tag 외에도 M1 칩을 탑재한 제품을 위한 지원 및 수정사항도 있으니 M1 계열의 제품을 사용하시는 사용자라면 이번 업데이트를 통해 활용도를 높여보세요. macOS Big Sur 11.3 패치 내용 요약 정리 AirTag 지원 이제는 AirTag를 사용해 중요한 물품을 등록하고 쉽게 찾을 수 있습니다. 정식으로 배포된 OS를 통해 AirTag를 손쉽게 사용해보세요! HomePod 스테레오 지원 이전에 배포된 macOS에서는 HomePod의 재생을..

원문보기 내부링크
Tistory

Javascript - Array filter 사용법

이번에는 Javascript의 array가 가진 filter 함수의 정의와 사용법 더불어 활용법에 대해 이야기해보려고 합니다. array의 함수 중 가장 많이 쓰이는 함수 중 3 대장이라고 할 수 있는 것이 map, filter, reduce인데요. 그중 filter는 활용도가 높은 편이라 어디라고 정해진 곳 없이 사용되는 편입니다. 자 본격적으로 array의 filter 함수를 알아보러 가시죠. filter 정의 Array.prototype.filter ( callbackfn [ , thisArg ] ) filter는 해석 그대로 걸러주는 역할을 하는 함수입니다. 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용하는 편입니다. SQL로 치면 where절에서 하는 행위를 하는 함수입니다. EC..

원문보기 내부링크
Tistory

블로그 구글 애드센스 승인 후 해야 할 일

블로그 구글 애드센스 승인이 끝일까? 운이 좋게도 구글 애드센스 승인을 어렵지 않게 받았습니다. 승인 메일을 받았을 때는 제가 쓰고 있는 글이 가치를 인정받을 수 있다는 사실이 기쁘기도 했지만 한편으로는 아무것도 준비를 해놓지 않은 상황이라 난감하기도 했습니다. 낯설다고 해야 하나? 말로만 구글 애드센스라는 것을 듣고 막연히 신청했던 거라 어디서부터 무엇을 준비해서 어떻게 하고 적용해야 하는지 어렵기도 하고요. 지금도 어렵지 않다는 말은 아니지만 구글 애드센스와의 첫 만남은 모든 게 생소하고 신기하기만 했습니다. 그래서 블로그를 운영하시는 다른 분들도 저와 마찬가지지 않을까라는 생각에 이 글을 작성하게 되었습니다. 구글 애드센스 승인은 시작이다. 구글 애드센스는 블로그 운영을 통해 광고 수익을 얻을 수 ..

원문보기 내부링크
Tistory

Javascript - null과 undefined의 차이 그리고 확인 및 처리

null과 undefined은 존재하지 않는 것을 나타내는 자바스크립트가 가진 특별한 타입입니다. null은 Java 나 c# 같은 다른 언어에서도 사용되는 리터럴이기 때문에 사용하는 게 어렵지 않지만 undefined라는 타입은 기존에 null을 사용하던 프로그래머와 처음 자바스크립트를 마주한 사람에게는 혼란을 야기시키는 내용 중 하나입니다. null과 undefined의 차이는 무엇이고 어떻게 사용하는 게 좋은 걸까요? null과 undefined 알아보기 결론적으로 null과 undefined의 의미는 둘다 값의 존재 유무를 표현하는 타입입니다. 자바스크립트에서는 세밀한 부분의 의미는 달라도 문맥적 의미로는 같은 의미를 가진 가진 타입을 2개로 분리해서 정의하다보니 프로그래머 입장에서는 애매모호함을..

원문보기 내부링크
Tistory

Javascript - replace, replaceAll [문자 치환하기]

자바스크립트에서 특정 문자를 찾아 원하는 문자로 치환할 수 있는 replace()라는 API를 제공합니다. 오늘은 replace() 함수를 통해 문자 치환하는 기능을 다루어보겠습니다. replaceAll() replace()를 알아보기에 앞서 replaceAll() 함수에 대해 먼저 알아보겠습니다. 일단 Javascript의 내장 기능 중 replaceAll()은 없다고 생각하시는 게 좋습니다. ECMA-262 12th(2021) 스펙을 기준으로 replaceAll() 기능이 추가되었기 때문에 최신을 바탕으로 하는 개발 환경이 아니라면 replaceAll()은 사용하기가 어렵습니다. See the Pen repalceAll by yongdae (@yongdae) on CodePen. replace() 본..

원문보기 내부링크
Tistory

Javascript - Array map 사용법

오늘은 Javascript의 Array가 가지고 있는 map의 정의와 사용법 그리고 활용 방법에 대해 이야기해보려고 합니다. 일단 Array가 가진 map 함수가 어떤 함수인 지부터 살펴보도록 하죠. map 정의 Array.prototype.map ( callbackfn [ , thisArg ] ) 주로 주어진 배열의 값을 재정의 할 때 사용하는 방법으로 ECMA에는 "주어진 배열의 값들을 오름차순으로 접근해 callbackfn을 통해 새로운 값을 정의하고 신규 배열을 만들어 반환한다"라고 정의되어있습니다. 예제 코드를 통해 map의 사용법을 살펴보겠습니다. const numbers = [1, 2, 3, 4, 5]; const result = numbers.map(number => number * num..

원문보기 내부링크
Tistory

Javascript - Date 날짜 계산 [날짜 비교, 날짜 차이]

이번 글에서는 Javascript의 Date 객체를 이용해 서로 다른 날짜를 비교하는 방법에 대해 알아보려고 합니다. 날짜를 비교하는 방법은 이전에 학습한 날짜 형식 맞추기나 날짜 설정하는 것에 비해 비교적 간단합니다. 기본적으로 비교 연산자를 사용해 서로 다른 날짜의 차이를 알 수 있습니다. 날짜 차이 또는 날짜 비교 혹은 날짜 계산 const january = new Date(2021, 0, 1); const february = new Date(2021, 1, 1); // true console.log(january < february); // false console.log(january > february); Date 객체는 비교 연산자를 이용해 값의 차이를 비교할 수 있고, 이를 통해 이전 날짜..

원문보기 내부링크
Tistory

Javascript - Date 시계 만들기

이번 글에서는 이전에 학습한 Javascript의 Date() 객체를 활용해서 문자 시계(Text Clock)를 만들어 보겠습니다. 자바스크립트의 내장 객체인 Date와 타이머 함수인 setInterval()을 사용하면 년, 월, 일, 시간을 보여주는 시계를 만들 수 있습니다. 문자 시계(Text Clock) 만들기 화면에 날짜와 시간을 표시하기 위해서는 Date객체의 날짜 및 시간 데이터 값을 가져오는 함수가 필요하고 일정 시간을 주기로 화면에 보이는 값을 갱신하기 위해서는 setInterval() 함수를 사용합니다. 이렇게 Date 객체의 날짜 및 시간 제공 함수와 특정 주기 반복 실행 함수를 가지고 쉽게 문자 시계(Text Clock)를 만들 수 있습니다. : . . 예제로 작성한 코드는 첨부파일로..

원문보기 내부링크
Tistory

2021.04.18 주간회고

금주 목표 1일 1회 글쓰기 (완료) 책 한 권 읽기 - 1만 시간의 재발견 (미완료) 애드센스 자료 정리 (진행 중) - 1일 1회 글쓰기 이번 주에도 하루에 한 개의 포스팅을 하는 목표는 달성을 완료했다. 한 3주 정도 쓰면 어느 정도 익숙해지고 쉬워질 줄 알았는데 되려 시간이 지날수록 어려워지는 느낌이 더 강하다. 조금 더 글에 채우는 정보를 좋은 주제들로 채우고 유익한 내용으로 문장을 적고 싶다고 생각하다 보니 익숙해지는 것은 머나먼 훗날의 일이 될 거라는 예감이 든다. 지금까지는 작성하는 글의 주제를 어떻게 잡아야 할지 갈피를 잡지 못하고 있었는데 이번 주에 읽은 구글 애드센스로 돈 벌기, 구글 애드센스 마케팅, 개발자의 글쓰기라는 책을 읽으면서 조금이나마 가야 할 방향을 잡을 수 있었다. 블로..

원문보기 내부링크
Tistory

Javascript - Date 날짜 계산 [더하기, 빼기, 설정]

오늘은 Date 객체가 가진 get, set 함수를 통해 날짜 및 시간 데이터를 가져오고 설정하는 방법에 대해서 이야기하려고 합니다. Date 객체를 사용하는 기초적인 부분을 아직 잘 모르시거나 조금 더 알고 배워보고 싶으신 분은 먼저 이전에 작성한 글을 통해 학습 후 이 글을 통해 조금은 더 능숙하게 Date 객체를 다뤄보시기를 추천드립니다. Javascript - Date 기초 배우기 [new Date()] 맨 처음 자바스크립트를 통해 만난 Date는 생각보다 사용하기도 어렵고 어?라고 할 정도로 모호하고 쓰기 불편한 점이 많습니다. Java의 Date, Calendar 만큼 개발을 하는데에 편의성이나 활용도가 떨 7942yongdae.tistory.com 날짜 설정하기 const nextYear =..

원문보기 내부링크
Tistory

Javascript - Date 날짜 형식 [yyyy-MM-dd]

이번에는 Javascript의 Date 객체가 가진 format 형식 지정과 toString에 대해 이야기해보려고 합니다. Javascript의 Date 객체는 날짜의 형식과 관련해 편리함 없이 불편한 기능들을 제공합니다. 기본적으로 7가지의 형식을 정의하고 있으며, 앞서 말했듯 이 기능들은 편의성이 떨어져 잘 사용되지 않습니다. Date 기본 날짜 형식 지정 및 출력 Date 객체는 기본적으로 7가지의 형식 출력을 제공합니다. const today = new Date(); today.toString(); // Mon Apr 19 2021 23:02:18 GMT+0900 (Korean Standard Time) today.toDateString(); // Mon Apr 19 2021 today.toLoc..

원문보기 내부링크
Tistory

Javascript - Date 사용법 알아보기

맨 처음 자바스크립트를 통해 만난 Date는 생각보다 사용하기도 어렵고 어?라고 할 정도로 모호하고 쓰기 불편한 점이 많습니다. Java의 Date, Calendar 만큼 개발을 하는데에 편의성이나 활용도가 떨어집니다. 그래서 Javascript 같은 경우 내장하고 있는 Date보다는 Moment와 Date-fns와 같은 별도의 라이브러리를 통해 Date(날짜 및 시간)를 사용합니다. 오늘은 어렵지만 알아두면 좋은 Javascript의 Date를 전반에 걸쳐 살펴보도록 하겠습니다. Date의 Timezone 자바스크립트 Date는 2개의 시간대를 고려하고 만들어졌습니다. - Local time: 현재 실행되고 있는 환경을 기반으로 한 시간대입니다. - UTC(Coordinated Universal Tim..

원문보기 내부링크
Tistory

내가 쓴 글을 구글이 싫어할지 모른다 - 검색에 노출이 되지 않을 때

노출이 잘 되고 잘 되지 않는 글(데이터)은 무슨 차이가 있나 만약에 구글과 같은 검색 사이트나 다음, 네이버 같은 대형 포털 사이트가 내가 작성한 글을 좋아하지 않는다면 어떻게 되는 걸까? 아니 좋아하는 것은 둘째치고 싫어한다면 어떻게 되는 거지? 아니 도대체 좋아하고 싫어하고 근거나 기준이 있기는 한 거야?라는 생각이 문득 들었습니다. 왜인지 열심히 작성하고 있는 글이 나 혼자만 알고 남들이 모른다면 보람도 재미도 없을뿐더러 글의 가치가 낮게 평가받고 있는 부분이니 글을 잘 써서 가치를 인정받고 싶은 마음이 생기는 것은 비단 저만 가진 생각은 아니라고 생각합니다. 그렇다면 정말로 지금 쓰고 있는 이 글이나 동시에 무수히 만들어지고 인터넷에 올라오는 글(데이터)은 어떻게 판단되고 측정되고 있는 걸까요?..

원문보기 내부링크
Tistory

Error - Port 8080 was already in use

Port 8080 was already in use 에러와 원인과 해결 방법 메시지 *************************** APPLICATION FAILED TO START *************************** Description: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that's listening on port 8080 or configure this application to listen on another port. Process finished with exit code 1 원인 이 에러가 발생하는 경우는 서버를 구동하려고 할 때 서버가 사..

원문보기 내부링크
Tistory

객체지향 생활 체조 - 규칙 5: 축약 금지

줄여쓰지 않는다. (축약 금지) 이 규칙이 가지는 의미 int numCnt = 4; for(int i = 0; i < list.size(); i++) { ... } String btnText = "hello world"; 프로그래밍을 하다 보면 자주 보게 되는 변수명들이 있는데 생각이 나는 대로 적어보면 다음과 같다. 코드를 작성하다 보면 클래스명이나 메서드명 아니면 변수 명의 이름을 줄여서 쓰고 싶은 욕구를 느끼게 된다. 그 이유는 주로 이곳저곳에서 값들을 가져와서 사용하다 보면 구분을 짓기 위해 접두사를 사용하게 되는데 그 접두사를 이어 붙이다 보면 이름의 길이가 길어져서 한글 자라도 줄이고자 count는 cnt, index는 i, button은 btn 같이 이름을 함축적으로 줄여 쓰게 된다. 또한 ..

원문보기 내부링크
Tistory

웹 개발자 취업 준비하기 - 프론트엔드 인터뷰

시작하기 개발자로 회사에 취업을 하기 위해 면접을 보거나 채용을 위해 인터뷰를 하게 되면 의외로 기초적인 부분을 많이 놓치고 있다는 것을 느낍니다. 개인적으로는 제대로 기술을 가르쳐주지 않고 학원에서 찍어내듯이 양성되는 개발자들과 급박한 일정에 맞추어 배움과 이해 없이 개발만 하는 환경적인 요소가 그런 상황을 만들게 아닐까 가끔 생각하곤 합니다. Github의 몇 개의 Repoistory를 통해 프론트엔드 개발자라면 알아야 할 내용에 대해 정리하였습니다. 프론트엔드 개발자를 준비하시는 예비 개발자 분들에게는 취업에 도움이 되었으면 좋겠습니다. 1. 프론트엔드 인터뷰 핸드북 [front-end-interview-handbook] 웹 화면을 개발하기 위해 필수적으로 알아야 할 HTML, CSS, Javasc..

원문보기 내부링크
Tistory

웹 크롤러(web crawler)? 웹 스파이더(web spider)? 도대체 뭘까요?

시작하기 웹 크롤러(web crawler) 아니면 웹 스파이더(web spider)라고 불리는 것은 통칭 엔진 봇이라고 말하는 프로그램입니다. 일명 방대한 네트워크를 말하는 WWW(World Wide Web), 즉 웹을 돌아다니면서 데이터를 수집하고 색인하는 임무를 수행합니다. 웹 크롤러와 관련된 내용을 검색해보면 크롤링, 스크래핑이라는 단어도 연관되어서 나오는데 크롤링은 앞서 말한 웹 클롤러가 하는 임무를 정의하는 말이지만 스크래핑은 다른 성격을 지는 내용입니다. 크롤링(crawling)은 정해진 규칙을 지키면서 웹 문서를 수집하고 색인하는 작업이고 스크래핑(scraping)은 웹 공간에 있는 특정 목적을 가지고 취득해 사용하는 방법을 말합니다. 분명히 크롤링과 스크래핑은 엄연히 목적을 지니고 다른 작..

원문보기 내부링크
Tistory

티스토리 포스트 주소 설정 장단점 알아보기 - 검색 노출 순위 높이기

시작하기 일반적인 웹사이트 개발은 내부적으로만 사용하는 대외비적인 성격이 강해서 외부의 검색과 무관하게 진행됩니다. 그렇다 보니 개발자임에도 검색 그리고 특히 SEO(Search Engine Optimization)과 같은 기술을 공부하거나 관심을 가지지 않았습니다. 그렇지만 일반 사용자를 대상으로 하는 플랫폼을 개발을 하게 되면서 이전과 다른 학습이 필요했는데 그 부분 중 일부가 검색과 SEO 기술이었습니다. 검색에 대한 지식을 처음 접하시는 분을 위해 SEO에 대해 간략히 이야기드리면 티스토리 글(데이터)이나 네이버 블로그 글(데이터) 아니면 어떤 웹 사이트에서 생산되는 글(데이터)을 인터넷에서 잘 검색이 될 수 있도록 해주는 기술 사양의 일부입니다. 즉 지금 작성하고 있는 이 글과 같은 일종의 데이..

원문보기 내부링크
Tistory

객체지향 생활 체조 - 규칙 4: 한 줄에 한 점만 사용

Photo by Xiaofen P on Unsplash 한 줄에 점 하나만 찍는다. "한 줄에 한 점만 사용"이라는 규칙은 코드를 작성할 때 한 줄(Line)에 "." 하나만 사용하자는 이야기입니다. 단순하게 코드 한 라인에 "." 하나를 사용하는 규칙을 적용하면 코드의 가독성이 좋아집니다. 간단하게 예를 들면 자바에서 람다식을 무자비하게 사용한 코드들에 "한 줄에 한 점만 사용" 이 규칙을 적용하면 코드를 이해하기 쉬워집니다. 하지만 "한 줄에 한 점만 사용" 규칙은 디미터의 법칙이 말하는 "Don't talk to stranger"(낯선 사람과 대화하지 마라), 바꿔 말하면 친구 하고만 말을 하라는 의미도 가지고 있습니다. 일반적으로 한 줄에서 "."이 하나 이상인 경우에는 한 가지 이상의 일을 하고..

원문보기 내부링크
Tistory

2021.04.11 주간 회고

금주 목표 1일 1회 글쓰기 책 한 권 읽기 - 1만 시간의 재발견 (추가) 애드센스 반영하기 - 1일 1회 글쓰기 이번 주는 하루에 한 개씩 개발을 주제로 해서 포스팅하는 목표는 달성할 수 있었다. 글을 써놓고 보니 보완할 내용도 많고 전달하려고 했던 의도를 분명히 하지 못한 이야기도 있어 아쉬움이 많은 글들이 유난히 많은 것 같다. 생각지 못하게 구글 애드센스를 달면서 금전에 대한 욕망이 생겨났다. 애드센스를 달기 위해 블로그를 수정을 여러 가지 시도하다 보니 원래 목표로 한 글 쓰는 기는 잘했지만 양적으로나 질적으로 너무 미완인 게 아닌가 싶다. - 책 한 권 읽기 [1만 시간의 재발견] 베스트셀러로 한 때 서점가를 누볐던 책이다. 이전에도 기회가 있어 한 번 읽어 본 적이 있었는데 당시에 일이 있..

원문보기 내부링크
Tistory

객체지향 생활 체조 - 규칙 3: 원시값과 문자열의 포장

Photo by Viktor Forgacs on Unsplash 모든 원시값과 문자열을 포장(Wrap)한다. 이 규칙이 가지는 의미 "int 값 하나 자체는 그냥 아무 의미 없는 스칼라 값일 뿐이다" 책에서는 이 문장을 시작으로 규칙을 설명합니다. 일반적으로 프로그래밍에서 쓰이는 원시값들은 값(리터럴)의 정의만 가질 뿐 별 다른 의미를 지니지 못합니다. 값이 값 이상의 의미를 가진다는 것은 어쩌면 이상한 이야기 일지 모릅니다. 다만 원시적인 값을 포장(Wrap)을 통해 이름을 가질 수 있게 하면 어떨까요? 이름을 가진다는 것은 사소할지 모르지만 프로그래머에게는 의미를 전달합니다. 즉 프로그래밍에서 객체가 이름을 가진다는 것은 어떤 것을 표현하는지 왜 쓰이고 있는지에 대한 정보를 말한다고 이야기할 수 있습..

원문보기 내부링크
Tistory

Java - 변수 타입 - 기본형(Primitive type)

시작하기 자바에서는 모든 변수에 타입을 정의하고 있으며, 변수가 가지는 타입에 따라 담을 수 있는 값의 종류가 달라집니다. 바꿔 말하면 사용하려는 값의 종류에 따라 변수 타입을 결정합니다. 변수의 타입과 값의 상관관계를 이미지화해보면 아래의 그림과 같습니다. 변수에 저장하는 형과 값이 맞지 않는 경우 변수는 값을 가질 수 없고 값도 변수에게 전달 될 수 없습니다. 그렇기 때문에 변수 타입과 값은 서로에게 상호보완적인 요소로 사용됩니다. 위의 그림처럼 알맞은 형에 값을 전달해야지만 값을 저장 할 수 있습니다. 따라서 변수 타입은 값의 특성에 따라 정의되고 사용됩니다. 변수 타입은 크게 기본형(Primitive type)과 참조형(Reference type)으로 구분할 수 있습니다. 이번 글에서는 2가지 타..

원문보기 내부링크
Tistory

Java - 변수 선언(Variable declare)과 초기화(Initialize)

값(데이터)을 사용하려면 변수를 선언(Declare) 하자 자바에서 변수를 사용하기 위해서는 변수를 선언해야 합니다. 변수를 선언하는 이유는 값을 저장하는 공간을 확보하겠다는 이야기입니다. 정확히는 컴퓨터가 가진 메모리를 사용하겠다고 미리 컴퓨터에게 말하는 것입니다. 컴퓨터에 메모리가 부족하다고 프로그램이 실행이 안 되는 이유는 이렇게도 설명이 가능합니다. 변수를 선언하는 것은 미리 자원을 확보하는 동시에 사용한다는 의미를 가지고 있기 때문에 변수를 선언하지 않는다면 프로그램은 값(데이터)을 담아둘 공간이 없어 값을 사용할 수 없습니다. 변수를 선언하는 방법은 다음과 같습니다. String message; 변수를 선언하는 방법은 변수 타입과 변수명을 함께 작성하는 것입니다. 위의 예제는 String(문자..

원문보기 내부링크
Tistory

초보 블로거의 블로그 구글 애드센스 신청과 승인 받기

구글 애드센스 승인을 받다 예상보다 빨리 구글 애드센스 승인 글을 작성하게 되었습니다. 구글 애드센스는 신청하면 바로 승인이 되는 줄 알고 블로그를 개설하는 동시에 바로 신청하였습니다. 물론 결과는 콘텐츠 불충분으로 인한 승인 거절이었습니다. 구글 애드센스를 에드 고시라고 부른다는 것도 승인 거절 이후 검색을 통해 알게 되었고 에드 고시, 애드센스 승인 무한 대기, 애드센스 무한 검토, 애드센스 무한 루프 등 연관된 검색어를 통해 애드센스 승인은 쉽지 않다는 걸 알 수 있었습니다. 그래서 한 10번 정도 신청하면 승인 나려나?라는 막연한 10개 정도의 글을 작성한 시점인 지난주 월요일(2021/03/29)에 다시 구글 애드센스 심사를 요청하였습니다. 그리고 신청한 지 9일이 지난 시점인 어제 수요일(20..

원문보기 내부링크
Tistory

개발자가 말하는 IT 웹 개발자 되기 - 기초편

시작하기 이 글은 이전에 작성한 IT 개발자 국비지원 어떤가요?이라는 글을 쓰다가 웹 개발자가 되는 방법에 대해서도 작성해놓으면 좋을 것 같다고 생각해 작성하게 된 글입니다. 간혹 들리는 학원에서 가르쳐주는 웹 개발자 과정은 제가 처음 프로그래밍을 배울 때와 기술 수준이 거의 똑같아서 당황스럽습니다. 여전히 SVN을 가르쳐주고 그마저도 커밋과 체크아웃만 사용하다는 이야기에는 헛웃음이 나왔습니다. 그걸 가르쳐주는 사람에게 따져서 물어보고 싶을 정도로요. 혹시 지금 그런 학원에서 프로그래밍을 배우고 계신다면 다른 학원을 다시 알아보시는 게 좋을 수 있습니다. 이런저런 이유로 간단하게라도 웹 개발자가 실무 개발에서 어떤 기술들을 필요로 하는지 조금이라도 알고 계시면 학원이든 어디에서든 웹 개발을 배우는데 도움..

원문보기 내부링크
Tistory

가지 않은 길 - 로버트 프로스트

Photo by JOHN TOWNER on Unsplash Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; Then took the other, as just as fair, And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the..

원문보기 내부링크
Tistory

2021.04.04 주간 회고

시작하기 평상시에 머릿속에 있는 생각을 글로 옮겨 적거나 표현하는 데 있어서 예상과는 다른 결과를 초래하는 일들이 간혹 벌어지곤 했다. 나름 고민하고 신경을 써서 한다고 했음에도 결과물은 영 신통치 않은 면이 많았다. 그런 이유를 핑계 삼아 글 쓰는 연습도 하고 가지고 있는 지식이나 생각도 정리하기 위해 블로그를 개설하고 글을 쓰는 연습을 하기로 했다. 어떻게 해야 부지런히 글공부도 생각도 정리할 수 있을까 하는 고민 끝에 주간별로 목표를 계획하고 실천하기로 했다. 처음 이런 방향성을 가지고 접근한 것은 2주 정도 전이지만 막연히 생각하고 바로 시작했던 작업이라 정리한다는 생각도 하지 못했다. 생각해보니 단순히 목표를 설정하고 실천하는 것도 중요하지만 중간마다 정산을 해보면 나쁘지 않겠다는 생각도 들고 ..

원문보기 내부링크
Tistory

Javascript - console.log 사용하는 팁

자바스크립트를 개발하게 되면 가장 많이 만나는 기능이 console.log 기능입니다. 코드 문제를 해결하거나 데이터 흐름을 추적할 때 요긴하게 사용하는 기능입니다. console.log 대신 debug와 같은 출력 라이브러리를 활용해서 하는 방법도 있지만 아무런 설치 없이 손쉽게 사용할 수 있다 보니 console.log를 애용하는 것은 어찌 보면 당연한 것일지도 모릅니다. 그럼 오늘은 자주 사용하는 console.log의 기능 중 자주 활용하거나 알아두면 좋을 부분에 대해 이야기하겠습니다. console.log()를 사용하는 방법 기초 사용법 기본적인 사용방법은 아래와 같이 간단합니다. const name = "YD"; const message = "Hello world!"; const message..

원문보기 내부링크
Tistory

Java - JVM(Java Virtual Machine) 간단히 알아보기

시작하기 Java라는 프로그래밍 언어를 배우게 되면 흔하게 접하는 내용 중 하나가 JVM입니다. JVM은 Java Virtual Machine의 줄임말로 번역하면 자바 가상 기계입니다. Java Virtual Machine(자바 가상 머신)의 역할을 조금 더 구체적으로 설명하면 Java로 만들어진 프로그램을 운영체제에 종속되지 않고 실행되게 해주는 가상 머신이라고 말 할 수 있습니다. 개인적으로는 JVM은 통역사라고 설명하는 게 의미적으로 가장 이해하기 좋다고 생각합니다. JVM이 하는 일을 더 자세히 알아보면 JVM은 정말 멋진 통역사입니다. 지난해에 이슈가 되었던 봉준호 감독님의 통역사처럼 말이죠. 이미지로 보는 JVM이 하는 일 by 통역 일반적인 프로그램이 동작하는 원리를 그려보았습니다. 그림과 ..

원문보기 내부링크
Tistory

IT 개발자 국비 지원 어떤가요? - 웹 개발자 / 풀스택 / 프론트엔드 / 백엔드

시작하기 요즘은 IT 개발 직군이 여러모로 이슈가 많습니다. 취업이 어려운 시기에 인터넷이나 뉴스에서 연일 보도되는 기사를 보면 IT 개발자는 연봉도 높은 편인 것 같고 네이버 같은 인터넷, IT를 다루는 회사에서는 개발자 구하기가 어렵다고 하니 많은 분들이 개발자에 대해서 궁금해하는 것 같습니다. 실제로 네이버나 다음 메인 페이지에서는 개발자 모시기라는 주제로 된 인터넷 뉴스도 자주 보입니다. 그래서인지 개발자가 어떻게 될 수 있는 것인지와 정확히 어떤 일을 하는지 많이 궁금해하시는 것 같다고 생각합니다. 오늘 다루는 이야기는 앞서 이야기한 내용 중 개발자가 될 수 있는 방법 중 하나인 국비 지원에 관해서입니다. 실제로 제가 개발 일을 시작하게 된 시점에는 컴퓨터와 관련이 없는 전공을 졸업한 비전공자였..

원문보기 내부링크
Tistory

jQuery - 제이쿼리란?

시작하기 jQuery는 HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리입니다. 지금은 Angular, React, Vue 같은 화면을 다루는 여러 가지 기술들이 있어 화면 개발을 보다 쉽게 할 수 있지만, 화면과 관련된 기술이 발전하기 전에는 jQuery 만큼 화면 개발을 쉽게 해 주는 라이브러리는 존재하지 않았습니다. 또한 화면 개발에 있어 프로그래머들이 가장 다루기 힘들어하는 크로스 브라우징을 jQuery는 강력히 지원하였고 많은 프로그래머들은 열광했습니다. 현재는 v3.6.0 버전까지 릴리즈 되었습니다. Write less, do more - jQuery가 가진 철학 jQuery가 기본적으로 가진 철학은 "write less, do mo..

원문보기 내부링크
Tistory

Java - 구구단 만들기 (2 ~ 9단)

Photo by Gayatri Malhotra on Unsplash 시작하기 구구단 만들기는 개발자로 취업하기 이전 Java 학원을 다닐 때 배웠던 문제입니다. 갑자기 지금 실력으로는 어떻게 코드를 만들 수 있을지 궁금해서 작성한 글이니 심심풀이로 봐주시면 좋겠습니다. 요구사항 2 ~ 9까지 곱셈하여 출력한다. 곱셈은 1 ~ 9까지 수를 제한한다. 샘플 코드 - 간단한 버전 public class MultiplicationTable { public static void main(String[] args) { int minNumber = 2; int maxNumber = 9; int startMultiplyValue = 1; int endMultiplyValue = 9; for (int number = m..

원문보기 내부링크
Tistory

Java - 변수(Variable)

변수는 어떤 의미일까? 일반적으로 프로그래밍을 처음 접하게 되면 가장 먼저 접하게 되는 내용 중에 하나가 바로 변수입니다. 변수가 어떤 내용을 가지고 있기에 프로그래밍을 배우면 입문부터 배우게 되는 걸까요? 그 이유는 바로 프로그램의 근간이라고 말할 수 있는 데이터(값)를 프로그래밍에서는 변수라고 부르고 사용하기 때문입니다. 다르게 말하면 변수는 프로그래밍에서 없으면 안 되는 필수 요소입니다. 이해를 돕기 위해서 설명은 데이터와 변수가 같다고 이야기드렸지만 의미적으로 같게 사용하고 있을 뿐 완전히 똑같은 형태를 가지고 있지는 않습니다. 정확한 내용은 아래에서 설명할 변수의 선언과 할당을 보시면 됩니다. 그럼 현실과 빗대어 실제 프로그램에서 사용되는 변수의 역할을 설명해보겠습니다. 지금 쇼핑을 하러 가서 ..

원문보기 내부링크
Tistory

객체지향 생활 체조 - 규칙 2: else 예약어 금지

else 예약어(keyword)를 쓰지 않는다. 이 규칙이 가지는 의미 일반적으로 개발자라면 if/else 구문을 쉽게 이해할 수 있습니다. 구문 자체가 조건을 나타내는 동시에 간단하기 때문입니다. 그렇다 보니 개발자는 쉽게 Callback hell처럼 보이는 반복되는 중첩 조건문이나 무수히 많은 switch/case 구문을 마주하게 됩니다. 신규 기능이 추가되거나 수정사항이 발생하면 기존의 코드를 리팩터링 하기보다는 분기하는 조건문을 넣는 게 쉽기 때문입니다. 결국 if/else, switch/case와 같은 분기 구문은 안 좋은 코드를 양산하기 쉬워집니다. "else 예약어 금지" 규칙은 단순히 if/else 만 사용하지 않는 것이 아니라 switch/case 구문을 포함한 분기 구문을 사용하지 않게..

원문보기 내부링크
Tistory

Java - 자바란?

Java는 무엇인가? Java는 썬 마이크로 시스템즈(Sun Microsystems)에서 개발한 프로그래밍 언어로 1999년 1월에 공식적으로 발표한 객체지향 프로그래밍 언어입니다. Java의 중요한 특징은 운영체제(Operating System) 즉 플랫폼(Platform)에 독립적이라는 것입니다. 그 이유는 Java가 "Write Once Run Anywhere"라는 목표를 가지고 만들어졌기 때문입니다. 그렇기 때문에 Java로 만들어진 프로그램은 JVM이 존재하는 운영체제라면 프로그램을 전혀 변경하지 않고도 실행이 가능합니다. 이러한 장점으로 인해 Java는 다양한 운영체제와 호환성을 가진 언어로써 컴퓨터의 발전과 함께 많은 사용자들을 확보할 수 있었습니다. 또한 기존의 프로그래밍(절차 지향) 언어..

원문보기 내부링크
Tistory

객체지향 생활 체조 - 규칙 1: 메서드당 들여쓰기 한 번

Photo by Nick Fewings on Unsplash 한 메서드에 오직 한 단계의 들여쓰기만 한다. 이 규칙이 가지는 의미 이 규칙은 언뜻 보기에는 들여쓰기(indent)에 초점을 두고 있는 것처럼 보입니다. 실제로 내용 자체도 "들여쓰기"의 단계를 제한한다고 정의하고 있습니다. 그렇지만 이 규칙을 적용하다 보면 자연스럽게 만나는 핵심은 "하나의 단락(block)이 한 가지의 일"을 하려고 노력했느냐입니다. 반대로 말하면 들여쓰기가 한번 이상 적용된 단락 즉 중첩된 제어 구조가 있다면 이 단락은 한 가지 이상의 일을 하고 있음을 증명하는 셈이 되어 버립니다. 그렇기 때문에 "메서드당 들여쓰기 한 번"이라는 규칙은 메서드가 가지는 구문 중 한 단락에서는 한 가지의 일만 수행하게 만듦으로써 메서드의 ..

원문보기 내부링크
Tistory

React - create-react-app 로 React 시작하기 [CRA]

시작에 앞서 React는 Facebook에서 만든 자바스크립트 라이브러리로 Single Page Application를 만들기에 적합한 기술입니다. React는 CDN 방식으로도 사용이 가능하지만 권장되는 방식은 Webpack과 같은 번들러를 통해서 프로젝트를 구성해서 이용하는 방법입니다. Facebook에서는 쉽고 빠르게 React 프로젝트를 구성할 수 있도록 boilerplate를 만들어 사용자에게 배포하고 있는데 이와 같이 React 프로젝트를 정의하고 배포할 수 있는 환경을 만들어주는 기술을 CRA(create-react-app)라고 합니다. 시작하기 npx create-react-app todo-list cd todo-list npm start 위의 명령문을 실행하면 React 프로젝트를 만들고..

원문보기 내부링크
Tistory

하늘은 지붕 위로 - 폴 베를렌

Photo by Andrej Lišakov on Unsplash Le ciel est, par-dessus le toit, Si bleu, si calme ! Un arbre, par-dessus le toit, Berce sa palme. La cloche, dans le ciel qu'on voit, doucement tinte. Un oiseau sur l'arbre au'on voit Chante sa plainte. Mon Dieu, mon Dieu, la vie est la, Simple et tranquille. Cette paisible rumeur-la Vient de la ville. Qu'as-tu fait, o toi que voila Pleurant sans cesse, Dis, ..

원문보기 내부링크
Tistory

Git - 커밋 메시지 컨벤션

Photo by Oskar Yildiz on Unsplash 시작하기 다음은 효과적으로 커밋 메시지를 작성하고 활용하기 위한 규칙을 정리한 내용입니다. 이 부분에 대해서는 사람이나 조직마다 의견이 나뉜다는 사실을 인지하고 참고하면 좋다고 생각되는 Udacity - Git commit message style guide를 참조하여 글을 작성하였습니다. 깃 커밋 메시지란? 조직이나 팀 단위 혹은 혼자서 git을 통해 개발을 하는 경우에 일련의 작업들 하나의 일로 간주할 수 있는데 이 부분을 커밋(commit)이라고 합니다. 커밋을 정의하는 경우 내용을 남길 수 있는데 이를 커밋 메시지(commit message)라고 말하며 내용을 작성할 경우 관례(convention)에 따라 작성하면 개인 혹은 팀의 구성원..

원문보기 내부링크
Tistory

소프트웍스 앤솔러지 - 객체지향 생활 체조 학습하기

객체지향 생활 체조 규칙 알아보기 소프트웍스 앤솔러지 책 내용 중에는 10장 내외로 짧은 내용이지만 따라 하다 보면 자연스럽게 객체지향적인 코드를 작성할 수 있는 좋은 규칙이 있습니다. 책에서는 이 내용을 "객체지향 생활 체조"라는 주제로 다루고 있는데 그 규칙은 총 9가지로 제안하고 있고 나열하면 다음과 같습니다. 한 메서드에 오직 한 단계의 들여 쓰기만 한다. else 예약어(keyword)를 쓰지 않는다. 모든 원시 값과 문자열을 포장(wrap)한다. 한 줄에 점을 하나만 찍는다. 줄여 쓰지 않는다(축약 금지). 모든 엔티티(entity)를 작게 유지한다. 2개 이상의 인스턴스 변수를 가진 클래스를 쓰지 않는다. 제일 클래스(first-class) 컬렉션을 쓴다. 게터getter/세터setter/프..

원문보기 내부링크
Tistory

CRLF와 CR/LF 그리고 EOL

Photo by Pereanu Sebastian on Unsplash CRLF란 무엇일까? CRLF는 한글로 말하면 새 줄 문자(new line)라는 말로 "개행", "줄 바꿈"과 같은 뜻을 의미합니다. 정확히는 CR와 LF를 합성한 단어로 EOL(end-of-line)을 의미합니다. 여기서 짚고 알고 넘어가면 재미있는 부분은 CR, LF의 개념은 타자기에서 왔다는 점입니다. 타자기를 이용해 문서를 작성할 때 줄 바꿈 할 때 쓰는 방법이 Line Feed, 줄의 시작점으로 가는 방법이 Carriage Return으로 즉 종이를 움직여서 글자를 인쇄하는 방식에서 CR, LF 개념이 만들어졌다는 사실입니다. 그렇다면 CR과 LF는 정확히 무엇을 이야기하는 것일까요? CR 과 LF CR: Carriage Re..

원문보기 내부링크
Tistory

React - 리액트 App 기본 실행 포트 변경하기

Photo by Alex Duffy on Unsplash 시작하기 create-react-app을 통해 만든 React App의 경우 3000번 포트를 사용해서 구동될 수 있도록 설정되어 있습니다. 일반적인 상황에서는 3000번 포트를 이용해 개발하는 것이 문제 되지 않으나 프로젝트 상황이나 개발 환경에 따라서 포트를 변경해서 사용해야 하는 상황이 발생합니다. 예를 들면 이미 3000번 포트를 다른 프로그램이 사용하고 있거나 다중으로 프로젝트를 실행해야 하는 상황인 경우 기본으로 사용하는 포트를 변경해서 사용해야 합니다. 이와 같은 경우 포트를 변경해서 사용하는 대표적인 방법으로는 아래와 같이 3가지 정도로 이야기해 볼 수 있습니다. 1. 명령어로 포트 설정하기 1. React 프로젝트 폴더에서 아래와 ..

원문보기 내부링크
Tistory

평온을 비는 기도(Serenity Prayer) - 라인홀드 니버

Photo by Aaron Burden on Unsplash God grant me the serenity To accept the things I cannot change; Courage to change the things I can; And wisdom to know the difference. Living one day at a time; Enjoying one moment at a time; Accepting hardships as the pathway to peace; Taking, as He did, this sinful world As it is, not as I would have it; Trusting that He will make all things right If I surrend..

원문보기 내부링크
1 2