24.08.02 day39 OOP, Bootstrap

OOP

객체 지향 프로그래밍(Object-Oriented Programming, OOP)은 소프트웨어 설계 방법론 중 하나로, 프로그램을 여러 개의 객체(object)로 구성하여 그 객체들 간의 상호작용을 통해 프로그램을 설계하고 구현하는 방법론이다.

OOP의 핵심 개념은 클래스(class)와 객체(object)이며, 여기서 객체는 데이터와 데이터를 처리하는 코드를 묶은 독립적인 단위이고, 클래스는 이러한 객체를 정의하는 설계도이다.

 

OOP의 핵심 개념

1. 클래스(Class)
   • 객체를 정의하는 틀이나 설계도
   • 객체의 속성(데이터)과 행동(메소드)을 정의
   • 예: class Car, class Fruit
2. 객체(Object)
   • 클래스의 인스턴스(instance)
   • 실제로 메모리에 할당되어 동작하는 개체
   • 예: myCar = Car(), myFruit = Fruit()
3. 상속(Inheritance)
   • 새로운 클래스가 기존의 클래스를 확장하여 사용하는 것
   • 코드의 재사용성을 높이고, 계층 구조를 만든다.
   • 예: class ElectricCar(Car), class BerryFruit(Fruit)
4. 다형성(Polymorphism)
   • 같은 이름의 메서드가 다른 클래스에서 다르게 동작하는 것
   • 인터페이스를 통해 서로 다른 구현을 제공
   • 예: dog.speak()가 Dog 클래스에서는 'bark'로, Cat 클래스에서는 'meow'로 구현될 수 있음.
5. 캡슐화(Encapsulation)
   • 객체의 내부 상태를 숨기고, 외부에서 접근을 제한하여 보호하는 것
   • 데이터 접근을 제한하고, 잘못된 접근이나 수정으로부터 보호
   • 예: private변수와 public메소드
6. 추상화(Abstraction)
   • 복잡한 시스템으로부터 불필요한 부분을 숨기고, 중요한 부분만을 나타내는 것
   • 객체의 복잡성을 줄이고, 인터페이스를 통해 중요한 기능만 제공
   • 예: Animal 클래스에서 move() 메서드를 정의하고, 각각의 하위 클래스에서 이를 구현

OOP의 장점

1. 코드의 재사용성
   • 상속을 통해 기존 코드를 재사용할 수 있다.
   • 중복된 코드 작성을 줄이고, 유지보수를 용이하게 함
2. 유지보수의 용이성
   • 객체 단위로 코드가 나누어져 있어, 특정 부분만 수정하거나 확장하기 쉬움
   • 모듈화된 구조로 인해 디버깅과 테스트가 간편하다.
3. 높은 응집성과 낮은 결합도
   • 응집성(cohesion)은 클래스나 모듈이 하나의 책임 또는 기능을 가진다.
   • 결합도(coupling)는 클래스나 모듈 간의 의존성을 낮추어 독립성을 유지한다.
4. 코드의 가독성
   • 객체와 클래스의 사용으로 코드 구조가 명확해지고, 읽기 쉽고 이해하기 쉽다.

# 클래스 정의
class Car:
    def __init__(self, brand, model):
        self.brand = brand
        self.model = model
    
    def start_engine(self):
        return f"{self.brand} {self.model}'s engine started."

# 상속
class ElectricCar(Car):
    def __init__(self, brand, model, battery_capacity):
        super().__init__(brand, model)
        self.battery_capacity = battery_capacity
    
    def start_engine(self):
        return f"{self.brand} {self.model} with a battery capacity of {self.battery_capacity}kWh's engine started."

# 객체 생성
my_car = Car("Toyota", "Corolla")
print(my_car.start_engine())

my_electric_car = ElectricCar("Tesla", "Model S", 100)
print(my_electric_car.start_engine())

이 예제는 Car라는 기본 클래스를 정의하고, ElectricCar라는 하위 클래스를 정의하여 상속과 다형성을 보여준다.

이처럼 OOP는 코드의 구조를 체계적으로 만들고, 유지보수와 확장을 용이하게 하는 데 큰 장점을 제공한다.

---

Bootstrap

Bootstrap은 트위터에서 개발한 오픈 소스 프론트엔드 프레임워크로, 웹 개발을 더 빠르고 쉽게 하기 위해 디자인 템플릿을 제공하며, 주로 HTML, CSS, JavaScript로 구성되어 있으며, 반응형 웹 디자인을 쉽게 구현할 수 있도록 도와준다.

 

Bootstrap의 구성 요소

