전체 글

JavaScript/모던자바스크립트 딥다이브
[딥다이브] 19장 프로토타입
자바스크립트는 프로토타입의 기반의 객체지향 프로그래밍 언어이다. 자바스크립트는 원시타입을 제외한 모든것이 객체이다. (함수 ,배열, 정규표현식 등 ) 19.1 객체지향 프로그래밍 객체지향 프고르매잉은 실세계의 실체(사물이나 개념)를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다. 실체는 특징이나 성질을 나타내는 속성(attribute / property)을 가지고있고 이를통해 실체를 인식하거나 구별한다. 추상화 - 다양한 속성중에서 프로그램에 필요한 속성만 간추려내어 표현하는것 객체지향 프로그래밍은 객체의 상태(state)를 나타내는 데이터와 상태데이터를 조작할수있는 동작(be-havoir)을 하나의 논리적인 단위로 묶어 생각한다. 따라서 객체는 상태데이터와 동작을 하나의 논리적인 단위..
→2022.03.13
JavaScript/모던자바스크립트 딥다이브
[딥다이브] 18장 함수와 일급객체
18.1 일급객체 1. 무명의 리터럴로 생성할수있다. 즉 런타임에 생성가능 2.변수나 자료구조 (객체 ,배열) 에 저장가능 3.함수의 매개변수에 전달가능 4.함수의 반환값으로 사용가능 Js의 함수는 다음예제와 같이 위의 조건을 모두 만족하므로 일급객체 이다 // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다. const auxs = { increase, ..
→2022.03.09
JavaScript/모던자바스크립트 딥다이브
[딥다이브] 17장 생성자 함수에 의한 객체생성
17.2 생성자함수 객체 리터럴에 의한 객체생성 방식은 동일한 프로퍼티를 갖는 객체를 여러개 생성해야하는 경우 매번같은 프로퍼티를 기술해야하기 때문에 비효율적이다 그에 비해 생성자 함수에 의한 객체 생성방식은 프로퍼티가 구조가 동일한 객체여러개를 간편하게 생성할수있다 new 연산자와 함께 호출하면 해당 함수는 생성자 함수로 동작한다. 17.2.3 생성자 함수의 인스턴스 생성과정 js엔진은 암묵적인 처리를 통해 인스턴스를 생성 및 반환한다. 1. 인스턴스 생성과 this 바인딩 - 암묵적으로 빈객체 생성 및 this 바인딩(식별자와 값을연결하는 과정 변수이름과 확보된 메모리공간의 주소를 연결한다.) 2. 인스턴스 초기화 - this에 바인딩되어있는 인스턴스(객체)를 초기화한다. 3. 인스턴스 반환 - 완성..
→2022.03.09
JavaScript/모던자바스크립트 딥다이브
[딥다이브] 16장 프로퍼티 어트리뷰트
16.1 내부슬롯과 내부 메서드 - js 엔진의 내부로직으로 직접 접근 및 호출이 불가능하다. - 하지만 일부에 한해 간접적으로 접근가능 . [[Prototype]] 내부슬롯에는 __proto__를 통해 간접적으로 접근 가능 16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 js 엔진은 프로퍼티를 생성할때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동정의한다. -프로퍼티 어트리뷰트 (attribute 속성) : 프로퍼티의 상태( 값 , 갱신가능여부 , 열거여부 , 제정의 가능여부 )를 나타냄 -프로퍼티 디스크립터(descriptor, 설명): 프로퍼티 어트리뷰트의 정보를 제공함 16.3 데이터 프로퍼티와 접근자 프로퍼티 -데이터 프로퍼티: 키 ,값으로 구성된 일반적인 프로퍼티 -접..
→2022.03.09
JavaScript/모던자바스크립트 딥다이브
[딥다이브] 15장 let, const 키워드와 블록레벨 스코프
let let은 이름이 같은 변수를 중복선언하면 문법에러가 발생한다. (변수 중복 선언 금지) let은 블록레벨 스코프를 따른다. let foo = 1; // 전역 변수 { let foo = 2; // 지역 변수 let bar = 3; // 지역 변수 } console.log(foo); // 1 console.log(bar); // ReferenceError: bar is not defined 변수 호이스팅 let 키워드로 선언한 변수는 선언단계와 초기화 단계가 분리되어 진행된다. (var는 같이진행된다) 만약 초기화 단계가 실행되기 이전에 변수에 접근하려하면 참조에러( ReferenceError)가 발생한다. let으로 선언한 변수는 스코프의 시작지점부터 초기화 단계 시작 지점까지 변수를 참조할수없다...
→2022.02.22
JavaScript/모던자바스크립트 딥다이브
[딥다이브] 14장 전역변수의 문제점
전역변수의 문제점 1. 암묵적결합 - 전역변수는 어디서든 참조, 할당할수잇기때문에 암묵적결합을 허용하는것이며 변수의 유효범위가 커질수록 코드의 가독성은 나빠지고 의도치않게 상태가 변경될수있는 위험도가 증가한다. 2. 긴 생명주기 - 메모리 소비도 높으며 var 키워드는 중복선언을 허용하므로 의도치 않은 재할당이 일어날수있다. 3. 스코프 체인상에서 종점에 존재 - 종점에 존재하기에 전역변수의 검색 속도가 가장느리다. 4. 네임스페이스 오염 - 다른파일내에서 동일한 이름으로 명명된 전역변수나 전역함수가 같은 스코프내에 존재하는경우 예상치못하는결과를 가져올수있음 전역변수의 사용을 억제하는방법 전역변수를 반드시 사용해야할 이유를 찾지 못한다면, 지역변수를 사용하자 , 변수의 스코프는 좁을수록 좋다. 모듈패턴 ..
→2022.02.21
Html Css
[Css] css reset / normalize (초기화 / 정규화)
브라우저 (크롬 ,사파리 ,파이어폭스 등 .. ) 마다 제공하는 user agent stlye이라는게 존재한다 간단히 브라우저의 기본 스타일값이라고 생각하면 되겠다. 다만 브라우저마다 기본스타일이 다르기때문에 이를 극복하기위해 css reset / css normalize 가 존재한다 ! 그렇다면 두개의 차이는 무엇일까? Css reset 말그대로 리셋 모든 브라우저에서 통일된 화면을 볼수있게 기본값을 초기화한다. 리셋의 방법은 매우 다양한데 Eric Meyer의 Reset CSS 를 많이 사용하는듯하다 특징은 스타일링에 대한 시간이 오래걸리며 아얘 초기화를 하는 것이기 때문에 지속적인 업데이트가 필요없다 유용한 스타일까지도 초기화해버리는 비효율적인 부분이 있다 Css normalize 브라우저 간 us..
→2022.02.17
JavaScript/Next.js
[Next.js] Next.js + typeScript 환경설정
yarn 으로 설정 yarn create next-app --typescript eslint + prettier 설정 yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin styled-components 설치 yarn add styled-components @types/styled-components css 초기화 or 정규화 ( reset or normalize) https://invalueable.ti..
→2022.02.17
JavaScript/모던자바스크립트 딥다이브
[딥다이브] 13장 스코프
스코프란 ? 모든 식별자( 변수명, 함수명, 클래스명 등. ) 자신이 선언된 위치에 의해 다른코드가 식별자 자신을 참조할 수 있는 유효범위 즉 , 식별자가 유효한 범위 이다 @@ 코드의 문맥과환경 렉시컬환경 : 코드가 어디서 실행되며 주변에 어떤 코드가 있는지 즉 , 코드의 문맥은 렉시컬 환경으로 이루어진다. 이를 구현한것이 실행컨텍스트 이며 , 모든코드는 실행컨텍스트에서 평가되고 실행된다. 스코프체인 : 스코프가 계층적으로 연결된것 블록레벨 스코프 : if , for ,while ,try/catch 등 .. 함수레벨 스코프 : var 로선언된 변수 js엔진은 시작스코프 (변수를 참조하는 코드의 스코프) - > 상위스코프 방향으로 이동하며 변수를 검색한다. 즉 함수를 어디서 정의했는지를에 따라 상위스코프..
→2022.02.14
JavaScript/모던자바스크립트 딥다이브
[딥다이브] 12장 함수
12.5 . 함수호출 function add(x,y) { return x+y ; } console.log(add(2)); // NAN console.log(add('a','b')); // 'ab' 위 코드는 js 문법상 어떤 문제가 없음 자바스크립트 엔진의 특징 1. 자바스크립트 함수는 매개변수와 인수의 개수가 일치하지 확인하지 않는다. 2.자바스크립트는 동적타입언어이다. 따라서 자바스크립트 함수는 매개변수의 타입을 사전에 지정 할수없다. 따라서 js의 경우 함수를 정의할때 적절한 인수가 전달되어있는지 확인할 필요가 있다. -> ts를 적극적으로 써야하는 이유가 더생긴듯하다. 책에서는 typeof 로 판단을 한다. 매개변수의 최대 개수 매개변수의 개수는 0개 , 적을수록 좋다. 책에서는 최대 3개이상을 ..
→2022.02.14

• 이전
• 1
• 2
• 3
• 4
• ···
• 9
• 다음