리액트26 [모던 리액트 Deep Dive] 7장. 크롬 개발자 도구를 활용한 애플리케이션 분석 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com[7장] 크롬 개발자 도구를 활용한 애플리케이션 분석7.1 크롬 개발자 도구란?크롬에서 제공하는 개발자용 도구로, 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있는 개발도구 (도구 → 개발자 도구 / F12)크롬 개발자 도구에서 웹사이트를 제대로 디버깅하고.. 2024. 7. 22. [모던 리액트 Deep Dive] 6장. 리액트 개발 도구로 디버깅하기 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com[6장] 리액트 개발 도구로 디버깅하기6.1 리액트 개발 도구란?React Dev Tools리액트로 만들어진 다양한 애플리케이션을 디버깅하기 위해 만들어졌으며, 리액트 웹 뿐만 아니라 리액트 네이티브 등 다양한 플랫폼에서 사용할 수 있다.6.2 리액트 개발 도.. 2024. 7. 16. [모던 리액트 Deep Dive] 4장. 서버 사이드 렌더링 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [4장] 서버 사이드 렌더링4.1 서버 사이트 렌더링이란?✨싱글 페이지 애플리케이션의 세상📍싱글페이지 애플리케이션이란렌더링과 라우팅에 필요한 대부분의 기능을 브라우저의 자바스크립트에 의존하는 방식최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전.. 2024. 7. 10. [모던 리액트 Deep Dive] 3장. 리액트 훅 깊게 살펴보기 https://bori-note.tistory.com/32https://bori-note.tistory.com/32https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [3장] 리액트 훅 깊게 살펴보기3.1 리액트의 모든 훅 파헤치기훅은 클래스 컴포넌트에서만 가능했던 리액트의 핵심 기능을 함수에서도 가능하게 .. 2024. 7. 2. [모던 리액트 Deep Dive] 2장. 리액트 핵심 요소 깊게 살펴보기 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com [2장] 리액트 핵심 요소 깊게 살펴보기2.1 JSX란?XML과 유사한 내장형 구문이며, 리액트에 종속적이지 않은 독자적인 문법자바스크립트 코드 내부에 HTML과 같은 트리 구조를 가진 컴포넌트를 표현할 수 있다.render() { return ( .. 2024. 6. 29. [모던 리액트 Deep Dive] 1장. 리액트 개발을 위해 꼭 알아야 할 자바스크립트 https://github.com/Study-FE-Techbook/Modern-React-Deep-Dive GitHub - Study-FE-Techbook/Modern-React-Deep-Dive: 모던 리액트 딥다이브 스터디모던 리액트 딥다이브 스터디. Contribute to Study-FE-Techbook/Modern-React-Deep-Dive development by creating an account on GitHub.github.com 리액트 책 속으로 들어가며…🥹리액트 왜 씀?왜 리액트가 지난 몇 년간 많은 개발자들이 선호하는 라이브러리가 됐을까?단방향 바인딩만약 양방향으로 바인딩되면 뷰의 변화가 컴포넌트에 영향을 미칠 수도, 반대로 컴포넌트의 상태가 변경되면 뷰의 상태도 변할 수 있다.. 2024. 6. 27. 리액트는 왜 얕은 비교를 하는가? 모던 리액트 딥다이브 책 읽으면서 얕은 복사에 대한 내용이 이해가 되지 않았다. 얕은 복사를 하는 이유가 props만 일차적으로 비교하면 된다고만 나와있었다.. 설명이 부족해 이해가 안 돼서 얘를 붙잡고 쥰내 파보겠다. 꼬꼬무 느낌으로 정리해보겠다. 리액트에서 렌더링을 하면 객체는 주소가 바뀐다. ❓그럼 원시값은안 바뀐다. ❓왜원시값는 불변성이니까.객체는 가변성이라 참조에 의해 비교된다. 리액트는 객체가 바뀌면 새로운 객체로 인식해서 불필요한 렌더링을 한다. (즉, 성능이 떨어짐)이를 방지하고자 useMemo or React.memo or 불변성유지(기존객체를 복사해 필요한 부분만 변경)를 한다. 여기서 불변성 유지, 기존객체를 복사해 필요한 부분만 변경, 이것이 얕은 복사 얘기다.리액트는 가상돔을 쓴.. 2024. 5. 30. 리액트 왜 씀? ❓리액트란...Facebook에서 개발한 JavaScript 기반의 오픈소스 라이브러✨특징가상 DOM과 동기화되어 변경 사항을 효율적으로 감지하고 업데이트한다.재사용 가능한 컴포넌트를 이용해 UI를 구성한다.데이터 흐름이 단방향으로 이루어진다.JSX 문법을 사용해 코드 가독성을 높인다.리액트를 배우기 앞서서 알아야 할 것.❓DOMDocument Object Model의 약자. -> 문서 객체 모델DOM은 HTML 문서를 파싱해서 문서의 객체 모델을 생성한다.[브라우저 렌더링 과정]HTML 파싱:HTML 문서를 파싱하여 DOM 트리를 생성CSS 파싱:CSS 파일이나 스타일 태그의 내용을 파싱하여 스타일 규칙을 생성렌더 트리 구성:DOM 트리와 CSSOM(스타일 트리)을 결합하여 렌더 트리를 생성레이아웃:렌.. 2024. 5. 27. 이전 1 2 3 다음 반응형
