codinghatso

-ai를 사용해 개념정리 했음을 공지합니다.- 스트리밍 (Streaming)스트리밍이란 컴포넌트들을 각각의 덩어리(Chunks)로 묶어 분류하여 병렬처리하는 방식이다. 일반적으로 서스펜스와 데이터 가져오기 작업 시 좋은 관행으로 "데이터 가져오기를 필요한 구성 요소로 이동"을 말할 수 있다.데이터를 필요한 구성 요소로 이동시키면 더 세분화된 서스펜스 경계를 만들 수 있습니다. 이를 통해 특정 구성 요소를 스트리밍 하고 UI가 차단되는 것을 방지할 수 있다. Next.js 에서는 loading.tsx라는 특별한 파일을 생성할 수 있습니다. 이 예약된 파일은 페이지를 로딩하는 동안 사용자에게 보여줄 화면을 정의할 수 있습니다.참고로 정적인 UI 이 과정에서는 SideNav 같은 요소는 즉시 표시됩니다.📌 ..

rAF는 자바스크립트가 프레임 시작 시 실행되도록 보장해 주어 밀림 현상을 방지한다.페이지가 비활성화되면 작업이 중지됨으로 CPU 리소스나 배터리 수명을 낭비하지 않게 된다.디스플레이의 주사율에 따라 최적화되는 특징이 있다. 60hz에서는 1초에 60번 144hz에서는 1초에 144번 호출되는 것이다.rAF는 스크롤 이벤트 최적화 기법으로 사용된다. rAF는 setTimeout 처럼 콜백 함수 내부에서 재귀 호출 하는 식으로 구성하면 된다.차이점은 setTimeout은 타이머를 지정해주어야 하지만, rAF는 프레임 단위로 동작하기 때문에 별도의 반복 플래그가 필요 없다는 점이다.const performAnimation = () => { /* 스타일 조정 스크립트 */ requestAnimation..

DOMContentLoaded와 window.onload는 모두 웹 페이지 로딩 과정에서 발생하는 이벤트입니다만, 각각의 이벤트가 발생하는 시점과 그 의미에는 중요한 차이점이 있습니다. DOMContentLoadedHTML문서가 완전히 로드되고 파싱 되었을 때 발생합니다.DOM 트리가 완성되었으며, 스크립트 실행을 위한 준비가 완료된 상태입니다.외부 리소스(이미지, 스타일시트, 프레임 등)의 로딩을 기다리지 않습니다.주요 포인트실행 시점 : 이 이벤트는 HTML 문서가 완전히 파싱되고, DOM 트리가 완성되었을 때 발생합니다. 하지만 이미지, 스타일시트, 프레임 등 외부 리소스의 로드는 기다리지 않습니다.사용 이유 :  이 이벤트 리스너는 문서가 완전히 로드되었을 때 JavaScript 코드가 실행될 준..

시작하기 앞서 객체지향 프로그래밍과 함수형 프로그래밍의 차이점을 간단하게 정리하려고 합니다. 함수가 일급이냐 vs 객체가 일급이냐 * 일급 : 값으로 다룰 수 있으며, 변수에 담을 수 있다. 함수에 인자로 사용될 수 있으며, 결과로도 사용될 수 있다. 객체지향 프로그래밍 일급 객체를 사용을 지향하는 프로그래밍을 객체지향 프로그래밍이라고 합니다. 객체가 처리 요청을 받으면, 객체 내부에서 데이터 처리 후 반환하는 방식입니다. 객체지향의 큰 특징은 캡추다정상 으로 외웠던 그 단어들이 잘 보여줍니다. 캡슐화 추상화 다형성 정보은닉 상속성 여기서는 각 특징에 대한 자세한 글은 작성하지 않을 것입니다. 추가적으로 최근에는 캡추상다 연(관성) 정으로 외우시는 분들도 있는 것 같습니다. 개인적으로 객체지향은 캡슐화와..

JS로 재사용가능한 태그 만들어 사용하기 let 변수이름 = document.createElement("태그이름"); - 변수에 원하는 태그를 생성하여 담아놓는 패턴. let 텍스트변수 = document.createTextNode("문자열 또는 HTML Symbols"); - 변수에 문자열이나 특수문자를 담아놓고 사용하는 패턴. https://www.htmlsymbols.xyz/unicode/U+00D7 HTML Symbols ... www.htmlsymbols.xyz 담아놓은 '태그변수'에 Class를 부여하고 태그의 자식인자로 '텍스트변수'를 할당한다. 이렇게 활용 가능한 태그가 완성된다. 접근자 이해하기 선택된 태그의 위치를 파악하고, 선택된 태그를 기준으로 상대적인 경로로 접근합니다. 예) no..

의미론적 div 태그를 복습하기 용이하게 정리해 보았습니다. 매번 구글링 해서 하나하나 찾고 복습하는게 매우 효율적이지 못하다고 생각해서 작성한 포스트입니다. 강조할 문자열

7장이랑 연결되는 내용입니다. 7장의 마지막 내용 두 가지 를 참고하며 진행하시면 됩니다. 1. 데이터 요청이 의도하지 않는 waterfall을 만들었다. 2. 대시보드는 정적(static)이므로 데이터 업데이트가 애플리케이션에 반영(reflected)되지 않는다. 이번 장에서 배울 내용 * 정적 렌더링이란 무엇이며 애플리케이션의 성능을 향상시킬 수 있는 방법입니다. * 동적 렌더링이란 무엇이며 언제 사용해야 하는지에 대한 것입니다. * 대시보드를 동적으로 만들기 위한 다양한 접근 방식. * 느린 데이터 가져오기를 시뮬레이션하여 어떤 일이 일어나는지 확인합니다. 정적 렌더링이란? 정적 렌더링을 사용하면 빌드시(배포 시) 또는 재검증 중에 서버에서 데이터 가져오기 및 렌더링이 수행됩니다. 그런 다음 결과를..

애플리케이션에 대한 데이터를 가져올 수 있는 다양한 방법에 대해 논의하고 대시보드 개요 페이지를 작성합니다. 이번 장에서 배울 내용 * API, ORM, SQL 등 데이터를 가져오는 및 가지 방법에 대해 알아봅니다. * 서버 구성요소를 통해 백엔드 리소스에 보다 안전하게 액세스할 수 있는 방법 * network waterfalls란? * JavaScript Pattern을 사용하여 병렬 데이터(parallel data) fetching을 구현하는 방법. 데이터 가져오는 방법 선택 API 계층 데이터베이스 쿼리 React Server Components 추가 API 계층 없이 서버에서 직접 데이터베이스를 조회할 수 있습니다. SQL 사용하기 대시보드 프로젝트의 경우 Vercel Postgres SDK 및 ..