* 프로그래머스, 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 5기 강의 수강 내용을 정리하는 포스팅.

* 원활한 내용 이해를 위해 수업에서 제시된 자료 이외에, 개인적으로 조사한 자료 등을 덧붙이고 있음.

왜 배워야하는가?

• 진정한 개발자가 되어야 한다.

• 단순히 코드를 작성하거나 특정 프레임워크/라이브러리를 사용하는 것에 그치지 말고, 프로그래밍의 근본적인 원리와 기초 개념을 탄탄히 다질 필요가 있다.

• React, Vue, Angular 등 특정 기술에 의존하기보다는, 공통적으로 사용되는 디자인 패턴이나 코드 작성의 패턴을 이해해야한다.

• HTML과 CSS는 프론트엔드에서 중요한 부분이지만, 로직 처리와 기능 구현이 더 중요한 역할을 수행한다.

• 대부분의 현대 웹 개발은 객체 지향 설계 원칙을 기반으로 구축된다, 프론트엔드에서도 객체 지향 설계의 원리를 적용하여 코드를 구조화하고 유지보수가 용이하도록 만들어야한다.

• React, Vue, Angular 같은 특정 도구나 기술만 배우는 개발자가 아니라, 언제든지 적응 가능한 개발 원칙을 가진 개발자가 되어야 한다.

• 목표는 특정 기술에 능숙한 "React 개발자"가 아니라, 기술 스택과 상관없이 문제를 해결할 수 있는 종합적인 개발자가 되는 것이어야 한다는 것.

C언어 기초 개념 정리

1. 포인터 (Pointer)

• 메모리 주소를 저장하는 변수.
• 변수가 저장된 메모리 주소를 직접 조작하거나 참조할 수 있음.

  int a = 10;
  int *ptr = &a; // a의 주소를 ptr에 저장
  printf("%d", *ptr); // ptr이 가리키는 값을 출력

2. 구조체 (Struct)

• 서로 다른 데이터 타입을 하나로 묶어주는 사용자 정의 데이터 타입.

struct Point {
    int x;
    int y;
};
struct Point p1 = {10, 20};

3. 공용체 (Union)

• 구조체와 유사하지만, 모든 멤버가 동일한 메모리 공간을 공유.
• 메모리 사용을 최적화할 때 사용.

union Data {
    int i;
    float f;
};
union Data d;
d.i = 10; // 같은 메모리를 공유

4. 열거형 (Enum)

• 이름으로 값의 집합을 정의하는 자료형.
• 가독성을 높이고 상수를 관리하기 용이.

enum Color {RED, GREEN, BLUE};
enum Color myColor = GREEN;

5. 동적 메모리 할당

• 실행 중에 메모리를 할당하고 해제하는 기능.
• malloc, calloc, free 등을 사용.

int *arr = (int *)malloc(5 * sizeof(int));
free(arr);

객체 지향 프로그래밍 (OOP) 개념

1. 객체 지향 프로그래밍 방식

• 데이터를 중심으로 기능(메서드)을 결합.
• 주요 특징:
  • 추상화: 핵심 로직만 표현하고 불필요한 세부사항은 숨김.
  • 캡슐화: 데이터를 숨기고 메서드를 통해 접근.
  • 상속성: 기존 클래스의 특성을 재사용.
  • 다형성: 같은 이름의 메서드가 다른 방식으로 동작.

2. 클래스 (Class)와 객체 (Object)

• 클래스: 객체의 설계도.
• 객체: 클래스의 인스턴스.

class Car {
    public:
        string brand;
        Car(string b) { brand = b; }
};
Car myCar("Tesla");

Class클래스?

• 객체를 정의하고 생성하며, 상속과 메서드 공유를 통해 재사용성을 제공하는 프로그래밍 개념.

• 어떤 객체를 통해 인스턴스를 생성하고, 메서드 등을 상속하여 동작을 확장하거나 재정의할 수 있는 방법.

• 객체(Object): 클래스에서 만들어진 실제 데이터.

• 클래스(Class): 객체를 정의하는 설계도.

• 인스턴스(Instance): 클래스를 기반으로 생성된 구체적인 객체.

• 클래스는 객체 지향 프로그래밍의 주요 원칙(추상화, 캡슐화, 상속, 다형성)을 구현하기 위한 도구.

• 그런데 자바스크립트(JavaScript)는 클래스를 사용하지 않는다. 처음 개발되었던 때부터 프로토타입(prototype)이라는 개념을 사용하여 객체 지향 프로그래밍(OOP)을 구현했기 때문.

클래스가 없는 객체 지향 프로그래밍?

• 자바스크립트는 초기부터 웹 브라우저에서 경량 스크립트 언어로 설계되었다.

• 클래스 기반 언어(Java, C++ 등)는 정적(static)이며 엄격한 구조를 요구하며, 개발자는 클래스, 메서드, 상속 관계 등을 명확히 정의해야한다.

• 자바스크립트의 주요 목표는 비개발자나 초급 개발자도 쉽게 사용할 수 있는 언어를 만드는 것.

• 따라서 클래스 기반 언어보다 더 유연하고 간단한 방식으로 객체 지향 프로그래밍을 구현하고자 했다.

• 그래서 나온 것이 프로토타입. 더 간단히 참조를 연결하여 속성과 메서드를 상속하므로, 런타임에 유연하게 변경할 수 있다. 라고 한다..

3. 생성자 (Constructor)

• 객체 생성 시 호출되는 특수한 메서드.
• 클래스와 같은 이름을 가짐.

class Car {
    public:
        string brand;
        Car(string b) { brand = b; }
};

4. 상속성 (Inheritance)

• 기존 클래스를 확장하여 새로운 클래스를 생성.
• 코드 재사용성을 높임.

class Vehicle {
    public:
        string brand = "Ford";
};
class Car : public Vehicle {
    public:
        string model = "Mustang";
};

5. 오버로딩 (Overloading)

• 같은 이름의 메서드를 매개변수에 따라 다르게 동작하도록 정의.

class Math {
    public:
        int add(int a, int b) { return a + b; }
        double add(double a, double b) { return a + b; }
};

6. 오버라이딩 (Overriding)

• 상위 클래스의 메서드를 하위 클래스에서 재정의.

class Animal {
    public:
        virtual void sound() { cout << "Animal sound"; }
};
class Dog : public Animal {
    public:
        void sound() override { cout << "Bark"; }
};

7. 인터페이스 (Interface)

• 클래스가 구현해야 할 메서드의 집합.

class Animal {
    public:
        virtual void makeSound() = 0; // 순수 가상 함수
};
class Dog : public Animal {
    public:
        void makeSound() override { cout << "Bark"; }
};

8. 람다 (Lambda)

• 익명 함수로, 간결하게 함수형 프로그래밍을 구현.

코드 복사
auto sum = [](int a, int b) { return a + b; };
cout << sum(5, 3);