자바스크립트

[JS] 스크롤 프로그레스 바 만들기

완성본 HTML CSS body { margin: 0; padding: 0; height: 1000px; /* 스크롤을 위해 임시로 추가 */ } .progressWrap { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-color: #fff; } .bar { width: 0%; height: inherit; position: absolute; z-index: 100; background-color: #a9c4ff; border-top-right-radius: 3px; border-bottom-right-radius: 3px; transition: width 300ms; } JS const progressBar = docum..

[JS] 클로저 - 클로저와 렉시컬 환경

클로저에 대해 알아보기 전에! 실행 컨텍스트를 잘 모르신다면 아래의 글들을 먼저 읽어보시는 것을 추천드립니다 :) 실행 컨텍스트 - (1) 실행 컨텍스트의 역할, 실행 컨텍스트 스택 실행 컨텍스트 - (2) 실행 컨텍스트의 생성과 식별자 검색 과정 클로저(Closure) 클로저는 자바스크립트의 고유의 개념이 아닌(ECMAScript 사양에도 등장하지 않는다) 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. MDN에서는 클로저에 대해 '함수와 그 함수가 선언된 렉시컬 환경과의 조합'으로 정의하고 있다. const x = 1 function outerFunc() { const x = 10 function innerFunc() { console.log(x) } innerFun..

[JS] 자바스크립트의 This

This 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 함수 호출 방식과 this 바인딩 this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다. 함수의 상위 스코프를 결정하는 렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정하지만 this 바인딩은 함수 호출 시점에 결정된다. 동일한 함수도 다..

[JS] ES6의 특징 (2) - 템플릿 리터럴, 반복자, for ... of

const and let Arrow functions(화살표 함수) Template Literals(템플릿 리터럴) Default parameters(기본 매개 변수) Array and object destructing(배열 및 객체 비구조화) Import and export(가져오기 및 내보내기) Promises(프로미스) Rest parameter and Spread Operator(나머지 매개 변수 및 확산 연산자) Classes(클래스) Generator(생성자) Iterator(반복자) 템플릿 리터럴(Template literals) 복잡한 문자열을 쉽게 만들어주는 장치로 문자열 안에 문자열 및 변수를 넣을 수 있다. 기존 문자열 출력 시 변수와 함께 출력하려면 아래와 코드와 같이 따옴표(', ..

[JS] ES6의 특징 (1) - const와 let, 화살표 함수

ES6(ECMAScript 2015)는 ECMAScript 표준의 최신 버전이다. ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 하다. ES5 이하 명세에서 문제가 되었던 부분들이 해결되었고 많은 기능들이 추가되었다. 이는 가독성과 유지보수성 향상으로 이어졌다. React나 Vue 등의 라이브러리들도 이에 맞춰 개발 환경을 ES6로 바꾸게 되었고 이러한 이유로 인해 우리는 ES6에 주목하고 관심을 갖게 되었다. ES6는 아래의 새로운 기능들을 포함하고 있다. const and let Arrow functions(화살표 함수) Template Literals(템플릿 리터럴) Default parameters(기본 매개 변수) ..

[JS] 호이스팅(Hoisting)

호이스팅(Hoisting) 호이스팅이란 "끌어올린다"는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어 올려지는 현상을 말한다. 이는 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 호이스팅 시 var 키워드로 선언한 변수의 경우 undefined 값으로 변수를 초기화한다. console.log(num1); // undefined var num1 = 6; // 선언, 초기화 console.log(num1); // 6 컴파일러는 자바스크립트 엔진이 인터프리팅하기 전에 컴파일을 하는데, 이 때 var num1 = 6;을 2개의 구문으로 여긴다. var num1 num1 = 6 var num1은 변수 선언문으로, 컴파일을 할 때 처리하고 num1 = 6은 실행할 때..

[JS] 자바스크립트로 모멘텀(Momentum) 만들기

바닐라 자바스크립트를 이용해서 모멘텀을 만들어보았다. 시계, 사용자 이름 기억, 투두 리스트, 명언, 날씨 등의 기능을 넣었다. 그 중 투두리스트 구현 부분의 코드를 아래 가져와봤다. 전체 코드는 아래 깃허브에서 https://github.com/Seohyun-Roh/vanilla_JS GitHub - Seohyun-Roh/vanilla_JS: HTML, CSS, and JavaScript로 만든 Momentum입니다. HTML, CSS, and JavaScript로 만든 Momentum입니다. Contribute to Seohyun-Roh/vanilla_JS development by creating an account on GitHub. github.com index.html todo.js 전체 코드..

[HTML][JS] script 태그는 어디에 위치해야 할까?

태그는 어디에 위치해야 할까? 브라우저의 구성 요소 렌더링 엔진은 HTML, CSS를 파싱한 결과물로 페이지를 화면에 표시한다. (대표적인 렌더링 엔진으로는 사파리의 webkit, IE의 trident, 파이어폭스의 Gecko, 크롬, 오페라, edge의 Blink(webkit에서 파생)가 있다.) 자바스크립트는 자바스크립트 해석기에서 해석한다. 브라우저의 동작 방식 HTML을 읽기 시작 HTML을 파싱 DOM 트리 생성 Render 트리(DOM tree + CSS의 CSSOM 트리 결합)가 생성 Display에 표시 script를 html에 위치시키는 방법에는 script를 head 태그 안에 위치시키는 경우, body 태그의 맨 아래에 위치시키는 경우, async나 defer를 사용하는 경우가 있다...

[JS] Array.from을 통한 배열 초기화

배열의 각 인덱스에 1~10까지의 값을 초기화해준다고 했을 때 보통은 아래와 같은 방법을 생각했었다. let arr1=[]; for(let i=1;i x + x); // [2, 4, 6] //v는 할당할 value, i는 인덱스 Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4] Array.from({length: 5}, (v, i) => i+1); // [1, 2, 3, 4, 5] Array.from을 이용하여 빈 배열을 초기화 하는 코드 Array.from( {length: 20}, //배열 () => Array(10).fill(0) //각 배열에 적용할 함수 ); // 0으로 초기화된 20*10 짜리 2차원 배열을 리턴

[자료구조][JS] 스택, 큐 - push(), pop(), shift()

기본적인 자료구조인 스택, 큐에 대해서 JS로 정리해보려 한다. push() push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다. arr.push(element1[, ...[, elementN]]) elementN: 배열의 끝에 추가할 요소. const animals = ['pigs', 'goats', 'sheep']; const count=animals.push('cows'); console.log(count); // expected output: 4 console.log(animals); // expected output: Array ["pigs", "goats", "sheep", "cows"] animals.push('cats', 'dogs'); conso..