생산성을 높여주는 객체지향 프로그래밍 (스테픈 2km)

image.png

프론트엔드 개발을 시작하면서 객체지향 프로그래밍에 대해서

곰곰히 생각해본적이 없는것 같다.

이번기회에 정리를 한번 하고 들어가려고 한다.

image.png

이 코드는 내가 CGV 홈페이지를 코딩하며 만들었던 스크립트 파일인데

정의된 순서대로 함수와 데이터를 읽어서 동작을 구현하는 사이트였다.

절차적으로 프로그래밍된 사이트라고 볼수있는데

image.png

절차지향 프로그래밍이란

물이 위에서 아래로 흐르는 것처럼 순차적인 처리가 중요시 되며 프로그램 전체가 유기적으로 연결되도록 만드는 프로그래밍 기법이다

image.png
사진출처 : https://velog.io/@gparkkii/oop00

절차지향과 객체지향의 비교예시 사진
절차지향은 프로세스가 함수 단위 순서대로 진행된다.

image.png

오늘은 절차지향에 대해서 자세하게 작성하려는 의도는 없었고

절차지향적 프로그래밍이 객체지향프로그래밍의 반대라는 의미는 전혀 아니니

오해하지 않도록 하자.

위 사이트와 같이 절차지향적 프로그래밍을 하게되면 몇가지 단점이 존재한다.

  • 유지보수가 어려움
  • 실행 순서가 정해져 있으므로 코드의 순서가 바뀌면 동일한 결과를 보장하기 어려움
  • 디버깅이 어려움

프로젝트를 진행함에 따라 추후 수정사항이 발생했을때 고생했던 기억이 많다.

image.png

객체 지향 프로그래밍(Object-Oriented Programming, OOP)이란

컴퓨터 프로그램을 어떤 데이터를 입력받아 순서대로 처리하고 결과를 도출하는 명령어들의 목록으로 보는 시각에서 벗어나 여러 독립적인 부품들의 조합, 즉 객체들의 유기적인 협력과 결합으로 파악하고자 하는 컴퓨터 프로그래밍의 패러다임을 의미한다.

요약하자면

객체지향 프로그래밍은 데이터 구조와 해당 데이터 구조와 관련된 동작을 묶는다는 건데

image.png

이렇게 로봇을 만든다고 했을때

수 많은 부품들의 결합과 연결로 하나의 완전한 로봇이 만들어지는 것과 같다고 할 수 있다.

객체 지향적으로 소프트웨어를 설계한다는 말의 의미는 어떤 프로그램의 일부분에 해당하는 작은 부품,

즉 객체를 먼저 만들고 이렇게 만들어진 여러 객체들을 조립해서 하나의 완성된 프로그램을 만드는 프로그래밍 방법론을 말하며 여기서 각 부품에 해당하는 객체에 대해서 알아보도록 하자.

image.png

객체 지향 프로그래밍은 크게 캡슐화 , 상속 , 추상화 ,다형성 의 네가지 특징을 가진다
이러한 객체 지향적 설계의 이점들을 가장 잘 살릴 수 있는 방향으로 발전되어 왔다고 할 수 있다

image.png

image.png

캡슐화에 대해서 알아보자 위의 코드를 보면

붕어빵 클래스의 데이터와 메서드가 모두 public으로 선언되어 외부에서 직접 접근이 가능하다
객체지향의 캡슐화 원칙에 어긋나는 코드다. 이 코드를 캡슐화하여 수정해보자

image.png

붕어빵 클래스의 데이터를 private으로 선언하여, 외부에서 직접 접근할 수 없도록 보호했다.

이제 붕어빵 클래스를 사용해 객체를 생성한 코드에서는 객체의 데이터에 직접 접근할 수 없으며, get붕어빵(), getId()과 같은 메서드를 사용하여 간접적으로 데이터에 접근할 수 있다.

image.png

  • 객체의 프로퍼티에 접근하려고 해도 private으로 설정되어있어 직접적인 접근은 할수가 없다.

