트리셰이킹을 활용한 프론트엔드 성능 최적화 기법
트리셰이킹의 개념과 작동 원리
트리셰이킹은 불필요한 자바스크립트 코드를 정적 분석을 통해 제거하는 최적화 기법입니다. 이 용어는 '나무를 흔들어 쓸모없는 잎사귀를 떨어뜨리는 것'에 비유되며, 실제 구현에서는 코드의 추상구문 트리(АST)를 기반으로 사용되지 않는 모듈이나 함수를 식별하고 삭제합니다.
이 기법은 ES6 모듈 시스템의 정적 구조성에 의존합니다. ...
6월 10일 22:51에 게시됨
React 기반 테이블 컴포넌트 구현 가이드
프로젝트 구조 및 구성 요소 설명
기본적인 React 프로젝트 구조는 다음과 같습니다:
table-demo/
├── public/
│ └── index.html
├── src/
│ ├── components/
│ │ └── DataTable.jsx
│ ├── App.jsx
│ └── index.jsx
├── package.json
└── README.md
public/: 정적 파일과 기본 HTML 문서를 포함합니다.
src/: 애플리케이션의 핵심 소스 코드가 위치합 ...
6월 6일 02:42에 게시됨
MERN 기술 스택 고급 튜토리얼 (7)
서버 렌더링
이 장에서는 React의 핵심 개념 중 하나인 서버에서 HTML을 생성하는 기능을 탐구합니다. 이를 통해 동일한 코드베이스를 사용해 서버와 클라이언트 모두에서 렌더링할 수 있는 동일성 애플리케이션(isomorphic app)을 구축할 수 있습니다.
기존의 단일 페이지 애플리케이션(SPA)은 초기에 빈 문서를 로드하고, 데이터를 비동기적으로 가져와 브라우저에서 DOM ...
5월 23일 10:42에 게시됨