객체지향 공부하기에 딱 좋은 예제 하나가 이거임

코딩 채널

알림 알림 중 알림 취소

구독자 4407명 알림수신 85명 @은월영

프로그래밍 및 코딩 채널

Front-end 객체지향 공부하기에 딱 좋은 예제 하나가 이거임

ㅇㅇ

추천 2 비추천 0 댓글 20 조회수 395 작성일 2022-09-20 20:15:45 수정일 2022-10-25 03:02:51

https://arca.live/b/programmer/59083788

공튀기기

https://jsfiddle.net/end3r/redj37dc/

이건 절차지향으로 만들어진 예제임.

보다시피 변수 하나를 이용해서 공 하나를 그려내고 있음.

https://jsfiddle.net/76nqwuov/

이건 내가 만든 객체지향 버전임

객체지향을 사용하면 이런 모양새가 될 거임.

물론 이건 절차지향으로도 얼마든지 만들 수 있긴 함.

구조체를 이용해서 배열을 사용한다는 점까지는 똑같으니까.

정확히는 객체지향은

한 코드에 너무 많은 권한을 주지 않는 개념을 포함해서

개발과 유지보수를 쉽게 하기 위해 사용하는 이유도 있지만

객체지향이란 개념이 안잡힌 입문이라면 이 예제가 도움이 될 것이라 생각함

댓글 [20] 글쓰기

생활패턴의마술사

2022-09-20 20:23:02 답글

오 좋다

펼쳐보기▼

wiki

2022-09-21 05:51:30 답글

클래스를 사용한거지 객체 지향적으로 코딩했다고 보기 어려운거 아님?
클래스를 사용했다 != 객체지향적이다

펼쳐보기▼

생활패턴의마술사

2022-09-21 06:49:49 답글

*수정됨

처음 접하는 초보자 입장에서 객체를 생성하고 활용하는걸 시각적으로 체험하기에는 좋은거 같은데

펼쳐보기▼

생활패턴의마술사

2022-09-21 06:52:07 답글

딱 객체의 개념을 알아가는 정도? 이이상 말하면 몰,,루

펼쳐보기▼

크쿠르

2022-09-21 06:57:09 답글

동의함 classless oop라는것도 있음 이건 객체지향이라곤 말하긴 힘듬

펼쳐보기▼

ㅇㅇ

2022-09-21 08:36:52 답글

*수정됨

입문자 기준으로 쓴 글이라 이정도 수준이면 충분하다고 생각함. 패러다임이 어떻고 solid와 읽기쉬운 코드 등 다 따지면 어려울거라 생각해

펼쳐보기▼

ㅇㅇ

2022-09-21 08:49:04 답글

*수정됨

객체지향에는 사용엔 여러가지 이유가 있겠지만, 난 기본적으로 '자연어처럼 읽을 수 있는' 코드가 모든 패러다임의 기본이라고 생각함. Ball.Between? 이건 뭘 의미하는건지도 모르겠음. Ball.List? 이건 그럴듯하지만, 전역이 오염된다는 점에서 재사용성이 떨어져서 지양해야 한다고 생각함.

엄격하게 들어간다면, Ball, Position, Shape, Canvas, Math 등으로 나뉘어야 할 거임.
ball은 캔버스에 그릴 수 있는 shape 클래스를 상속받아야 할 것이고, ball.position 속성으로 update 메서드를 가지고 있는 position 인스턴스를 가져야할 거임. Math.between(min, max), canvas.draw(ball, ball.position) 같은 방식으로 세분화시키는게 맞을거임. 하지만 너무 길어질거고, 예제로썬 적합하지 않다 생각함. 그런걸 모두 보기엔 카와이 뉴비쟝들은 학을 때고 도망갈거야..

펼쳐보기▼

wiki

2022-09-21 10:02:03 답글

객체지향에서 제일 중요한게 역활과 구현을 구분해서 프로그램을 구성하여 이해하고 이에 따라서 확장이 용이하다는게 중심이라고 생각함
고작 클래스 사용하는걸 객체지향으로 생각해버리면 이제 SOLID 같은 OOP 원칙보기 시작하면 개념이 충돌하기 시작함

수정에는 닫혀있고 확장에는 열려있다는 개념 알 수 있을까? 어려울꺼같은데

나중에 프로젝트 크게 하면서 그때가서 체감하고 익혀도 늦지 않다고 생각함
오히려 뉴비한테 설명할꺼면 나중에 프로젝트하면 그때가서 다시 봐라하고 넘어가라는 게 맞을꺼같은데

