[개발 공부 54일차] 프레임워크와 라이브러리 차이 | TTI, TTV

< 목차 >
1. 프레임워크와 라이브러리 |  공통점과 차이점
2. TTI (Time to Interactive)
3. TTV (Time to View)
4. Hydration (하이드레이션)
5. Routing (라우팅)
6. 금일 소감

 

 

1. 프레임워크와 라이브러리 |  공통점과 차이점

 

: 둘 다 소프트웨어 개발에서 코드의 재사용성을 높이고 개발 시간을 단축하기 위해 사용됨

 

 

이 두 개념을 흔히 집 짓는 과정으로 비유하곤 한다. 예시를 통해 차이점을 쉽게 이해해 보자

 

위 두 개념의 차이를 '집을 짓기 위한 과정'으로 비유하면,

프레임워크는 모델하우스를 짓는 것으로 볼 수 있고 라이브러리는 구매한 재료로 가구를 조립하는 것으로 볼 수 있다. 따라서, 프레임워크는 통제권을 프레임워크가 가지고 있고, 라이브러리는 통제권을 개발자가 가지고 있다.

 

 

프레임워크와 라이브러리는 둘 다 코드 작성에 도움되는, 타인이 작성한 코드의 집합이다.
프레임워크는 프로그램이 필요한 것을 개발자에게 알려줌으로써 *제어권을 역전하고, 라이브러리는 개발자가 필요할 때마다 설치 or 호출함으로써 개발자가 능동적으로 사용하게 된다.

 

 

* 제어역전

: 개발자가 해왔던 일(제어)을 프로그램, 즉 프레임워크가 대신 해준다는 의미

 

 

핵심 요약

프레임워크를 사용할 때는 '프레임워크 안에 코드를 작성'하지만 라이브러리를 사용할 때는 개발자가 '라이브러리를 사용하는 코드'를 작성한다. 프레임워크는 개발의 틀을 제공하는 반면, 라이브러리는 단지 유용한 도구들을 제공한다.

 

 

공통점

- 재사용성: 둘 다 재사용 가능한 코드 or 함수를 제공해 개발자가 소프트웨어를 더 빠르고 쉽게 개발할 수 있도록 돕는다.
- 기능 제공: 특정 작업을 수행하는 데 필요한 기능이나 도구를 제공한다.

 

 

 

 

차이점

• 제어 흐름
  • 라이브러리: 개발자가 애플리케이션의 흐름을 제어하고 필요할 때 라이브러리에서 제공하는 함수나 기능을 호출함. 주로 그때그때 필요에 맞게 터미널에서 설치함
  • 프레임워크: 프레임워크가 전체적인 애플리케이션의 흐름을 제어하며, 개발자는 프레임워크가 정한 규칙이나 구조에 맞추어서 코드를 작성함(이를 '제어 역전(Inversion of Control)'이라고 함).
• 목적과 범위
  • 라이브러리: 특정 기능을 수행하는 도구들의 집합으로, 개발자가 필요에 따라 선택적으로 사용함
  • 프레임워크: 애플리케이션의 기본 구조를 제공하며, 개발 과정의 많은 부분을 가이드하고 표준화함. 프레임워크 안에서 여러 라이브러리 사용 가능

 

 

[Reference]

(1) https://juyeop.tistory.com/23

(2) https://digit2sight.com/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%B0%A8%EC%9D%B4%EC%99%80-%EC%A2%85%EB%A5%98/

(3) https://velog.io/@whitecloud94/%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC-vs-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC

 

 

 

아래의 TTI(Time to Interactive), TTV(Time to View), Hydration(하이드레이션). 이 3가지 지표 및 과정은 모두 웹 성능과 사용자 경험을 최적화하는 데 중요한 역할을 한다.

 

2. TTI (Time to Interactive)

: 사용자가 페이지에 상호 작용을 시도할 때부터 페이지가 완전히 상호작용 가능한 상태가 되기까지의 시간

 

중요성

: 사용자 경험(UX)에 직접적인 영향을 미치는 지표로, 웹사이트나 앱이 실제로 사용하기에 충분히 반응성이 좋은지를 평가함

 

 

 

3. TTV (Time to View)

: 사용자가 페이지를 요청한 후, 첫 번째 콘텐츠나 페이지 전체가 화면에 표시되기 시작할 때까지의 시간

 

중요성

: 페이지 로딩 속도의 첫인상을 결정하며, 빠를수록 사용자 만족도가 높아진다. TTV는 특히 첫 화면의 로딩 속도를 가리키는 경우가 많다.

 

 

4. Hydration (하이드레이션)

: 서버에서 렌더링된 정적 HTML이 클라이언트(브라우저)에 로드된 후, 이 HTML에 JavaScript가 연결되어 동적인 기능을 활성화하는 과정

 

중요성

: 서버 사이드 렌더링(SSR)을 사용하는 웹 애플리케이션에서 초기 로딩 속도를 개선하면서도, 클라이언트 사이드에서의 상호작용이 가능하게 하는 핵심 기술

 

 

 

5. Routing (라우팅)

: 사용자가 애플리케이션 내에서 다른 페이지나 섹션으로 이동할 수 있게 해주는 기능

 

웹 애플리케이션에서 URL을 기반으로 사용자 인터페이스를 업데이트하는 방식을 말한다. React 자체에는 내장 Routing 기능이 없기 때문에, 대부분은 'react-router'와 같은 외부 라이브러리를 사용하여 구현한다. 간단히 말해, React에서 Routing은 사용자가 애플리케이션 내에서 다양한 주소(URL)를 통해 다른 뷰나 데이터를 볼 수 있도록 하는 방법이다.

 

 

핵심 포인트

• Routing 라이브러리: 'react-router' 같은 라이브러리를 사용하여 라우팅을 구현함
• 컴포넌트 기반 Routing: 특정 URL에 해당하는 컴포넌트를 렌더링하도록 설정함. 사용자가 URL을 변경하면, 해당하는 컴포넌트가 화면에 표시됨
• 선언적 Routing: 애플리케이션의 라우팅 구조를 선언적으로 작성함. 예를 들어, <Route> 컴포넌트를 사용하여 경로와 그 경로에서 렌더링할 컴포넌트를 지정함
• 동적 Routing: 애플리케이션 실행 중에 라우팅 규칙을 변경하거나 조정할 수 있음. 이를 통해 사용자 경험을 향상시키고, 애플리케이션의 유연성을 높일 수 있음

 

 

6. 금일 소감

아니 왜 분명히 들을 때는 알겠었는데 Next.js 직접 하려니까 에러가 많이 뜨지? 하 머리가 안 돌아가서 일단 자고 새벽에 다시 해봐야겠다 진짜 왜 그러지. 낼 실시간 강의 전까지 Next.js 강의 첨부터 다시 듣고 코드도 다시 짜봐야겠다. 될 때까지 한다 ㄹㅇ