- 이번 퀘스트에서는 바닐라 자바스크립트의 객체지향 프로그래밍을 조금 더 훈련해 보겠습니다.
- Separation of Concerns
- 객체지향의 설계 원칙
- SOLID 원칙
- Local Storage
-
관심사의 분리 원칙이란 무엇인가요? 웹에서는 이러한 원칙이 어떻게 적용되나요?
-
소프트웨어 디자인의 기본 원칙 중 하나이며, 서로 다른 기능을 수행하는 부분을 서로 독립적인 모듈로 분리함으로써 소프트웨어를 더욱 모듈화하고 관리하기 쉽게 만드는 방법입니다. -> 이러한 분리는 소프트웨어의 유지보수, 확장 및 재사용을 용이하게 만들어 줍니다. 각 모듈은 자신의 목적에만 집중하고, 다른 모듈과의 상호작용을 최소화하여 각각 독립적으로 개발, 변경, 유지보수 및 테스트할 수 있습니다.
-
웹에서 이러한 원칙은 일반적으로 백엔드(Backend)와 프론트엔드(Frontend)를 분리하여 관심사를 분리하고 있습니다. -> 백엔드는 데이터 처리, 비즈니스 로직 처리 등의 역할을 하고, 프론트엔드는 UI 디자인 및 사용자 인터페이스 제공 등의 역할을 합니다.
-
-
객체지향의 SOLID 원칙이란 무엇인가요? 이 원칙을 구체적인 예를 들어 설명할 수 있나요?
-
객체지향의 SOLID 원칙은 소프트웨어 디자인에서 유지보수, 확장, 재사용, 테스트 등의 품질을 향상시키기 위한 원칙이다.
-
SRP(Single Responsibility Principle) : 단일 책임 원칙 -> 하나의 클래스는 하나의 책임만 가져야 한다.
-
OCP(Open Closed Principle) : 개방-폐쇄 원칙 -> 기존의 코드를 변경하지 않으면서 기능을 추가할 수 있도록 설계되어야 한다는 뜻이다.
-
LSP(Liskov Substitution Principle) : 리스코프 치환 원칙 ->리스코프 치환 원칙은 일반화 관계에 대한 이야기이며 자식 클래스는 최소한 자신의 부모 클래스에서 가능한 행위를 수행할 수 있어야 한다는 의미이다. ->서브 타입은 언제나 자신의 기반 타입으로 교체할 수 있어야 한다.
-
ISP(Interface Segregation Principle) : 인터페이스 분리 원칙 ->클라이언트는 자신이 사용하지 않는 메서드에 의존하도록 강요받지 않아야 한다.(영향을 받지 않도록)
-
DIP(Dependency Inversion Principle) : 의존 역전 원칙 ->추상화에 의존해야 하며, 구체화에 의존해서는 안 된다. ->이 원칙을 따르면, 상위 계층(정책 결정)이 하위 계층(세부 사항)에 의존하는 전통적인 의존관계를 반전(역전)시킴으로써 상위 계층이 하위 계층의 구현으로부터 독립되게 할 수 있다
-
-
로컬 스토리지란 무엇인가요? 로컬 스토리지의 내용을 개발자 도구를 이용해 확인하려면 어떻게 해야 할까요?
-
로컬 스토리지는 웹 브라우저 내에 존재하는 클라이언트 사이드 저장소 중 하나로, 사용자의 브라우저에 데이터를 저장할 수 있습니다. 이를 이용하여 웹 페이지에서 작성한 데이터를 브라우저에 저장하거나, 웹 페이지 간에 데이터를 공유하는 등 다양한 용도로 사용할 수 있습니다.
-
HTML5에서 처음 등장하였으며, key-value 쌍의 형태로 데이터를 저장합니다. 즉, key를 이용하여 value 값을 가져올 수 있습니다.
-
브라우저의 개발자 도구에서 Application 탭을 열고, 왼쪽 메뉴에서 Storage > Local Storage를 선택합니다. 이후에 저장된 key-value 쌍의 리스트가 표시됩니다. 개발자 도구에서는 이를 선택하고, 값(value)을 확인하거나 수정할 수 있습니다.
-
- 외부 라이브러리나 프레임워크를 사용하지 않고, 자바스크립트를 이용하여 간단한 웹브라우저 기반의 텍스트 에디터를 만들어 보겠습니다.
- 기본적으로 VSCode와 같이 탭을 이용해 여러 개의 파일을 동시에 편집할 수 있습니다.
- 탭을 눌러 열려 있는 다른 파일을 편집할 수 있으며 탭을 언제든지 닫을 수 있습니다.
- VSCode와 같이 새 파일, 로드, 저장, 다른 이름으로 저장 등의 기능을 가집니다. 저장은 웹 브라우저의 로컬 스토리지를 이용합니다.
- VSCode와 같이 탭이 수정되었는데 저장되기 이전일 경우 이를 알려주는 인디케이터가 작동합니다.
- 같은 이름의 파일을 저장할 경우 에러를 표시해야 합니다.
- 이번 퀘스트의 결과물은 앞으로의 많은 퀘스트에서 재사용되게 되니, 주의깊게 코드를 작성해 보세요!
- 웹 프론트엔드 개발에서 이러한 방식의 패턴을 더 일반화해서 정리할 수 있을까요? 이 퀘스트에서 각각의 클래스들이 공통적으로 수행하게 되는 일들에는 무엇이 있을까요?