어려운 개념인거 맞는데 굳이 뉴비한테 어려운 개념 찍먹하라고 이해하기 어려운 방법으로 들이미는게 더 방해라고 생각함

펼쳐보기▼

wiki

2022-09-21 10:03:43 답글

그리고 너가 길어질꺼라고 말하는 방법도 OCP에 위반이라서 DI 컨테이너 별도로 만들어서 의존성 주입해줘야 됨

펼쳐보기▼

ㅇㅇ

2022-09-21 10:06:36 답글

*수정됨

어떤점이 ocp 위반이라는거임? 설마 position 말하는거임? 저건 ocp 위반이 아님. 속성도 재활용할 게 아니라, ball.position.set(x, y) 등으로 쓰는걸 가정한거라. ball 예시를 들어서 쓴건데 렌더링 할 때마다 객체에 position 객체를 직접 생성해서 업데이트하면 퍼포먼스가 개판나서 그런식으로 안씀. 후킹이 필요하면 position에서 이벤트를 캐치하는 방식으로 쓰지 보통은

펼쳐보기▼

wiki

2022-09-21 10:37:05 답글

브라우저가 shape라는 인터페이스만 사용하고 그 인터페이스에 대한 구현체는 별개의 컨테이너가 주입해야 된다는거임
지금 상황에서 ball이라는 모양을 다른 모양으로 바꾼다고 하면? 클라이언트 들어가서 코드 다 고쳐야되잖아
이게 어떻게 수정에 닫혀있는 모양임 클라이언트 코드에서 수정이 이루어지는데

펼쳐보기▼

ㅇㅇ

2022-09-21 10:39:35 답글

*수정됨

아 그 소리였음? canvas에서 shape를 그릴 때, shape 하위 클래스가 또 있지. squareShape, triangleShape, ball 같은 경우는 circleShape를 사용할거고. 이 각 클래스마다 그리기 방식을 따로 지정하는거고. 애초에 클래스 이름부터가 Ball이잖아. squareShape같은걸로 바꿀리가없지. radius 수치를 수정하고 싶으면, 그거야말로 circleShape에서 상속받은 radius 속성을 수정해서 ball.radius = r 이렇게 수정하면 되는거고

펼쳐보기▼

wiki

2022-09-21 10:45:21 답글

그니깐 결국 cavas에서 바꾸려면 생성할때 어떤 구현체로 구현할지 바꿔야 되잖아 그럼 결국 인터페이스랑 구현체랑 둘 다 의존하게 되는데?

펼쳐보기▼

ㅇㅇ

2022-09-21 10:52:23 답글

*수정됨

interface Shape {
  getVertices(): void
}

class CircleShape implements Shape {
  private _radius: number

  getVertices() { ... }
  setRadius(r: number): void { ... }
}

class Position {
  private _x: number
  private _y: number

  set(x, y): void { ... }
  get x(): number { ... }
  get y(): number { ... }
}

class Ball extends CircleShape {
  readonly position: Position

  constructor(x, y) {
    this.position = new Position(x, y)
  }
}

class Canvas {
  protected _context: Canvas2dContext

  draw(shape: Shape, position: Position): void {
    const verties = shape.getVertices()
    const { x, y } = position
    ...
  }
}

니가 주장하고싶은게 뭔지는 알고있음. 근데 난 그렇게까지 주입이 필요한 상황이라고 생각하지 않을뿐임. 아까 말했다시피 Ball은 CircleShape만을 사용할거기 때문에 Shape를 직접 바꿀 일도 없고, 캔버스의 draw에선 인터페이스 Shape를 받을 것이기 때문에 상관없다고 생각함.

펼쳐보기▼

wiki

2022-09-21 11:08:01 답글

어차피 DI컨테이너 없으면 클라이언트로가서 구현되지 않음? 그럼 클라이언트 수정에 대해서는 열리게 되는건 똑같은디?ㅋㅋㅋ
거기까지 필요없다는건 인정하고 이해함

펼쳐보기▼

ㅇㅇ

2022-09-21 11:10:13 답글

난 대체 클라이언트에 가서 구현된다는게 무슨 소린지 모르겠다... 캔버스 예제야 이거.

펼쳐보기▼

wiki

2022-09-21 10:43:45 답글

*수정됨

