JavaScript localStorage

웹 프로그램을 만들 때 아무리 간단한 프로그램이라도 데이터를 저장하지 않는 것은 없을 것입니다. 이럴 때 우리는 주로 데이터베이스 서버에 저장합니다. 하지만 저장해야 할 데이터가 중요하지 않고, 영구 저장할 필요가 없는 데이터라면 서버단에 저장하는 것은 낭비일 수 있습니다. 이럴 때 클라이언트, 즉 브라우저에 데이터를 저장하는 Web API인 localStroage에 대해 살펴보겠습니다. localStorage에 데이터 저장하기 localStorage의 데이터 저장 함수는 localStorage.setItem(key, value)입니다. key와 Value로 저장합니다. Object처럼 접근해 데이터를 추가할 수도 있습니다. // key와 value로 저장합니다. localStorage.setItem('..

• format_list_bulleted LANGUAGE/JavaScript
• · 2021. 8. 23.
• textsms

JavaScript 함수의 존재여부 확인, 자료형확인 typeof 연산자

JavaScript typeof 연산자에 대해 살펴보겠습니다. 기본적으로 typeof 연산자는 피연산자의 자료형을 문자열로 반환합니다. console.log(typeof 'hello'); // "string" console.log(typeof 110); // "number" console.log(typeof false); // "boolean" function func() { return 1; } console.log(typeof func); // "function" 위 예시를 보시면 typeof연산자는 피연산자의 자료형을 출력하고 있는데 선언되지 않은 변수 또는 함수, 값이 할당되지 않은 변수를 피연산자로 할 경우 undefined가 출력됩니다. console.log(typeof unDeclaredVa..

• format_list_bulleted LANGUAGE/JavaScript
• · 2021. 8. 20.
• textsms

JavaScript 이벤트 전파와 중단방법

JavaScript 이벤트의 전파 및 중단방법에 대해 살펴보겠습니다. element에서 발생한 이벤트는 부모 또는 자식에게 전파됩니다. 개발을 하다보면 원치않게 이벤트가 전파될 때가 많이 있습니다. 이럴때는 전파를 중단시켜야 합니다. 먼저 이벤트를 추가하는 함수를 살펴보겠습니다. document.addEventListener(event, function, useCapture) - event : click, focus 등 이벤트 종류 - function : 이벤트가 발생했을 때 실행할 함수 - useCapture : true - capturing(자식들에게 전파), false(default) - bubbling(부모에게 전파) 보통 useCapture를 설정하지 않기때문에 기본 bubbling으로 이벤트가..

• format_list_bulleted LANGUAGE/JavaScript
• · 2021. 8. 10.
• textsms

JavaScript console 활용하기 ( console.log 및 여러기능 )

개발 및 디버깅 단계에서 정말 많이 사용하는 것이 바로 콘솔 로그입니다. 콘솔 로그를 활용하는 방법들에 대해 살펴보겠습니다. 1. console.log ( 출력하기 ) 기본적인 출력 기능입니다. 많은 분들이 console.log()는 잘 알고 계시고 사용하고 계시지만 그 외에도 등급별로 다른 출력 기능이 있습니다. 사용해보시면 구문 별로 색상이 다르게 출력됩니다. // log level console.log('log') // 출력 console.info('info') // 정보 console.warn('warn') // 경보 console.error('error')) // 에러 2. console.assert ( 조건이 참일 때만 출력하기 ) 내가 원하는 특정 조건이 맞을 때만 출력하는 방법입니다. co..

• format_list_bulleted LANGUAGE/JavaScript
• · 2021. 7. 11.
• textsms

JavaScript 객체 복사하기 ( 얕은복사, 깊은복사 )

이번에는 자바스크립트 객체를 복사하는 방법에 대해 살펴보겠습니다. 객체 복사에는 얕은복사 (Shallow Copy)가 있고, 깊은 복사 (Deep Copy) 가있습니다. 얕은 복사는 참조하는 것으로서 복사하여 만들어진 객체를 수정하여도 기존 객체도 함께 수정됩니다. 즉 같은것을 참조하고 있는 것이고 깊은 복사는 다른 객체로 생성되어 수정하여도 기존 객체는 영향이 없습니다. 복사에 방법에는 크게 3가지로 나눌 수 있습니다. 1. 첫번째는 복제하지 않고 참조하는 변수만 만들어 얕게 복사합니다. let sub = {sub: 'sub', time: 1000} let A = {name: 'Aiden', class: 'A', email: 'aiden@naver.com', item: sub}; let B = A; c..

• format_list_bulleted LANGUAGE/JavaScript
• · 2021. 6. 15.
• textsms

JavaScript 기본문법 PART 3 - 객체 / DOM / BOM / 선택자

JavaScript의 객체에 대해 살펴보자 객체에는 메서드(Method)와 속성(Property)이 있습니다 속성 / 메서드 사용방법 객체이름.메서드이름(파라미터값) 객체 이름. 속성 이름 위와 같이 객체 이름과 메서드/속성 이름 사이에 ( . )을 붙여 호출함 객체의 종류 - 내장 객체 : String, Date, Array, Math, RegExp, Object 등 자바스크립트 엔진에 내장돼있는 객체 - 브라우저 객체 모델(BOM) : 브라우저에 계층적으로 내장되어있는 객체 브라우저 객체 모델(BOM) window 객체 : 브라우저 최상위 객체 window 객체 메서드 open("url경로", "창 이름", "옵션 설정") - 새 창을 열 때 사용 alert("메시지") - 경고 창 prompt("질..

• format_list_bulleted LANGUAGE/JavaScript
• · 2019. 9. 27.
• textsms