프레임워크와 라이브러리 차이점에 대해 설명해주세요.
캐시의 장단점과 어떤 부분에 활용하는지 설명해주세요. 프론트엔드에서 캐시를 사용할 수 있는 2~3가지 영역을 제시해주세요
프레임워크
- 원하는 기능 구현에 집중하여 개발 할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격이자 뼈대를 의미한다.
여기서 개발자는 이 뼈대를 확장하거나 수정하여 자신만의 솔루션을 만든다.
프레임워크는 여러개의 라이브러리, 도구, 라우팅을 제공하며 높은 수준의 추상화 모듈화 또한 제공한다.
프레임워크 예시
- Java 서버 개발에 사용되는 Spring
- Python 서버 개발에 사용되는 Django, Flask
- 안드로이드 앱 개발에 사용되는 Android
- 웹 개발에 사용되는 Angular, Vue.js 등
라이브러리
- 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉 특정 기능을 모와둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미한다.
라이브러리 예시
- Node.js에서 npm으로 설치한 모듈
HTML의 클라이언트 사이드 조작을 단순화하는 JQuery
웹에서 사용자 인터페이스 개발에 사용되는 React.js
정리 : 프레임워크와 라이브러리의 차이점은 "제어 흐름"의 권한이 어디에 있는가이다.
-
라이브러리를 사용할 때 사용자는 애플리케이션 코드의 흐름을 직접 제어해야 합니다.
개발 시 필요한 기능이 있을 경우 능동적으로 라이브러리를 호출하여 사용하거나 기존에 구성된 함수나 코드를 가져다 써야 합니다.
-
반면 프레임워크는 애플리케이션의 코드가 프레임워크에 의해 사용됩니다.
애플리케이션 코드는 프레임워크가 짜 놓은 틀에서 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크가 가지고 있고 사용자가 그 안에 필요한 코드를 작성하게 됩니다.
캐시
- 캐시는 자주 쓰이는 문서의 사본을 자동으로 보관하는 HTTP 장치다.
캐시의 장점
- 불필요한 데이터 전송을 줄여서, 네트워크 요금으로 인한 비용을 줄여준다.
- 캐시는 네트워크 병목을 줄여준다. 대역폭을 늘리지 않고도 페이지를 빨리 불러올 수 있게 된다.
- 캐시는 원서버에 대한 요청을 줄여준다. 서버는 부하를 줄일 수 있으며 더 빨리 응답할 수 있게 된다.
- 캐시는 거리로 인한 지연을 줄여준다. 페이지를 먼 곳에서 불러올수록 시간이 많이 거린다.
캐시의 단점
-
메모리 공간 한계가 있습니다. 캐시는 메모리 공간에 데이터를 저장하므로 메모리 공간이 한계가 있습니다. 캐시에 저장된 데이터가 너무 많아지면 다른 프로세스나 애플리케이션에 할당할 메모리가 부족해지는 문제가 발생할 수 있습니다.
-
데이터 일관성 유지 어렵습니다. 캐시는 데이터를 미리 저장해 두므로 데이터가 변경되면 캐시도 함께 업데이트해야 합니다. 이 과정에서 일관성을 유지하는 것은 어려울 수 있습니다.
-
캐시 미스가 발생합니다. 캐시에 저장된 데이터가 메인 메모리나 디스크에 없을 경우 캐시 미스가 발생합니다. 이 경우 데이터를 메인 메모리나 디스크에서 불러와야 하므로 성능이 떨어질 수 있습니다.
FrontEnd에서 캐시를 사용 할 영역
-
JavaScript 캐시: JavaScript는 캐시를 사용하여 웹 페이지의 로딩 속도를 향상시킬 수 있습니다. JavaScript 파일을 캐시하여 웹 페이지의 로딩 시간을 단축할 수 있습니다.
-
브라우저 캐시: 브라우저는 이미 방문한 웹 페이지의 일부 데이터를 로컬에 저장하고 다시 방문할 때 불러옵니다. 이를 브라우저 캐시라고 합니다. 브라우저 캐시를 사용하면 웹 페이지의 로딩 속도를 향상시킬 수 있습니다.
-
웹 애플리케이션 캐시: HTML5에서는 웹 애플리케이션 캐시(Application Cache)를 사용하여 오프라인 상태에서도 웹 애플리케이션을 사용할 수 있습니다. 웹 애플리케이션 캐시는 사용자가 방문한 웹 페이지의 콘텐츠를 로컬에 저장하고 다음에 방문할 때 캐시된 콘텐츠를 사용합니다.
