클라우딩 어플리케이션 엔지니어링 TIL Day 11 (2)

# 객체

# 문자열

문자열 내에 이스케이프 문자 사용 가능

줄바꿈 문장 표현 가능 -> 이스케이프 문자(\n), 템플릿 리터럴(백틱 `)

데이터 보관시 문자열 형태로 저장 유용 -> 텍스트 형태, 객체 형태(JSON.stringify)

# 문자열 조작

▶문자열 요소 접근

charAt

유사 배열이라 배열처럼 접근

const aaa = "가나다라마바사";

console.log(aaa.charAt(3)); //라
console.log(aaa[3]) //라

▶ 문자열 비교

알파벳순을 비교하여 순서가 뒤에 올수록 크다고 판단

//알파벳 순서로 크기 비교
const abc = "abc";
const def = "def";

console.log(abc < def); //true

변수 또는 객체의 속성이 문자열을 가지고 있으면 String 인스턴스 속성과 메서드 사용 가능하다

# String 객체

문자열을 다룰 때 사용하는 원시 래퍼 빌트인 객체

함수로 바로 사용

▶ 인스턴스 메서드

문자열 접근 및 찾기

const aaa = "가나다라마바사";

//접근 및 비교
const exam = [aaa.at(0), // 가
			aaa.charAt(0), // 가
            aaa.indexOf("라"), // 3
            aaa.search("카")]; // -1

문자열 포함 여부

const aaa = "가나다라마바사";

//문자열 포함 여부
const exam = [aaa.includes("바"), //true
            aaa.startsWith("나"), //false
            aaa.match("가")]; //["가"]

문자열 비교

const aaa = "가나다라마바사";
const bbb = "안녕하세요";

//문자열 비교
const exam = [aaa.localeCompare(bbb)];

문자열 변경

//문자열 변경
const changeString = [
  "abcdef".toLocaleUpperCase(), //ABCDEF
  "ABCDEF".toLocaleLowerCase(), //abcdef
  "hello".replace("h", "H"), //Hello
  "hello".replace("l", "L"), //heLlo
  "hello".replaceAll("l", "L"), //heLLo
];

문자열 추가 및 합치기

//문자열 추가 및 합치기
const addString = [
  //길이 length 값 , 빈 length에 채울 값
  "abcdef".padStart(10, "1"), // '1111abcdef'
  "ABCDEF".padEnd(10, "k"), //'ABCDEFkkkk'
  //문자열 반복
  "hello".repeat(2), // 'hellohello'
  //문자열 합치기
  "hello".concat(" nice to meet you!"), // 'hellonice to meet you!'
  "hello" + " nice to meet you!", // 'hellonice to meet you!'
];

문자열 분리하기

//문자열 분리하기
const partString = [
  //5번째 인덱스부터 마지막까지 자르기
  "abcdef".slice(4),
  //2번째 인덱스부터 4번째 인덱스까지 자르기
  "abcdef".slice(1, 4),
  "abcdef".substring(4),
  "abcdef".substring(1, 4),
  //배열로 변경
  "abcdef".split(),
  //공백 제거
  " abc ".trim(),
];

 

# 정규표현식

문자열에서 특정 문자 조합을 찾기 위한 패턴

/pattern/flags

정규표현식 생성 방법

1. 리터럴 표기법

평가할 때 정규 표현식을 컴파일

정규식이 변하지 않으면 리터럴 표기법을 사용하자

/pattern/flag

2. RegExp 객체

런타임 때 컴파일

패턴이 변할 가능성이 있거나, 알 수 없는 데이터에서 가져오는 정규식의 경우 생성자 함수 사용하자

new RegExp(/pattern/, flag)

▶정적 속성 : lastIndex

▶생성자 함수 : RegExp.prototype

▶인스턴스 속성 : flags, dotAll, global, ignoreCase, multiline, source, sticky, unicode

▶ 인스턴스 method : compile(), exec(), test(), toString()

//RegExp 객체
const str = "abcdef";
const regex = /a/g;

const exam = [
  //일치 확인
  str.match(regex),
  //찾기
  str.search(regex),
  //찾아서 교체
  str.replace(regex),
  //찾아서 분리
  str.split(regex),
];

---

# Collection

비용을 절감하기 위하여 상황마다 효율적인 데이터 형태로 처리하는 것이 필요하다

컬렉션은 데이터 항목의 그룹을 의미한다 -> list, set, tree, graph

자바스크립트 Collection의 2가지 타입

# Indexed Collections

인덱스 값을 기준으로 정렬되어 있는 데이터 집합

Array

이름과 인덱스로 참조외더 정렬된 값들의 잡합이다

자바스크립트는 명시적인 배열 데이터 타입을 가지고 있지 않다

Array 객체 생성방법

배열 리터럴 : 대괄호로 묶기 []

Array 객체 생성자 : new Array(arrayLength); 길이만 지정된 배열, new Array(ele0, ele1, ...); 요소만 지정된 배열

//Array 객체
//길이만 지정해서 배열 생성
new Array(23);
//요소만 지정해서 배열 생성
new Array("hi", "hello");

Array 객체 특징

배열 요소의 참조

• index로 참조, 0부터 시작
• index값을 속성 이름으로 사용하여 표준 객체의 속성처럼 저장
• index로 문자열 사용 불가능, 무조건 정수로만 참조하여 저장

배열에 값 저장

• index로 참조하지 않으면 객체의 속성으로 저장됨

배열의 반복 처리 시 -> for문. forEach문 활용

# Keyed Collections

Key 값을 기준으로 정렬되어 있는 데이터 집합

Map, Set

키와 값을 매핑하여 저장한다

저장된 순서대로 각 요소들을 반복적으로 접근할 수 있다

# Map 객체

간단한 키와 값을 서로 매핑시켜 저장하고 저장된 순서대로 요소를 반복적으로 접근

[key, value]

Map 인스턴스 속성 : size

Map 인스턴스 method : get, has, clear, delete, set, keys, values, entries, forEach

# Map과 Object는 어떤 차이가 있을까?

	Object	Map
속성의 데이터 타입	String, Symbol만 가능	모든 값을 키로 활용 가능
default 속성과의 충돌	Object prototype의 기본속성과 동일한 키를 생성시 충돌	기본적으로 갖고 있는 속성이 없어 기본 속성들과 충돌 없음
객체의 크기	수동으로 추적	size 인스턴스 속성으로 얻을 수 있음
순서 보장	순서 보장 X	추가된 순서대로 반복
iterable 여부	iterable X	iterable
퍼포먼스	키, 값 쌍의 빈번한 추가 제거 시 퍼포먼스 좋지 않음	키, 값 쌍의 빈번한 추가 제거 시 퍼포먼스 좋음
직렬화 구문분석 제공 여부	직렬화와 구문분석 제공(JSON.stringify, JSON.parse)	제공 X

# WeakMap

키에 대한 강력한 참조를 생성하지 않는 키/값 쌍의 모음

키는 object만을 허용

객체 정보를 노출하지 않는다 -> 객체의 사적 정보 저장, 상세 구현내용 숨기기 위해서 사용된다

WeakMap 인스턴스 속성 : size

WeakMap 인스턴스 method : get, has, delete, set

---

# Set

모든 값들의 집합이다

입력된 순서에 따라 저장된 요소를 반복처리할 수 있다

특정 값은 Set 내에서 하나만 존재

배열은 set으로, set은 배열로 변환 가능하다

for ... of 를 통해 순회 가능하다

Set 인스턴스 속성 : size

Set 인스턴스 method : has, clear, delete, add

# WeakSet

객체 컬렉션으로 object 값만 허용한다

약한 참조를 가진다

WeakSet 인스턴스 method : has, delete, add

순환 관련 method 없음

---

# JSON 객체

인터넷에서 자료를 주고 받을 때 자료를 표현하는 방법

키-값 쌍, 배열 자료형, 기타 모든 직렬화 가능한 값

직렬화란 무엇일까?

다양한 환경 간 데이터를 주고 받기 위해 직렬화 작업이 필요
직렬화 : Object -> 문자열 변환
역직렬화 : 문자열 -> Object로 변환

파일 확장자 : .json

객체의 형태와 유사하다

JSON 정적 method

JSON.stringify : 직렬화

JSON.parse : JSON 형태로 역직렬화 -> 문자열이 객체 형태가 아니면 오류 발생, try... catch문으로 에러를 핸들링하자!

 

# intl 객체

각 언어에 맞는 문자, 숫자, 시간, 날짜 비교를 제공하는 국제화 API를 위한 namespace

동일한 데이터를 언어나 지역별로 다른 형식으로 보여주기 위

▶ DateTimeFormat 생성자 함수

언어에 맞는 날짜, 시간 서식을 적용하기 위한 객체

인스턴스 method :  format, formatRange, formatToParts, formatRangeToParts ...

//intl 객체 DateTimeFormat 생성자 함수
//인스턴스 생성 언어 설정
const dateTimeFormatKo = new Intl.DateTimeFormat("ko");

const example = [
  //한국 기준 형식에 맞춘 한국 날짜
  dateTimeFormatKo.format(), //'2024. 1. 14.'
  //각 부분별로 type과 value로 반환
  dateTimeFormatKo.formatToParts()]; 
  // [
        { type: 'year', value: '2024' },
        { type: 'literal', value: '. ' },
        { type: 'month', value: '1' },
        { type: 'literal', value: '. ' },
        { type: 'day', value: '14' },
        { type: 'literal', value: '.' }
  ]

formatRange 함수는 지정된 날짜부터 현재까지의 날짜 범위를 표현한다

▶NumberFormat 생성자 함수

언어에 맞는 숫자 서식을 적용하기 위한 객체

인스턴스 method : format, formatRange, formatToParts, formatRangeToParts ...

// NumberFormat 생성자 함수
const numberFormat = new Intl.NumberFormat("ko", {
  //출력할 number의 서식 지정
  style: "currency",
  currency: "KRW",
});

//KRW 즉 한화로 format되어서 출력
numberFormat.format(100000); // ₩100,000

---

# 프로토타입

# 프로토타입 객체

자바스크립트는 프로토타입 기반 객체지향 언어이다

프로토타입 객체란?

객체의 인스턴스를 만드는 부모 객체의 개념이다

자바스크립트의 모든 객체는 부모 객체인 프로토타입 객체와 연결된다

부모객체의 속성과 메서드를 상속받아 사용 가능하다

▶ 접근하기

__proto__ 라는 접근자 속성으로 접근 가능 -> __proto__ 로 Object.prototype 객체에 접근한다

▶ 생성하기

함수 타입에만 prototype 이라는 필드가 존재한다

함수를 활용하여 부모 객체의 인스턴스를 생성할 수 있다

- 생성자 함수

• 인스턴스 객체 생성시 사용
• 대문자 함수명 컨벤션 사용
• new 키워드와 함께 호출

인스턴스의 부모 객체 == 생성자 함수.prototype

constructor : 자기 자신을 생성한 객체 참조

# 프로토타입 chain과 상속

프로토타입 chain이란?

객체의 속성 참조시, 속성이 없는 경우 프로토타입 체인이 동작한다 -> [[Prototype]] 을 통해서 부모 객체를 탐색

모든 객체의 부모는 Object.prototype이다 -> 프로토타입 체인의 종점

만약 마지막 부모 객체인 Object.prototype에서까지 속성을 찾지 못하면 undefined 가 반환된다

=> 부모 객체를 타고 올라가면서 속성을 탐색하는 것을 프로토타입 chain 이라고 한다!

• 객체와 프로토타입에 동일한 이름의 속성이나 메서드가 있는 경우 -> 객체의 속성이 먼저 참조된다
• property shadowing : 프로토타입 속성이 가려지는 현상
• method overriding : 프로토타입 메서드가 가려지는 현상

---

# Class 문법

class 메서드명 { ..... }

class 내에는 메서드만 작성 가능하다

인스턴스 생성 -> new 클래스명();

//class의 형태
class Person {
  //인스턴스 생성 및 클래스 필드 초기화 (생략 가능)
  constructor(name, age, gender) {
    //멤버 변수
    //인스턴스 속성 초기화
    this.name = name;
    this.age = age;
    this.gender = gender;
  }

  //static 으로 메서드 작성시 -> 인스턴스를 생성하지 않아도 호출 가능

  //get : 속성 조회 및 조작 -> 무조건 값을 반환
  get uppercaseName() {
    return this.name.toLocaleUpperCase();
  }

  //set : 속성 할당하며 조작
  set plusAge(age) {
    this.age += age;
  }

  get whatIsGender() {
    if (this.gender === "female") {
      return "여자입니다!";
    } else {
      return "남자입니다!";
    }
  }
}

const jinny = new Person("jinny", 100, "female");
console.log(jinny.whatIsGender); // 여자입니다!

# 상속 extends

코드의 재사용 관점에서 상속이 필요하다

extends와 super 키워드를 통해 class에서 상속을 구현한다

class 부모클래스 { ..... }

class 자식 extends 부모 { ....}

class Person {
      //인스턴스 생성 및 클래스 필드 초기화 (생략 가능)
      constructor(name, age, gender) {
        //멤버 변수
        //인스턴스 속성 초기화
        this.name = name;
        this.age = age;
        this.gender = gender;
      }
  }

//Person class를 상속 받는 Children class
//상속 extends
class Children extends Person {
  constructor(name, age, gender) {
    //super : 부모 클래스의 생성자를 호출
    // 자식 클래스의 생성자가 this에 접근하고 수정 가능함
    super(name);
  }
  play() {
    return this.name + " 는 지금 놀고 있답니다!";
  }
}

const child = new Children("jina");
child.play(); // jina 는 지금 놀고 있답니다!

 

# this 와 화살표 함수

# this란?

현재 실행 중인 코드에서 어떤 객체에 바인딩 되어 있는지를 나타낸다

this 의 값은 실행 컨텍스트에 따라 동적으로 결정된다

1. 전역 컨텍스트

this 는 전역 객체를 가리킨다

객체의 메서드 내에 내부 함수가 있을 경우 함수 호출방식으로 취급되어 전역 객체를 바라본다

2. 함수 호출

this 는 호출 시점에 따라 동적으로 결정

function exampleFunction() {
  console.log(this);
}

exampleFunction(); // 전역 객체 (브라우저: window, Node.js: global)

const obj = {
  method: exampleFunction,
};

obj.method(); // obj

3. 메소드 호출

this 는 그 메소드를 호출한 객체를 가리킨다

const myObject = {
  myMethod: function() {
    console.log(this);
  },
};

myObject.myMethod(); // myObject

4. 생성자 함수

this 는 생성된 인스턴스를 가리킨다

function MyClass() {
  this.property = "example";
}

const myInstance = new MyClass();
console.log(myInstance.property); // example

5. 이벤트 핸들러

this 는 이벤트를 발생시킨 요소를 가리킨다

document.getElementById("myButton").addEventListener("click", function() {
  console.log(this); // 클릭된 버튼 요소
});

6. 화살표 함수

ES6 부터 화살표 함수 사용

익명함수 형태

(인자들) => { .... }

this 는 함수가 생성된 시점에서의 상위 스코프의 this를 따른다 -> 정적 바인딩

const arrowFunction = () => {
  console.log(this);
};

arrowFunction(); // 전역 객체 (화살표 함수는 정적으로 바인딩되므로 상위 스코프의 this를 따름)

---

# 새로 알게 된 점

이번 데이터 처리 객체와 빌트인 객체 그리고 매커니즘 파트가 끝이 났다

양도 많고 처음 배우는 개념이 많아서 이해하는 데 시간이 오래 걸렸다

그렇다고 완벽히 이해된 것도 아니라 반복해서 복습이 필수인 것 같다

이번 강의에서 가장 기억에 남는 개념은 Class 문법이었다

Class 를 만들어보고 자식 Class에 상속하는 코드를 구성하면서 Class 문법에 대해 이해할 수 있었다

또한 Class 간에 속성을 상속하고 메서드를 호출하는 과정이 신기했다

프로토타입 chain의 개념 역시 이번 강의를 통해서 확실하게 배우게 되었다

헷갈리는 개념들은 이해가 될 때까지 다시 공부를 해야겠다