전체 글787

• 

  [TypeScript]추상 클래스(Abstract Class) 추상화(Abstraction) 추상화는 객체 지향 프로그래밍(OOP:Object-Oriented Programming)의 핵심 아이이디어 중 하나입니다. 복잡성을 최소화하고 고급 아키텍처 문제를 해결하는데 도움이 되는 기술이며, 하위 수준의 세부 사항을 미리 구현할 필요가 없습니다. 상위 수준에 집중하고 나중에 세부 사항을 구현합니다. OOP에서는 두 가지 유형의 클래스가 존재합니다. 추상 클래스와 구체 클래스입니다. 위에서 말한 상위 수준은 추상 클래스이며 하위 수준은 구체 클래스입니다. 구체 클래스의 객체는 new 키워드를 사용하여 생성할 수 있습니다. class Person { private _name: string; private _age: number; constructor (theName:st.. TypeScript 2022. 3. 25.

• 

  [JavaScript]강제 형 변환(type coercion) 강제 형 변환(type coercion)이란? 자바스크립트(JavaScript)에서 강제 형 변환은 타입이 다른 타입으로 변환되는 것을 의미합니다. 명시적 변환은 Number(), String(), Boolean()을 사용하여 타입을 강제로 변환하는 경우입니다. 명시적 변환은 개발자가 의도하여 타입을 변환하므로 코드를 쉽게 이해할 수 있습니다. 암시적 변환은 특정 연산자 또는 표현식이 사용될 때 동작합니다. 항등 연산자인 ==는 암시적으로 형 변환하는 연산자로 유명합니다. 1 == '1' // true 1 === '1' // false 1 == '1'은 서로 다른 타입이지만 암시적으로 형 변환 후 값을 비교하여 True가 반환됩니다. 이번 포스팅은 암시적 변환에 초점을 두어 강제 형 변환을 설명합니다. .. JavaScript/Tip 2022. 3. 25.

• 

  [TypeScript]static property, static method 정적 변수와 정적 함수 static 키워드를 사용하여 선언된 변수와 함수는 정적 변수, 정적 함수라고 말합니다. 정적 변수와 정적 함수는 클래스에 속하는 변수와 함수로 변수와 함수를 호출하기 위해 객체가 필요하지 않습니다. 클래스에서 바로 호출할 수 있습니다. 일반적으로 클래스의 변수와 함수를 접근하기 위해서는 다음과 같이 객체를 생성해야 합니다. class ClassExample { private _field: string; get field() { return this._field; } set field(theField: string) { this._field = theField; } public printField() { console.log('field: ' + this._field); } } /.. TypeScript 2022. 3. 24.

• 

  [JavaScript]배열 첫 번째 요소 제거 자바스크립트(JavaScript)에서 배열의 첫 번째 요소를 제거하는 대표적인 방법으로 shift(), splice(), slice() 함수를 사용할 수 있습니다. shift 함수 shift() 함수는 인수를 가지지 않습니다. shift() 함수는 배열의 첫 번째 요소를 반환하고 해당 요소를 제거합니다. const arr = [1, 2, 3, 4, 5]; const firstItem = arr.shift(); console.log(firstItem); // 1 console.log(arr); // [2, 3, 4, 5] 빈 배열에서 shift() 함수를 호출하면 undefined를 반환하며, 배열에 요소가 존재하지 않으므로 요소가 제거되지 않습니다. const arr = []; const firstIte.. JavaScript/배열 2022. 3. 24.

• 

  [JavaScript]길이만큼 문자열 자르기 자바스크립트(JavaScript)에서 일정한 길이만큼 문자열을 잘라야 하는 경우가 존재합니다. 예를 들어서 "ABCDEFGHIJ"라는 문자열을 길이 3으로 분리하면 ["ABC", "DEF", "GHI", "J"]라는 문자열 배열을 반환해야 합니다. 각 문자열은 정확한 길이로 분리되어야 합니다. 만약 다음과 같이 문자열의 길이가 특정 길이보다 작은 경우에는 배열의 요소는 한 개입니다. "AB"라는 문자열을 길이 5로 분리하면 ["AB"]라는 문자열 배열을 반환해야 합니다. 이번 포스팅은 자바스크립트(JavaScript)에서 문자열을 일정한 길이만큼 자르는 방법을 소개합니다. match 함수와 정규식을 활용한 방법 function chunkSubstr(str, size) { return str.match(n.. JavaScript/JavaScript 문법 2022. 3. 24.

• 

  개발자와 어울리는 hELLO 스킨을 적용했습니다. 티스토리에서 기본으로 제공해주는 Square 스킨에서 hELLO 스킨으로 변경하였습니다. https://pronist.dev/51 내 블로그에 티스토리 스킨을 적용해보자 티스토리 기본 제공 스킨 티스토리에서 기본으로 제공하는 스킨을 적용하는 방법은 간단하다. 꾸미기 - 스킨 변경에서 원하는 스킨에 마우스 커서를 올리면 적용 버튼이 나타날 것이니 적용시 pronist.dev 스킨을 교체한 이유 최근 방문자 수가 꾸준히 유입되고 있는데 개발자 치고는 스킨이 너무 밋밋하고 Square 스킨의 단점을 더 이상 보고만 있을 수 없어서 hELLO 스킨으로 교체하게 되었습니다. 스킨 교체 사유 1. Square 스킨은 UI가 너무 밋밋합니다. 2. 사이드바에 애드센스, 애드핏이 잘리는 문제가 발생합니다. 광고가 잘리.. 티스토리/블로그 결산 2022. 3. 23.

• 

  [TypeScript]합성(Composition) 합성(Composition)이란? 합성(Composition)은 상속과 달리 기본 또는 부모 클래스에서 상속하지 않고 다른 클래스의 인스턴스가 포함되어 있습니다. 예를 들어서 데스크톱을 만들기 위해 필요한 부품들을 구성 요소라고 생각할 수 있습니다. 다음은 상속과 구성의 차이점입니다. 상속 is-a 관계 "데스크톱은 전자 제품이다." 여기서 노트북은 자식 또는 서브 클래스가 되고 전자 제품은 기본 또는 부모 클래스가 됩니다. 기본 또는 부모 클래스 변경 시 하위 클래스에서 원치 않은 동작을 할 수 있습니다. 그렇기 때문에 상속은 결합도가 높다고 말합니다. 합성 has-a 관계 "데스크톱에는 CPU가 존재한다." 데스크톱이라는 클래스에 CPU라는 클래스의 인스턴스가 포함됩니다. 합성은 상속에 비해 높은 유.. TypeScript 2022. 3. 21.

• 

  [TypeScript]클래스 상속(Class Inheritance) 클래스 상속(Class Inheritance)이란? 상속이란 현실 세계에서 부모가 자식에게 재산을 물려주듯이 프로그래밍에서는 부모 클래스가 자식 클래스에게 필드 또는 메서드를 물려주는 개념입니다. 메서드와 필드를 자식에게 물려주는 클래스를 기본, 상위 또는 슈퍼 클래스라고 말하며, 부모 클래스의 필드 및 메서드를 상속받는 클래스를 서브 또는 자식 클래스라고 합니다. 예를 들어 몬스터(Monster), 인간형(Human), 동물형(Animal)이라는 3가지 클래스가 존재합니다. class Monster { } class Human { } class Animal { } 위 세 가지 클래스는 캐릭터를 공격하므로 Attack()이라는 함수를 가집니다. class Monster { Attack() { consol.. TypeScript 2022. 3. 20.

• 

  [JavaScript]언더바 변수 언더바 변수 JavaScript 또는 다른 프로그래밍 언어를 공부하다 보면 변수명이 언더바( _ )로 선언된 경우를 볼 수 있습니다. JavaScript에서 변수의 이름은 식별자라는 규칙을 따르는데, 식별자는 문자, 언더바( _ ) 또는 달러 기호( & )로 시작해야 하며, 이후 문자는 숫자도 가능합니다. 즉, 변수명을 다음 예제처럼 언더바( _ )로 선언해도 문제가 없다는 것입니다. let _ = 10; console.log(_); // 10 언더바( _ )는 주로 함수의 매개변수를 선언할때 사용됩니다. // 일반 함수 function normalFunc(_, id) { // ... } 함수의 매개변수로 언더바( _ )를 사용하는 것은 JavaScript 개발자들의 관습이라고 할 수 있는데, norma.. JavaScript/Tip 2022. 3. 20.

• 

  [TypeScript]함수 타입(Function Type) TypeScript에서 함수 정의 TypeScript의 함수는 JavaScript처럼 함수를 생성할 수 있지만, 매개변수의 타입과 반환 타입을 설정해야 합니다. 다음은 number 타입의 매개변수와 string 값을 반환하는 getParam() 함수입니다. // 일반 함수 function getParam(val: number): string { return "매개변수의 값: " + val; } // 화살표 함수 let getParam = (val: number): string => { return "매개변수의 값: " + val; } (val: number)는 getParam() 함수의 매개변수를 나타냅니다. 매개변수의 이름을 val로 설정하였고 타입은 number로 정의합니다. 소괄호 뒤의 : stri.. TypeScript 2022. 3. 20.

• 

  [TypeScript]튜플(Tuple) 튜플(Tuple)이란? 튜플은 배열의 서브타입입니다. 인덱스의 타입이 알려져 있지만, 동일할 필요는 없으며 요소의 수가 고정된 배열을 표현하는 경우 사용됩니다. 다음은 인덱스의 타입이 stirng, string, number, boolean이며, 4개의 요소를 가지는 튜플입니다. let tupleArray: [string, string, number, boolean] = ['A', 'HI', 123, true]; 첫 번째 인덱스 타입이 string이므로 string이 아닌 다른 값을 할당하는 경우 다음과 같이 오류가 발생합니다. 이러한 이유로 튜플은 요소의 수가 고정되었고 특정 순서 또는 특정 패턴으로 이루어진 데이터를 표현하는 경우 사용됩니다. 예를 들어, RGB 색상을 표현하기 위해 다음 예제처럼 튜.. TypeScript 2022. 3. 19.

• 

  [TypeScript]교차 타입(Intersection Type) Intersection Type Intersection Type은 Union Type과 비슷하지만 다른 방식으로 동작합니다. Intersection Type을 설명하기 전에 Union Type과 어떤 차이가 있는지 알아보겠습니다. 먼저 Union Type에 대해 설명합니다. 다음 코드처럼 type A와 type B가 존재합니다. type A = { A: number; B: string; } type B = { B: number; C: string; } 위 코드를 그림으로 나타내면 다음과 같습니다. type A와 type B는 동일한 속성 B를 가집니다. type A는 속성 B를 string 타입으로 정의하였고 type B는 속성 B를 number 타입으로 정의했습니다. 이제, type A와 type B를.. TypeScript 2022. 3. 19.