전체 글302 Class Component: React.PureComponent state 또는 props가 변경될때 마다 전체적으로 render함수가 호출된다. 그럼에도 성능이 좋은 이유는 바로 React는 Vertual DOM을 사용하기 때문이다. 메모리상에 있는 DOM 안에서 이전 데이터와 새로운 데이터와 비교를 해 수정된 부분만 찾아내어 실제 DOM에 render되기 때문이다. React.PureComponent는 컴포넌트를 업데이트 해야하는지 안해야하는지 판단해준다. 이때 비교는 shallow comparison. (오브잭트의 레프런스만 비교하는 수준. 레프런스의 데이터까지는 비교하지 않는다. ← deep comparison) - Shallow comparison ex1: const data = { name: "chanki", age: "33" } const newData .. 2022. 7. 13. FOIT (Flash of Invisible Text), FOUT (Flash of Unstyled Text)의 특징 FOIT (Flash of Invisible Text) 웹폰트가 로드될 때까지 텍스트를 렌더링 하지 않다가 로드가 된 이후에 텍스트를 보여주는 동작이다. FOUT (Flash of Unstyled Text) 웹폰트가 로드될때까지 시스템의 기본 폰트를 보여주고 이후 reflow 해서 글꼴을 대체하는 방식 https://www.malthemilthers.com/wp-content/uploads/2017/06/foit-fout-animation.gif FOUC (Flash of Unstyled Content) 웹 폰트 최적화 하기 https://velog.io/@vnthf/%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%95%98%EA%B8%B0 해결.. 2022. 7. 11. userAgent를 변경해서 PC에서 모바일환경 구현하기 https://egs41.tistory.com/entry/Chrome%EC%97%90%EC%84%9C-User-agent-%EB%B3%80%EA%B2%BD%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95 2022. 7. 10. Optional Chaining 연산자와 Nullish coalescing 연산자. 그리고 우선순위 [1] Optional Chaining 연산자 → "?."optional chaining 연산자는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. const obj = { a: { b: { c: { age: 12 } } }}console.log(obj.a.b.c.age); // 12 이렇게 nesting 이 된 객체에서 만약 age 의 값을 읽으려고 했을때 c 프로퍼티 바로 위 단계인 b 가 없는데 위와 같이 읽으려고 한다면? "Cannot read properties of undefined" 에러가 출력된다. 여기서 optional chaining 연산자의 진가.. 2022. 6. 27. 아이디 선택자의 경우 스크립트 안에서 해당 아이디 선택자를 선택하지 않아도 아이디명 자체로 사용할 수 있다. https://jsdev.kr/t/dom-id-script/5429 http://daplus.net/javascript-id%EA%B0%80%EC%9E%88%EB%8A%94-dom-%ED%8A%B8%EB%A6%AC-%EC%9A%94%EC%86%8C%EA%B0%80-%EC%A0%84%EC%97%AD-%EB%B3%80%EC%88%98%EA%B0%80%EB%90%A9%EB%8B%88%EA%B9%8C/ 즉, 아이디가 포함된 HTML요소는 DOM트리 생성 시 전역변수의 속성을 가지게 되어 스크립트 전역에서 사용할 수 있다. 2022. 5. 25. 문자열에서 특정 문자를 추출 let extractStr = "Extract the word 'coding' from this string."; let codingRegex = /coding/; let result = extractStr.match(codingRegex); 2022. 5. 22. 이전 1 ··· 23 24 25 26 27 28 29 ··· 51 다음
