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 1 - 사용법 / 주석 / 외부스크립트 / 변수 / 데이터

자바스크립트[JavaScript]의 기본 문법의 관한 포스팅입니다 자바스크립트란? - HTML 문서의 정적이고 단조로운 한계를 극복하기 위해 만들어진 스크립트 언어 - 웹문서를 동적으로 꾸밀 때 널리 쓰인다 기본 사용 형태 - 스크립트 태그로 자바스크립트를 선언하고 안에 코드를 작성 작성 위치 - 영역 또는 영역에 위와 같이 선언하여 사용합니다 - 대부분 영역에 사용하지만 필요/취향 에따라 영역에 사용하기도 합니다 출력 - 기본적인 예제를 이해하기위해 출력방법을 알아봅시다 - 화면에 Hello World~ 가 출력됩니다 [ 명령어에 관한 설명은 추후 등장합니다 ] 주석 - // : 한줄 주석 - /* 여러줄 주석 */ 외부스크립트 불러오기 - JS파일로 저장한 JavaScript 코드 파일을 불러올 수 ..

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