1. CSS: 그리드 시스템, 타이포그래피, 폼, 버튼, 네비게이션, 기타 인터페이스 요소를 포함.
2. JavaScript: 다양한 인터랙티브 컴포넌트를 포함. 예: 모달 창, 드롭다운 메뉴, 툴팁, 팝오버 등
3. 도구: 사용자 정의가 가능하며, SASS를 사용한 스타일 확장, Gulp나 Webpack을 통한 빌드 자동화 등을 지원한다.

Bootstrap의 자바스크립트 구성 요소

Bootstrap의 자바스크립트 구성 요소는 웹 애플리케이션에 다양한 인터랙티브 기능을 추가할 수 있게 해준다.

Bootstrap은주로 jQuery를 사용하며, Bootstrap 5부터는 jQuery 의존성이 제거되었다.

1. 모달 (Modal): 팝업 다이얼로그 상자로, 경고, 정보 제공, 또는 사용자 입력을 받기 위해 사용
2. 드롭다운 (Dropdown): 버튼을 클릭하여 메뉴를 표시하는 인터페이스 요소
3. 툴팁 (Tooltip): 요소에 마우스를 올렸을 때 정보를 제공하는 작은 팝업
4. 팝오버 (Popover): 툴팁과 비슷하지만, 더 많은 콘텐츠를 포함할 수 있다.
5. 알림 (Alert): 상태 메시지나 피드백을 사용자에게 알리는 데 사용

Bootstrap의 장점

1. 반응형 디자인: 다양한 장치와 화면 크기에서 일관된 사용자 경험 제공
2. 사용의 용이성: 미리 정의된 스타일과 구성 요소를 쉽게 사용 가능
3. 일관된 디자인: 다양한 프로젝트에서 일관된 UI를 유지
4. 커스터마이징 가능: 필요한 부분만 사용하거나 확장 가능

Bootstrap은 웹 개발자에게 매우 유용한 도구로, 특히 반응형 디자인과 빠른 프로토타이핑이 필요한 경우에 효과적이다.

 

Bootstrap과 함께 사용하기 좋은 프레임워크

Foundation

• 주요 기능: 반응형 디자인, 유연한 그리드 시스템, 다양한 UI 구성 요소, ARIA 지원을 통한 접근성 강화
• 특징: 모바일 우선 설계, 고급 사용자 정의 가능, SaaS 및 Compass와의 통합
• 장점: 고도의 커스터마이징, 접근성에 중점, 다양한 기본 제공 스타일

Bulma

• 주요 기능: 반응형 CSS 프레임워크, 플렉스박스를 기반으로 한 그리드 시스템, 모던한 스타일의 UI 구성 요소
• 특징: CSS만으로 구성되어 있어 가볍고, 자바스크립트 의존성이 없다.
• 장점: 직관적인 클래스명, 간편한 커스터마이징, 깔끔한 디자인

Tailwind CSS

• 주요 기능: 유틸리티-퍼스트(utility-first) CSS 프레임워크, 미리 정의된 클래스 사용을 통해 신속한 스타일링 가능
• 특징: 구성 요소 대신 유틸리티 클래스로 스타일링, 고도의 커스터마이징, PostCSS와의 통합
• 장점: 작은 파일 크기, 빠른 개발 속도, 매우 유연한 디자인 시스템

Semantic UI

• 주요 기능: 반응형 디자인, 다양한 UI 구성 요소와 모듈, 자연어와 비슷한 클래스명
• 특징: 직관적인 클래스명, 높은 일관성, 다양한 테마 옵션
• 장점: 읽기 쉽고 쓰기 쉬운 클래스명, 강력한 테마 기능, 다양한 기본 제공 구성 요소

Materialize

• 주요 기능: 구글의 머티리얼 디자인 가이드라인을 따르는 프레임워크, 반응형 디자인, 다양한 UI 구성 요소
• 특징: 메테리얼 디자인 기반, CSS와 JavaScript를 통한 다양한 인터랙티브 요소 제공
• 장점: 시각적으로 일관된 디자인, 사용하기 쉬운 클래스명, 다양한 기본 제공 스타일과 애니메이션

프론트엔드 프레임워크의 선택 기준

1. 프로젝트 요구사항: 프로젝트의 복잡도와 요구되는 기능에 따라 적절한 프레임워크를 선택해야 한다.
2. 팀의 기술 스택: 팀의 경험과 기술 스택을 고려하여, 익숙한 프레임워크를 사용하는 것이 효율적이다.
3. 유연성: 커스터마이징과 확장성이 중요한 경우, 이를 지원하는 프레임워크를 선택해야 한다.
4. 커뮤니티와 지원: 큰 커뮤니티와 좋은 문서화를 가진 프레임워크는 문제 해결에 유리하다.

각 프레임워크는 고유한 특징과 장점을 가지고 있어, 프로젝트의 요구사항과 개발자의 선호에 따라 선택하는 것이 중요하다.