[프로그래머스] 프론트엔드 기초: React + TypeScript(5)

Lina Hongbi Ko·2024년 10월 25일
0

Programmers_BootCamp

목록 보기
42/76
post-thumbnail

2024년 10월 25일

✏️ 함수 포인터

  • 함수 포인터의 사용 (함수를 포인터처럼 사용할 수 있는 기능)

  • 자바스크립트에서는 함수를 변수에 대입하는 경우가 많은데, 그 원리가 함수 포인터임

    • 함수명 앞에 *만 붙여주면 함수 포인터가 선언된다.
    • 함수의 주소값을 저장함
      • 자료형(*함수 포인터 이름)(인자 목록) ex) int (*func)(int a);
    • 함수 포인터도 포인터이므로 주소값을 저장한다
  • 함수 포인터의 사용 이유

    • 직접 함수 호출하면 되지, 왜 복잡하게 함수 포인터를 사용할까?
    • 메모리의 크기 및 위치가 결정되는 시점은 컴파일 타임 또는 런타임 시점이다.
    • 컴파일 타임 시점에 결정은 정적 바인딩, 런타임 시점의 결정은 동적 바인딩 되었다고 한다.
    • visual studio code에서 사용되는 extension들은 플러그인 방식으로 동작한다. → 함수 포인터 구현의 원리 적용 (VS는 외부의 익스텐션의 함수 포인터를 받을 준비가 되어 있음_코드의 규격을 맞춰놓고, 함수 포인터를 전달해서 동적으로 기능을 추가함)
    • 새로운 기능을 추가하게 되면 매번 다시 컴파일 해야하는 불편함이 있으나 플로그인 방식을 사용하면 그럴 필요가 없다.
    • 함수 포인터의 사용은 프로그램의 유연한 확장성을 제공한다.

✏️ 구조체

  • 하나 이상의 서로 다른 종류의 변수들을 묶어서 새로운 데이터 타입을 저장하는 것

  • 구조체도 데이터 타입이고, 내가 만든 타입임

  • 클래스의 원조가 구조체임 → 따라서 클래스도 데이터 타입임

  • 구조체를 사용하는 이유

    • 연관된 변수들을 하나로 묶어서 관리함으로써 데이터 관리에 유용하다.
    • 데이터 양(변수의 개수)이 많아지면 구조체가 유리하다.
  • 예를 들어, 학생 정보 관리 시스템이라고 가정하면

    • 이름, 나이, 성별 등의 정보들은 모두 변수로 선언
    • 각각의 변수를 별도로 관리하면 연관성을 알 수 없음
    • 학생 수가 10명 이내로 적으면 커버가 되지만, 100, 200명으로 늘어나면 변수의 관리가 힘들어짐
    • 구조체가 대안
    • 학생 한 명을 그룹으로 지정하여 이름, 나이, 성별 등의 정보들을 그룹으로 묶는다.
  • 구조체 정의하기

    • 구조체의 기본 형태 (학생정보)

      • struct 키워드는 구조체라는 데이터타입을 의미
      • student는 내가 만든 구조체 이름
      • name, age, height은 구조체 멤버
    • 구조체 student는 사용자인 내가 정의한 새로운 데이터 타입이다.

    • 선언된 구조체 변수의 형태

  • 구조체 멤버에게 접근하기

    • 구조체 변수를 통해 구조체 멤버의 값을 참조해야 한다.
      • [구조체 변수명].[구조체 멤버] ex) st1.name, st1.age, st1.height
    • 멤버 접근시.(점)을 사용하는데, 이를 직접 접근이라 한다.

✏️ 공용체, enum

  • 공용체

    • 공용체도 사용자 정의 자료형이다.
    • 구조체와의 차이점을 메모리 공간을 공유한다는 점이다.
    • 구조체는 메모리를 각각 가지고 있는데 공용체는 메모리 하나를 같이 씀
      • 큰 메모리를 기준으로 공용으로 사용
    • 타입스크립트에서도 union 타입은 타입을 공유함
  • 열거형

    • 열거형은 enumeration의 약자로, enum이라고 함
    • 데이터들을 열거한 집합이다.
    • 컴파일러는 열거형 멤버들을 정수형 상수로 취급한다.
    • 구조체와 공용체는 연관된 데이터를 모아놓지만, 열거형은 연속적인 데이터들을 주로 모아놓는다.
    • 키워드는 enum을 사용해 정의한다

    • 열거형의 멤버들은 각 요일을 나타낸다.
    • 첫 번째 멤머 sun을 0으로 설정하면 다음 멤버 mon은 1씩 증가한다.

