stonesy

📖props-drilling 데이터가 상위 컴포넌트에서 하위 컴포넌트로 전달되는 과정에서 중간 컴포넌트들을 거치면서 발생하는 문제로, 중간 컴포넌트가 많아지면 코드가 복잡해질 수 있다. props-drilling 문제를 해결하기 위해 다음과 같은 라이브러리들을 사용할 수 있다. ✏️React Context API react에서도 React Context API라는 자체적인 전역 상태관리 API를 제공해준다. 단, React Context API를 사용하면 리액트 앱 최상단에 Provider가 배치된다. Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다. context를 구독하는 컴포넌트들을 Provider의 value prop이 바뀔 때마다 다시 렌더링된..

📖라이프사이클React 컴포넌트는 라이프사이클을 가진다. 라이프사이클은 컴포넌트가 생성되고 소멸되기까지의 일련의 과정을 말한다. 라이프사이클 안에서는 각 시점에 자동으로 호출되는 함수가 있는데 이를 라이프사이클 메서드라고 한다. 🔎Mount >  Update, Re-render > Unmount✏️MountDOM이 생성되고 웹 브라우저 상(화면)에 나타남. Mount 시에는 다음의 메서드들이 차례대로 호출된다.constructor: 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드render: UI를 렌더링 하는 메서드componentDidMount: 컴포넌트가 웹 브라우저 상에 나타난 후..

"면접을 위한 CS 전공지식 노트"를 읽고 공부한 내용입니다. ❓ www.naver.com을 주소창에 입력했을 때, 화면이 그려지기까지의 과정을 설명해 보세요. www.naver.com을 입력하면 크게 1)리다이렉션-2)캐싱-3)DNS-4)IP 라우팅-5)TCP 연결-6)요청과 응답-7)브라우저 렌더링이 발생한다. 리다이렉션은 사용자가 처음 요청한 URL과 다른 URL로 보내는 것을 뜻하며, URL이 잘못됐을 때 혹은 사용자 권한에 따라 적절한 페이지로 안내되는데 사용된다. (HTTP 3.xx 코드 응답) 캐싱은 요청에 대한 응답을 저장해뒀다가 재요청시에 이를 활용하는 것이다. 캐싱에는 브라우저 캐시와 공유캐시가 있다. 브라우저 캐시는 쿠키, 로컬스토리지 등을 포함한 캐시이다. 예를 들어, 어떤 사이트를..

프론트엔드 성능 최적화 방법을 로딩 최적화, 렌더링 최적화 관점에서 정리해보았다. 📖로딩 최적화 방법 🔎화면이 그려지기까지 과정 domContentLoaded domContentEventLoaded는 웹 페이지의 DOM 트리가 완전히 로드되고 파싱되었을 때 발생하는 이벤트이다. domContentEventLoaded 이벤트는 이미지, 스타일시트 및 하위 프레임 로딩을 기다리지 않고 발생하며, 웹 페이지의 초기화 및 설정 작업을 수행하기 적절한 시점이다. load load 이벤트는 웹 페이지와 그 안에 있는 모든 리소스(이미지, 스타일시트, 스크립트 등)가 완전히 로드되었을 때 발생한다. 페이지가 완전히 로드된 후에만 실행되어야 하는 작업이 있는 경우에 유용하다. 🔎블록 리소스 블록 리소스란 웹 페이지의 ..