Frontend Core
-
[JavaScript] 자바스크립트 원시 값과 참조 값!Frontend Core/JavaScript 2023. 2. 16. 22:18
원시 값? 참조 값? 자바스크립트의 변수에는 크게 두가지 타입을 저장을 할 수 있으며, 이 두가지 타입에는 원시타입의 값과 참조타입의 값으로 나누어져 있습니다. 원시 값(Primitive values) 원시값, 원시 데이터 타입은 객체가 아닌 데이터 타입을 뜻합니다. 그렇다면 객체가 아닌 데이터가 무엇을 의미하냐면, 변수에 저장된 실제값에 직접적으로 접근할 수 있는 단순한 데이터라는 뜻입니다. 그리고 또한 하나의 값에 대한 정의가 절대 변하지 않는 불변성을 갖고 있습니다. 원시 값의 종류 String (문자) Number (숫자) Boolean (참,거짓) Null Undefined Biglnt Symbol // 예시 let a = 100; let b = 문자; 원시값의 불변성? 원시값의 특징이라고 할 ..
-
[JavaScript] 자바스크립트 if문 중첩 줄이기!Frontend Core/JavaScript 2023. 2. 15. 22:40
if문 중첩을 줄이는 이유 if문을 이용해 조건을 만들다가 조건에 또 다른 조건이 필요하다고 판단하여, if문 안에 if를 넣고 또 else문 안에 if~else 안의 if 등등... 좋지 않은 코드를 짜게 되고, 그리하여 가독성이 안좋아지며 실행 순서를 이해하는것도 힘들어지게 되는 경우가 있습니다. 이런 경우에는 if문의 중첩들을 제거해서 가독성도 올리고 실행 순서를 한눈에 이해하기 쉽게 만들어 주어야 합니다. if문 중첩 제거 방법 그렇다면 if문의 중첩을 줄일 수 있는 방법은 무엇있까요? 바로 다음과 같습니다. 1. 공통된 절차를 각 분기점 내부에 넣는다 2. 분기점에서 짧은 절차부터 실행하게끔 if문을 작성한다. 3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(반복문 내부의..
-
[JavaScript] 자바스크립트 Math - 자주 사용한 메서드 정리하기!Frontend Core/JavaScript 2023. 2. 12. 22:02
Math Math는 수학에서 사용하는 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 즉, Math는 함수 객체가 아닙니다. 따라서 Math 객체는 정적(static) 프로퍼티와 메소드만을 제공합니다. 다양한 프로퍼티와 메서드가 있지만 이번에는 최근에 코딩테스트 문제를 풀면서 자주 사용하고 다시 찾아봤던 메서드들을 정리해보겠습니다. 📌 .floor() .floor()는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환하는 메서드인데, 더욱 쉽게 이해하자면 인수의 소수점 이하를 내림한 정수를 반환하는 것입니다. 양수일 때는 소수점 이하를 떼어 버린 다음 정수를 반환하며, 음수일 때는 소수점 이하를 떼어 버린 다음 -1을 한 정수를 반환하는 것 입니다. 구문 Math.floor(x) //..
-
[JavaScript] 자바스크립트 객체의 길이(length) 구하기!Frontend Core/JavaScript 2023. 2. 11. 19:30
객체의 길이(length) 자바스크립트에서 배열(Array) 또는 문자(String)를 사용하는 경우에는 length 속성을 이용하여 쉽게 길이를 구할 수 있습니다. 하지만 객체에서는 length를 사용하면 undefind를 반환을 하게 됩니다. 객체의 길이 구하는 법 그렇다면 객체의 길이를 구하고 싶을 때 할 수 있는 방법을 무엇일까요? 기본적으로 Object의 메서드를 이용하는 방법과 반복문을 이용하는 방법이 있습니다. 그 중에서 오늘은 Object의 메서드를 이용한 객체의 길이를 구하는 방법을 알아보겠습니다. 방법1. Object.keys() Object.keys()는 주어진 객체의 key들로 이루어진 배열을 반환하는 메서드 입니다. 따라서 Object.keys()를 이용하여 key들이 담겨진 배열..
-
[TypeScript] 타입스크립트 인터페이스 - InterfaceFrontend Core/TypeScript 2023. 2. 10. 22:07
인터페이스(interface) 인터페이스는 객체 형태를 설명해주는 설계도라고 할 수 있습니다. type과 비슷하기도 하지만 다른점을 가지고 있고, 프로퍼티와 메소드를 가질 수 있다는 점은 클래스와 유사하기도 합니다. 인터페이스는 보통 다음과 같은 것들의 타입에 대한 약속을 정의해 줍니다. 1. 객체의 스펙(속성과 속성의 타입) 2. 함수의 파라미터 3. 함수의 스펙(파라미터, 반환 타입 등) 4. 배열과 객체를 접근하는 방식 5. 클래스 인터페이스와 타입의 차이점 인터페이스와 타입은 위에서 말했다 싶이 비슷합니다. 둘다 타입을 정의를 해줄 때 사용을 하고, 비슷한 역활을 하고 있기 때문 입니다. 그렇다면 차이점이 무엇인지 알아보겠습니다. Interface는 객체의 형태만 가능하다 type UserName..
-
[TypeScript] 타입스크립트 클래스 - ClassesFrontend Core/TypeScript 2023. 2. 9. 22:00
클래스 타입스크립트는 자바스크립트 기반의 언어이기 때문에 자바스크립트에서와 마찬가지로 class를 선언하고 사용이 가능합니다. class PlayerInfo { } 접근제한자 타입 스크립트에서는 자바와 같이 클래스 기반 객체 지향 언어가 지원하는 접근 제한자 public, pivate, protected를 지원하며 의미 또한 동일합니다. 접근 구분 private protected publick 선언한 클래스 내 ⭕ ⭕ ⭕ 상속받은 클래스 내 ❌ ⭕ ⭕ 인스턴스 ❌ ❌ ⭕ class PlayerInfo { constructor( private firstName: string, private lastName: string, public nickName: string ) { } // 메서드도 보호 가능 pri..
-
[TypeScript] 타입스크립트 Call Signatures와 오버로딩 알아보기!Frontend Core/TypeScript 2023. 2. 8. 22:00
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이라고도 불리며..
-
[TypeScript] 타입스크립트 다형성(Polymorphism) - 제네릭(Generic)Frontend Core/TypeScript 2023. 2. 7. 23:38
다형성(Polymorphism)이란? poly는 '많다, 많음' 라는 뜻이고 morp-는 '구조, 형태' 라는 뜻을 가지고 있습니다. 따라서 Polymorphism, 다형성이란 여러가지 다양한 구조, 모양, 형태 라는 뜻을 가지고 있습니다. 타입스크립트에서 이런한 다형성을 가능하게 해주는 것은 바로 제네릭(Generics) 타입입니다. 제네릭(Generic)이란? 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다. 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여, 단일 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법입니다. 그리하여 인터페이스, 함수 등의 재사용성을 높일 수 있다는 장점이 있습니다. 제네릭을 선언할 때 관용적으로 사용되는 식..