화면 한장에 들어갈 코드는 리팩토링을 어떻게 할 수 있을까요?

Question

한장의 캔버스를 가지고 excalidraw를 클론코딩을 목표로 만들고있습니다.그래서mousedown, move, up 이벤트를 씁니다.이게 좀 곤란한게 한장의 페이지를 가지고 여러 기능을 구현하다 보니 코드가 여기저기 얽혀있고, 복잡해지더라고요.mousemove가 600줄 가량 되고 분기문도 길게 이어져있습니다.그래서 생각한게분기의 내용을 함수화해서 저장할까?생각도 들기도 하고요.아니면 기능구현을 마친 뒤 리팩토링을 하는게 나을까?이대로면 기능구현을 마쳤을때 최소 1000줄은 나올것같아요.리액트 사용중인데 Ref와 zustand 써가지고아무래도 한장의 화면이다보니 파일을 나눴는데도 코드들이 여기저기 얽혀있습니다.\mousemove 코드입니다.http://colorscripter.com/s/nP8md55아직까지 잘 정리가 안된 코드입니다.주변에 조언해주실분들이 없으셔서...조언해주시면 감사하겠습니다.

캐티 · Accepted Answer

공부를 어설프게 하였나요. 위에 거에 대응하는 것이 객체 지향이고, 나아가서 상속을 사용하빈다.이러는 이유는 일반적으로 비즈니스로직뷰 expends 핵심로직 이케 되어있고 비즈니스로직뷰는 매번 다른 코드를 채용하는 반면에 핵심로직은 mouse(touch) down, up, move 이벤트를 처리하는 수가 이쩌.더 나아가서 abstract 추상 객체(함수, 메서드) 이케이케 하게쩌. 이렇다 하더라도 자바스크립트에서 추상 처리는 체이닝 콜 방식으로 이루어져서 잘 처리하여야 하빈다.

세브라이드 · Answer

코드가 어려워서 잘 모르겠네요... 크기 조절, 도형 이동, 회전 등은 추상화할 여지가 있어 보입니다. 코어만 남기고 크기 조절 plugin, 도형 이동 plugin, 회전 plugin 등이 장착된다는 개념으로 리팩토링 해보면 어떨까요? 그럼 이후에 확장하기도 쉬울 거고요.

누누나나 · Answer

저도 예전에 바닐라로 구현해보려다가 객체 구조 잘못 잡아서 실패한 경험이 있습니다.제가 작업했을 땐 캔버스 최소 2장 정도 사용했었습니다.이미 그려진 도형들이 렌더링 되는 영역과 도형을 새로 그리거나, 수정할 때의 영역으로 담았습니다.도형이 많은 상황에서 도형을 새로 그리면서 전체적으로 렌더링을 자주하기에 렉이 발생해서 그런 형식으로 처리했던 기억이 있습니다.

장독깨기 · Answer

고생 많으시네요, ㅎ기능구현은 나중에 하시고, 지금 리팩토링 하세요.그리고, 분기 하지 마시구요, 그니까, 분기 내용을 함수화해서 하지 마시구요,객체 지향적으로다가 하셔야 하는데요,도형들을 클래스로 만드세요, 그리고, 이 도형들이 공통적으로 하는 행위들이 있을 거잖아요.드로잉, 이동, 크기조절,... 이런 것들을 추상화 하세요.간단히 보면 이런 식입니다.export interface ShapeBehavior { move(dx:number, dy:number): void; } export class Rect implements ShapeBehavior { move(dx:number, dy:number): void { this.x += dx; this.y += dy; } }이 외에도 여러 객체들을 생각해볼 수 있습니다.항상 객체 관점에서 생각을 하고 추상화를 생각해야 합니다.

L자유해결사J · Answer

기능 구현 우선.중복된 코드 함수로 빼기.중복된 코드 객체로 따로 빼기.우선 이정도 입니다. 기능구현을 우선으로 하시고, 중복된 코드를 함수로 빼보시기 바랍니다.저는 1만 라인 넘는데요. 중복 제거 했는데도 그러더라고요.지금은 구조 를 변경하고 있어요.1순위는 구현하고 눈으로 확인 되어야 합니다. 그래야 개선 방향을 알 수 있어요.코딩 동시에 리팩 토링 하는방법도 좋긴 한데, 구현 하다 보면 로직을 새로 짜야 하는 경우도 있고, 구조 전체를 변경해야 하는 경우도 생겨요.

개발잡부 · Answer

gpt한테 객체지향적으로 설계해서 짜달라고하면 기가막히게 짜줍니다

로그인좀해라 · Answer

함수가 뭔지 몰라요?? 중복이나 함수로 만드세요.

화면 한장에 들어갈 코드는 리팩토링을 어떻게 할 수 있을까요?

7개의 답변

#excalidraw 목록