본문 바로가기

분류 전체보기159

[발표3회차] 클로저 개념정리클로저는 자바스크립트에서 중요한 개념 중 하나이다. 이 개념을 이해하려면 함수와 변수가 어떻게 동작하는 지 알아야 한다. 우선, 함수는 특별한 종류의 '작업'을 수행하는 코드 뭉치이다. 예를들어 우리가 만든 함수를 호출하면 그 안에 있는 코드들이 실행된다.클로저는 이 함수와 그 함수가 만들어진 환경(변수들의 집합)을 함께 기억하는 것이다. 이 말은 함수 안에서 정의된 함수가 외부 함수의 변수들에 접근할 수 있는 것이다.function outerFunction() { let outerVariable = '안녕'; // 바깥 함수에서 선언된 변수 function innerFunction() { console.log(outerVariable); // 바깥 함수의 변수를 사용 } return.. 2024. 7. 18.
[DIL] 05 클로저 01 클로저의 의미 및 원리 이해MDN에서는 클로저에 대해 "클로저는 함수와 그 함수가 선언될 당시 lexical environment의 상호관계에 따른 현상"이라고 정의하고 있다. 선언될 당시 lexical environment는 2장에서 소개한 실행 컨텍스트의 구성 요소 중 하나는 outerEnvironmentReference에 해당한다. LexicalEnvironment의 environmentRecord와 outerEnvironmentReference에 의해 변수의 유효범위인 스코프가 결정되고 스코프체인이 가능해진다고 했다. 어떤 컨텍스트 A에서 선언한 내부함수 B의 실행 컨텍스트가 활성화된 시점에는 B의 outerEnvironmentReference가 참조하는 대상인 A의 LexicalEnviro.. 2024. 7. 15.
[DIL] 04 콜백 함수 01 콜백 함수란콜백 함수는 다른 코드의 인자로 넘겨주는 함수이다. 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행한 것이다. callback은 '부르다', '호출(실행)하다'는 의미인 call과, '뒤돌아오다', '되돌다'는 의미인 back의 합성어로, '되돌아 호출해달라'는 명령이다. 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보낸다. 이 요청을 받은 함수 X의 입장에서는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 Y를 직접 호출한다.이처럼 콜백 함수는 다른 코드 (함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적.. 2024. 7. 13.
alert 디자인 라이브러리 https://notiflix.github.io/report 2024. 7. 12.
[DIL] 03 this 01 상황에 따라 달라지는 this자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로, 바꿔 말하면 this는 함수를 호출할 때 결정된다고 할 수 있다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라지는 것이다.  3-1-1 전역 공간에서의 this전역 공간에서 this는 전역 객체를 가리킨다. 개념상 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있다. 브라우저 환경에서 전역객체는 window이고 Node.js 환경에서는 global이다. 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로도 할당한다. 변수이면서 객체의 프로퍼.. 2024. 7. 10.
[발표2회차] this와 콜백함수 this란this는  자기가 속한 객체를 가리킨다. 객체를 속상과 메서드(함수)를 가질 수 있는 일종의 상자라고 생각해보면 this는 그 상자 안에서 "내가 지금 속한 상자가 무엇인지"를 알려주는 역할을 한다. 아래 설명을 통해 각 상황에 따른 this를 살펴보자. 객체 내부에서 const 사람 = { 이름: '철수', 자기소개() { console.log(this.이름); // this는 '사람' 객체를 가리킴 }};사람.자기소개(); // "철수" 출력 this는 '사람'이라는 객체를 가리키고 있다. 그래서 'this.이름'은 '사람.이름'과 같다.  전역에서는 this는 윈도우를 가리킨다.전역에서 this는 브라우저 환경에서는 window라는 큰 상자를 가리킨다. 이 상.. 2024. 7. 8.
웹페이지 디자인 참고 사이트 https://www.cssdesignawards.com/wotd-award-winners CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS AwardsCSS Design Awards. Be inspired, Be inspiring. Submit your website to the world's best CSS awards for a chance to win Site of the Day, UI awards UX awards and more from a panel of 200+ international web designers and developers.www.cssdesignawards.com https://www.gdweb.c.. 2024. 7. 8.
github badge https://github.com/Ileriayo/markdown-badges 2024. 7. 7.
[발표1회차] 실행 컨텍스트(Execution Context)와 스코프 실행 컨텍스트란?실행 컨텍스트란 프로그래밍에서 코드를 실행할 때 그 코드를 이해하고 관리하는 일종의 환경이다. 예를 들면 수학문제를 푼다고 했을 때 책상에 앉아 연필, 종이 등이 사용하여 문제를 풀 것이다. 문제를 풀기 위해 준비환경 역할을 하는 책상처럼 코드가 실행될 때 필요한 정보나 상태를 담는 것을 실행 컨텍스트라고 한다. 실행 컨텍스트의 역할변수관리 : 코드를 실행하는 동안 사용할 변수들을 저장하고 관리한다.코드 실행 위치 관리 : 지금 코드의 어느 부분을 실행하고 있는지 추적한다.함수 호출 관리 : 코드에서 호출할 때 함수의 실행 환경을 만들어준다.  예시function sayHello() { var name = "철수"; console.log("안녕, " + name);}sayHel.. 2024. 7. 5.
[DIL] 02 실행 컨텍스트 01.실행 컨텍스트란?실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 우선 스택stack과 큐queue의 개념을 살펴보자. 스택은 출입구가 하나뿐인 깊은 우물 같은 데이터 구조로 최신 데이터가 제일 먼저 나가고, 큐는 양쪽 모두 열려있는 파이프와 같은 구조로 먼저 들어간 데이터가 제일 먼저 나온다.동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택call stack에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.  VariableEnvironment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보. 선언 시점의 LexicalEnvironment의.. 2024. 7. 4.
[css] 로딩 스피너 css https://tobiasahlin.com/spinkit/ 2024. 7. 4.
[DIL] 01 데이터타입 [출처/ 코어 자바스크립트]01. 데이터 타입의 종류02. 데이터 타입에 관한 배경지식1-2-1 메모리와 데이터컴퓨터는 모든 데이터를 0 또는 1로 바꿔 기억한다. 0 또는 1만 표현할 수 있는 하나의 메모리 조각을 비트bit라고 한다. 메모리는 매우 많은 비트들로 구성돼 있는데 각 비트는 고유한 식별자unique identifier를 통해 위치를 확인할 수 있다.그런데 비트 단위로 위치를 확인하는 것은 매우 비효율 적이므로 몇 개씩 묶어 하나의 단위로 여긴다면 표현할 수 있는 값도 늘어나면서 검색시간도 줄일 수 있다.하지만 이처럼 하면 동시에 낭비되는 비트가 생기기도 한다. 표현 가능한 개수에 어느 정도 제약이 따르더라도 크게 문제가 되지 않을 적정 공간을 묶는 편이 낫다는 생각으로 바이트byte 단위.. 2024. 7. 2.

티스토리툴바