프로그래밍/Frontend

머릿말 가끔 웹사이트를 만들거나 블로그를 운영할 때 유입된 사용자가 일반 사용자인지 크롤링 봇인지 확인해야할 때가 있습니다. 그럴 때는 간단하게 위에 이미지처럼 javascript 라이브러리를 하나 설치해서 손쉽게 해당 기능을 구현할 수 있습니다. 위에 소개된 라이브러리는 isbot 이라고 해서 현재 npm package list 기준으로 가장 다운로드 수가 많고 업데이트가 최근에 있던 라이브러리입니다. 자세한 건 아래 링크를 참고해주세요. https://www.npmjs.com/package/isbot isbot 🤖 detect bots/crawlers/spiders via the user agent.. Latest version: 3.4.3, last published: 20 days ago. Sta..

프로그래밍/Frontend

머릿말 일반적으로 개발자도구를 탐지하는 이유는 Client 단 소스코드를 분석하기 어렵게 만들기 위해서라고 생각하는데요. 근데 사실 이게 정말 애매한 게 보통 Client 단 소스코드를 분석하기 어렵게 하기 위한 방법으로는 소스코드 난독화를 주로 합니다. 근데 이제 이 난독화도 결국에는 프로그래밍 언어로 이루어진 코드이기 때문에 역으로 분석도 가능하겠죠. 그래서 다시 개발자도구를 그럼 사용하지 못하게 해보자 같은 생각을 하게 되고, 사실상 Client 단에서 아무리 막으려고 해봤자 우회할 수 있는 방법은 많습니다. 그래서 보통 일반적으로 백신과 같은 프로그램에서 개발자도구를 막곤 하지요. 아마 왠만한 은행이나 공공기관 웹 사이트 들어가보면 개발자도구를 키는 순간 강제로 개발자도구를 종료시켜버리는 것을 확..

프로그래밍/Frontend

Lazyload 란? Lazyload 는 페이지를 읽어들이는 시점에서 불필요한 리소스를 나중에 필요한 시점에 로드시켜 사용자에게 효율적인 경험을 제공하는 기술입니다. 단순히 속도측면인 이유도 있겠지만, 데이터 낭비를 줄이기 위함도 있습니다. 최근에는 모바일 통신이 발달됨에 따라 다양한 모바일 데이터 요금제가 있겠지만, 어쨌거나 사용자가 보지도 않는 이미지나 비디오 등을 위해서 데이터가 소비되면 금전적인 자원을 낭비하게 되는 셈이니깐요. 이 외에도 블로그를 하는 입장인 블로거들에게도 lazyloading 이란 정말 중요한 요소입니다. 웹 사이트를 크롤링하는 검색엔진봇은 블로그 게시물과 같은 웹페이지의 전체 구성 요소를 느리게 로딩하면 봇이 해당 구성 요소를 우회하여 콘텐츠가 indexing 되지 않아 검색..

프로그래밍/Frontend

들어가기 전 저는 Handlebars 모듈을 사용하는 웹 소스코드를 분석하고자 간단한 사용법을 익히기 위해서 포스팅에 정리하고자 합니다. Handlebars 와 다른 View Engine 간의 장단점 및 차이점에 대해서는 다루지 않습니다. Handlebars 란 무엇인가? Handlebars 는 간단한 템플릿 언어입니다. Client Side 에서 HTML 태그 또는 다른 문자열들 사이에 템플릿 기호와 입력값을 함께 사용하여 표현에 사용됩니다. {{firstname}} {{lastname}} 표현식은 {{ 로 시작해서 내용이 들어가고 }} 기호로 끝나는 형태입니다. 템플릿이 실행되면 이와 같은 표현식은 특정 값으로 대체됩니다. Handlebars 설치법 가장 빨리 Handlebars 을 테스트해볼 수 있..

프로그래밍/Frontend

Uncaught SyntaxError: Function statements require a function name 위 오류는 오류 내용 그대로 함수 정의 코드에서 함수의 이름이 없어서 생겨나는 오류입니다. 만약 함수가 정의되어 있다면, 어떻게 정의되어 있는지, 혹시 이름이 없는 지, 아니면 오타가 난 건 아닌지 한번 확인해봐야 합니다. 일반적으로 아래와 같은 코드를 입력했을 때 오류가 발생합니다. function () { return "Domdom's World"; } // Uncaught SyntaxError: Function statements require a function name 그 이유는 함수에 이름이 없기 때문이죠. 혹시 익명 함수(anonymous function)를 사용하려고 했다면..

프로그래밍/Frontend

data-target을 통해 원하는 div의 style.display를 변경하는 코드! 버튼을 클릭하여 원하는 태그 컨트롤 하기 컨트롤할 div

프로그래밍/Frontend

웹 사이트를 개발하는 중에 이미지나 css 또는 javascript 파일의 내용을 수정해도 반영이 안되어 있을 경우를 가끔 보실 수 있습니다. 심지어 수정본을 배포하고 나서도 어떤 사용자가 이전에 사이트에 접속하고 나서 인터넷 사용 기록 및 캐시 지우기를 하지 않은 이상 배포 이전의 css, js, image 파일들이 그대로 사용되고 있어서 오류가 나거나 버그가 생기는 케이스가 생기곤 합니다. 이런 문제가 발생할 때마다 사용자보고 오래된 캐시(stale cache) 좀 지워주세요 라고 한다거나 새로고침 좀 해주세요 라고 한다거나 시크릿 브라우저로 한번 해보시겠어요 라고 하는 건 정말 어려운 일이겠죠. 기본적으로 캐쉬의 동작은 URL을 기준으로 기존에 동일한URL에 요청한 적이 있었는 지를 판단합니다. 그..

프로그래밍/Frontend

딕셔너리에서 키만 리스트로 가져오는법, value만 리스트로 가져오는 법입니다 const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.keys(object1)); // expected output: Array ["a", "b", "c"] console.log(Object.values(object1)); // expected output: Array ["somestring", 42, false] 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/values Object.values() - JavaScript | MDN Ob..

프로그래밍/Frontend

var data = map.getBounds(); 요렇게 치고 console.log(data)로 출력해보면 아래와같이 bounds 데이터를 받아옵니다. { "_southWest": { "lat": 37.45128589232625, "lng": 127.09516525268556 }, "_northEast": { "lat": 37.4800007403763, "lng": 127.14782238006593 } } data['_southWest']['lat'] = y min값 data['_southWest']['lng'] = x min값 data['_northEast']['lat'] = y max값 data['_northEast']['lng'] = x max값 이고, 아래처럼 치면 바로 줌 레벨을 가져올 수 있어..