✏️ 동적 메모리 할당

  • 메모리 영역

    • 코드 영역 - 실행할 명령어들이 순서대로 쌓인다. CPU가 이 영역에서 명령어들을 하나씩 가져다 처리한다.

    • 스택 영역 - 스택이란 모든 원소들의 삽입, 삭제를 한쪽 방향에서만 수행하도록 하는 선형 자료구조이다. 이를 후입선출방식(LIFO)라고 한다. 나중에 들어온 녀석이 먼저 빠져나간다는 뜻이다.

      • 우리가 지금껏 사용한 지역변수 및 매개변수 등은 모두 스택 메모리를 사용
    • 힙 영역 - 큐. 힙은 컴퓨터 메모리의 일부가 할당되었다가 회수되는 일들의 반복.

      • 힙은 컴파일 시가 아닌, 실행 시 사용자로부터 할당 메모리를 입력 받음(동적 메모리)
    • 데이터 영역 - 전역변수와 static 변수가 저장되는 메모리 영역. 이 메모리는 프로그램 종료 시 실행.

  • 동적으로 메모리를 할당하는 이유

    • 일반 변수 선언 - 메모리 할당은 컴파일 타임에 이루어진다.
      • 전교생이 10명인 학교의 하생 수를 배열로 선언한다면?
      • 학생 수가 늘어나게 되면?
      • 이는 미봉책에 불과하다. 학생수가 어떻게 변할지 모른다.
    • 결국 학생 수는 유동적이므로 고정하지 말고 실행시 결정하자.

    • 문제점
      • scanf는 런타임에 실행
      • int student[num]은 컴파일타임에 실행
      • 런타임에 입력 받은 변수를 컴파일타임에 대입하는 형태는 시점 논리에 맞지 않다.
      • 해결 방법
        • 실행 중에 학생 수를 알아야 하는 경우, 동적 메모리 할당 기법을 통해 문제 해결이 가능하다.
  • 동적 메모리 할당 및 해제

    • 동적 메모리 할당
      • 동적 메모리 할당 함수의 원형

      • 전달인자 size는 바이트 단위로 비력한다.
      • 메모리 할당이 되면 메모리의 주소값을 리턴한다.
      • 메모리 부족시 NULL 포인터를 리턴한다.
      • void*의 의미: 타입이 지정되지 않는 포인터. (난 당신이 원하는 메모리 크기만큼 할당 해줄테니, 메모리는 당신이 원하는 형태로 정해서 사용하세요.)

✏️ 객체 지향 프로그래밍 방식

  • 왜 객체지향 철학을 이해해야 하는가

    • 자바스크립트가 객체를 사용하는 객체 기반 언어이다.
    • 객체를 생성하는 원리를 이해하면 객체를 더욱 잘 사용할 수 있다.
    • 타입스크립트와 리액트 기반에서 필요하다.
  • 객체 지향이란

    • 객체 : Object : ‘사물’을 나타내는 추상적인 개념
    • 지향 : Oriented : ~를 향한다는 의미
    • 이 세상의 모든 사물들을 프로그래밍 하겠다.
  • 구조적 프로그래밍과 객체 지향 프로그래밍

    • 구조적 프로그래밍 방식 - 순차적, 하향식, 폭포수 방식
      • 기능적인 기본 단위는 함수
      • 완벽하게 설계해야 예측할 수 없는 많은 변수를 줄일 수 있다 → 이건 어려움
    • 객체 지향 프로그래밍 방식
      • 기능 단위는 객체이다
      • 대표적인 예가 이벤트 기반의 모든 윈도우 프로그램이다
      • 중간 중간 변수들이 발생했을 때 쉽게 처리 가능하다

