Topic

자바스크립트

A collection of 197 posts
자바스크립트

마우스 우클릭과 드래그 영역 선택을 막기

볼로그나 웹페이지의 내용을 무단으로 복사해가는 것을 막기 위해 많이 사용하는 방법으로  마우스 우클릭을 차단헤 컨텍스트 메뉴가 표시되지 않게 하거나 마우스 드래그를 막아 내용 선택을 할 수 없도록 막는 방법을 많이 사용합니다. 미리 말해두자면, 두가지 모두를 막아도 웹페이지 내용을 긁어가는 것을 막을 수는 없습니다. 이런 차단 방식을 회피하는 백만스물한가지 방법들이 이미
2 min read
자바스크립트

[javascript] location.href 와 location.replace() 의 차이와 구분 사용 방법

자바스크립트 언어에서 이 둘은 유사한 기능을 합니다. 자바스크립트를 이용해 지정한 URL로 동일하게 이동하지만, 이 둘은 상당히 다른 점이 많으며, 어떤 경우에는 주의해서 사용해야 하기도 합니다. 이 둘은 아래와 같이 구분됩니다. 항목 location.href  location.replace()  타입 속성  메써드(함수) 웹브라우저 히스토리 저장됨 저장안됨 브라우저 뒤로가기 "location.href" 를 호출한 페이지로
2 min read
자바스크립트

DOMContentLoaded 로 HTML DOM 데이터를 초기화하기

클릭 다음으로 가장 빈번하게 보게될 자바스크립트의 이벤트입니다. "DOMContentLoaded" 이벤트를 그대로 읽으면 "DOM 컨텐츠가 로딩 완료" 되었다는 뜻입니다. 바꿔말하면 브라우저가 HTML 문서를 읽어서 파싱한 후 DOM(Document Object Model)이 완성되었으므로, 자바스크립트를 이용해 HTML 문서의 구조와 데이터에 접근할 수 있게 되었다는 뜻입니다. DOM 완성 후 웹 브라우저는 이 DOM을 이용해 화면에
3 min read
자바스크립트

HTML 테이블을 엑셀 파일로 저장하기

거의 대부분의 개발 환경에서 네이티브 엑셀 파일을 생성하고 다운로드 할 수 있도록 구현하는 방법은 서버사이드 기능으로 구현됩니다. 서버측 언어/기술로 코딩된 라이브러리나, 컴포넌트를 주로 사용하며, 화면 상에 보이는 표나 리포트 형태로 보이는 데이터를 엑셀 파일로 저장하는 것은 서버사이드의 기능 구현 방식을 주로 사용합니다. 엑셀로 저장 가능한 데이터가 대부분 테이블 형태로
9 min read
자바스크립트

HTML, CSS, Javascript 코딩과 테스트를 할 수 있는 클라우드 기반 프론트엔드 에디터 JSBin

프론트엔드 개발 테스트나 코드 확인을 할 때 자주 사용하는 서비스입니다. 기능적으로 화려한 클라우드 기반의 다른 IDE 들과는 달리 프론트엔드용으로만 특화된 서비스입니다. 자스빈, 제이에스빈 으로 읽고, 협업 기능도 물론 지원을 합니다. https://jsbin.com/ 해외 서비스지만 전반적으로 실행환경이 쾌적하고 속도가 빠른 것이 장점입니다. 웹 프론트엔드에만 특화해서 HTML, CSS, Javascript 코딩 및
2 min read
자바스크립트

Null(널) 과 Undefined는 다르다.

코딩을 하다보면 자바스크립트만큼 유격이 많은 언어를 찾기가 어렵습니다. 그만큼 유연하고 접근성이 좋지만, 뜻하지 않은 문제를 일으킬 수도 있습니다. 그중 하나가 Null 과 Undefined 입니다. 자바스크립트에는 다른 개발언어에서와 같은 Null(널) 이 있습니다. 데이터베이스나 다른 개발 언어에서는 초기화가 되지 않은 변수, 또는 필드가 됩니다. 자바스크립트에서는 조금 달라서 null 은 변수에 null이
2 min read
자바스크립트

정규표현식으로 replace를 replaceAll 처럼 사용하기

자바스크립트의 replace 메써드는 처음 나오는 매칭 1개만을 바꿉니다. 매칭되는 전체를 바꾸려면 루프를 돌아서 처리하거나, jQuery의 replaceAll 메써드를 사용해야 합니다. jQuery를 사용한다면 큰 문제가 되지 않겠지만, 자바스크립트만으로 사용하려면 꽤나 불편한 점이 있습니다. 정규표현식을 사용하면 jQuery의 replaceAll 과 같은 효과를 낼 수 있습니다. 예를 들어 var str = "This is javascript replace example.
3 min read
자바스크립트

복사해서 바로 사용하는 자주 사용하는 정규표현식(Regular Expression) Top 20

1. 영문자 소문자, 숫자, "-", "_" 로만 구성된 길이 2 ~ 10자리 사이 문자열 /^[a-z0-9_-]{2,10}$/  2. 신용카드 번호 19자리 숫자와 "-": /^[0-9-]{19}$/ 4-4-4-4 체크: /^[0-9]{4}[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{4}[-\s\.]?[0-9]{4}$/ 3. 영문자 대소문자와 숫자로만 구성 /[a-zA-Z0-9]/ 4. 전화번호 3자리-3~4자리-4자리(
3 min read
자바스크립트

!= 과 !== 연산자의 차이점 이해

자바스크립트의 비교 연산자중 양쪽 값이 같지 않은지(부등)를 비교해 true/false를 결과값으로 반환하는 연산자는 2개가 있습니다. 두 부등 비교 연산자 != 과 !== 는 어떤 경우에는 같은 불리언(Boolean) 결과를 어떤 경우에는 다른 불리언(Boolean) 결과를 리턴합니다. 두 연산자는 다음과 같은 차이가 있습니다. != 연산자 부등 비교 연산자이며 동등 연산자( == ) 의 논리적인
3 min read
자바스크립트

[javascript] 키/벨류 객체를 배열로 변환하기

자바스크립트에서 많이 사용하는 두가지 데이터 저장 타입은  자바스크립트 코드 안에서 다룰때는 객체 타입이 사용하기 편리하지만 화면 출력을 위해, 또는 서버 전송을 위해서는 자주 객체를 배열로 변환하게 됩니다. 물론 더 고급의 다른 방법들도 있지만, 여기서는 객체를 배열로 변환하는 가장 기초적인 방법을 알아봅니다. 난이도가 있는 것은 아니기 때문에 그렇게 어려울 것은 없지만,
4 min read