CS (15) 썸네일형 리스트형 [JavaScript] 브라우저 렌더링과 DOM 브라우저는 어떻게 화면을 그릴까? 렌더링은 크게 4단계로 이루어집니다. 1. 브라우저가 HTML과 CSS를 파싱하여 DOM과 CSSOM 생성2. DOM과 CSSOM을 결합해 렌더 트리 생성3. 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산하는 레이아웃 수행 4. 계산된 결과를 화면에 색을 입혀 그려내는 페인트 수행 HTTP/1.1과 HTTP/2 브라우저가 서버와 통신할 때 사용하는 규약이 바로 HTTP입니다. 현재 가장 많이 쓰이는 버전은 HTTP/1.1과 HTTP/2이고, 이 둘의 차이가 실제 성능에 큰 영향을 미칩니다. HTTP/1.1의 한계 HTTP/1.1은 하나의 커넥션에서 요청과 응답을 하나씩 처리합니다. CSS파일, 자바스크립트 파일, 이미지 파일 등 모든 리소스 요청이 개별적으로 순차.. 렌더링 최적화: React.memo/useMemo/useCallback function App() { const [count, setCount] = useState(0); return ( setCount(count + 1)}>+1 {/* 렌더링에 오래 걸리는 컴포넌트 */} );}위에 코드를 보시면 버튼을 누를 때마다 count가 바뀌게 되고 App이 다시 렌더링됩니다. 문제는! HeavyList는 count와 아무 관련이 없는데도 같이 다시 렌더링된다는 것입니다. React는 부모가 렌더링되면 자식도 전부 다시 렌더링되기 때문에 자식에 무거운 계산이나 긴 리스트가 있다면 성능 최적화가 필요합니다. 이 문제를 해결하는 도구가 React.memo, useMemo, useCallback 입니다. React.memo function Ch.. 번들 크기를 보자 : Bundle Analyzer https://hyeche.tistory.com/10 a + b;export const subtract = (a, b) => a - b;export const multiply" data-og-host="hyeche.tistory.com" data-og-source-url="https://hyeche.tistory.com/10" data-og-url="https://hyeche.tistory.com/10" data-og-image="https://blog.kakaocdn.net/dna/b2i3ej/dJMb81G3B6V/AAAAAAAAAAAAAAAAAAAAAEmO2mQgS5tuV4lyftfwc3eS2WMc-ZFD1aOQOM4KvEXI/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1782831599&allow_ip=&allow_referer=&signature=1CFNXyjU1NqpMUoAJ9h60ztwvU0%3D [JavaScript] 객체/프로퍼티/프로토타입 객체란? 자바스크립트는 거의 모든 것이 객체로 이루어진 언어입니다. 숫자나 문자열 같은 원시값을 제외하면 함수, 배열, 정규 표현식 등 대부분이 객체입니다. 한마디로! 객체는 관련된 데이터와 동작을 하나로 묶어놓은 덩어리입니다. var counter = { num: 0, // 프로퍼티 increase: function () { this.num++; // 메서드 }};상태데이터와 동작을 하나의 단위로 묶은 counter라는 객체입니다. 프로퍼티: 객체의 상태를 나타내는 값 메서드: 그 상태 데이터를 참조하고 조작할 수 있는 동작 객체 리터럴로 객체 만들기 var person = { name: 'Lee', sayHello: function () { console.. [JavaScript] this/클로저 : 코드로 이해하기 this는 '자기 자신'을 가리키는 변수다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다.바로 아하! 할 정도로 이해가 쏙쏙 가진 않아서 예시를 같이 봐보겠습니다!const circle = { radius: 5, getDiameter() { return 2 * this.radius; }};circle이란 객체 안에 radius 데이터와 getDiameter 함수가 들어가있습니다. 여기서 this는 현재 이 함수를 가지고 있는 객체, 즉 circle을 의미합니다. console.log(circle.getDiameter());그렇다면 return 2 * circle.radius로 바꾸면 되니 값은 10이 나오게됩니다. 중요한 점은 this가 가리키는 .. Caching과 Prefetching Caching캐싱이란 자주 사용하는 데이터나 결과를 저장하여 빠르게 접근할 수 있도록 하는 기술을 의미합니다. 서버에서 데이터를 매번 가져오지 않아도 보관된 데이터를 사용하여 불필요한 네트워크 요청을 줄일 수 있습니다. TanStack Query TanStack Query는 서버로부터 데이터 가져오기, 데이터 캐싱, 캐시 제어 등 데이터를 쉽고 효율적으로 관리할 수 있는 라이브러리입니다. React Query라는 이름으로 시작했으나 다른 프레임워크에서도 활용할 수 있도록 기능이 확장되면서 이름이 Tanstack Query로 변경되었습니다.주요 기능- 데이터 가져오기 및 캐싱- 동일 요청의 중복 제거- 신선한 데이터 유지- 무한 스크롤, 페이지네이션 등의 성능 최적화- 네트워크 재연결, 요청 실패 등의 .. [JavaScript] 실행 컨텍스트 실행 컨텍스트는 JS 엔진이 코드를 실행할 때 필요한 환경 정보를 담은 객체입니다.변수, scope, this 같은 것들을 여기서 관리합니다. 실행 컨텍스트를 생성하는 이유가 뭘까요? 소스코드별로 생성하는 스코프와 그에 대응하는 스코프 체인을 생성하고, 스코프 변수, 함수들을 스코프 객체와 바인딩 하기 위해서 실행 컨텍스트가 필요하기 때문입니다. → 쉽게 말하자면 코드를 실행하기 위해서 JS엔진은 지금 쓰는 변수가 어디에 있는지, 어디서 찾는지, this가 무엇을 가리키는지 알아야 합니다. 같은 변수여도 스코프(함수, 전역 , ...)에 따라 정보가 달라지기 때문에 관리가 필요합니다. 그래서 실행 컨텍스트는 각자의 스코프를 만들고 연결고리인 스코프체인을 만듭니다. 4가지 타입의 소스코드 전역 코드파일.. JavaScript가 변수와 함수를 다루는 방법 개발할수록 개념을 빠싹 아는 것이 정말로 중요한 것 같습니다.. 대충 알았던 것도 다시 보자 !!!!! 1. 변수 선언 var / let / const 선언 방식과 차이 각각 ~하구나 생각하기보다는 중복선언, 재할당, 스코프가 무엇이고 그 부분에서 var / let / const가 ~하구나 생각하는 게 더 나중에 잘 떠오를 것 같은데요, - 중복선언var name = "철수";var name = "영희"; // 같은 이름으로 다시 선언해도 에러 Xconsole.log(name); // "영희"중복 선언이 가능하면 실수로 같은 이름을 두 번 써도 에러가 나지 않습니다. 코드가 길어질수록 어디서 값이 바뀌었는지 추적하기 어려운데요, 이때 let과 const는 중복 선언을 막습니다. - 재할당let nam.. 이전 1 2 다음