| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
- 비전공자
- useMemo
- TypeScript
- 자바스크립트
- 프론트엔드
- next.js
- 모던 딥 다이브 자바스크립트
- 리액트
- styled-components
- 개발 공부
- 내일배움카드
- JavaScript
- 이벤트
- 패스트캠퍼스
- 알고리즘
- 자료구조
- 공식문서
- GIT
- 프로그래머스
- MegabyteSchool
- react
- 코딩테스트
- 입문
- 메가바이트스쿨
- useRef
- Github
- CSS
- 국비지원교육
- 모던 자바스크립트 딥 다이브
- 개발자취업부트캠프
- Today
- Total
목록Front-End/Next.js (2)
개발 기록 남기기✍️
[Next.js] 서버 컴포넌트와 클라이언트 컴포넌트
Next.js 13버전을 사용하면서 Server Component와 Client Component의 존재에 대해서 알게 되었는데, SSR, CSR 등과의 지식이 섞이니까 헷갈린다..! 파이널 프로젝트 시작 전 확실히 짚고 넘어가보자.🏃♀️ 📌 클라이언트 컴포넌트란? 클라이언트 사이드 컴포넌트는 클라이언트(브라우저)에서 렌더되고 fetch되는 컴포넌트이다. 클라이언트 컴포넌트는 브라우저의 자바스크립트 번들을 포함하고 있는 일반적인 리액트 컴포넌트이다. 클라이언트 컴포넌트는 다음과 같은 특징을 갖는다. 클라이언트 컴포넌트는 onClick 같은 상호작용성(인터랙션)을 포함한다. 클라이언트 컴포넌트는 클라이언트라고 불리는 브라우저에서 렌더된다. 클라이언트 컴포넌트는 "use client"라고 선언함으로써 클라..
[Next.js] 렌더링 기법 (CSR, SSR, SSG, ISR)
🗂️ 용어 정리 ❓렌더링이란? 렌더링이란 렌더링 엔진에 의해 HTML 문서 요소를 실제 화면에 그리는 작업을 의미하기도 한다. 하지만, 해당 글에서의 렌더링은 화면에 보일 HTML 문서를 완성하는 작업을 의미한다. ❓TTV & TTI TTV : Time To View ➡️ 유저가 사이트를 볼 수 있는 시간 TTI : Time To Interact ➡️ 유저가 인터랙션을 할 수 있는 시간 화면이 그려지고 유저가 확인할 수 있는 상태가 되는 시간을 TTV라고 하며, 클릭을 비롯한 브라우저에서의 상호작용이 가능해지는 시간을 TTI라고 한다. 웹 개발시 중요한 포인트 중 하나가 바로 TTV와 TTI를 줄이는 것이다. ❓SEO Search Engine Oprimization: 검색 엔진 최적화 웹 사이트 제작 시..