일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- SQL 고득점 Kit
- 자바스크립트
- 리트코드
- LeetCode
- 파이썬
- codestates
- javascript
- 코드스테이츠
- 회고
- 토익
- 4주 프로젝트
- 제로초
- 정재남
- 타입스크립트
- 리덕스
- programmers
- 백준
- js
- 리액트
- 프로그래머스
- 코어 자바스크립트
- til
- python
- 타입스크립트 올인원
- 손에 익히며 배우는 네트워크 첫걸음
- Async
- 2주 프로젝트
- 렛츠기릿 자바스크립트
- 알고리즘
- 타임어택
- Today
- Total
목록전체 글 (481)
Jerry
이번 시간은 이벤트 등록, 이벤트 버블링, 이벤트 캡처링, 이벤트 흐름, 이벤트 위임에 대해서 알아보겠습니다. 1. 이벤트 등록 이벤트 버블링, 캡쳐, 위임에 알아보기 위해 우리는 먼저 이벤트 등록에 대해서 알고 있어야 합니다. 이벤트 등록이란 웹 애플리케이션에서 사용자의 입력을 받기 위한 기능입니다. 아래 코드 예시에서 addEventListener를 이용하여 이벤트를 등록할 수 있습니다. click! 클릭 시, 해당 이벤트 내용이 콘솔에 찍히는 걸 확인할 수 있습니다. 추가로, 만약에 핸들러를 제거 해주고 싶다면, 어떻게 해야 할까요? 그럴 때는 '이벤트 등록'했던 것과 비슷하게 '이벤트 해제' 혹은 '이벤트 제거'를 해줘야 합니다. removeEventListener를 같은 단계에 두고 사용하시면 ..
이 글은 인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 강의를 수강하면서 정리한 내용입니다. 오늘 함수 선언문과 함수 표현식에 대해서 알아보자! 💪😎💪😎💪😎💪😎💪😎💪😎💪😎 함수 선언문과 함수 표현식의 대해 살펴보겠다. 이전의 브라우저에서는 디버깅을 할 때, 기명 함수 표현식은 해당 변수명에 값을 할당하여 보여주어서 익명 함수 표현식 보다 분명한 이점이 존재하였다고 한다. 하지만, 최근에 이르러 브라우저에서, (익명 함수 표현식도) 변수명이 비어 있을 경우, 자동으로 변수명을 할당하기 때문에 이제 기명 함수 표현식을 잘 쓰지 않는다고 한다. 선언한 함수를 변수에 할당한다. 이것이 함수 표현식의 개념이다. 할당 여부에 따라, 함수 선언문과 함수 표현식의 차이가 생긴다. 할당을 하..
이 글은 인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 강의를 수강하면서 정리한 내용입니다. 오늘 데이터 타입에 대해서 알아보자! 오늘도 데이터 타입을 정복하러 가보자! 💪😎💪😎💪😎💪😎💪😎💪😎💪😎 자바스크립트 데이터 타입은 Primitive Type과 Reference Type으로 분류한다. (기본형 타입 / 참조형 타입) 기본형에는 Number, String, Boolean, null, undefined 참조형에는 Object가 대표적으로 있고, 하위에 Array, Function, RegExp .. 등이 존재한다. 구분하는 이유가 무엇이고 어떤 차이가 있는지 메모리와 함께 살펴보겠다. 기본형 타입의 메모리 흐름 변수를 선언하면 컴퓨터는 메모리가 담길 공간을 미리 확보하고 ..
이 글은 인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 강의를 수강하면서 정리한 내용입니다. 오늘 클래스에 대해서 알아보자! 오늘도 클래스를 정복하러 가보자! 💪😎💪😎💪😎💪😎💪😎💪😎💪😎 1. 클래스 클래스는 인스턴스라는 용어와 같이 나온다. 인스턴스는 어떤 클래스의 속성을 지니고 있는 구체적인 객체 및 대상을 의미한다. 클래스상에도 상위 클래스 / 하위 클래스로 나뉠 수 있다. 아래 이미지처럼. 자바스크립트는 프로토타입 언어라고 하지만, 일단은 여기서는 인스턴스를 제외한 나머지를 클래스로 보자! 일반적인 클래스의 정의는 인스턴스를 생성하는 데에 보조하는 역할을 한다. Array에 있는 애들을 static methods, static properties라고 하는데, 얘네들은 클..
이 글은 인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 강의를 수강하면서 정리한 내용입니다. 오늘 프로토타입에 대해서 알아보자! 오늘도 프로토타입을 정복하러 가보자! 💪😎💪😎💪😎💪😎💪😎💪😎💪😎 0. prototype, constuctor, __propto__ 이번 프로토타입 정리 글에서 제목에 보이는 키워드가 자주 등장하니 인사 정도 해봐도 좋을 것 같습니다. 먼저! 아래 이미지가 무엇이냐면... 바로 이것입니다! 우리가 평소에 사용하는 생성자 함수를 가지고 설명을 시작해보겠습니다. 생성자 함수를 new 연산자를 통해서 인스턴스를 만들었을 때, 그 인스턴스에는 constructor의 prototype이라고 하는 프로퍼티의 내용이 __proto__ 프로퍼티로 참조를 전달하게 됩..
참고로, 이 글은 인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 강의를 보고서 정리한 내용입니다. 오늘 클로저에 대해서 알아보자! 오늘도 클로저를 정복하러 가보자! 💪😎💪😎💪😎💪😎💪😎💪😎💪😎 CLOUSURE의 단어 의미: 닫힘 / 폐쇄 / 완결성 단어의 의미만 보고 이게 무엇인지 유츄하기 어렵다! MDN에서는 A closure is the combination of a function and the lexical environment within which that function was declared. 함수 X 그 함수가 선언될 당시 X 두 개가 만났을 때 새로운 현상 이 나타나는 것!? = 실행 콘텍스트 A의 내부에서 함수 B가 콤비가 되어 무언가를 한다!! A clos..
참고로, 이 글은 인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 강의를 보고서 정리한 내용입니다. 오늘 콜백 함수에 대해서 알아보자! 오늘도 콜백 함수를 정복하러 가보자! 💪😎💪😎💪😎💪😎💪😎💪😎💪😎 키워드 의미 살펴보기 Callback function의 단어로 분리해서 해석해보면 아래와 같이 해석할 수 있을 것 같다. call back function: 호출해서 돌려줄 함수 콜백 함수의 뉘앙스 살펴보기 A: 이 함수를 호출해서 그 결과를 나한테 알려줘. B: 걱정마. 내가 알아서 처리하고 알려줄게. 대화를 보게 되면, 함수를 넘기고자 하는 대상에게 제어권을 맡기는 걸 인지할 수 있다. 이와 같은 제어권에는 여러가지가 있다. 0. 실행 시점 setInterval은 콜백 함수를 ..
참고로, 이 글은 인프런, Javascript 핵심 개념 알아보기 - JS Flow, 정재남 강의를 보고서 정리한 내용입니다. 지난 시간에 실행 콘텍스트에 대해 이야기를 하였다. (실행 콘텍스트 글 보기) 실행 콘텍스트에 대한 내용을 보았다면, 아래 이미지가 생소하진 않을 것이다. (만약, 못 보신 분들이라면 실행 콘텍스트 글을 보고 이 글을 보시는걸 권장드립니다 ) this라는 개념이 자바스크립트를 처음 접할 때부터 복잡하고 어려운 개념이었다.. 이번 시간을 통해 this를 뿌셔보도록 하자!!! crushing 'this' !! 지난 시간에 아래 내용 중 ThisBinding에 대해서는 이야기하지 않았는데 이번 시간에 다룰 것이다. ThisBiding은 어디서 한다? 실행 콘텍스트가 활성화될 때 THI..