IT's Time

1. this 키워드: this 란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. : this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. : this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정됨.* this 바인딩 : 바인딩이란 식별자와 값을 연결하는 과정을 의미, 예를 들어 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩 하는 것. 2. this 예시 // 생성자 함수function Circle(radius) { // this 는 생성자 함수가 생성할 인스턴스를 가리킴 this.radius = radius; } Circle.prototype.getDiamet..

1. 자바스크립트 객체의 분류 1) 표준 빌트인 객체   - ECMAScript 사양에 정의된 객체를 말함. 애플리케이션 전역의 공통 기능을 제공함  - ECMAScript 사양에 정의된 객체이므로 자바스크립트 실행 환경과 관계 없이 언제나 사용 할 수 있음.  - 전역 객체의 프로퍼티로서 제공되며 따라서 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. 2) 호스트 객체  - ECMAScript에 정의 되어 있진 않지만 자바스크립트 실행 환경에서 추가로 제공되는 객체를 말함  - 브라우저 환경에서는 DOM , BOM , Canvas , XMLHttpRequest, fetch , SVG , WebStorage , Web Component , Web Worker와 같은 클라이언트 사이드 Web AP..

1. 암묵적 전역: 변수의 선언이 존재하지 않지만 자바스크립트 엔진이 암묵적으로 전역 객체에 프로퍼티를 동적 생성하는 것: 아래처럼 x는 선언되지 않았기 때문에 foo 스코프를 넘어 전역 스코프로 넘어갔을 때도 x 변수는 선언이 되지 않아 Referrence Error가 떠야할 것 같지만 그렇지 않고 전역객체에 암묵적으로 x 프로퍼티를 동적 생성함.: 그래서 꼭 var , let ,const 키워드를 사용하여 변수를 선언한 다음 사용해야 한다. function foo() { x = 10; } foo(); console.log(x); 2. strict mode: 그럼에도 불구하고 오타나 문법 지식의 미비로 인한 실수는 발생하기 때문에 이러한 오류를 발생시키지 않기 위한 환경을 만드는 것이 중요하다..

1. JavaScript: 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어: JS는 객체 기반의 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체라고 할 수 있다.: 원시 타입의 값을 제외한 나머지 값들(함수 , 배열 , 정규 표현식 등)은 모두 객체라고 할 수 있다. 2. 객체지향 프로그래밍: 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임: 실세계의 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작함: 실체는 특징이나 속성을 나타내는 속성(어트리뷰트 / 프로퍼티) : 추상화는 다양한 속성 중에서 필요한 속성만 간추려 내어 표현하는 것ex) "이름"과 "주소"라는 속성을 갖는 person 객체c..

1. 일급객체란?: 아래와 같은 조건을 만족하는 객체를 일급 객체라 한다.1) 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성 가능함2) 변수나 자료구조(객체, 배열) 등에 저장할 수 있다.3) 함수의 매개변수에 전달 할 수 있다.4) 함수의 반환값으로 사용할 수 있다.=> JS의 함수는 위 조건을 모두 만족하므로 일급 객체다.=> 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미다.  2. 일급객체로서 함수가 가지는 가장 큰 특징: 일반 객체와 같이 함수의 매개변수에 전달 할 수 있으며, 함수의 반환값으로도 사용할 수 있다는 것이다. 3. 함수 객체의 프로퍼티: 함수는 객체기 때문에 프로피터를 가질 수 있다.function square(number) { return n..

요즘 AI를 사용해서 효율성 향상을 위한 방법을 많이 고민하고 있는데 개인적으로 CS 및 개념 공부 외에도 실제로 향상성을 높이기 위해 노력해야한다는 것을 절실히 느끼고 있다. 그래서 cursor ai를 사용해서 사이드 프로젝트를 해보려고 하는데 여기서 가장 큰 목표는 두 가지로 잡았다.1. 개발 속도 향상2. AI를 활용하여 빠른 개발 지식 습득  그래서 사이드 프로젝트의 일환으로 이전에 사수분께서 프론트엔드 개발자가 자기 블로그쯤은 만들어봐야 한다는 말씀이 생각나 내 블로그 제작을 목표로 시작 했다.  그 중 첫 번째로 프론트엔드와 백엔드 모두 경험해보고 싶었고 Next.js로 프론트,백 둘다 하는 것도 고려해봤으나 (사실 제일 적합한 방식이라고 생각한다.) 이왕 사내에서 express도 차후 사용해..

1. 개발 개요cursor ai에 익숙해지기 위해 사이드 프로젝트의 일환으로 블로그를 만들던 중 Next.js로 프론트엔드를 구성했는데 아래와 같은 에러를 보았다. 보아하니 블로그 상세 페이지 즉,  id를 params로 받아오는 곳의 타입 문제가 발생했는데 예전에 Next.js를 사용할 때와 동일한 코드와 로직이였는데 pwa 도입 후 테스트를 위해 build 하던 도중 발생한 에러였다. 한 번도 본 적이 없던 에러라 구글링을 해보니 Next.js 15버전부터 params와 searchParams의 접근 방식이 바뀌었다고 한다.Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'. Types ..

1. Object 생성자 함수: new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환됨.const person = new Object();// 프로퍼티 추가person.name = "Lee"; : 생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말함.: 생성자 함수에 의해 생성된 객체를 인스턴스라 한다.: :객체 생성 방법은 객체 리터럴을 사용하는 것이 더 간편한다. 2. 생성자 함수1) 객체 리터럴에 의한 객체 생성 방식의 문제점: 직관적이고 간편하나 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적임const circle1 = { radius: 5, getDiameter() ..

1. 내부 슬롯과 내부 메서드1) 내부 슬롯 : 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티(Psuedo Property) 2) 내부 메서드 : 의사 메서드 ex) ([[...]]) 2. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체: 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의함: 프로퍼티 상태란 프로퍼티의 값, 값의 갱신 가능 여부 , 열거 가능 여부, 정의 가능 여부를 말한다.: 프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값인 내부 슬롯이다.ex) [ [ Value ] ] , [ [ Enumerable ] ] , [ [Configurable ] ]= 프로퍼티 ..

1. var 변수 문제점1) 변수 중복 선언 허용2) 함수 레벨 스코프 : var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정함.: 따라서 함수 외부에서 var로 선언한 변수는 코드 블록 내 선언해도 모두 전역 변수가 됨.3) 변수 호이스팅: 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작함 2. let 키워드: 변수 중복 선언 금지: 블록 레벨 스코프 - 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따름: 변수 호이스팅 발생 X: var 키워드와 달리  "선언 단계" 와 "초기화 단계"가 분리되어 진행 된다.: 따라서 초기화 단계 실행되기 이전에 변수에 접근하려고 하면 참조 에러가 발생함: 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 ..