웹 공부일지

Javascript this this JavaScript에서 "this"는 현재 실행 중인 코드의 컨텍스트를 참조하는 특별한 키워드입니다. 이 컨텍스트는 주로 함수 또는 메소드가 호출되는 방법에 따라 결정됩니다. this는 호출될 때 결정되며 호출될 때 this가 특정 객체에 바인딩된다고 합니다. 여러 상황에서의 this의 값 1. 브라우저 환경일 경우 브라우저 콘솔에 this를 찍어보세요 console.log(this); // window function whatIsThis() { console.log(this); // window } whatIsThis(); 2. 엄격모드일 경우 "use strict"; function whatIsThis() { console.log(this); } whatIsThi..

async / await 1. async / await란? async/await는 JavaScript에서 비동기적인 동작을 처리하기 위한 문법입니다. 이를 사용하면 비동기 코드를 동기적으로 작성하고 관리할 수 있습니다. async 함수는 항상 Promise를 반환하며, 이것은 async 함수의 반환값이 Promise.resolve()에 전달된 다음 호출자에게 반환된 것과 같습니다. await 키워드는 Promise가 완료될 때까지 해당 코드의 실행을 일시 중지합니다. await 키워드는 async 함수 내에서만 사용할 수 있습니다. 따라서, await를 사용하려는 코드가 async 함수 내에 위치하도록 주의해야 합니다. **async / await** 구문을 사용하면 각 비동기 작업에서 다음 구문을 실행..

싱글턴 패턴 (Singleton) 싱글턴은 클래스에 인스턴스가 하나만 있도록 하면서 이 인스턴스에 대한 전역 접근(액세스) 지점을 제공하는 생성 디자인 패턴입니다. 싱글턴 패턴은 다음의 두가지 상황을 구현합니다. 클래스의 인스턴스가 하나만 있게 합니다 ⇒ 객체는 최초 1회 생성되고, 다른 객체의 생성을 시도했을 때 똑같은 객체를 돌려받게 됩니다. 물론 new 키워드를 이용하여 객체를 생성하면 무조건 새 객체를 돌려받게 되므로 일반적인 생성방법으로는 구현할 수 없습니다. 해당 인스턴스에 대한 전역접근 지점 제공 ⇒ 이는 마치 전역변수와 같은 기능을 하는데, 덮어씌워질 위험이 있는 전역변수와 다르게 이러한 상황에 대한 보호를 제공합니다. 위의 상황중 한가지만 해결해도 싱글턴 패턴이라 부를 수 있습니다. 대표..

프로토타입 패턴 (Prototype) clone 이라는 이름으로도 불립니다. 프로토타입은 코드를 그들의 클래스들에 의존시키지 않고 기존 객체들을 복사할 수 있도록 하는 생성 디자인 패턴입니다. 복제를 지원하는 객체를 프로토 타입 이라고 합니다. 당신의 객체들에 수십 개의 필드와 수백 개의 가능한 설정들이 있는 경우 이를 복제하는 것이 서브클래싱의 대안이 될 수 있습니다. 프로토타입 패턴은 실제로 복제되는 객체들에 복제 프로세스를 위임합니다. 프로토타입은 객체들(복잡한 객체 포함)을 그의 특정 클래스들에 결합하지 않고 복제할 수 있도록 하는 생성 디자인 패턴입니다. 프로토타입 구성요소 Prototype 클래스 : 복제를 당할 객체를 정의합니다. 대부분 단일 clone 메서드로 이루어져 있습니다. Compo..

빌더 패턴 (Builder) 빌더는 복잡한 객체들을 단계별로 생성할 수 있도록 하는 생성 디자인 패턴입니다. 이 패턴을 사용하면 같은 제작 코드를 사용하여 객체의 다양한 유형들과 표현을 제작할 수 있습니다. 빌더 패턴을 사용하는 것은 제품에 매우 복잡하고 광범위한 설정이 필요한 경우에만 의미가 있습니다. 점층적 생성자의 제거 class Pizza { Pizza(int size) { ... } Pizza(int size, boolean cheese) { ... } Pizza(int size, boolean cheese, boolean pepperoni) { ... } // … 위의 코드는 여러개의 생성자를 오버로딩하여 객체 생성시, 입맛에 맞는 피자를 만드는 코드입니다. 이렇게 생성자를 오버로딩하면 생성자..

발생상황 npm i ts-node npx ts-node [somefile].ts TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for [filepath] at new NodeError (node:internal/errors:399:5) at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11) at defaultGetFormat (node:internal/modules/esm/get_format:121:38) at defaultLoad (node:internal/modules/esm/load:81:20) at nextLo..

Next Image Next Image의 사용법 next에서 기본적으로 제공하는 next/image에서 import 하여 사용합니다. import Image from 'next/image' Next Image의 특징 서버에서 자동으로 webp 형식으로 변환해주어서 용량이 기존 img 태그보다 더 작습니다. (이미지 자동 최적화) loading=”lazy” 속성이 자동으로 들어가 있습니다. 이는 페이지 로드시 이미지를 무조건적으로 요청해서 다운받는 것이 아닌, 이미지가 스크롤 저 밑에있을 경우에는 스크롤이 특정 위치에 도달하기 전까지 이미지를 요청하지 않습니다. quality 속성을 이용하여 최적화의 정도를 결정해줄 수 있습니다. 기본값은 quality={75} 입니다. quality를 높일수록 용량이 커..

추상 팩토리 패턴 (Abstract Factory) 추상 팩토리는 관련 객체들의 구상 클래스들을 지정하지 않고도 관련 객체들의 모음을 생성할 수 있도록 하는 생성패턴입니다다. 추상 팩토리 구성요소 추상 공장 인터페이스 : 공장에서 생산할 수 있는 제품들을 정의합니다. 추상 제품 인터페이스 : 제품들이 가져야할 메서드를 정의합니다. 구체적인 공장 클래스 : Korean 제품을 생산하는 공장, USA 제품을 생산하는 공장등 각 제품들의 하나의 variant(변형)을 생산하는 공장클래스 입니다. 구체적인 제품 클래스 : 제품 인터페이스를 상속받아서 메서드를 구현합니다. 의자면 sitOn(앉을 수 있다) 등. 클라이언트 코드 : 구체적인 공장을 하나 인수로 받아 제품들을 생성하고, 비즈니스 로직을 수행합니다. ..

07. dart class - advanced 1. enum & casacde notation 클래스의 멤버변수를 선언하고 초기화 하고 인스턴스 변수를 만들때 값을 한정지어서 개발할 때의 실수를 방지할 수 있습니다. 다음과 같이 선언합니다. enum Team { red, blue } class Player { String name; int xp; Team team; // 자료형 선언 후 Player({required this.name, required this.xp, required this.team}); void sayHello() { // 값을 찍을 때는 Team.name으로 값 확인 print("Hi my name is $name and my team is ${team.name}"); } } voi..

06. dart class - named constructor named consturctor named constructor : 커스텀 생성자를 만든다. 본인의 입맛에 맞게 초기화 진행, : 이라는 신기한 문법사용. : 뒤에 Player 클래스의 초기화를 진행한다. class Player { final String name; // 타입이 같을경우 같이 선언 가능 int xp, age; String team; Player({ required this.name, required this.xp, required this.team, required this.age, }); Player.createBluePlayer({required String name, required int age}) : this.age ..