FE/Javascript

[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] 실행 컨텍스트 - (2) 실행 컨텍스트의 생성과 식별자 검색 과정

시리즈 실행 컨텍스트 - (1) 실행 컨텍스트의 역할, 실행 컨텍스트 스택 실행 컨텍스트 - (2) 실행 컨텍스트의 생성과 식별자 검색 과정 실행 컨텍스트의 생성과 식별자 검색 과정 아래 예시를 통해 실행 컨텍스트의 생성과 식별자 검색 과정에 대해 알아보자. var x = 1 const y = 2 function foo (a) { var x = 3 const y = 4 function bar (b) { const z = 5 console.log(a + b + x + y + z) } bar(10) } foo(20) // 42 1. 전역 객체 생성 전역 객체는 전역 코드가 평가되기 이전에 생성된다. 전역 객체에 빌트인 전역 프로퍼티와 빌트인 전역 함수, 표준 빌트인 객체가 추가되며 동작 환경에 따라 클라이언..

[JS] 실행 컨텍스트 - (1) 실행 컨텍스트의 역할, 실행 컨텍스트 스택

시리즈 실행 컨텍스트 - (1) 실행 컨텍스트의 역할, 실행 컨텍스트 스택 실행 컨텍스트 - (2) 실행 컨텍스트의 생성과 식별자 검색 과정 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 전역 코드: 전역에 존재하는 소스코드(전역에 정의된 함수, 클래스 등의 내부 코드는 포함 x) 함수 코드: 함수 내부에 존재하는 소스코드(중첩된 함수, 클래스 등의 내부 코드는 포함 x) eval 코드: 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 모듈 코드: 모듈 내부에 존재하는 소스코드(모듈 내부의 함수, 클래스 등의 내부 코드는 포함 x) 4가지 타입으로 분류하는 이유는 소스코드의 타입에 따라 실행 컨텍스..

[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 전체 코드..

[JS] filter 함수란?

Array.prototype.filter() filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 arr.filter(callback(element[, index[, array]])[, thisArg]) 매개변수 callback: 각 요소를 시험할 함수. true 반환 시 요소 유지, false 반환시 버림. 다음 세가지 매래변수를 받음. element: 처리할 현재 요소 index(Optional): 처리할 현재 요소의 인덱스 array(Optional): filter를 호출한 배열 thisArg(Optional): callback을 실행할 때 this로 사용하는 값. 반환 값 테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면..