next.js에서 <Link>를 사용하면 전체 페이지를 로드하지 않고 (리액트 SPA 특성 유지되면서) client-side-navigation으로 작동
=> <Link> 대신 <a> 링크로 태우면 새로고침 됌
Next.js는 자동으로 코드 스플리팅을 해줘서 각 페이지에 필요한 항목만을 로드함
* 코드 스플리팅?
페이지가 /main, /about, /post 이렇게 세 가지 페이지로 이루어진 SPA를 개발한다고 할 때 /main 페이지를 들어가는 동안 /about이나 /post 페이지 정보는 사용자에게 필요하지 않을 확률이 높다. 그러한 파일들을 분리하여 지금 사용자에게 필요한 파일만 불러올 수가 있다면 로딩도 빠르게 이루어지고 트래픽도 줄어 사용자 경험이 좋아질 수가 있다. 이와 같이 더 나은 사용자 경험을 위해 코드를 비동기적으로 로딩하는 방법이 있는데 코드 비동기 로딩의 대표적인 예시가 바로 코드 스플리팅이다.
[React] 코드 스플리팅(Code Splitting)
이번 포스팅에서는 리액트에서 코드 스플리팅이 무엇이고 어떻게 하는지에 대한 방법을 간단하게 설명해 보려고 한다. 우리가 리액트 프로젝트를 완성한 후 서비스를 사용자에게 전달하기 위
devowen.com
* 컴파일과 트랜스파일의 차이
컴파일의 경우, 한 언어로 작성된 소스 코드를 다른언어로 변환하는 것을 의미
C언어로 작성된 소스코드를 기계어로 변환하는 과정이 컴파일
트랜스파일은 한 언어로 작성된 소스코드를 비슷한 수준의 추상화(Abstraction)를 가진 다른 언어로 변환하는 것
C#으로 작성된 소스코드를 컴파일하면 소스코드와 기계어 사이의 중간 단계 언어(IL, Intermediate Language)로 변하는데,
이때 두 언어는 서로 매우 다른 추상화 수준을 가지고 있다.
그렇기 때문에 이 경우, 트랜스파일링(transpiling)했다고 말하지 않는다.
만약 TypeScript 로 작성된 코드를 컴파일하면 JavaScript 코드로 변환되는데 이 두 언어간의 추상 수준은 매우 비슷하 다.
이 때에는 '트랜스파일링' 했다라고 표현
트랜스파일이란?
트랜스파일이란? 트랜스파일(transpile)이란 어떤 특정 언어로 작성된 소스 코드를 다른 소스 코드로 변환하는 것을 말합니다.종종 트랜스파일이란 용어를 컴파일(compile)과 같은 개념으로 사용하
ooz.co.kr
'☕ 따뜻한 개발 한 잔' 카테고리의 다른 글
| 바닐라 자스(keyword프로젝트) 리팩토링 해보기 (0) | 2023.03.18 |
|---|---|
| [리액트] 리액트로 todoList 만들기 ( #1_수정해야하는 부분있음) (0) | 2022.12.07 |
| [js/html] '맨 위로' 버튼 구현하기 / '맨 아래' 버튼 구현 (주말공부) (0) | 2022.11.06 |
| [CSS] 다크모드? 생각보다 간단한 구현이었구나(주말공부) (0) | 2022.11.06 |
| [몽고db/flask] 내가 원하는 특정 댓글 삭제하기 (0) | 2022.11.01 |
댓글