실무에서는 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(옵션) : 알림창..
크롬 브라우저를 업데이트한 후 갑자기 웹 사이트가 동작을 안 합니다. 컴퓨터 문제가 있는 건지 사이트에 문제가 있는 건지 알 수 없지만 일단 컴퓨터를 재부팅해봅니다. 여전히 웹 사이트를 정상적으로 볼 수 없습니다. 크롬 브라우저 버전을 업데이트 후 웹 페이지가 동작하지 않습니다. 이번에 최신으로 릴리즈 된 크롬 버전 90.0.4430.212로 업데이트를 한 후 네이버 웹 사이트가 정상적으로 보이지 않는 현상이 발생했습니다. 처음에는 컴퓨터에 문제가 있나 싶어 재부팅을 해보았지만 여전히 웹 사이트는 제대로 동작하지 않습니다. 알고 보니 크롬에서 보안 설정 중 하나인 자바스크립트 자동으로 차단(JavaScript blocked) 기능이 활성화되면서 생긴 문제였습니다. 크롬은 파이어 폭스보다는 보안적인 측면이..
온프레미스(On-premise)와 클라우드(Cloud) 시스템의 장단점을 말하기에 앞서 두 시스템의 정의를 먼저 이야기해볼까 합니다. 두 시스템의 정의를 알면 장단점을 조금 더 쉽게 이해할 수 있습니다. 기본적으로 두 시스템은 모두 서비스(게임, 웹 애플리케이션, 쇼핑몰, 실시간 채팅, 기타 등)를 만들 때 필요한 재료(자원)들을 구성하는 방법에 대한 이야기입니다. 온프레미스는 집을 짓는다고 할 때 집을 짓기 위한 자제 구매부터 건물 도면 그리는 작업, 시공, 건축, 그리고 인테리어까지 모든 과정을 누구의 도움 없이 집을 필요로 하는 사람이 혼자서 다 처리하는 방법입니다. 처음 집을 집는 사람뿐만 아니라 여러 번 집을 지어본 사람도 혼자서는 쉽게 할 수 있는 일이 아닙니다. 클라우드 시스템도 온프레미스처..
금주 목표 1일 1회 글쓰기 [완료] 책 읽기 - 트렌드 코리아 2021 [실패] 구글 애널리틱스 사용법 정리 [완료] - 1일 1회 글쓰기 이번 주 1일 1회 글쓰기 목포는 어떻게든 달성했다. 그런데 만족스럽지 못하다. 기술을 주제로 한 글의 개수가 3개로 50%가 되지 않는다. 흐음.. 뭔가 아직 잘 정리가 되지 않기도 하고 이제는 글을 쓰려면 이전보다 시간이 많이 필요해서 난감하다. 읽는 사람한테 조금이라도 도움이 되려고 하다 보니 내용을 조금은 더 상세하게 작성해야 돼서 글 쓰는 시간이 늘어나고 있다. 지금 생활 패턴으로는 감당이 조금씩 안되고 있어서 힘들다. 그래도 일단은 계속해봐야지 - 책 읽기 [트렌드 코리아 2021] 책 내용이 재미있다.. 가십거리 정도의 책으로 생각하고 가볍게 빌린 책인..
블로그를 운영할 때 중요하게 생각하는 부분 중 하나가 검색을 통해 블로그에 유입되는 수입니다. 검색으로 블로그에 유입이 되는 수를 늘리려면 중요하다고 여기는 부분은 두 가지라고 생각합니다. 1. 작성한 글을 많은 사람들에게 알려야 한다. 2. 글을 통해 독자를 잘 설득할 수 있어야 한다. 거창한 이야기를 하는 것처럼 들릴 수 있지만, 블로그를 운영함에 있어서 이 두 가지만큼 중요한 사실은 없지 않을까요? 오늘은 이 두 가지 주제 중 구글 서치 콘솔을 사용해 티스토리 블로그를 마케팅하는 방법을 알아보려고 합니다. 마케팅이라는 단어가 약간 어렵게 느껴지실 수 있지만 마케팅은 "홍보"입니다. 홍보를 유식한 척해보려고 "마케팅"이라는 단어를 사용해보았습니다. 자 그런데 구글 서치 콘솔을 통해 티스토리 블로그를 ..
웹 사이트에서 XML 사이트 맵은 어떤 의미를 가지고 있는 걸까요? 웹 사이트를 만들거나 블로그를 운영하면 한 번씩 보이는 sitemap.xml이 무슨 의미로 만들어지고 사용되는지 알아보겠습니다. XML Sitemap의 정의 XML Sitemap 공식 사이트에서는 XML 사이트 맵을 다음과 같이 정의하고 있습니다. Sitemap은 웹마스터가 크롤링에 사용할 수 있는 사이트의 페이지에 대한 정보를 검색 엔진에 알리는 손쉬운 방법입니다. Sitemap의 가장 간단한 형식은 검색 엔진에서 사이트를 보다 지능적으로 크롤링할 수 있도록 각 URL에 대한 추가 메타데이터(마지막 업데이트된 날짜, 변경 빈도, 사이트의 다른 URL에 상대적인 중요도)와 함께 사이트에 대한 URL을 나열하는 XML 파일입니다. XML ..
웹 로그(Web Log)란? 일반적으로 웹 로그(Web Log)는 웹 서버가 가지고 있는 기록(Log)을 말합니다. 웹 로그는 서버에서 이루어지는 모든 일들을 구체적으로 기록해서 보관한 데이터입니다. 웹 로그는 상황에 따라 어떤 기록을 어떻게 보관할지 정의할 수 있습니다. 즉 사용자가 웹 사이트를 방문하고 떠나기 전까지의 일련의 과정이나 서버가 제공하는 서비스 기능 처리 내역까지 서버에서 일어난 모든 일은 기록(Log) 될 수 있고 필요에 따라 수집하고 사용할 수 있습니다. 구체적으로 예를 들면 A라는 사용자가 저녁 6시 10분에 회원 가입 페이지에 방문해서, 10분 뒤 회원 가입 완료 페이지로 이동했다면 다음과 같은 데이터를 수집할 수 있습니다. 순서 사용자 시간 내용 1 A 오후 6시 10분 회원 가..
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() 함수를 통해 열린 웹 ..
유비쿼터스의 정의 유비쿼터스란 "Ubiquitous"([신은] 어디에나 널리 존재한다)라는 단어에 컴퓨팅을 결합해서 만든 것으로 '언제, 어디서나 어떠한 통신 단말기를 가지고, 어느 정보통신망(네트워크)을 통해서든, 원하는 정보통신 서비스를 받을 수 있는 것'을 말합니다. 1988년 제록스의 팰로앨토 연구소의 마크 와이저가 ‘유비쿼터스 컴퓨팅이란 컴퓨터 패러다임의 제3의 물결로서 네트워크 기반의 확장형 컴퓨팅 환경을 뜻하며, 머지않아 수 백 대의 컴퓨터가 한 명의 사람을 위해서 존재하는 유비쿼터스 시대 즉, 언제 어디서나 컴퓨터에 접속할 수 있는 세계가 도래할 것’이라고 말하였고 이때를 기점으로 실질적인 연구가 시작되었습니다. 마크 와이저는 '보이지 않는 컴퓨팅' (invisible computing),..