728x90 반응형 👩💻 Programming/JavaScript35 [코어 자바스크립트] 7장 클래스 01 클래스와 인스턴스의 개념 이해 👨💻 자바스크립트의 클래스 👉 자바스크립트는 프로토타입 기반 언어라서 '상속' 개념이 존재하지 않는다. ES6에서 클래스 문법이 추가되었는데 일정 부분 프로토타입을 활용하기 때문에 ES5의 클래스를 흉내내기 위한 구현 방식을 학습해두어야 한다. 👉 음식은 과일보다 상위의(superior) 개념이고, 과일은 음식보다 하위의(subordinate) 개념이다. 이를 상위 클래스(superclass)/하위 클래스(subclass)로 표현한다. 💙 과일 분류 하위에 또 다른 분류가 있을 경우 클래스 간의 관계 음식 과일의 superclass, 귤류의 super-super class 과일 음식의 subclass, 귤류의 superclass 귤류 음식의 sub-subclass, .. 2022. 12. 8. [코어 자바스크립트] 6장 프로토타입 들어가며 👉 자바스크립트는 프로토타입(prototype) 기반 언어이다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형(프로토타입)으로 삼아 이를 복제(참조)함으로써 상속과 비슷한 효과를 낸다. 01 프로토타입의 개념 이해 6-1-1 constructor, prototype, instance ❕ 위 그림을 이해하면 프로토타입은 끝이다! 👉 위 코드와 그림의 흐름을 따라가자면 아래와 같다. 어떤 생성자 함수(Constructor)를 new 연산자와 함께 호출하면 Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스(Instance)가 생성됨. 이때 Instance에는 __proto__(dunder proto, 던더 프로토)라는 프로퍼티가 자동으로 부여되.. 2022. 12. 6. [코어 자바스크립트] 5장 클로저 01 클로저의 의미 및 원리 이해 🤔 클로저란? 👉 다양한 서적에서 클로저를 한 문장으로 요약 설명한 것을 소개하자면 다음과 같다. 👉 MDN(Mozilla Developer Network)에서는 클로저를 "A closure is the combination of a function and the lexical environment within which that function was declared."라고 소개한다. 👉 "선언될 당시의 lexical environment"는 실행 컨텍스트 구성 요소 중 outerEnvironmentReference에 해당한다.(LexicalEnvironment 및 실행 컨텍스트에 대해서는 다음 글 참조.) 👉 컨텍스트 A에서 선언한 내부함수 B의 실행 컨텍스트가 활성.. 2022. 11. 29. [코어 자바스크립트] 4장 콜백 함수 01 콜백 함수(callback function)란? 👉 다른 함수 또는 메서드의 인자로 할당하면서 제어권도 함께 위임한 함수. 👉 어떤 함수 X를 호출하면서 '특정 조건일 때 콜백 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보냄. 이후 함수 X는 해당 조건이 충족되는지 내부 로직으로 판단하여 콜백 함수 Y를 직접 호출함. 02 제어권 4-2-1 호출 시점 👉 setInterval 메서드의 구조는 위와 같다. 우선 scope에는 Window 객체 또는 Worker의 인스턴스가 들어오는데 일반적인 브라우저 환경에서는 window를 생략해서 함수처럼 사용 가능하다. 매개변수로는 콜백 함수와 딜레이(ms)를 반드시 전달해야 하고 세 번째부터는 선택사항이다. 👉 setInterval 메서드를 실행하면 .. 2022. 11. 25. [모던 자바스크립트 Deep Dive] 비동기 프로그래밍 이번 글은 모던 자바크스립트 Deep Dive의 42장 '비동기 프로그래밍' 및 초보자를 위한 Node.js 200제의 122장 '비동기(Async)와 동기(Sync)를 요약정리한 글입니다. 🤔 비동기란? 👉 쉽게 말하자면 return값이 없는 실행 🤔 왜 비동기로 코드를 짜는가? 👉 프로그램은 return값을 받으려고 응답이 올 때까지 기다리는데 이러면 실행 시간이 늘어나 성능 저하됨. 💡 비동기 작동 방식 👉 예를 들어 100명의 비서에게 동시에 각 번호별 페이지를 호출해서 저장하라고 하자. 비서는 각자 맡은 일을 처리할 테고 평균 처리 시간이 1초, 최장 처리 시간이 2초라고 한다면 총 실행 시간은 2초이다. 즉 여러 개의 작업을 순차적이 아니라 同時적으로 처리하는 것! 🤔 동기 처리와 비동기 처리.. 2022. 11. 20. 코어 자바스크립트_3장 this What is this? 👉 객체 지향 언어에서는 클래스로 생성한 인스턴스 객체 👉 자바스크립트에서는 어디서든 사용 가능. 함수와 객체(메서드)를 유일하게 구분 짓는 기준. 01. 상황에 따라 달라지는 this 👉 this는 실행컨텍스트가 생성될 때 결정됨. 즉 함수를 호출할 때 결정됨. 3-1-1. 전역 공간에서의 this 👉 브라우저 환경에서는 window, Node.js에서는 global 👉 전역 변수 선언 시 자바스크립트 엔진은 이를 전역 객체의 프로퍼티로 할당. 자바스크립트의 모든 변수는 실행 컨텍스트 LexicalEnvironment의 프로퍼티로서 동작. 👉 전역 공간에서 window의 프로퍼티에 직접 데이터를 할당하더라도 var로 변수 선언한 것과 똑같이 동작. 허나 '삭제' 명령은 다르게 .. 2022. 11. 1. 코어 자바스크립트_2장 실행 컨텍스트 01. 실행 컨텍스트란? 스택 👉 출입구가 하나뿐인 우물 같은 데이터 구조. FILO(선입후출) or LIFO(후입선출)로 동작. 👉 콜스택 초과 시 스택 오버플로(stack overflow) 발생. 큐 👉 양쪽이 열려 있는 파이프 같은 데이터 구조. FIFO(선입선출) or LILO(후입후출)로 동작. ❔ 실행 컨텍스트 👉 실행할 코드에 제공할 환경 정보들을 모아놓은 객체. 활성화되는 시점에 호이스팅(hoisting), 외부 환경 정보 구성, this 값 설정 등의 동작을 수행한다. 이로 인해 자바스크립트만의 특이한 현상들이 발생. 🔷 동작 순서 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성(🔸 동일한 환경이란 하나의 실행 컨텍스트를 구성할 수 있는 eval() 함수.. 2022. 10. 26. 코어 자바스크립트_1장 데이터 타입 01. 데이터 타입의 종류 👉 이번 장의 학습 목표는 기본형 타입과 참조형 타입이 서로 다르게 동작하는 이유를 알고 적절히 활용하는 것이다. ❔ 기본형과 참조형을 구분하는 기준 할당이나 연산 시 기본형: 주솟값을 바로 복제 참조형: 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제 02. 데이터 타입에 관한 배경지식 1-2-1. 메모리와 데이터 비트(bit): 0 또는 1만 표현할 수 있는 하나의 메모리 조각. 식별자(identifier): 각 비트는 고유한 식별자를 통해 위치를 확인. 바이트(byte): 1바이트 = 8비트. 자주 사용하지 않는 데이터를 검색 시간 단축을 위해 적정한 공간에다 놔둔 비트의 묶음. 👉 C/C++, Java 등 정적 타입 언어는 메모리 낭비를 최소화하기 위해 데이터 타입별로.. 2022. 10. 24. [JavaScript] SNS 공유하기 (카카오, 라인, 트위터, 페이스북) 현재 페이지의 url을 sns로 공유하는 기능을 구현하는 방법을 적은 글입니다. 앞서 요약하자면 카카오톡 공유는 카카오 공유 API를 활용하여 구현해야 하고, 나머지 라인, 트위터, 페이스북은 단순히 url만 입력하면 됩니다. 1. 카카오톡(Kakao Talk) 카카오톡으로 현재 페이지의 url을 공유하기를 구현하려면 카카오 개발자 사이트에 방문하여 사전 작업을 해야 합니다. 1. 애플리케이션 등록 2. JavaScript 키 확인 3. Web 플랫폼 등록 그럼 카카오 개발자 사이트에서 해야 할 일을 아래에서 자세히 살펴보겠습니다. 애플리케이션 등록 사이트에 로그인한 후 내 애플리케이션 메뉴를 클릭합니다. 애플리케이션 추가 및 정보 입력 애플리케이션 추가 버튼을 클릭하면 위와 같은 창이 뜨는데 부담 갖지.. 2022. 10. 15. 이전 1 2 3 4 다음 728x90 반응형
