DH의 개발 공부로그

Math Math는 수학에서 사용하는 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 즉, Math는 함수 객체가 아닙니다. 따라서 Math 객체는 정적(static) 프로퍼티와 메소드만을 제공합니다. 다양한 프로퍼티와 메서드가 있지만 이번에는 최근에 코딩테스트 문제를 풀면서 자주 사용하고 다시 찾아봤던 메서드들을 정리해보겠습니다. 📌 .floor() .floor()는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환하는 메서드인데, 더욱 쉽게 이해하자면 인수의 소수점 이하를 내림한 정수를 반환하는 것입니다. 양수일 때는 소수점 이하를 떼어 버린 다음 정수를 반환하며, 음수일 때는 소수점 이하를 떼어 버린 다음 -1을 한 정수를 반환하는 것 입니다. 구문 Math.floor(x) //..

객체의 길이(length) 자바스크립트에서 배열(Array) 또는 문자(String)를 사용하는 경우에는 length 속성을 이용하여 쉽게 길이를 구할 수 있습니다. 하지만 객체에서는 length를 사용하면 undefind를 반환을 하게 됩니다. 객체의 길이 구하는 법 그렇다면 객체의 길이를 구하고 싶을 때 할 수 있는 방법을 무엇일까요? 기본적으로 Object의 메서드를 이용하는 방법과 반복문을 이용하는 방법이 있습니다. 그 중에서 오늘은 Object의 메서드를 이용한 객체의 길이를 구하는 방법을 알아보겠습니다. 방법1. Object.keys() Object.keys()는 주어진 객체의 key들로 이루어진 배열을 반환하는 메서드 입니다. 따라서 Object.keys()를 이용하여 key들이 담겨진 배열..

인터페이스(interface) 인터페이스는 객체 형태를 설명해주는 설계도라고 할 수 있습니다. type과 비슷하기도 하지만 다른점을 가지고 있고, 프로퍼티와 메소드를 가질 수 있다는 점은 클래스와 유사하기도 합니다. 인터페이스는 보통 다음과 같은 것들의 타입에 대한 약속을 정의해 줍니다. 1. 객체의 스펙(속성과 속성의 타입) 2. 함수의 파라미터 3. 함수의 스펙(파라미터, 반환 타입 등) 4. 배열과 객체를 접근하는 방식 5. 클래스 인터페이스와 타입의 차이점 인터페이스와 타입은 위에서 말했다 싶이 비슷합니다. 둘다 타입을 정의를 해줄 때 사용을 하고, 비슷한 역활을 하고 있기 때문 입니다. 그렇다면 차이점이 무엇인지 알아보겠습니다. Interface는 객체의 형태만 가능하다 type UserName..

Sass 란? Sass는 CSS 전처리기(Preprocessor) 라고도 합니다. CSS가 만들어지기 전에 이런저런 여러 작업들을 먼저 처리해 주기 때문입니다. 따라서 브라우저가 Sass를 직접 로딩하는 것이 아니라 Sass를 기반으로 개발을 한 후, CSS로 컴파일 하는 과정을 거쳐야합니다. Sass나 Scss 쓰는 이유 CSS의 양이 많아지면 복잡하고 가독성이 좋지않습니다. 따라서 유지관리 또한 어려워지게 됩니다. 이러한 CSS내의 반복되는 내용도 줄이고, 효율적으로 만들어 줄 수 있는 방법이 Sass이기 때문에 사용을 하며, Sass안에 있는 변수, 네이스팅, 믹스인, 가져오기, 상속, 내장기능 등 css에는 없는 편의 기능들을 이용하여 유지보수와 편의성을 큰 폭으로 향상 시킬 수 있습니다. Sas..

클래스 타입스크립트는 자바스크립트 기반의 언어이기 때문에 자바스크립트에서와 마찬가지로 class를 선언하고 사용이 가능합니다. class PlayerInfo { } 접근제한자 타입 스크립트에서는 자바와 같이 클래스 기반 객체 지향 언어가 지원하는 접근 제한자 public, pivate, protected를 지원하며 의미 또한 동일합니다. 접근 구분 private protected publick 선언한 클래스 내 ⭕ ⭕ ⭕ 상속받은 클래스 내 ❌ ⭕ ⭕ 인스턴스 ❌ ❌ ⭕ class PlayerInfo { constructor( private firstName: string, private lastName: string, public nickName: string ) { } // 메서드도 보호 가능 pri..

Call Signatures Call Signatures은 함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것을 말합니다. 그리고 이것으로 React에서 함수로 props를 보낼 때, 어떻게 작동할지 미리 설계도 가능합니다. 이러한 방식은 프로그램을 짜기 전에 타입을 먼저 생각하고 코드를 구현하는 방식에서 많이 쓰이며, 따라서 개발자가 미리 타입을 인지하고 코드를 작성 할 수 있다는 장점이 있습니다. type Add = (a:number, b:number) => number // Call Signatures const add : Add = (a, b) => a + b오버로딩 (Overloading) function overloading, method overloading이라고도 불리며..

다형성(Polymorphism)이란? poly는 '많다, 많음' 라는 뜻이고 morp-는 '구조, 형태' 라는 뜻을 가지고 있습니다. 따라서 Polymorphism, 다형성이란 여러가지 다양한 구조, 모양, 형태 라는 뜻을 가지고 있습니다. 타입스크립트에서 이런한 다형성을 가능하게 해주는 것은 바로 제네릭(Generics) 타입입니다. 제네릭(Generic)이란? 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다. 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여, 단일 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법입니다. 그리하여 인터페이스, 함수 등의 재사용성을 높일 수 있다는 장점이 있습니다. 제네릭을 선언할 때 관용적으로 사용되는 식..

타입스크립트 Tuple Tuple은 array 생성시 사용합니다. 정해진 갯수의 요소를 가지는 배열을 생성하고 원하는 타입의 순서를 지정하여, 해당 위치에 해당 타입이 필요 합니다. const array2 : [string, number, boolean] = ['shape', 1, true]; Undefined, Null let un : undefined = undefined; // undefined는 선택적 타입 let nu : null = null; Any 타입스크립트에서 Any는 어떠한 타입이든 허용을 하는 타입으로 특정 값으로 인하여 타입 검사 오류가 발생하는 것을 원하지 않을 때 사용할 수 있습니다. 즉 , 이말은 타입의 안정성이 지켜지지 않는 것이고 타입스크립트에서 빠져나온다고 볼 수도 있습니..