엉망진창 코딩 공부

객체는 리터럴표기법, 생성자 함수에 의해 생성되므로 결국 모든 객체는 생성자 함수와 연결되어있다. 프로토타입은 생성자 함수가 생성되는 시점에 생성된다. 앞에서 확인해본 바와 같이 생성자 함수는 단독으로 존재할 수 없고 쌍으로 존재하기 때문이다.생성자 함수는 사용자 정의 생성자 함수와 기본으로 제공되는 빌트인 생성자 함수로 구분할 수 있다. 1. 사용자 정의 생성자 함수와 프로토타입 생성 시점일반 함수(함수 선언문, 함수 표현식)로 정의한 함수 객체는 내부 메서드 [[Construct]]를 갖기 때문에 new연산자와 함께 생성자 함수로서 호출할 수 있다.// 함수 정의(constructor)가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.console.log(Person.prototy..

1.객체지향 프로그래밍객체지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다. 다양한 속성 중에서 프로그램에 필요한 속성만 표현하는 것을 추상화라고 한다. // 이름과 주소 속성을 갖는 객체const person = { name: 'Lee', address: 'Seoul'};console.log(person); // {name: "Lee", address: "Seoul"} 속성을 통해 여러개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라 하고, 객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그..

1. caller 프로퍼티 caller프로퍼티는 ECMAScript 사양에 포함되지 않는 비 표준 프로퍼티이므로, 절대 사용하지 말고 알아만 두는걸로 하세요~ 함수객체의 caller는 함수 자신을 호출한 함수를 가리킵니다. function foo(func) { return func(); } function bar() { return 'caller : ' + bar.caller; } // 브라우저에서의 실행한 결과 console.log(foo(bar)); // caller : function foo(func) {...} console.log(bar()); // caller : null foo함수 내부에서 호출한 bar함수의 경우, caller를 찍어보면 foo를 가르키는걸 볼 수 있습니다. 두번째 bar를..

1.객체 리터럴 방식의 객체 생성의 문제점 객체는 프로퍼티를 통해 고유의 상태를 표현하고 메서드를 통해 상태데이터인 프로퍼티를 참조하고 조작하는 동작을 표현합니다. const circle1 = { radius: 5, getDiameter() { return 2 * this.radius; } }; console.log(circle1.getDiameter()); // 10 const circle2 = { radius: 10, getDiameter() { return 2 * this.radius; } }; console.log(circle2.getDiameter()); // 20 따라서 객체마다 프로퍼티는 값이 다를 수 있지만 메서드는 동일한 경우가 많습니다. 객체 고유의 상태데이터인 radius값은 객체마다..

해당 글에서 사용한 버전 node: 21.6.2 yarn: 4.1.1 react : 18.2.0 typescript: 5.2.2 vite: 5.1.6 Vite Vite(프랑스어로 "빠른"이라는 뜻)은 최신 웹 프로젝트에 더 빠르고 효율적인 개발 환경을 제공하는 것을 목표로 하는 빌드 도구입니다. 이는 두 가지 주요 부분으로 구성됩니다. 예를 들어 매우 빠른 HMR(핫 모듈 교체)과 같이 기본 ES 모듈 에 비해 풍부한 기능 향상을 제공하는 개발 서버입니다 .프로덕션을 위해 고도로 최적화된 정적 자산을 출력하도록 사전 구성된 Rollup 과 코드를 번들로 묶는 빌드 명령입니다 . 한마디로 Vite는 아주 빠른속도를 자랑하는 빌드도구이다. HMR을 사용하기 때문에, 애플리케이션을 끄지 않아도 일부 컨텐츠만 ..

스코프 체인에 의한 함수 검색 // 전역 함수 function foo() { console.log('global function foo'); } function bar() { // 중첩 함수 function foo() { console.log('local function foo'); } foo(); // ① } bar(); 함수 선언문으로 함수를 호출하면, 런타임 이전에 함수 객체가 먼저 생성된다. 위 예제는 따라서 동일한 함수 이름과 동일한 이름의 식별자에 할당된다. 따라서 foo를 호출하면 먼저 함수를 가르키는 foo를 검색하게 되기 때문에, 로컬함수가 먼저 호출되게 된다. 함수도 식별자에 할당되기 때문에, 스코프는 식별자를 검색하는 규칙이라고 하는게 적합하다. 함수레벨 스코프 지역스코프는 함수에 의..

1. 리액트 프로젝트 생성하기(CRA) 타입스크립트를 사용하는 경우, 뒤에 --template typescript 를 추가로 붙여주면 된다. // yarn을 사용할 경우 yarn create react-app 프로젝트이름 // npm 5.2이상일 경우 npx create-react-app 프로젝트이름 // npm 5.1 이하인 경우(비추천) npm install -g create-react-app create-react-app 프로젝트이름 2. Yarn Berry 적용하기 프로젝트를 생성하고 나면 기본적으로 node_modules와 yarn.lock(package.lock.json)이 생성된 프로젝트가 만들어진다. yarn berry를 사용하기 위해서는, node_modules와 yarn.lock파일을 ..

객체란? 자바스크립트는 '객체기반의 프로그래밍 언어'입니다. 한마디로 거의 모든것이 객체로 이루어져있다는 뜻이죠. 여기서 객체란 무엇일까요?? 객체란, 다양한 타입의 값을 하나의 단위로 합쳐서 만든 자료구조입니다. 한마디로 여러 자료형을 합쳐서 한개로 만들어주는 것 이라고 생각하시면 좋을 것 같습니다. 아래의 예시를 보시면 더 이해하기 쉬우실겁니다. const car = { name: '모닝', weight: 500, start: function () { console.log('부릉부릉'); } }; 자바스크립트에서 사용되는 모든 값은 객체의 프로퍼티가 될 수 있습니다. 함수 또한 일급객체이기 때문에 프로퍼티로 사용하실 수 있습니다. 이때 사용되는 함수는 일반 함수와 구분하기 위해 메서드라고 부릅니다. ..

[숫자 타입] 기존 언어들은 숫자 타입을 int, long, float, double 등 다양한 타입을 제공했지만, JS에서는 단 하나만의 숫자 타입이 존재합니다. 모든 수를 실수로 처리하며, 정수만을 위한 데이터 타입이 별도로 존재하지 않습니다! const integer = 10; const double = 10.23; const negative = -12; 한마디로, 위의 수와 같이 다양한 형식으로 작성하더라도 모두의 타입은 'number'로써 같다는 뜻 입니다! 뿐만 아니라 2진수, 8진수, 16진수 등 다양한 표기법의 숫자들은 모두 메모리에 64비트 부동소수점 형식의 2진수로 저장되기 때문에 표기법이 다르더라도 모두 같은수로 인식됩니다. // 세 수는 모두 65로 해석된다. const binary..

모든 언어가 그러하듯, 자바스크립트도 여러 변수 타입을 갖고있습니다. 그 사이에서 개발자가 원하는 대로 변수의 타입을 변환하는 것이 가능하도록 해주는 것이 타입 변환입니다. 타입변환의 유형에는 명시적 타입변환과 암묵적 타입 변환이 있습니다 :) 간단한 예로, integer타입의 변수를 string으로 변환하는 것을 예로 들어보겠습니다. const num=1234; //toString 매서드를 이용하면, 문자열로 타입을 변경할 수 있다. const first=num.toString(); //다른 타입의 변수에 string문자열을 + 해주면, 자동으로 string으로 형 변환이 된다. const second=num+""; console.log(typeof first); console.log(typeof se..