2022-2 웹개발 스터디 (28) 썸네일형 리스트형 [모던 JS] CH 38. 브라우저의 렌더링 과정 CH 38. 브라우저의 렌더링 과정 렌더링? - HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 38.1 요청과 응답 - 브라우저의 핵심 기능 : 필요한 리소스(HTML, CSS 등)를 서버에 요청하고 서버로부터 응답 받아 브라우저에 시각적으로 렌더링하는 것 - 브라우저의 주소창에 URL을 입력하고 엔터를 누르면 URL의 호스트 이름이 DNS를 통해 IP주소로 변환 - 이 IP 주소를 갖는 서버에게 요청을 전송 38.2 HTTP 1.1과 HTTP 2.0 - HTTP는 웹에서 브라우저와 서버가 통신하기 위한 프로토콜(규약) HTTP1.1 - 기본적으로 커넥션 당 하나의 요청과 응답만 처리 - 리소스의 동시 전송이 불가능한 구조 - 요청할 리소스의 개수에 비례하여 응답 시.. [모던 JS] CH 32. String, CH33. 7번째 데이터 타입 Symbol CH 32. String 32.1 String 생성자 함수 - 각 문자를 프로퍼티 값으로 갖는 유사 배열 객체이면서 이터러블 - 문자열은 원시 값이므로 변경 불가, 이때 에러는 발생하지 않음 - 생성자 함수의 인수로 문자열이 아닌 값을 전달하면 인수를 문자열로 강제 변환 후 객체 생성함 const strObj = new String('Lee'); strObj[0] = 'S'; console.log(strObj); // 'Lee' let strObj = new String(123); console.log(strObj); // String {0:"1", 1:"2", 2:"3", length:3, [[PrimitiveValue]]:"123"} strObj = new String(null); console.lo.. [모던 JS] CH 28. Number, CH 29. Math, CH 30. Date, CH 31. RegExp (#16) CH 28. Number 28.1 Number 생성자 함수 - new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성함 const nobj = new Number(); console.log(nobj); // Number {[[PrimitiveValue]]: 0} - new 연산자를 사용하지 않고 Number 생성자 함수를 호출하면 Number 인스턴스가 아닌 숫자를 반환함. 이를 이용해 명시적으로 타입 변환 (9장) 28.2 Number 프로퍼티 28.2.1 Number.EPSILON - 1과 1보다 큰 숫자 중에서 가장 작은 숫자와의 차이 - 부동소수점으로 인해 발생하는 오차 해결을 위해 사용 function isEqual(a, b) { retu.. [모던 JS] CH27. 배열 (#15) CH27. 배열 27.1 배열이란? - 배열이 가지고 있는 값: 요소 - 모든 값은 배열의 요소가 될 수 있음 - 인덱스를 가짐 - 대괄호 내에 접근하고 싶은 요소의 인덱스 지정 - 배열의 길이를 나타내는 length 프로퍼티를 가짐 const arr = ['apple', 'banana', 'orange']; - for 문을 통해 순차적으로 요소에 접근할 수 있음 - JS에 배열이라는 타입은 존재하지 않음 (배열은 객체 타입) - 배열의 프로토타입 객체는 Array.prototype for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } typeof arr // object - 일반 객체와 구별되는 배열의 특징 ! 배열의 장점- 처음부터 순차적으로 .. [모던 JS] CH26. ES6 함수의 추가 기능 (#14) CH26. ES6 함수의 추가 기능 26.1 함수의 구분 - ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있음 - 일반적으로 메서드라고 부르던 객체에 바인딩된 함수도 callable이며 constructor - 객체에 바인딩된 함수도 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있음 var obj = { x:10, f:function() { return this.x; } }; console.log(obj.f()); // 10 var bar = obj.f; console.log(bar()); console.log(new obj.f()); - 일반 함수는 함수 선언문이나 함수 표현식으로 정의한 함수 26.2 메서드 - ES6 사양에서 .. [모던 JS] CH25. 클래스 (#13) CH25. 클래스 25.1 클래스는 프로토타입의 문법적 설탕인가? - 자바스크립트는 프로토타입 기반의 객체지향 언어 - 이런 언어는 클래스가 필요없는 객체지향 프로그래밍 언어 - ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토 타입을 통해 객체지향 언어의 상속을 구현할 수 있음 // ES5 생성자 함수 var Person = (function() { function Person(name) { this.name = name; } Person.prototype.sayHi = function(){ console.log('Hi! My name is ' + this.name); }; return Person; }()); var me = new Person('Lee'); me.sayHi(); // Hi.. [모던 JS] CH24. 클로저 (#12) CH24. 클로저 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 24.1 렉시컬 스코프 렉시컬 스코프(정적 스코프)? → 자바 스크립트 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정 → 렉시컬 환경의 "외부 렉시컬 환경에 대한 참조"에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정 24.2 함수 객체의 내부 슬롯 - 함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장함 - 함수 객체의 내부 슬롯에 저장된 현재 실행중인 실행 컨텍스트의 렉시컬 환경의 참조가 바로 상위 스코프 - 자신이 호출되었을 때 생성될 함수 렉시컬 환경의.. [코드] 2 1. 포켓몬 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(nums) { const maxNums = Array.from(new Set(nums)) return Math.min(nums.length / 2, maxNums.length); } 2. 모의고사 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(answers) { let answer =.. 이전 1 2 3 4 다음
