프론트엔드 개발자들이 싫어하는 Class 문법

우뱅뱅·2022년 12월 11일
0

React

목록 보기
2/3

class로 컴포넌트를 만드는 것은 성능상 안 좋기때문에 지양해야 하지만

javascript에 있는 class 문법은 순수한 문법인데 class라고 적는 것만으로도

많은 프론트엔드 개발자들이 공격적인 모드로 class를 하지말라고 언성을 높힌다.

개발자로서 어떤 문법과 기술을 무조건 싫어하기 보단 그 문법을 javascript에서

왜 굳이 힘들게 만들어서 넣어놨는지 본질을 볼 필요가 있다고 봅니다.

기술을 감정으로 대하지않고 기술 그 자체만으로 보고 평가한다.

저에게 개발을 처음 알려주신 분이 저에게 해주신 말씀이었고 저는 그것이 옳다고 생각합니다.

javascript에서 class를 사용하면 어떤 게 좋을까?

  1. 아래 코드는 제가 직접 작성한 코드입니다.
    호출이 빈번할 경우 싱글톤 패턴으로 하나의 instance를 재활용하여 사용 할 수 있습니다.

  2. 대형 서비스에서 api 함수만 2천개정도 있다고 생각해보자.. 함수만 1000개가 apis 폴더 안에 있는 파일로 나누어져서 있다면 우리는 폴더 이름에 의존하여 그것들을 파악해야 하고 어떠한 연관성이 있는지는 파악할 수 없습니다. 하지만 class를 이용하여 api 함수들을 설계하였을 때는

위 사진과 같이 어떠한 게시글 안에 들어왔을 때 코멘트를 달 수 있고 그 코멘트에서 좋아요를 누를 수 있다면 게시글 > 코멘트 > 좋아요 이런식으로 상관 관계를 상속관계로 표현할 수 있습니다.
코멘트가 그 게시판에 들어왔을 때 말고는 쓸 일이 없기에 추상 클래스로 선언하였습니다.

  1. DTO 사용
    어떠한 api를 호출 할 때 Object형태로 만들어서 body에 넣어서 보낼수도 있지만 body에 넣어서 보낼 데이터가 많은데 그 중에 절반정도가 고정값이라면 매번 그 값들을 새롭게 입력하는 것은 비효율적이고 실수를 유발할 수 있는 일입니다.

    위 코드는 api에 6개의 데이터를 고정적으로 보내야 할 때 사용하는 DTO입니다.
    하지만 신규 comment의 경우에는 2개의 데이터 originalSeq, content만 넣으면 됩니다.
    대댓글 같은 특수한 상황에선 최대 4개의 데이터를 넣어야합니다.

DTO를 만들어서 Typing hint도 제공해주고 매번 6개의 데이터를 새로 만들어서 넣어줘야 하는 일이 줄어들게 되었습니다.

이것은 보내야하는 데이터가 더욱 많을수록 효율이 좋다고 생각합니다.
또한 updatedDate 같은 것이 한국에서만 운영한다면 서버에서 임의로 넣지만 클라이언트 시간 기준으로 해야한다면 클라이언트에서 updateDate를 매번 같이 넣어줘야 할 수도 있습니다.

끝으로...
class는 순수한 javascript 문법이고... 연관된 함수들을 묶어서 사용하거나
이 함수들의 의전성 관계등을 부여할 수 있습니다. class문법은 죄가 없다고 생각합니다.

profile
개발왕이 될 남자

0개의 댓글