본문 바로가기

programming study

 (889)
25장. 클래스(1) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 25.1 클래스는 프로토타입의 문법적 설탕인가? JavaScript는 프로토타입 기반의 객체지향 언어 클래스는 프로토타입 기반의 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕 + 새로운 객체 생성 매커니즘 클래스와 생성자 함수와의 차이 클래스는 new 연산자 없이 호출하면 Error 클래스는 extends, super 와 같은 키워드 제공 클래스는 호이스팅이 발생하지 않는 것처럼 동작(TDZ) 클래스는 기본적으로 strict mode가 지정되어 실행 클래스의 constructor와 프로토타입 메서드, 정적 메서드는 열거 불가 25.2 클래스 정의 클래스는 일급 객체 무명의 리..
24장 클로저(3) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 24.5 캡슐화와 정보 은닉 캡슐화 : 프로퍼티와 메서드를 하나로 묶는 것 정보 은닉 : 캡슐화를 하여, 객체의 특정 프로퍼티, 메서드를 감출 목적으로 사용 객체의 상태가 변경되는 것을 방지해 정보를 보호, 결합도를 낮춤 JavaScript의 모든 프로퍼티와 메서드는 기본적으로 외부에 공개됨(public) 함수의 지역 변수는 외부에서 참조 및 접근 불가(private) 24.6 자주 발생하는 실수 var의 경우 함수 레벨 스코프 특성상 클로저 생성이 안되는 경우가 있음 let 키워드로 교체하면 해결 var funcs = []; ​ // i는 전역변수 취급되어 최종적으로 3이 할당 for (va..
24장 클로저(2) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 24.4 클로저의 활용 상태를 안전하게 변경하고 유지하기 위해 사용 상태를 은닉 특정 함수에서만 상태 변경 허용 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에서 적극 사용 됨 예시 const counter = (function(){ // 즉시 실행 함수 // 클로저를 반환하여 식별자 counter에 할당 let num = 0; // 이 함수의 생명 주기가 끝나도 렉시컬 환경을 기억함 return { increase() { return ++num; } decrease() { return --num; } } }()); 함수형 프로그래밍에서의 예시 // 고차함수 // 함수를 인수를 전달..
Vue.js - 실무 환경을 위한 프로젝트 설정 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. API 설정 공통화 axios.create axios의 공통 설정을 할 수 있는 api axios 인스턴스를 생성하여 활용할 수 있음 import axios from 'axios'; ​ // 공통 설정을 할 수 있는 api const instance = axios.create({ baseURL: 'http://localhost:3000', }); ​ 2. env 파일과 설정 서버 엔드포인트를 환경 변수로 관리하기 루트에 .env 파일을 생성하여 아래처럼 입력 VUE_APP 접두사가 붙으면 별도의 웹팩 설정 없이 접근할 수 있음 원래는 webpack DefinePlugin이 필요 vu..
24장 클로저(1) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 24.0 클로저란? MDN: 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합 클로저는 함수를 일급 객체를 취급하는 함수형 프로그래밍 언어에서 중요한 특성 중첩함수에서 외부 함수의 변수를 참조할 때, 외부 함수의 생명 주기가 다했음에도 불구하고 외부 함수의 식별자를 참조 가능한 것 24.1 렉시컬 스코프 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는 것 정적 스코프 스코프의 실체는 실행 컨텍스트의 렉시컬 환경 렉시컬 환경은 외부 렉시컬 환경에 대한 참조를 포함 상위 렉시컬 환경과 연결 함수가 정의된 시점에서 외부 렉시컬 환경에 대한 참조가 정해짐 정의된 시점읜 상위 스코프 ===..
Vue.js - 이벤트 버블링, api 호출과 비동기 처리 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. 이벤트 버블링 자식 요소에서 이벤트가 일어났을 때 상위 요소로 이벤트가 전달되는 것 @submit: submit 이벤트를 감지하여 메서드 실행 prevent: 이벤트 실행 후 폼의 기본적인 동작을 막음 id: pw: nickname: 회원 가입 ​ ​ 2. api 호출과 비동기 처리 2.1 api 폴더 생성 api를 호출하기 위해서 각 컴포넌트에서 aixos를 매번 import하는 것보다 한 곳에 정리하는 것이 좋음 index.js와 같은 한 파일에 api 함수들을 정의하여 export api 함수는 axios(promise)를 return // src/api/index.js imp..
23장 실행 컨텍스트(5) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 23.6 실행 컨텍스트의 생성과 식별자 검색 과정 23.6.1 전역 객체 생성 전역 코드 평가 이전에 전역 객체가 생성 빌트인 전역 프로퍼티 빌트인 전역 함수 표준 빌트인 객체 동작 환경에 따라 클라이언트 사이드 Web API(DOM, BOM, Canvas ..) 특정 환경을 위한 호스트 객체 전역 객체 또한 Object.prototype을 상속 받음 23.6.2 전역 코드 평가 1. 전역 실행 컨텍스트 생성 비어있는 전역 실행 컨텍스트를 생성 실행 컨텍스트 스택에 푸시 이 시점에서 전역 실행 컨텍스트는 컨텍스트의 최상위 즉, 실행 중인 실행 컨텍스트 2. 전역 렉시컬 환경 생성 전역 렉시컬 ..
23장 실행 컨텍스트(4) 본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다. 23.5 렉시컬 환경 식별자, 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조 객체 형태의 스코프(전역, 함수, 블록 스코프)를 생성하여 식별자를 키로 등록하고 바인딩된 값을 관리 23.5.1 실행 컨텍스트의 컴포넌트 실행 컨텍스트는 아래와 같은 컴포넌트로 구성 LexicalEnviroment VariableEnviroment 생성 초기에는 두 컴포넌트 모두 하나의 동일한 렉시컬 환경을 참조 이후 두 컴포넌트는 내용이 달라질 수 있음 23.5.2 렉시컬 환경의 컴포넌트 환경 레코드(Enviroment Record) 스코프에 포함된 식별자를 등록하고 식별자에 바인딩된 값을 관..

티스토리툴바