✏️ 추상화

  • 추상 : 대상에서 특징만을 뽑아낸 것

  • 우리 일상의 사물들은 관념적이고 추상적인 것들이 많다.

  • 플라톤의 이데와(Idea)는 추상화 개념과 일맥 상통한다.

    • 플라톤은 개를 본 적 있냐고 물어본 것이지 무슨 무슨 개를 본 적 있냐고 물어본 것이 아니다.
    • 나무를 본 적 있냐고 물어본 것이지 무슨 무슨 나무를 본 적 있냐고 물어본 것은 아니다.
    • 플라톤은 개라는 개, 나무라는 나무가 존재하고 있다고 말한다.
    • 개의 본질, 개의 원형은 이데아의 세계, 관념이 세계에 존재한다.
  • 객체 지향의 추상화 : 사물의 공통점을 묶는 것

✏️ 캡슐화

  • 은닉하다, 숨긴다는 의미

  • 캡슐화한다는 것은 외부에서 그 내부를 볼 수 없게 한다는 의미.

  • 마냥 숨기기만 한다면 데이터는 무용지물임

  • 외부로부터 데이터를 조작할 인터페이스가 필요

  • 하나의 캡슐단위를 클래스라고 할 수 있음

    • 클래스 = 데이터 + 메소드

✏️ 클래스의 기본

  • 클래스란

    • 사전적인 의미로 ‘학급’이라는 뜻을 가지고 있다. → 특정한 목적을 가진 모임
    • 클래스는 사용자 정의 데이터타입이다.
    • 데이터와 메소드를 사용자인 내가 새로 정의한 데이터타입이기 때문에 클래스를 추상적인 데이터타입이라고 함
    • 클래스의 본질은 데이터타입(Data Type)이라는 점이다. (중요! )
    • 구조체와 비슷
    • 멤버 변수와 멤버 함수로 구성된다.
  • 클래스의 구성

    • 사물의 특성을 정리하며 필드와 메서드로 표현하는 과정이 추상화
    • 추상화된 결과를 하나의 클래스에 포함시키고 스스로 보호하는 것을 캡슐화라고함
  • 클래스의 선언 형식

    • 클래스 선언시 class 키워드를 쓰고, 그 뒤에 클래스 이름을 붙인다
    • 클래스의 요소로는 생성자, 멤버 변수, 메소드 등으로 구성한다.
  • 접근 지정자

    • private : 클래스 내부에서만 접근 가능하고, 외부에서는 절대 접근 할 수 없음
    • public : 누구나 접근 가능
    • protectd : 상속 관계에 있을 때 상속 받은 자식 클래스에서 접근 가능하나 그 외에는 접근 불가하다.
  • 객체의 선언

    • 클래스의 본질은 데이터 타입이다.
    • 데이터 타입을 통해 변수를 선언할 수 있다. ex) Dog a;
    • 클래스를 통해 선언한 변수를 객체라고 한다.
  • 객체의 생성

