CodeGym /행동 /Frontend SELF KO /모든 것은 객체다

모든 것은 객체다

Frontend SELF KO
레벨 39 , 레슨 0
사용 가능

1.1 객체와 클래스

오늘은 JavaScript 프로그램이 어떻게 구성되는지 알아볼 거야. 그리고 제일 중요한 소식: JavaScript 프로그램은 클래스랑 객체로 구성돼. JavaScript는 객체 지향 언어라서 모든 게 다 객체야: 숫자, 문자열, 함수, 심지어 클래스까지도.

그러면 클래스가 뭐냐고?

비유를 하나 들어볼게. 작은 배를 만든다고 상상해봐. 먼저 설계도를 만들고, 그걸 공장에 보내면 공장에서 설계도를 바탕으로 배를 만들어 줄 거야. 아니, 한 대가 아니라 열 대도 만들 수 있어. 아니, 원하는 만큼! 하나의 설계도로 수십 대의 동일한 배가 만들어지는 게 중요한 포인트야.

JavaScript로 프로그래밍하는 것도 딱 똑같아.

설계도

프로그래머는 설계자랑 같은 거야. 설계자는 설계도를 그리고, JavaScript 프로그래머는 클래스를 작성하지. 그런 다음 설계도를 바탕으로 부품들이 만들어지고, 클래스를 바탕으로 객체들이 만들어지는 거야.

설계도

먼저 클래스(설계도)를 작성하고, 그 다음 프로그램 실행 중에 이 클래스들로부터 JavaScript가 객체를 생성하는 거야. 설계도로 배를 만드는 것처럼 말이야.

설계도는 하나지만, 배는 여러 대가 있을 수 있어. 배는 이름도 다르고, 실어 나르는 화물도 달라. 하지만 공통점도 많아: 다 배이고, 구조가 같고, 비슷한 일을 할 수 있다는 점.

또 다른 비유를 들어볼게...

개미굴

개미굴은 객체 간의 상호작용을 보여주는 좋은 예야. 가장 단순한 개미굴에도 세 가지 클래스의 개미들이 있어: 여왕 개미, 전사 개미, 그리고 일꾼 개미.

각 클래스의 개미 수는 다 달라. 여왕은 개미굴에 단 한 마리만 있고, 전사는 수십 마리, 일꾼 개미는 수백 마리야. 세 가지 클래스와 수백 개의 객체가 있는 거지. 그런데 개미들은 딱 정해진 규칙 안에서 다른 개미들과 상호작용하거나 다른 클래스의 개미들과 상호작용해.

이건 진짜 완벽한 예야. 일반적인 프로그램에서도 다 이런 방식으로 작동해. 메인 객체가 있고, 이 객체가 다른 클래스의 객체들을 생성해. 그리고 생성된 객체들이 서로 상호작용하거나 프로그램의 "외부 세계"와 상호작용하지. 각 객체의 동작은 엄격하게 프로그래밍돼 있어.

이 두 가지 예시는 사실 같은 이야기의 두 측면이야. 진실은 그 사이에 있어. 첫 번째 예시(설계도와 배 이야기)는 클래스와 그 클래스의 객체들 간의 관계를 보여줘. 비유가 기가 막혀. 두 번째 예시(개미굴)는 프로그램 실행 중 존재하는 객체들과 그 객체들이 작성된 클래스 간의 관계를 보여줘.

먼저 프로그램에 존재하는 모든 객체에 대한 클래스를 작성해야 하고, 그 다음에는 서로의 상호작용 방식을 서술해야 해. 복잡해 보이지만, 생각보다 쉽다니까.

JavaScript에서는 프로그램 실행 중 모든 엔티티가 객체고, 프로그램 작성은 다양한 객체 간의 상호작용 방식 기술로 요약돼. 객체들은 단순히 서로의 메서드를 호출하고 필요한 데이터를 전달해.

문서화

그런데 어떤 데이터를 메서드에 전달해야 할까? 이미 다 정리돼 있어.

보통 각 클래스에는 그게 왜 만들어졌는지 설명이 있어. 그리고 보통 메서드마다 그게 무슨 일을 하는지, 어떤 데이터를 전달해야 하는지 서술이 돼 있어.

클래스를 사용하려면 대략적으로 그게 무슨 일을 하는지 알아야 하고, 메서드마다 정확히 무슨 일을 하는지 알아야 해. 하지만 그게 어떻게 작동하는지는 몰라도 상관없어. 그야말로 마법 지팡이지.

파일 복사 코드를 한 번 보자:

JavaScript
    
      const fs = require('fs');

      // 파일 열기
      const src = fs.createReadStream('source.txt');
      const dst = fs.createWriteStream('destination.txt');

      // source.txt 내용을 destination.txt로 복사
      src.pipe(dst);

      // 복사가 끝난 뒤에는 파일 닫기
      src.on('end', () => {
        src.close();
        dst.close();
      });
    
  

코드를 한 줄 한 줄 읽으면 대략적으로 무슨 일을 하는지 알 수 있어. 물론 경험과 연습이 필요한 부분이긴 해. 어느 정도 시간이 지나면 이 코드가 익숙하고 이해하기 쉬워질 거야.

1.2. 프로그램 설계

프로그램 설계는 예술이야. 쉽기도 하고, 어렵기도 하지. 쉬운 이유는 딱히 엄격한 법칙이 없어서야. 금지되지 않은 건 전부 허용되는 거지. 하지만 그게 또 어려운 이유이기도 해. 방법이 너무 많아서 제일 좋은 방법을 찾는 게 쉽지 않거든.

프로그램을 설계하는 건 책을 쓰는 것과 비슷해. 한편으로는 그냥 글자, 단어, 문장을 쓰는 건데, 다른 한편으로는 줄거리, 캐릭터 성격, 갈등, 문체, 긴장감 등을 생각해야 하는 거지.

중요한 건 누구를 위해 코드를 쓰는지 아는 거야. 그리고 코드는 다른 프로그래머를 위해서 쓰는 거야.

모든 제품의 개발은 수정 작업의 연속이야: 여기 추가하고, 저기 삭제하고, 다시 고치고. 이렇게 작은 반복으로 큰 프로젝트, 거대한 프로젝트가 완성되는 거지.

코드를 가장 잘 작성하려면 다른 프로그래머가 이해할 수 있어야 한다. 잘못됐어도 이해할 수 있는 코드는 고칠 수 있어. 맞는 코드지만 이해 안 되는 코드는 개선할 수 없어. 그냥 버릴 수밖에 없지.

그렇다면 좋은 코드, 이해하기 쉬운 코드를 어떻게 쓸 수 있을까?

이를 위해 세 가지를 해야 해:

  • 메서드 내부에서 좋은, 이해하기 쉬운 코드를 쓰는 것 — 가장 쉬운 부분
  • 프로그램에 어떤 엔티티들이 있어야 할지 결정하는 것
  • 프로그램을 논리적 부분으로 적절히 나누는 것

이 세 가지는 무엇을 의미하는 걸까?

코멘트
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION