개발자 일지

전체 글 (194)

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

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

더 읽기

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

더 읽기

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

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

더 읽기

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

더 읽기

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

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

더 읽기

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

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

더 읽기

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

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

더 읽기

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

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

더 읽기

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

더 읽기

2021.05.02 주간회고

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

더 읽기

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

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

더 읽기

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

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

더 읽기

Copyright © 개발자 일지 All Rights Reserved

Designed by JB FACTORY

티스토리툴바