분류 전체보기
-
[JavaScript (13)] Javascript Dom(Document Object Model, 문서 객체 모델) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 돔(DOM) ] 입니다. : ) ▶ DOM(Document Object Model) 이란? - HTML, XML 문서에 접근하기 위한 인터페이스 - 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공 한다. - W3C의 표준 객체 모델 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 ..
[JavaScript (13)] Javascript Dom(Document Object Model, 문서 객체 모델)[JavaScript (13)] Javascript Dom(Document Object Model, 문서 객체 모델) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 돔(DOM) ] 입니다. : ) ▶ DOM(Document Object Model) 이란? - HTML, XML 문서에 접근하기 위한 인터페이스 - 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공 한다. - W3C의 표준 객체 모델 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 ..
2020.04.08 -
[JavaScript ] 개인정보 마스킹 함수(이름 마스킹, 이메일 마스킹, 휴대폰 번호 마스킹, 주민번호 마스킹) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 개인정보 마스킹 하기 ] 입니다. : ) ▶ 개인정보 마스킹 함수 - 사실 데이터를 프론트단에서 마스킹 처리하는건 선호하지 않지만, 꼭 프론트에서 한번더 마스킹 처리를 해야한다면 사용할 예정이다. 1. 이메일 마스킹 - 1.1 @ 뒷부분 마스킹 처리 하지 않는 경우 ex) 원본 데이터 : abcdefg12345@naver.com 변경 데이터 : ab**********@naver.com - 1.2 @ 뒷부분도 마스킹 처리 하는 경우 ex) 원본 데이터 : abcdefg12345@naver.com 변경 데이터 : ab**********@nav***..
[JavaScript ] 개인정보 마스킹 함수(이름 마스킹, 이메일 마스킹, 휴대폰 번호 마스킹, 주민번호 마스킹)[JavaScript ] 개인정보 마스킹 함수(이름 마스킹, 이메일 마스킹, 휴대폰 번호 마스킹, 주민번호 마스킹) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 개인정보 마스킹 하기 ] 입니다. : ) ▶ 개인정보 마스킹 함수 - 사실 데이터를 프론트단에서 마스킹 처리하는건 선호하지 않지만, 꼭 프론트에서 한번더 마스킹 처리를 해야한다면 사용할 예정이다. 1. 이메일 마스킹 - 1.1 @ 뒷부분 마스킹 처리 하지 않는 경우 ex) 원본 데이터 : abcdefg12345@naver.com 변경 데이터 : ab**********@naver.com - 1.2 @ 뒷부분도 마스킹 처리 하는 경우 ex) 원본 데이터 : abcdefg12345@naver.com 변경 데이터 : ab**********@nav***..
2020.04.01 -
[JavaScript (12)] Javascript String 객체, String 메소드(replace, substr, split, concat 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 객체 - String ] 입니다. : ) ▶ 1. String 객체 생성 방법 - Javascript 에서 문자열은 간단하게 2가지 방법으로 생성 가능 하다. 1) 큰따옴표(""), 작은따옴표(''), backtick(``) ex) var 큰따옴표 = "큰따옴표"; var 작은따옴표 = "작은따옴표"; var 백틱 = `백틱`; // 백틱은 나중에 템플릿 리터럴 방식을 공부할때 자세히 알아보자. console.log(큰따옴표); console.log(작은따옴표); console.log(백틱); t..
[JavaScript (12)] Javascript String 객체, String 메소드(replace, substr, split, concat 등)[JavaScript (12)] Javascript String 객체, String 메소드(replace, substr, split, concat 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 객체 - String ] 입니다. : ) ▶ 1. String 객체 생성 방법 - Javascript 에서 문자열은 간단하게 2가지 방법으로 생성 가능 하다. 1) 큰따옴표(""), 작은따옴표(''), backtick(``) ex) var 큰따옴표 = "큰따옴표"; var 작은따옴표 = "작은따옴표"; var 백틱 = `백틱`; // 백틱은 나중에 템플릿 리터럴 방식을 공부할때 자세히 알아보자. console.log(큰따옴표); console.log(작은따옴표); console.log(백틱); t..
2020.03.28 -
[JavaScript (11)] Javascript Date 객체, Date 메소드(getDate, getFullYear, getMonth 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 객체 - Date ] 입니다. : ) 0. Javascript에서의 날짜 표현 - 날짜와 시간(년, 월, 일, 시, 분, 초, 밀리초)을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수 이다. - 하루는 86,400,000 밀리초(millisecond)로 계산 한다. ※ 참고 ㆍUTC(Universal Time, Coordinated(협정 세계시)) - 세슘 원자 진동수의 기반의 표준시간 - 오차가 30만 년에 1초라고 할 정도로 아주 정확하고 기준이 될 수 있는 시간 이라고 한다. ㆍGMT(Green..
[JavaScript (11)] Javascript Date 객체, Date 메소드(getDate, getFullYear, getMonth 등)[JavaScript (11)] Javascript Date 객체, Date 메소드(getDate, getFullYear, getMonth 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 객체 - Date ] 입니다. : ) 0. Javascript에서의 날짜 표현 - 날짜와 시간(년, 월, 일, 시, 분, 초, 밀리초)을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수 이다. - 하루는 86,400,000 밀리초(millisecond)로 계산 한다. ※ 참고 ㆍUTC(Universal Time, Coordinated(협정 세계시)) - 세슘 원자 진동수의 기반의 표준시간 - 오차가 30만 년에 1초라고 할 정도로 아주 정확하고 기준이 될 수 있는 시간 이라고 한다. ㆍGMT(Green..
2020.03.27 -
[JavaScript (10)] Javascript Math 객체, Math 메소드(Math.random, Math.round 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 객체 - Math ] 입니다. : ) 0. Math 객체 - Math 객체는 수학 상수와 함수를 위한 프로퍼티, 메소드를 미리 구현해 놓은 빌트인 객체 이다. - 생성자(constructor)가 존재하지 않는다. Static 프로퍼티와 메소드만 제공기 때문에 인스턴스를 생성할 필요 없이 바로 사용 가능하다. ▶ 1. Math 메소드 - 정말 많은 메소드를 제공하는데, 자주 사용하거나, 유용한 메소드만 알아보자. - 다양한 메소드 중 표시한 7가지 메소드만 알아도 기본 업무에는 지장이 없을 것이다. 1) Math.ra..
[JavaScript (10)] Javascript Math 객체, Math 메소드(Math.random, Math.round 등)[JavaScript (10)] Javascript Math 객체, Math 메소드(Math.random, Math.round 등) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 객체 - Math ] 입니다. : ) 0. Math 객체 - Math 객체는 수학 상수와 함수를 위한 프로퍼티, 메소드를 미리 구현해 놓은 빌트인 객체 이다. - 생성자(constructor)가 존재하지 않는다. Static 프로퍼티와 메소드만 제공기 때문에 인스턴스를 생성할 필요 없이 바로 사용 가능하다. ▶ 1. Math 메소드 - 정말 많은 메소드를 제공하는데, 자주 사용하거나, 유용한 메소드만 알아보자. - 다양한 메소드 중 표시한 7가지 메소드만 알아도 기본 업무에는 지장이 없을 것이다. 1) Math.ra..
2020.03.26 -
[JavaScript (9)] Javascript Number 객체, Number 메소드 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 객체 - Number ] 입니다. : ) 0. Number 객체란 - 보통 자바스크립트에서 수를 표현할 때는 숫자 리터럴로 표현한다. var a = 7; - 하지만 수를 표현할 때 Number 객체로 생성할 수도 있다. 이 Number 객체를 숫자 값을 감싸고 있는 래퍼(wrapper)객체 라고 한다. var b = new Number(7); - Number 객체는 숫자(원시 숫자 자료형)를 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper) 객체이다. 또한 간단하게는 문자열을 숫자로 변경해주는 용도로도 자주 사용된다. var c = new N..
[JavaScript (9)] Javascript Number 객체, Number 메소드[JavaScript (9)] Javascript Number 객체, Number 메소드 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 객체 - Number ] 입니다. : ) 0. Number 객체란 - 보통 자바스크립트에서 수를 표현할 때는 숫자 리터럴로 표현한다. var a = 7; - 하지만 수를 표현할 때 Number 객체로 생성할 수도 있다. 이 Number 객체를 숫자 값을 감싸고 있는 래퍼(wrapper)객체 라고 한다. var b = new Number(7); - Number 객체는 숫자(원시 숫자 자료형)를 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper) 객체이다. 또한 간단하게는 문자열을 숫자로 변경해주는 용도로도 자주 사용된다. var c = new N..
2020.03.26