귀여운 눈높이에서 작성된, 🐰

하루 한 걸음씩, 성장 하는 중 입니다 🫶🏻

2025/05/14 3

리액트 공부하기 - 최적화 lazy & Suspense

리액트는 클라이언트 사이드 렌더링을 한다= 서버에서 일단 비어있는 html 파일을 받아온 뒤, 같이 받아온 자바스크립트를 사용해서 최종화면을 그려준다는 뜻자바스크립트를 사용해서 화면을 완성하기 때문에, 클라이언트가 렌더링의 주체가 된다 그런데 만약, 빈 html은 받아왔긴 한데.. 화면을 그리기 위한 javascript 파일이 엄청 크게 되면?당장 필요하지 않는 페이지는 됐고,, 필요한 페이지 부터 우선. 최적화 => 이럴 때 사용할 수 있는 Lazy, Suspense 1. Lazy. lazy 사용 방법은 다음과 같다. 임포트 해올 때, 첫번째와 같은 기본 방식이 아닌, import를 리액트 lazy 함수 사용해서 임포트 해오면 된다. 더보기🔹 React.lazy()동적 import를 통해 컴포넌트를..

Studying/React 2025.05.14

리액트 공부하기 - 최적화 함수 useMemo(), useCallback(), memo()

리렌더링이 발생되는 기존 조건 때문에, 꼭 리렌더링 될 필요 없을 때, 불필요하게 발생되는 비효율적인 순간들이 있다.규모가 복잡해질 수록, 성능좋고 빠르게 만들기 위해, 최적화 함수! 등장 배경은? 바로 함수형이라서 그렇다 ? 이게 무슨 말이냐면.. 함수형 컴포넌트는 함수를 호출해서 화면에 그리는 식.이런 함수형 컴포넌트에서 상태변경이 일어나면, 그 함수는 더 이상 사용하지 않고 새 상태값으로 함수를 새롭게 호출.따라서 상태가 변경되면 이전의 기존의 함수는 사라지고, 새 함수로 대체되는. 재사용 가능 한 것도 새로만들어쓰는 비 효율 발생! 그렇다면.. 해결 방법은? 따라서 리액트 최적화 함수들은, 이런 생각에서 만들어진 함수들이다 ! 저장 했다가 재 사용 하자 !각각 함수를 어떻게 사용하는지 살펴보자. ..

Studying/React 2025.05.14

네트워크 기초 - LAN, MAN, WAN, http, https, SOP, CORS

💡 네트워크 종류📡 1. LAN (Local Area Network)작은 지역 네트워크예: 집, 학교, 사무실 안에서 컴퓨터들이 서로 연결돼서 자료를 주고받을 수 있는 네트워크.빠르고 설정이 간단함.계층형 구조를 사용해 네트워크를 구성.보통 **스위치(Switch)**를 사용해서 장비들을 연결하고,**라우터(Router)**를 통해 외부 인터넷(WAN)과 연결돼. 🏙️2. MAN (Metropolitan Area Network)도시 단위의 네트워크야.주로 기업, 통신사, 정부기관이 운영.광케이블, 이더넷 링 등을 사용해 도시 내 여러 지점을 연결.VLAN, MPLS 같은 기술로 네트워크 분리 및 트래픽 효율화함.🌍3. WAN (Wide Area Network) 전 세계적으로 연결된 네트워크야.인터..

카테고리 없음 2025.05.14