애시당초 저 예제를 보고 SOLID까지 안가도 대체 다형성, 캡슐화, 상속 중에서라도 어떤걸 볼 수 있는 거임?
차라리 예제가 TS여서 접근제한이라도 해놨으면 캡슐화라도 봤을꺼같은데
단순히 클래스 사용해놓고 객체지향 공부하기 좋은 예제라고 하면 뭐라 해야될지 모르겠음

펼쳐보기▼

ㅇㅇ

2022-09-21 10:45:17 답글

*수정됨

위에서도 말했지만 입문자를 위해서 쓴 글이다... this 개념조차 없는 사람들을 대상으로 쓴 글이야. 나도 객체지향 처음 접했을 때 가장 헷갈린게 그거였음. 그냥 절차지향형으로 만들면되지 뭣하러 이렇게 만드는거지? 라고 한거임. 여기에선 solid 규칙보다는 '객체' 그 자체에 더 강점을 둔 거임.

펼쳐보기▼

wiki

2022-09-21 11:02:33 답글

객체를 활용하는 것을 알기 좋은 예제다 O
객체 지향을 공부하기 좋은 예제다 X

객체지향의 역활과 책임에 대해서 알만하게 2개 이상의 객체의 상호작용이 잘 보이는 것도 아니고
중요한 특징들이 하나도 보이지도 않고 그렇다고 SOLID 같은 설계 원칙을 지켜서 그걸 알 수 있는 것도 아니고

여기서 class는 object를 만들기위한 역활 그 이상도 그 이하도 아닌데

펼쳐보기▼

ㅇㅇ

2022-09-21 11:03:00 답글

그래 그렇게까지 생각한다면 어쩔 수 없다

펼쳐보기▼

댓글 작성

업로드 중

0초

녹음 중지 삭제

글쓰기

전체글 개념글

최근 최근 방문 채널

최근 방문 채널

전체 공지 정보 질문 잡담 유머 C/C++ C# Python Java Front-end Back-end 앱·겜 AI·Data 그 외

번호 제목

작성자 작성일 조회수 추천

광고 광고 비상!!!! 인천사는 챈붕이들 제발 와라!!!!

공지 아카라이브 모바일 앱 이용 안내(iOS/Android)

*ㅎㅎ 2020.08.18 52641544

공지 코딩 채널에 오신 것을 환영합니다.

강성호 2022.03.31 23783

Python 파이썬 어렵다.. [4]

ㅇㅇ 2022.09.21 174 1

질문 국비 시작한지6일됐는데 고민이있음 [5]

고릴라방구냄새 2022.09.21 466 1

그 외 채널 완장이 게시글을 볼 때 삭제버튼 어디에 위치함? [6]

ㅅㅇㄹ 2022.09.21 104 1

Front-end framer motion 그는 신이야!!!!!!!!! [4]

BeeMOre 2022.09.21 116 1

질문 c# 회원가입 만들때 질문 [12]

ㅇㅇ 2022.09.21 96 0

Python split 없이 슬라이싱 하기 [3]

doremamo 2022.09.21 131 0

입문자를 위한 재귀함수 개념과 예제 [4]

레크로스 2022.09.21 111 2

난 여기서 커뮤니티의 순기능을 느낌 [3]

토종게이팟 2022.09.20 149 4

Front-end 객체지향 공부하기에 딱 좋은 예제 하나가 이거임 [20]

ㅇㅇ 2022.09.20 396 2

Front-end 요즘 콜백함수 싹다 async await로 바꾸고있는데 너무좋음 [5]

모나박수콘쓰려고만든계정 2022.09.20 148 3

질문 이거좀 알려줄사람 (C#) [24]

토종게이팟 2022.09.20 173 1

잡담 본인 사이트 트래픽 확인했는데 [11]

산딸기 2022.09.20 205 2

잡담 BOJ 풀다가 지치면 가끔 코드업 같은 다른 사이트에서 기초 문제 풀면서 머리를 식힘 [1]

강성호 2022.09.20 268 7

처음으로 웹스톰 써보는데 생각외로 편하네 [4]

BeeMOre 2022.09.20 92 1

질문 win32 api 지정된 영역 화면 캡쳐 [4]

순혈아오스 2022.09.19 132 1

형들 나 c언어 공부하려는데 책좀 추천해줄수 있어? [4]

돌려줘요내척추 2022.09.19 173 1

C# 오늘은 조금이나마 객체지향과 클래스를 알아가는 시간을 가졌읍니다 [23]

토종게이팟 2022.09.19 254 3

질문 css 질문 [4]

Farrell 2022.09.19 265 0

글쓰기

전체글 개념글