본문 바로가기

개발공부61

Javascript Event와 Polyfill, babel Javascript Event 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼 SyntheticEvent 객체를 전달받습니다. stopPropagation() 와 preventDefault()를 포함해서 인터페이스는 브라우저의 고유 이벤트와 같지만 모든 브라우저에서 동일하게 동작합니다. SyntheticEvent는 풀링됩니다. 성능상의 이유로 SyntheticEvent 객체는 재사용되고 모든 속성은 이벤트 핸들러가 호출된 다음 초기화됩니다. 따라서 비동기적으로 이벤트 객체에 접근할 수 없습니다. 주의 비동기적으로 이벤트 속성을 참조하고 싶다면 이벤트 객체의 event.persist() 를 호출하세요. 합성 이벤트 풀에서 제거되고 사용자의 코드에서 참조가 가능해집니다. e.p.. 2021. 8. 29.
React의 성능 최적화 1편 (useCallback, useMemo, React.memo) React 컴포넌트가 한 화면에 렌더링 되는게 많아지면 많아질수록 최종 렌더링 시간이 오래 걸리는건 팩트다. 보여주고 싶은 정보가 많을수록, 구조가 복잡할수록 렌더링할 컴포넌트는 많아진다. 더 많이 보여주고싶은 요구를 무시할수는 없으니, 더 효과적으로 렌더링 할 수 있는 방법을 찾아야한다. 그 첫번째 편으로 성능 최적화에 대한 Hooks, Api 를 알아보자! useCallback, useMemo, React.memo 위 3개 항목은 react에서 성능 최적화를 논할때 빠지지 않고 등장하는 react API 이다. useCallback 오늘 코드리뷰를 하다가 짧은 토글 코드에 useCallback 이 사용된 경우를 봤다. 사용되면 안되는 곳에 사용된 것 같은 느낌이 계속 들었는데, 동료가 관련 문서를 찾.. 2021. 8. 1.
KPT 정리 회고를 "잘"하는 방법 퍼실리테이터는 집단 구성원들이 상호작용하는 모습을 관찰하고 그들의 대화를 경청하며, 집단 구성원들이 서로 협력하고 능동적으로 최고의 해결책을 찾을 수 있도록 격려하고, 돕는 사람입니다. KPT 시작하기 짧은 시간 안에 작성하고 공유하는게 중요함. KPT가 끝나는 조건이 정해져있어야함. 새로운 맴버가 들어왔을 떄 KPT에 대해 1분이라도 짧게 설명하는 시간을 가지자. 진행 순서 타미머로 시간을 정해놓고 시작 이전 회고의 Try & Action 진행 상황 공유 Keep, Problem 공유 (토론 X 공유만으로 끝) Try 공유. Problem에서 나왔던 문제 해결 방안 or 다음 스프린트에 시도해볼것들 (토론 X 공유만으로 끝) Try 작성 방법 Try는 다음 KPT(회고)에서 판별.. 2021. 6. 16.
GatsbyJS 맛보기라 쓰고 찍먹하는 글 굉장히 오랜만에 글을 쓴다. GatsbyJS가 어떤거지? Gatsby is a React-based open-source framework for creating websites and apps. It's great whether you're building a portfolio site or blog, or a high-traffic e-commerce store or company homepage. 공홈에서 Gatsby를 소개하는 말이다. React 기반의 웹사이트, 앱 제작을 위한 오픈소스 프레임워크이다. 어떤 웹사이트를 빌드하던지 이건 짱이다! 이런 내용이다. 모르겠고 일단 해보자 튜토리얼 npm install -g gatsby-cli gatsby-cli를 글로벌하게 사용할 수 있도록 해준다. d.. 2021. 5. 19.
[Javascript] - Predicate Predicate filter(users, function(user){return user.id === 3}) 위와 같이 썻을때 filter 함수가 어떤 것일까. 위와 같이 함수를 작성했을때, 두번째 인자로 오는 function 을 predicate 라고 한다. 보통 함수는 일정한 로직을 거쳐 답을 내게 된다. 그 안에서 사용하는 조건이나 판별식은 동일 할 수 밖에 없다. 하지만 함수형 프로그래밍 에서 predicate 를 사용한다면 이야기가 달라진다. 함수는 흐름 만을 제공할 뿐 결과를 도출해 내는 판별식은 전적으로 predicate 에게 일임한다. 이렇게 우리는 조금 유연하게 함수를 작성할 수 있고 재사용성을 높일 수 있다. //예시 함수 function filter(arr, predicate){ l.. 2020. 9. 26.
[JavaScript] - for...of 본문은 inflearn의 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌 를 공부하면서 정리한 내용입니다. for of - 순회 하기 var data = [1,2,undefined, NaN, null, ""] //for each data.forEach(function(value){ console.log(value); }); // for-in // for-in 은 Array.prototype.getIndex = function(){} 으로 array에 prototype을 추가하게 되면 이 값 또한 data에서 인식하여 function이 출력되게 된다. for(let idx in data){ console.log(data[idx]) } //for-of //따라서 for-in이 아닌 for-o.. 2020. 8. 21.

티스토리툴바