- 이번 퀘스트에서는 바닐라 자바스크립트의 객체지향 프로그래밍을 조금 더 훈련해 보겠습니다.
- Separation of Concerns
- 객체지향의 설계 원칙
- SOLID 원칙
- Local Storage
- 관심사의 분리 원칙이란 무엇인가요? 웹에서는 이러한 원칙이 어떻게 적용되나요?
관심사의 분리는 프로그램이 개별 섹션을 가져야 하며 각 섹션이 자체 관심사를 담당해야 한다는 생각에 중점을 둔 소프트웨어 개발의 지침 원칙이다. 웹에서는 HTML,CSS와 자바스크립트를 분리함으로써 관심사의 분리 원칙이 적용된다
- 객체지향의 SOLID 원칙이란 무엇인가요? 이 원칙을 구체적인 예를 들어 설명할 수 있나요?
SOLID 원칙은 객체 지향 프로그래밍을 하면서 지켜야하는 5대원칙이다. S:단일 책임 원칙
단일 책임 원칙은 카운터에서 음식을 조리하지 않듯 하나의 클래스에 모든 기능을 넣지 않고 기능을 분류해 각 역할에 관한 것에만 책임을 져야한다는 것이다. O:개방 폐쇄 원칙 더 구체적인 이름은 확장은 개방, 수정은 폐쇄 원칙이다. 이는 에어비엔비의 원리와 같다. 호스트의 주거 공간을 매입으로 확장은 쉽지만 주거 공간을 함부로 수정할 수 없다. 이처럼 본 클래스에 기능을 추가하는 것이 아닌 하위 클래스를 생성함으로써 기능을 확장하는 것이다. L:리스코프 치환 원칙 자식이 부모와 똑같은 신체적 특징을 물려받았지만 세부적인 생김새는 다른 것처럼 부모 클래스에게서 물려받은 메서드명을 일치시키고, 세부적인 내용을 다르게 하여 복제품을 찍어내는 것이다. I:인터페이스 분리 원칙 클라이언트가 자신이 이용하지 않는 메서드에 의존하지 않아야 한다는 원칙이다. 큰 덩어리의 인터페이스들을 구체적이고 작은 단위들로 분리시킴으로써 클라이언트들이 꼭 필요한 메서드만 이용할 수 있게 한다. 즉 각 인터페이스들이 간섭을 일으키지 않아야 하고, 서로의 내부의 동작과 직접적으로 연결되어서도 안되는 법칙이다. D:의존성 역전 원칙 승객-버스기사로 예를 들면 승객의 도착여부는 기사에게 달려있다. 승객은 의존하는 객체이고 버스기사는 의존받는 객체이다. 이러한 관계에서 승객이 기사에게 과도한 요구 사항(집 앞까지 데려다주세요 같이)을 요청하여 버스기사가 이에 따른다면 버스노선도란 시스템이 무너진다. 이처럼 의존관계가 뒤바뀌면 시스템이 무너질 수 있다. 그래서 '대리인'이라는 기능을 넣어서 의존관계가 역전되는 것을 방지한다.버스에선 하차벨이라는 '대리인'기능을 넣어 승객의 의견이 직접적으로 전달되지 않도록 한다. 객체지향 설계는 반드시 인터페이스 클래스와 중앙시스템 사이에 대리인 클래스가 존재해야 한다.
- 로컬 스토리지란 무엇인가요? 로컬 스토리지의 내용을 개발자 도구를 이용해 확인하려면 어떻게 해야 할까요?
로컬 스토리지는 만료기간이 존재하지 않으며 페이지를 변경하거나 브라우저를 닫아도 반 영구적으로 유지되는 저장소를 의미한다. 개발자도구를 열어서 Application 항목을 통해 로컬스토리지를 확인할 수 있다.
- 외부 라이브러리나 프레임워크를 사용하지 않고, 자바스크립트를 이용하여 간단한 웹브라우저 기반의 텍스트 에디터를 만들어 보겠습니다.
- 기본적으로 VSCode와 같이 탭을 이용해 여러 개의 파일을 동시에 편집할 수 있습니다.
- 탭을 눌러 열려 있는 다른 파일을 편집할 수 있으며 탭을 언제든지 닫을 수 있습니다.
- VSCode와 같이 새 파일, 로드, 저장, 다른 이름으로 저장 등의 기능을 가집니다. 저장은 웹 브라우저의 로컬 스토리지를 이용합니다.
- VSCode와 같이 탭이 수정되었는데 저장되기 이전일 경우 이를 알려주는 인디케이터가 작동합니다.
- 같은 이름의 파일을 저장할 경우 에러를 표시해야 합니다.
- 이번 퀘스트의 결과물은 앞으로의 많은 퀘스트에서 재사용되게 되니, 주의깊게 코드를 작성해 보세요!
- 웹 프론트엔드 개발에서 이러한 방식의 패턴을 더 일반화해서 정리할 수 있을까요? 이 퀘스트에서 각각의 클래스들이 공통적으로 수행하게 되는 일들에는 무엇이 있을까요?