- 이번 퀘스트에서는 바닐라 자바스크립트의 객체지향 프로그래밍을 조금 더 훈련해 보겠습니다.
- Separation of Concerns
- 객체지향의 설계 원칙
- SOLID 원칙
- Local Storage
관심사의 분리 원칙이란 무엇인가요? 웹에서는 이러한 원칙이 어떻게 적용되나요?
관심사의 분리(Separation of Concerns, SoC) 원칙은 소프트웨어 개발에서 중요한 원칙 중 하나로, 각각의 기능과 관심사를 분리하여 설계함으로써 유지보수성, 재사용성, 확장성을 높이는 것을 목표로 합니다.
웹에서는 이러한 원칙을 적용하기 위해 다양한 방법이 있습니다. 예를 들어, HTML은 문서 구조를 담당하고, CSS는 디자인 요소를 담당하며, JavaScript는 동적인 기능 구현을 담당합니다. 이렇게 각각의 역할을 분리함으로써 유지보수성과 확장성이 높아집니다.
또한 웹 프론트엔드에서는 Model-View-Controller (MVC)나 Model-View-ViewModel (MVVM)과 같은 아키텍처 패턴을 적용하여 관심사의 분리를 구현할 수 있습니다. 이러한 패턴에서는 데이터 모델, 사용자 인터페이스, 비즈니스 로직 등의 역할을 각각 다른 컴포넌트에 할당하여 분리합니다.
객체지향의 SOLID 원칙이란 무엇인가요? 이 원칙을 구체적인 예를 들어 설명할 수 있나요?
S : 단일 책임 원칙 (Single Responsibility Principle, SRP)
O : 개방-폐쇄 원칙 (Open-Closed Principle, OCP)
L : 리스코프 치환 원칙 (Liskov Substitution Principle, LSP)
I : 인터페이스 분리 원칙 (Interface Segregation Principle, ISP)
D : 의존 역전 원칙 (Dependency Inversion Principle, DIP)
예시 =>
SRP : 한 클래스는 하나의 책임만 가져야 합니다. 예를 들어, 게시판 시스템에서 게시글을 관리하는 클래스와 댓글을 관리하는 클래스는 각각 서로 다른 책임을 가지도록 구현되어야 합니다.
OCP : 소프트웨어 개발에서 새로운 요구사항이 생기더라도 기존 코드를 수정하지 않고 확장할 수 있도록 설계되어야 합니다. 예를 들어, 새로운 유형의 결제 방식이 추가되어도 기존 결제 모듈을 수정하지 않고 새로운 결제 모듈을 추가할 수 있도록 설계되어야 합니다.
LSP : 자식 클래스는 언제나 부모 클래스의 역할을 대체할 수 있어야 합니다. 예를 들어, 도형 클래스가 있고 이를 상속하는 직사각형 클래스와 정사각형 클래스가 있다면, 정사각형 클래스는 도형 클래스의 메서드를 그대로 사용할 수 있어야 합니다.
ISP : 인터페이스는 클라이언트에서 사용하는 메서드만 정의되어야 합니다. 예를 들어, 사용자 인증 시스템에서는 사용자 인증 인터페이스와 사용자 정보 인터페이스가 각각 구현되어야 하며, 클라이언트에서는 필요한 메서드만 사용할 수 있어야 합니다.
DIP : 의존 관계는 추상화에 의존해야 합니다. 예를 들어, 로깅 기능을 구현할 때, 로깅을 위한 인터페이스를 추상화하고, 구체적인 로깅 방식을 구현하는 클래스는 이 인터페이스를 구현해야 합니다.
로컬 스토리지란 무엇인가요? 로컬 스토리지의 내용을 개발자 도구를 이용해 확인하려면 어떻게 해야 할까요?
로컬 스토리지(Local Storage)는 웹 브라우저의 클라이언트 측 저장소 중 하나로, HTML5에서 추가된 웹 스토리지 API입니다
사용법 =>
로컬 스토리지의 내용을 개발자 도구를 이용해 확인하려면, 크롬 브라우저에서 F12 키를 눌러 개발자 도구를 열고, Application 탭을 선택합니다. 그리고 좌측 메뉴에서 Local Storage 항목을 선택하면, 현재 웹 사이트에서 사용하는 로컬 스토리지의 내용을 확인할 수 있습니다.
- 외부 라이브러리나 프레임워크를 사용하지 않고, 자바스크립트를 이용하여 간단한 웹브라우저 기반의 텍스트 에디터를 만들어 보겠습니다.
- 기본적으로 VSCode와 같이 탭을 이용해 여러 개의 파일을 동시에 편집할 수 있습니다.
- 탭을 눌러 열려 있는 다른 파일을 편집할 수 있으며 탭을 언제든지 닫을 수 있습니다.
- VSCode와 같이 새 파일, 로드, 저장, 다른 이름으로 저장 등의 기능을 가집니다. 저장은 웹 브라우저의 로컬 스토리지를 이용합니다.
- VSCode와 같이 탭이 수정되었는데 저장되기 이전일 경우 이를 알려주는 인디케이터가 작동합니다.
- 같은 이름의 파일을 저장할 경우 에러를 표시해야 합니다.
- 이번 퀘스트의 결과물은 앞으로의 많은 퀘스트에서 재사용되게 되니, 주의깊게 코드를 작성해 보세요!
- 웹 프론트엔드 개발에서 이러한 방식의 패턴을 더 일반화해서 정리할 수 있을까요? 이 퀘스트에서 각각의 클래스들이 공통적으로 수행하게 되는 일들에는 무엇이 있을까요?