-
면접대비 5. 프레임워크 & 라이브러리 차이점 6. 캐시의 장단점과 프론트엔드에서 캐시를 사용할 수 있는 영역항해99 2023. 3. 29. 13:54728x90
5. 프레임워크와 라이브러리 차이점에 대해 설명해주세요.
프레임워크와 라이브러리의 차이점은 "제어 흐름"의 권한이 어디에 있는가입니다.
라이브러리를 사용할 때 사용자는 애플리케이션 코드의 흐름을 직접 제어해야 합니다.
개발 시 필요한 기능이 있을 경우 능동적으로 라이브러리를 호출하여 사용하거나 기존에 구성된 함수나 코드를 가져다 써야 합니다.반면 프레임워크는 애플리케이션의 코드가 프레임워크에 의해 사용됩니다.
애플리케이션 코드는 프레임워크가 짜 놓은 틀에서 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크가 가지고 있고 사용자가 그 안에 필요한 코드를 작성하게 됩니다.여기서 제어의 역전(IoC, Inversion of Control)이란,
어떠한 일을 하도록 만들어진 Framework에 Control 권한을 위임하는 것을 의미하는데,
간단히 말해 프로그램의 제어 흐름 구조가 뒤바뀐 것을 뜻합니다.라이브러리의 경우 애플리케이션의 흐름을 사용자가 직접 제어해야 하지만 프레임워크의 경우 코드를 연결할 수 있는 위치를 제공하고 필요에 따라 사용자가 연결한 코드를 호출하는 제어 흐름 권한을 가지고 있습니다.
라이브러리는 일반적으로 다른 프로그램에서 사용될 수 있는 독립적인 코드의 집합으로, 필요에 따라 호출하여 사용할 수 있습니다. 라이브러리는 특정 기능이나 작업을 수행하기 위해 코드를 재사용하는데 사용됩니다.
반면 프레임워크는 더 큰 규모의 구조를 가진 개발환경이며, 프로그래머가 어떻게 코드를 구성하고 구현할지에 대한 구체적인 지침을 제공합니다. 프레임워크는 라이브러리와 달리, 개발자가 필요한 기능을 호출, 재사용하는게 아니라 개발자가 작성한 코드를 프레임워크가 제공하는 규칙과 패턴에 맞게 연결하고 실행합니다. 즉, 프레임워크는 애플리케이션의 전반적인 아키텍쳐를 관리하며 개발자가 작성한 코드가 프레임워크와 함께 동작하도록 하는 역할을 합니다.
따라서 라이브러리는 개발자가 호출하여 사용하고자 하는 특정 기능을 수행하는 코드의 모음이며, 프레임워크는 애플리케이션의 아키텍쳐를 관리하고 개발자가 작성한 코드가 프레임워크와 함께 동작하도록하는 개발환경입니다.
요약: 프레임원크와 라이브러리의 차이는 "제어 흐름"의 권한이 어디에 있는가입니다. 라이브러리를 사용할 때에는 유저가 코드의 흐름을 직접 제어해야하고, 필요한 기능이 있을 시에 라이브러리를 능동적으로호출하여 사용합니다. 반면 프레임워크는 프레임워크가 짜놓은 틀에서 애플리케이션 코드가 수동적으로 동작하기 때문에 제어의 흐름은 프레임워크가 가지고있고, 사용자가 그 안에서 필요한 코드를 작성하게됩니다.
6. 캐시의 장단점과 어떤 부분에 활용하는지 설명해주세요. 프론트엔드에서 캐시를 사용할 수 있는 2~3가지 영역을 제시해주세요
캐시의 개념: 웹 프론트엔드에서 필요한 데이터를 매번 서버에 요청해서 가져와 사용하는 것은 비효율적입니다. 서버에 부담을 줄 뿐더러 시간도 오래 걸립니다. 만약 같은 요청에 같은 데이터를 응답하는 요청이라면 데이터를 메모리에 저장해놓고 쓰는 것이 효율적일 것입니다. 이렇게 응답 데이터의 사본을 저장하는 공간을 캐시라고 합니다.
웹캐시 동작 원리: 웹 캐시는 네트워크 상 웹 서버와 브라우저의 중간에 위치합니다. 원본 콘텐츠 요청을 서버로부터 받은 후 복사본을 만들어 저장하고 클라이언트에게 응답합니다.
그 후에 같은 요청이 오면 웹 서버에 요청하지 않고 저장해놓은 복사본을 사용자에게 응답합니다. 이렇게해서 웹 서버의 부하는 줄어들고 요청에 대한 응답속도는 빨라집니다.
캐시의 장점은 계산, 접근시간 없이 빠른속도로 데이터에 접근할 수 있습니다. 단점으로는 비용이 비싸고, 메모리공간이 상대적으로 작습니다.
프론트엔드에서는 캐시를 웹 서비스 최적화에 사용합니다. 여러번 요청해도 같은 이미지, CSS, JS같은 정적 컨텐츠를 캐시를 사용합니다.
프론트엔드에서 캐시를 이용하는 영역
- 브라우저캐시를 이용해 다음에 다른 페이지를 방문할 때 서버에서 자원을 다시 다운로드하지 않아도 되게합니다.
- 애플리케이션 캐시는 HTML5에서 지원합니다. 애플리케이션 캐시는 웹 애플리케이션의 자원들을 로컬저장소에 저장하여 오프라인 상태에서도 애플리케이션을 실행할 수 있게 합니다.
- 로컬 스토리지 HTML5에서 지원하는 로컬스토리지는 브라우저 내부에 데이터를 저장하는 기능을 제공합니다. 저장된 데이터는 다음에 같은 웹페이지를 방문할 떄 다시 서버에서 받아올 필요 없이 로컬에서 바로 가져올 수 있습니다.
- 쿠키는 브라우저에 저장되는 작은 텍스트파일로, 웹페이지와 상호작용할 떄 사용됩니다. (쇼핑몰에서 사용자가 장바구니에 사품을 담았을 때 이 정보를 쿠키에 저장하여 다음에 같은 쇼핑몰을 방문할 때 상품을 유지시킬 수 있습니다.
요약: 캐시를 이용함으로써 웹 서버로 동일한 요청을 하지 않기때문에 빠르게 처리할 수 있어 전체적인 시스템 성능이 향상됩니다. 데이터의 사본을 저장해놓고 쓰기때문에 캐시에 저장된 데이터를 불러오는 것이 디스크나 네트워크에서 데이터를 가져오는 것보다 훨씬 빠릅니다. 또한, 반복적으로 데이터나 값을 불러오지않아도 됨으로써 시스템 리소스를 효율적으로 활용할 수 있습니다. 단점은 캐시에 저장된 데이터가 일정시간이 지나면 만료되어 데이터가 업데이트되어도 캐시에 기존 데이터가 남아있는 경우 일관성유지문제가 발생할 수 있습니다. 프론트엔드에서 캐시를 사용하는 영역은 브라우저캐시, 애플리케이션캐시, 로컬스토리지, 쿠키 등이 있습니다.
728x90'항해99' 카테고리의 다른 글
9. this의 동작원리, 용법 10.브라우저 저장소간의 차이점 (0) 2023.04.02 면접대비 7. HTTP메세지구조 8. CSS position속성 (0) 2023.03.30 면접대비-3. Hoisting & TDZ 4.Parameter, argument차이 (0) 2023.03.28 면접대비-1. 웹페이지가 브라우저에 렌더링되는 과정, 2. Restful API (0) 2023.03.27 [항해 11기 수료] 집에 플랜카드 달게된 사연 (0) 2023.03.23