✏️ 생성자

  • 모든 변수는 선언이 되면 값을 초기화 해야 한다.

  • 객체도 본질적으로 변수이므로 선언되면 초기화 해야 한다.

  • 객체 생성 시 초기화 전용 메소드를 제공하는데, 바로 생성자(constructor)이다.

  • 객체 생성시 자동으로 호출되는 메소드

    • 클래스이름과 동일한 함수(c#) & 리턴 타입 필요 없음 → 초기화에 필요한 함수이기 때문에
  • 생성자 함수는 new 연산자를 호출할 때(객체가 생성됐을 때) 자동으로 호출함

✏️ 상속성

  • 자식이 부모에게 상속받음

  • 상속성
    • 이미 완성된 클래스를 다른 클래스에 상속할 수 있다.
    • 부모 클래스로부터 상속을 받을때 클래스 이름 끝에 콜론(:), 자바의 경우 extends를 붙인 후 부모클래스의 이름을 적는다.

✏️ 오버로딩

  • 객체지향 철학의 이해

    • 다형성
      • 얼핏 보면 같은데 자세히 보면 다름
      • 함수의 이름이 같더라도 전달인자의 타입이나 개수에 따라 구분된다.
      • 객체지향에서는 대표적으로 오버로딩(overloading)과 오버라이딩(overriding) 기법이 있다.
  • 오버로딩

    • 사전적인 의미는 ‘과적하다’, ’적재하다’라는 의미를 가지고 있다.
    • 겉모습은 똑같지만 내용이 다른 경우
    • 이름이 같은 함수일지라도 전달인자 타입이나 개수가 다른 경우
    • 스타크래프트의 오버로드 유닛의 예
    • 코드로 풀어보면 같은 이름의 함수에 같은 개수의 전달인자가 서로 다른 타입으로 존재하는 경우
    • 오버로딩 함수를 호출할때 전달 인자(인수)의 타입과 개수에 따라 해당하는 함수를 호출함

✏️ 오버라이딩

  • 오버라이딩은 ‘위로 올라탄다, ‘엎어친다’는 의미를 갖는다
  • 무언가에 올라타서 기존의 것을 덮어 버린다는 개념
  • 상속의 개념이 기반 되어야 한다
  • 상속 관계에서 상속받은 메소드를 내 스타일로 바꿀 수 있음

✏️ 인터페이스

  • 인터페이스란 메소드의 목록만을 가지고 명세(Specification), 사용자 정의 타입이다.

  • 메소드의 목록만 선언하고 구현은 하지 않는다. (스펙만 작성하고, 구현은 안함)

  • 인터페이스는 어떤 클래스에게 상속받아야 하고 독립적으로 쓸 수 없음

  • 인터페이스의 선언 형태

    • 접근지정자 interface 이름 : 기반 인터페이스 { … } (기반 인터페이스는 생략가능)
  • 인터페이스를 상속받는 클래스의 형태

    • 접근지정자 class 자식클래스 이름 : 인터페이스 { … }
  • 인터페이스를 사용하는 이유

    • 인터페이스는 본체가 정의되지 않은 추상 메소드만 갖는다.
    • 인터페이스의 목적은 기존의 기능을 추가하거나 수정의 개념보다는 동일한 개념의 기능을 새롭게 구현하는 기능이다.
    • 공동작업시 표준을 정하는 역할
  • 클래스를 상속 하는 경우

    • 일반적으로 클래스를 상속하는 이유는 기능의 확장이 목적이다
  • 인터페이스를 상속 하는 경우

    • 스마트폰의 기능 목록 : 통화기능, 문자메시지, 와이파이, 블루투스, 멀티미디어 등등..
    • 스마트폰과 상속 관계의 개념이 아니라 여러 가지 기능의 나열 (일반 클래스의 앞단 but 구현 단계에서도 새로운 기능을 명세할 때 얼마든지 사용할 수 있음)
    • 인터페이스에서 기능을 명세하고, 자식 클래스에서 상속한다.

  • 인터페이스 코드 작성

    • 인터페이스를 생성하고, 인터페이스로부터 상속받은 클래스를 구현
    • 스타크래프트 게임의 3종족들의 유닛 기능 - 공격과 이동 등
    • 공격과 이동은 유닛의 필수 기능
    • 유닛 중에 저글링과 드라군 2개의 유닛을 인터페이스를 통해 구현


  • 메모리 관리

    • 플랫폼 기반의 객체 지향 언어는 가비지 컬렉터가 메모리를 자동 관리한다.

    • 백그라운드에서 더이상 사용 되지 않는 메모리를 찾아 회수한다.

      *빈 공간 발생: 단편화 현상

✏️ 람다

  • 콜백 메소드(함수)를 익명 메소드를 정의하는 이유는 이벤트 기반에서 이벤트 발생시에 미리 등록된 함수를 호출하는 구조이기 때문에 굳이 이름이 필요 없음

    • 버튼을 클릭하면 호출되는 함수이기 때문에 다른 곳에서 굳이 사용하지 않아서 이름이 필요 없음(이벤트하고만 연결하기 때문에)
  • 익명 메소드

    • 메소드를 미리 정의하지 않고 사용할 때 정의한다.
    • 익명 메소드를 사용하면 코드가 간결해진다.
    • 익명 메소드는 별도의 메소드를 만들지 않으므로 코딩 오버헤드를 줄일 수 있다.
    • 익명 메소드는 내용 자체가 복잡하면 안된다.
    • 익명 메소드는 람다식에서 사용된다.
  • 람다식 (문법임)

    • 기존 익명 메소드를 더욱 간결하게 만든다
    • 코드를 짧고 간결하게 표현하는것이 목적
    • 일반 메소드 기반
  • 람다식 표현

    • 델리게이트 본체를 람다식으로 표현한다
    • 델리게이트와 인수의 개수 및 타입은 일치해야 한다
    • 형태 : (인수) ⇒ 표현식 또는 명령문
profile
프론트엔드개발자가 되고 싶어서 열심히 땅굴 파는 자

0개의 댓글