[JS] 객체지향만 하던 나...이세카이(JS)에서는 어떨까?

이런 질문을 기존에는 해본적이 없다.

백엔드에서는 결국 관계형 데이터베이스, 그리고 orm(자바스크립트도 type orm같은 orm이 분명 존재했다)으로 인해 백엔드에서는 객체지향이라는 언어가 항상 나왔기 때문이다. 

 

그런데, 간과했던 것은, js는 백엔드용으로 채택하는 언어는 아니다. 

오히려 대기업에서는 자바로 백엔드를 짜고, JS는 프론트엔드를 위해 채택한다. 

그렇다면, 프론트엔드에서는 어떤 지향일까??

---

사전에 생각한 것 

자바스크립트는 함수형 프로그래밍 언어라는 이야기를 자주 한다. 

즉, 객체간의 협력을 통한 프로그래밍 언어라기 보단, 근본적으로 함수들을 만들어두고, 함수끼리 서로 호출하고 이용되며(?) 유기적으로 동작시키는 것이다. 

 

특히 이런 부분은 자바를 통해 개발하던 나에게는 편리성을 크게 주었다. 

자바에서 util 함수를 따로 빼내서 써야한다면 어떨까?

객체와 관련된 util들을 모으고, 객체를 만든 다음, static 함수로 해당 기능들을 만들어주어야 한다. 

 

예시로, 

public class CalculateUtil {

	public static int sum(int a, int b) {
    	return a + b;
    }
    
    public static int subtract(int a, int b) {
    	return a - b;
    }
    
    public static int multiply(int a, int b) {
    	return a * b;
    }
    
    public static int divideInt(int a, int b) {
    	return a / b;
    }
}

이런식으로 유틸 클래스를 만든 다음, 해당 기능들을 CalculateUtil.sum(1, 2)의 방식으로 호출할 수 있다. 

 

하지만, JS라면? 그냥 각 함수를 export한 후, 필요한 곳에서 import할 수 있었다. (이건 아직 nest.js를 하지 않은 상태임을 생각해주면 좋겠다)

이런 상태에서 장점? 빈 등록을 통해 모든 컨트롤러, 서비스, 리포지토리가 올라가있을 필요가 없다. 

함수만 export해서 import받아 로직이 동작할 수 있었다. 

아직 nestjs같은 프레임워크단위로 작업을 해보지 않아서 그런 느낌을 받을 수 있다. 

하지만 놀랍게도, 동작하는 웹을 개발하는 데에는 어려움이 없었다. 

 

이런 부분에서 아주 흥미로웠다. 그리고 재밌었다.

---

이건 내가 어려웠다!!

프론트엔드를 건드리면서 객체지향이라는 말이 나와서 놀랐다. 

내 머리속에서 객체지향이라는 것은, orm && db && class정도였다. 

프론트엔드에서 말하는 객체지향은 어떻게 해야할까?

 

일단, 지피티한테 물어봤다(이건 못참잖아 그치?)

지피티가 한 말을 토대로 스스로 정리를 했다. 

• 버튼, textarea, form, ul, li등을 객체로 생각한다. 
• 해당 객체들은 상속을 받을 수 있다. 
  • 이를 통해 조금 더 구체화된 구조를 가질 수 있게 된다. 
• 이렇게 상속을 거친 객체들을 실제 사용해야할 곳에서 초기화시킨다. 
• 객체의 메서드로 해당 로직들을 동작하게 만든다. 

 

이렇게 보니, 결국 내가 쓰는 구조가 비슷해졌다. 

1. css class를 만든다. 
2. css class명, 태그의 타입, id, textContent를 받는 객체를 만든다.
3. 이걸 상속받는 구체화된 객체를 만든다(Div객체, Textarea객체, Li객체 등등)
4. 이 객체에 getter를 만든다. (그러면 element가 반환되겠지)
5. 이걸 조작해 렌더링할 화면을 구현한다.

이렇게 생각을 했다. 

물론 나는 프론트엔드를 해본적이 없다. 

그래서 이런 생각을 가질 수 있다. 

"리액트 써 새끼야~"

 

맞다. 프레임워크가 깡패긴 하다. 

근데, 프레임워크 없이 만들어보면, 이게 또 재밌었다. 

그래서 이세계의 나는 지금 행복하긴 하다(?)

이게 결론이다. 

그래.

 

그럼...twenty thousand...🔥