- 이번 퀘스트에서는 바닐라 자바스크립트의 객체지향 프로그래밍을 조금 더 훈련해 보겠습니다.
- Separation of Concerns
- 객체지향의 설계 원칙
- Local Storage
- 관심사의 분리 원칙이란 무엇인가요? 웹에서는 이러한 원칙이 어떻게 적용되나요?
- 관심사 분리(Separation of concerns, Soc)는 컴퓨터 프로그램을 구별된 부분으로 분리시키는 디자인 원칙으로, 각 부문은 개개의 관심사를 해결한다.
- 관심사, 책임, 기능을 한가지씩 담당하는 개별적인 객체(부분)으로 분리해야 한다는 설계원칙이다.
- 관심사 분리 원칙을 구현하기 위해 단일책임 원칙, 개방폐쇄 원칙, 인터페이스 분리 원칙을 달성할 수 있다.
- Application의 functional programming(class)을 통해 각각의 동작이 OOP의 기본적인 분리원칙을 준수하고 있는지 파악이 가능하다.
- unit test를 통한 동작 확인이나, 이러한 확인 과정을 통해 객체지향 프로그래밍이 잘 진행되고 있는지 확인할 수 있다.
- 객체지향의 SOLID 원칙이란 무엇인가요? 이 원칙을 구체적인 예를 들어 설명할 수 있나요?
- 1. SRP: 단일 책임 원칙(Single Responsibility Principle)
- 클래스는 단 하나의 책임을 가져야 한다는 원칙.
- 객체지향에 있어서 책임이란 객체가 할 수 있는것과 해야 하는 것으로 나뉘어져 있다.
- 하나의 객체는 자신이 할 수 있는 것과 해야하는 것만 수행 할 수 있도록 설계되어야 한다는 법칙이다.
- 2. OCP: 개방-폐쇄 원칙(Open-Closed Principle)
- 기존의 코드를 변경하지 않으면서 기능을 추가할 수 있도록 설계되어야 한다는 뜻이다.
- OCP에서 중요한 것은 요구사항이 변경되었을 때 코드에서 변경되어야 하는 부분과 변경되지 않아야 하는 부분을 명확하게 구분하여, 변경되어야 하는 부분을 유연하게 작성하는 것을 의미한다.
- 또한 확장에는 유연하게 반응하며 변경은 최소화하는 것을 의미한다.
- 3. LSP: 리스코프 치환 원칙(Liskov Substitution Principle)
- 리스코프 치환 원칙은 일반화 관계에 대한 이야기이며 자식 클래스는 최소한 자신의 부모 클래스에서 가능한 행위를 수행할 수 있어야 한다는 의미.
- LSP를 만족한다면 부모 클래스의 인스턴스 대신에 자식 클래스의 인스턴스로 대체해도 프로그램의 의미는 변화되지 않는다.
- 서브 클래스가 슈퍼클래스의 책임을 무시하거나 재정의 하지 않고 확장 수행하는 것을 의미한다.
- 4. ISP: 인터페이스 분리 원칙(Interface Segregation Principle)
- 인터페이스 분리 원칙은 클라이언트에서는 클라이언트 자신이 이용하지 않는 메서드에는 의존하지 않아야 한다는(= 영향을 받지 않아야 한다는) 원칙이다.
- 인터페이스 분리 원칙은 큰 덩어리의 인터페이스들을 구체적이고 작은 단위들로 분리시킴으로써 클라이언트들이 꼭 필요한 메서드들만 이용할 수 있게 한다.
- 이와 같은 작은 단위들을 역할 인터페이스라고도 부른다.
- 인터페이스 분리 원칙을 통해 시스템 내부 의존성을 약화시켜 리팩토링, 수정, 재배포를 쉽게 할 수 있다. (GRASP의 밀착 원칙과 비슷)
- 5. DIP: 의존 역전 원칙(Dependency Inversion Principle)
- 객체 지향 프로그래밍에서 의존관계 역전 원칙은 소프트웨어 모듈들을 분리하는 특정 형식을 지칭한다.
- 이 원칙을 따르면 상위 계층(정책 결정)이 하위 계층(세부 사항)에 의존하는 전통적인 의존관계를 반전(역전)시킴으로써 상위 계층이 하위 계층의 구현으로부터 독립되게 할 수 있다.
=> 객체는 객체보다 인터페이스에 의존해야함
=> 가급적 객체의 상속은 인터페이스를 통해 이루어져야 함
- 로컬 스토리지란 무엇인가요? 로컬 스토리지의 내용을 개발자 도구를 이용해 확인하려면 어떻게 해야 할까요?
- 웹사이트의 cookie, session과 같은 정보들을 개인PC의 라이브러리 등 특정 공간에 저장하면서 사용자 맞춤적인 사이트 구동에 참조하는 저장소를 의미합니다.
- 해당 정보들이 저장되어 있는 공간을 웹사이트가 참조하여, 사용자가 방문했던 이력 및 관심사 등을 파악하고 이를 이후 동작에서 활용합니다.
- 개발자도구의 응용프로그램 탭에서 확인할 수 있고, 로컬PC 라이브러리와 어떤 정보를 주고받았는지 파악할 수 있습니다.
- 외부 라이브러리나 프레임워크를 사용하지 않고, 자바스크립트를 이용하여 간단한 웹브라우저 기반의 텍스트 에디터를 만들어 보겠습니다.
- 기본적으로 VSCode와 같이 탭을 이용해 여러 개의 파일을 동시에 편집할 수 있습니다.
- 탭을 눌러 열려 있는 다른 파일을 편집할 수 있으며 탭을 언제든지 닫을 수 있습니다.
- VSCode와 같이 새 파일, 로드, 저장, 다른 이름으로 저장 등의 기능을 가집니다. 저장은 웹 브라우저의 로컬 스토리지를 이용합니다.
- VSCode와 같이 탭이 수정되었는데 저장되기 이전일 경우 이를 알려주는 인디케이터가 작동합니다.
- 같은 이름의 파일을 저장할 경우 에러를 표시해야 합니다.
- 이번 퀘스트의 결과물은 앞으로의 많은 퀘스트에서 재사용되게 되니, 주의깊게 코드를 작성해 보세요!
- 웹 프론트엔드 개발에서 이러한 방식의 패턴을 더 일반화해서 정리할 수 있을까요? 이 퀘스트에서 각각의 클래스들이 공통적으로 수행하게 되는 일들에는 무엇이 있을까요?