분류 전체보기 검색 결과

224 개의 검색 결과가 있습니다.

Frontend/JavaScript

[JS] ES6의 구조 분해 문법 (Destructuring)

Destructuring은 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 하는 ES6 문법이다. Destructuring은 Array(배열) Destructuring와 Object(객체) Destructuring으로 나누어져있다. 1. Array Destructuring ▶ 중첩되지 않은 배열의 경우 중첩되지 않은 배열은 인덱스를 통한 접근이 가능하다. let kors = [10, 20, 30] let kor1 = kors[0]; let kor2 = kors[1]; let kor3 = kors[2]; ES6에서는 인덱스 접근없이 할당할 수 있다. let kors = [10, 20, 30]; let [kor1, kor2, kor3] = kors; console.log(`kor1: ${kor..

2021. 8. 23. 00:39

Frontend/JavaScript

[JS] 시간 지연 함수 setTimeout()

1. setTimeout() 일정 시간 후에 특정 코드, 함수를 지연한 후 실행하고 싶을 때 사용하는 함수이다. setTimeout(function() { // 코드 작성 }, delay); setTimeout() 함수의 내부에 작성한 코드는 콜백함수로 지연시간 뒤에 실행될 코드를 작성한다. 또한, delay는 지연시간으로 밀리세컨드 단위로 설정한다. setTimeout 함수는 보편적으로 사용되는 함수이지만 특히 아래 상황에서 많이 사용된다. 접속 후 몇 초 후에 팝업 또는 배너창 띄우기 방문자의 스크롤이 브라우저 일정 위치에 올 경우 몇 초 뒤에 애니메이션 실행 검색창 또는 일부 섹션 몇 초 뒤에 사라질 경우 방문자 접속 후 20-30초가 지난 뒤 메일 구독을 신청하는 팝업창을 띄울 경우 setTime..

2021. 8. 21. 23:11

Frontend/JavaScript

[JS] 자바스크립트 클래스(Class)

1. 클래스 사용방법 Class는 선언식과 표현식 두 가지 방법으로 사용할 수 있다. * Class 선언 class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } 함수 선언과 클래스 선언의 중요한 차이점은 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 호이스팅이 제한되어 클래스를 사용하기 위해서는 클래스를 먼저 선언 해야한다. 즉, 클래스를 선언한 후에만 객체를 생성할 수 있다. const p = new Rectangle(); // 클래스를 선언하지 않아 에러발생 class Rectangle {} ▶ Class 표현식 클래스 표현식은 이름을 가질 수도 있고, 가지지 않을 수도 있다. (1..

2021. 8. 20. 00:47

Frontend/JavaScript

[JS] 자바스크립트로 버튼 비활성화 하기

1. 태그에 직접 disabled 입력 또는 태그를 사용한 버튼을 활성화/비활성화 할때는 disabled 속성을 이용한다. ( 회사에서 프론트 개발에 Vue.js 를 사용하는데 다양한 입력 태그에 disabled을 사용할 수 있다.) See the Pen js by anna (@hianna) on CodePen. (1) 기본 input 태그에 항상 활성화 상태이다 (2) input 태그에 disabled 속성을 명시하면 버튼이 비활성화된다. (3) isabled 속성에 어떤 값을 주면, 버튼은 활성화된다. disabled 속성에 값을 주면서 버튼을 비활성화 하려면 'disabled'라고 명시해 주어야 한다. 2. 자바스크립트를 통한 버튼 비활성화 See the Pen js by anna (@hianna)..

2021. 8. 18. 23:10

Frontend/Vue.js

[Vue] PWA (Progressive Web Application) 란?

1. PWA PWA는 Progressive Web App의 약자로, 웹의 장점과 앱의 장점을 결합한 환경이다. ▶ PWA의 장점 - 웹 애플리케이션의 일종으로 HTML, CSS, JS 를 포함한 웹 기술들을 사용하여 만듦 - 웹 표준을 준수하는 브라우저라면 어떠한 플랫폼에서라도 동작함 - 오프라인 작업, 푸시 알림, 하드웨어 접근, 데스크톱과 모바일 장치의 네이티브 애플리케이션과 유사한 사용자 경험의 창출을 가능하게함 (= Native 기능 지원) - 웹 애플리케이션이기 때문에 개발자나 사용자가 앱 스토어를 통해 설치할 필요가 없음(= 웹 앱) ▶ PWA의 단점 - PWA를 지원하지 않는 브라우저(=구버젼 브라우저)에서는 이용할 수 없음 ▶ 기존의 앱과의 차이점 - 기존 앱은 앱스토어를 통해 다운로드 및..

2021. 8. 17. 22:50

Frontend/JavaScript

[JS] 노드의 종류와 관계

1. 노드(node) * HTML DOM ( 참고: https://www.w3schools.com/js/js_htmldom.asp ) - 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다. - 노드를 정의하고, 노드 사이의 관계를 보여주는 역할을 한다. - 노드 트리에 포함된 모든 노드에 접근할 수 있도록 해준다. 2. 노드의 종류 * W3C HTML DOM 표준에 따르면, HTML 문서의 모든 것은 노드이다. 노드 설명 문서 노드(document node) HTML 문서 전체를 나타내는 노드 요소 노드(element node) 모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드 속성 노드(attribute node) 모든 HTML 요소의 속성은 속성 노드이며, 요소..

2021. 8. 16. 22:44