프레임워크와 라이브러리・ 캐시

 

📌 프레임워크(Framework)와 라이브러리(Library)

 

 

프레임워크란?

원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미한다.

 

애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 연동과 같은 기능들을 위해 어느 정도 뼈대(구조)를 제공하며 이러한 뼈대 위에서 사용자는 코드를 작성하여 애플리케이션을 개발한다. 앱/서버 등의 구동, 메모리 관리, 이벤트 루프 등의 공통된 부분은 프레임워크가 관리하며, 사용자는 프레임워크가 정해준 방식대로 클래서, 메서드들을 구현하면 된다.

 

 

예

• Java 서버 개발에 사용되는 Spring
• Python 서버 개발에 사용되는 Django, Flask
• 안드로이드 앱 개발에 사용되는 Android
• 아이폰 앱 개발에 사용되는 Cocoa Touch
• 웹 개발에 사용되는 Angular, Vue.js 등
• 자바 기반의 JSP를 위한 프레임 워크 Struts
• 루비로 작성된 MVC패턴을 이용하는 Ruby on Rails

 

많이 사용하는 프론트엔드 프레임워크

React, Vue, Angular, Svelte, JQuery, Ember, Backbone, Semantic UI, Foundation 및 Preact이다.

 

 

---

 

 

라이브러리란?

소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임.

즉 특정 기능을 모와둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미한다.

 

 

예

• Python pip로 설치한 패키지/모듈 (tensorflow, pandas, beautifulsoup 등등)
• C++의 표준 템플릿 라이브러리 (STL)
• Node.js에서 npm으로 설치한 모듈
• HTML의 클라이언트 사이드 조작을 단순화하는 JQuery

 

 

---

 

프레임워크와 라이브러리의 차이점

 

프레임워크는 단지 미리 만들어준 반제품이나, 확장해서 사용할 수 있도록 준비된 추상 라이브러리의 집합이 아니다. 프레임워크가 어떤 것인지 이해하려면 라이브러리와 프레임워크가 어떻게 다른지 알아야 한다.

라이브러리를 사용하는 애플리케이션 코드는 애플리케이션 흐름을 직접 제어한다.
단지 동작하는 중에 필요한 기능이 있을 때 능동적으로 라이브러리를 사용할 뿐이다.

반면에 프레임워크는 거꾸로 애플리케이션 코드가 프레임워크에 의해 사용된다.
프레임워크에는 분명한 [제어의 역전] 개념이 적용되어 있어야 한다.

애플리케이션 코드는 프레임워크가 짜 놓은 틀에서 수동적으로 동작해야 한다.

- 토비의 스프링中

 

프레임워크와 라이브러리의 차이점은 "제어 흐름"의 권한이 어디에 있는가이다.

 

라이브러리를 사용할 때 사용자는 애플리케이션 코드의 흐름을 직접 제어해야 한다.
개발 시 필요한 기능이 있을 경우 능동적으로 라이브러리를 호출하여 사용하거나 기존에 구성된 함수나 코드를 가져다 써야 한다. 

 

반면 프레임워크는 애플리케이션의 코드가 프레임워크에 의해 사용된다.
애플리케이션 코드는 프레임워크가 짜 놓은 틀에서 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크가 가지고 있고 사용자가 그 안에 필요한 코드를 작성하게 된다.

 

* 제어의 역전(IoC, Inversion of Control)

이란,

 

어떠한 일을 하도록 만들어진 Framework에 Control 권한을 위임하는 것을 의미하는데, 

 

간단히 말해 프로그램의 제어 흐름 구조가 뒤바뀐 것을 뜻합니다. 

라이브러리의 경우 애플리케이션의 흐름을 사용자가 직접 제어해야 하지만 프레임워크의 경우 코드를 연결할 수 있는 위치를 제공하고 필요에 따라 사용자가 연결한 코드를 호출하는 제어 흐름 권한을 가지고 있습니다.

 

 

 

 

---

 

 

 

📌 캐시

 

 

캐시의 장단점

 

캐시란 자주 사용하는 데이터나 값을 미리 복사해 놓은 임시 장소를 의미한다.

 

장점

• 캐시에 데이터를 미리 복사해 놓으면, 계산이나 접근 시간 없이 더 빠른 속도로 데이터를 접근 할 수 있습니다. 반복적으로 동일한 결과를 돌려주는 경우(특정 이미지 or 썸네일) 사용하거나 접근 시간에 비해 원래 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고자 하는 경우에 사용한다.

단점

• 메모리 저장공간은 속도가 빠를 수록 용량이 작고 가격이 높습니다. 그래서 가격때문에 캐시에 저장할 적은 양의 정보를 잘 선택하는 것이 비용도 절약하고 효율도 높이는 방법이다.

 

프론트엔드에서는 이미지, CSS, JS 등을 캐싱하여 웹 페이지 로딩 속도를 향상시키는데 활용된다.
이를 통해 사용자는 빠르게 페이지를 로딩할 수 있어 더 나은 사용자 경험을 누릴 수 있다.
또한, 캐시를 활용하면 서버에 부하를 줄일 수 있어 더 나은 서비스를 제공할 수 있다.


다만, 사용자에 따라 개인화된 페이지나 콘텐츠가 자주 변하는 페이지의 경우에는 캐시를 하지 않는 것이 좋다.

 

 

 

---

 

 

 

프론트엔드에서 캐시를 사용할 수 있는 2~3가지 영역은?

 

 

브라우저 캐싱

• 이전에 방문했던 페이지, 제목의 썸네일 등을 서버로 요청하지 않고, 브라우저에 캐싱을 해두면 사용자는 자신의 요청을 서버로부터 기다리지 않고, 바로 캐시메모리로 응답 받을 수 있어 웹 서핑이 빠르다고 느끼고, 서버는 불필요한 요청을 받지않아 과부하를 피할수 있다. (한번 받아온 리소스들을 재사용하여 속도가 빨라짐)

 

Proxy

• 웹 브라우저와 서버 사이에 proxy 라는 것을 두는 방식이다.
  proxy는 “대리인” 이라는 뜻의 영어 단어로서, 중간에서 뭔가를 대신해주는 것을 '프록시'라고 한다.
  프록시의 경우 여러 컴퓨터로부터 요청을 받고 처리하다 보니 같은 데이터가 자주 접근될 확률이 높아져서 캐시의 성능이 좋아지고, 데이터를 캐시에서 반환하는 확률이 더 높아진다.
  (조직 내에서 접속하는 웹사이트의 리소스들을 캐시하여 속도가 빨라지고 네트워크 사용량을 줄임)