캡슐화(Encapsulation)는 객체의 데이터를 외부에서 직접 접근하지 못하게 막고, 함수를 통해서만 조작이 가능하게 하는 작업이다.

image.png
프로그래밍에서의 상속(Inheritance)은 부모의 특징을 물려받는 것으로 부모 클래스가 어떠한 속성이나 기능을 가지고 있다면 그 자식의 클래스도 부모의 속성이나 기능을 상속받게 된다.

image.png
객체지향 상속의 예시

image.png
앞서 만들어둔 붕어빵의 클래스를 extends를 통해 소금붕어빵에게 상속시켰다.

이런식으로 상속을 사용하는것에는 장단점이 존재한다

장점으로는

  • 재사용으로 인한 코드가 줄어든다
  • 범용적인 사용이 가능하다
  • 자료와 메서드의 자유로운 사용 및 추가가 가능하다

단점으로는

  • 상위 클래스의 변경이 어려워진다
  • 불필요한 클래스가 증가할 수 있다
  • 상속이 잘못 사용될 수 있다

image.png

추상이라는 용어의 사전적 의미를 보면 “사물이나 표상을 어떤 성질, 공통성, 본질에 착안하여 그것을 추출하여 파악하는 것”이라 정의하고 있다. 여기서 핵심이 되는 개념은 “공통성과 본질을 모아 추출”한다는 것이다

image.png

이미지 출처 : https://velog.io/@nayeon/%EA%B0%9D%EC%B2%B4-%EC%A7%80%ED%96%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-OOPObject-Oriented-Programming

  • 추상화가 왜 필요할까?

위 사진에 '기아자동차'와 같은 새로운 브랜드가 추가될 수도 있다.

이때 추상화로 '자동차'를 구현 해놓으면 다른 곳의 코드를 수정할 필요 없이 추가로 만들 부분만 새로 생성해주면 된다.

image.png

다형성(多形性)이란 한자 이름 그대로 어떤 객체의 속성이나 기능이 상황에 따라 여러 가지 형태를 가질 수 있는 성질을 의미하는데
객체 지향 프로그래밍에서 다형성(Polymorphism)은 객체 지향의 주요 개념 중 하나로, 같은 이름의 메서드나 연산자가 다른 클래스에 대해 다른 동작을 하도록 하는 것을 말한다.
즉 같은 이름의 메서드가 상황에 따라 다른 역할을 수행하는 것인데

이는 두가지로 분류할수가 있다.

  1. 메서드 오버라이딩(Method Overriding) : 부모 클래스의 메서드를 자식 클래스에서 재정의하여 사용하는 것을 말한다.

2.메서드 오버로딩(Method Overloading) : 같은 이름의 메서드를 다양한 매개변수 타입과 개수로 오버로딩하여 사용하는 것을 말한다.

예시) 메서드 오버라이딩(Method Overriding)

image.png

붕어빵 클래스에서 정의했던 get붕어빵 메서드를 소금빵class에서 상속받으면서 내용을 변경해서

소금빵에서는 소금빵이라는 말을 리턴하는 메서드로 변경했다.

image.png

변경된 내용이 출력되는걸 볼 수 있다.

예시)메서드 오버로딩(Method Overloading)

image.png

자바스크립트에서 메서드 오버로딩 기능이 없다.
그래서 위 코드처럼 분기처리를 해서 비슷한 느낌으로 코드를 짜야한다.

image.png
장점 :

  • 모듈화시켜서 개발하기 때문에 업무 분담이 편리하고 대규모 소프트웨어 개발에 적합
  • 클래스 단위로 수정이 가능하기 때문에 유지 보수가 편리
  • 코드 재사용이 용이

단점

  • 처리속도가 절차지향보다 느림
  • 설계에 많은 시간소요가 들어감

참고사이트


스테픈 2km 오늘도 완료했다.

휴우 날이 덥다

image.png

Coin Marketplace

STEEM 0.28
TRX 0.12
JST 0.032
BTC 66940.80
ETH 3122.88
USDT 1.00
SBD 3.77