실행컨텍스트 코드의 실제 진행상황을 추적하는데 필요한 정보들을 모아둔 구조 함수가 ()로 호출되면 실행컨텍스트가 생성됨. 실행 컨텍스트에는 파라미터를 포함한 지역 메모리와 실행문이 있음. 함수가 종료되면 실행 컨텍스트는 사라진다. 자바스크립트의 함수 객체 서브루틴으로 실행할 ...
코테대비 SQL 문법
정렬 SELECT * FROM ANIMAL_INS ORDER BY ANIMAL_ID ASC ORDER BY ANIMAL_ID DESC ORDER BY NAME ASC, DATETIME DESC 조건 SELECT ANIMAL_ID, NAME FROM ANIMAL_INS WHERE INTAKE_CONDITION="Sick" WHERE I...
CSS 최적화
CSS 최적화가 필요한 이유 CSS는 렌더링을 막는다. CSS의 존재만으로도, CSS가 파싱되기 전까지 브라우저는 렌더링이 지연된다. 만약 브라우저가 CSS가 없는 페이지를 그대로 노출하면, 스타일적용이 되지않은 페이지가 나타나기 때문이다. 이를 FOUC라고 불린다. CSS는 HTML 파싱도 막을 수 있다 브라우저가 CSS가 파싱되기 전까지...
클래스형 컴포넌트 vs 함수형 컴포넌트
클래스형 컴포넌트 import React, { Component } from 'react'; class Hello extends Component { static defaultProps = { name: '이름없음' }; render() { const { color, name, isSpecial } = this....
React에서 Key를 사용하는 이유
리액트로 개발을 하다가 리스트를 만들면, 다음과 같이 key를 사용하라는 안내문이 뜬다. 평소엔 무시하고 key를 그냥 넣었지만, 왜 그런지 갑자기 궁금해져 찾아보았다. Recursing On Children 해당 내용은 리액트 공식문서에 Recursing On Children으로 나와있다. 리액트 리렌더링 과정에서 리스트를 처리할때, 리액...
JS 코테 대비 메소드 정리
문법 for … of : 반복가능한 객체 (Array, String, Set) for … in : 객체. 키를 뽑아냄. Set Set.prototype.add(value) Set.prototype.clear() Set.prototype.delete(value) Set.prototype.forEach((value, k...
학습 내용 요약
프론트엔드 Virtual DOM 리액트의 작동방식은 상태변화 시, 그 컴포넌트와 하위 컴포넌트를 모두 교체하기에 많은 DOM 변화가 일어난다. 이때 리액트에서는 DOM을 추상화한 객체인 Virtual DOM을 변경하고, 변경이 완료되면 실제 DOM과의 차이점을 확인한다음 한번의 리렌더로 해결한다. Virtual DOM은 메모리에 존재하여 메모리...
virtual DOM와 리렌더링
Virtual DOM은 DOM을 추상화한 가상의 객체이다. DOM 이란? HTML 문서를 파싱하여 문서의 구성요소들을 객체로 구조화하여 나타낸 것. HTML Elements, 속성, CSS style, Events, Methods 를 구조화해서 나타낸 객체고, 이 객체를 이용해서 웹페이지 구성요소를 제어할 수 있다. Virtual DOM...
React 18로 업데이트 방법, 문제점 정리
기존에 React 17을 사용하던 Forkie Player 프로젝트를 React 18로 업데이트 하는 기록 업데이트 하는 이유 automatic batching 동영상이 끝났을때 다음 영상으로 넘어가거나, 현재 영상의 시작부분으로 돌아가기 위해선 동영상의 timeupdate, ready, pause, ended 등등의 상태...
velog 메모
리액트 리렌더링 https://velog.io/@eunbinn/when-does-react-render-your-component children으로 넘어온 컴포넌트는 사용되는 컴포넌트가 리렌더링되도, 리렌더링의 영향을 받지 않는다. 리렌더링은 현재 컴포넌트에서 변화된 것이 없어도, 자식으로 전파된다. but 현재 컴포...