- Next.js 공식문서 읽으면서 공부했다.
Foundation (From React to Next.js, How Next.js Works) - 어제 공부하다가 궁금 사항들을 적으면서 정리해보았다.
Framework vs Library
Framework
프레임워크는 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술이다.
소프트웨어에서의 프레임워크는 '소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합' 이라 할 수 있으며, 완성된 어플리케이션이 아닌 프로그래머가 완성시키는 작업을 해야합니다.
객체 지향 개발을 하게 되면서 통합성, 일관성의 부족이 발생되는 문제를 해결할 방법중 하나라고 할 수 있습니다.
Library
라이브러리는 단순 활용가능한 도구들의 집합을 말합니다.
즉, 개발자가 만든 클래스에서 호출하여 사용, 클래스들의 나열로 필요한 클래스를 불러서 사용하는 방식을 취하고 있습니다.
차이점
라이브러리와 프레임워크의 차이는 제어 흐름에 대한 주도성이 누구에게/어디에 있는가에 있습니다.
즉, 어플리케이션의Flow(흐름)를 누가 쥐고 있느냐에 달려 있습니다.
프레임워크는 전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 짜 넣으며 반면에 라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓰는 것이라고 할 수 있습니다.
다시 말해, 라이브러리는 라이브러리를 가져다가 사용하고 호출하는 측에 전적으로 주도성이 있으며 프레임워크는 그 틀안에 이미 제어 흐름에 대한 주도성이 내재(내포)하고 있습니다.
프레임워크는 가져다가 사용한다기보다는 거기에 들어가서 사용한다는 느낌/관점으로 접근할 수 있습니다.
[참고자료][프레임워크와 라이브러리의 차이점](https://webclub.tistory.com/458)
append vs appendChild
모두 부모 노드에 자식 노드를 추가하는 메서드입니다.
| append | appendChild | |
|---|---|---|
| 노드 객체(Node object) | o | o |
| 문자열(DOMString) | o | x |
| 반환값(return) | x | o |
| 다중 값 허용 | o | x |
[Javascript] append vs appendChild 차이점 (초간단)
데이터 흐름 이해 (단뱡향 데이터)
Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다.
Low-level programming language
컴퓨터가 이해하기 쉽게 작성된 프로그래밍 언어로, 일반적으로 기계어와 어셈블리어를 일컫는다. 실행속도가 매우 빠르지만 배우기가 어려우며 유지보수가 힘든 것이 단점이다. 현재는 특수한 경우가 아니면 사용되지 않는다.
번들링
번들링(bundling)은 사용자가 웹 페이지를 방문할 때 파일에 대한 요청 수를 줄이기 위해 의존성의 웹을 해결하고 파일(또는 모듈)을 브라우저에 최적화된 번들로 병합(또는 '패키지화')하는 과정이다.
Code Splitting
Code-splitting is the process of splitting the application’s bundle into smaller chunks required by each entry point. The goal is to improve the application's initial load time by only loading the code required to run that page.
코드 분할은 애플리케이션 번들을 각 진입점에 필요한 더 작은 청크로 분할하는 과정이다. 목표는 해당 페이지를 실행하는 데 필요한 코드만 로드하여 응용프로그램의 초기 로드 시간을 개선하는 것입니다.
What is Rendering?
There is an unavoidable unit of work to convert the code you write in React into the HTML representation of your UI. This process is called rendering.
React에서 작성한 코드를 UI의 HTML 표현으로 변환하는 불가피한 작업 단위가 있습니다. 이 프로세스를 렌더링이라고 합니다.
React's useEffect()를 사용하여 데이터를 가져오거나 useSWR과 같은 데이터 가져오기 후크를 선택하여 Next.js 응용 프로그램의 특정 구성 요소에 대해 클라이언트 측 렌더링을 사용하도록 선택할 수 있습니다.
In Next.js, you can opt to server-side render pages by using getServerSideProps.
In Next.js, you can opt to statically generate pages by using getStaticProps.
What is the Network?
origin servers, Content Delivery Networks (CDNs) and the Edge
Content Delivery Network
CDN은 전 세계 여러 위치에 정적 콘텐츠 (예 : HTML 및 이미지 파일)를 저장하고 클라이언트와 원본 서버 사이에 배치됩니다. 새 요청이 들어오면 사용자에게 가장 가까운 CDN 위치가 캐시된 결과로 응답할 수 있습니다.
The Edge
Edge는 사용자에게 가장 가까운 네트워크의 프린지 (또는 에지)에 대한 일반화 된 개념입니다. CDN은 네트워크의 가장자리 (가장자리)에 정적 콘텐츠를 저장하기 때문에 "The Edge"의 일부로 간주 될 수 있습니다.
CDN과 마찬가지로 Edge 서버는 전 세계 여러 곳에 분산되어 있습니다. 그러나 정적 콘텐츠를 저장하는 CDN과 달리 일부 Edge 서버는 코드를 실행할 수 있습니다. 즉, 사용자에게 더 가까운 Edge에서 캐싱과 코드 실행이 모두 가능합니다.
