react5 210708_Virtual DOM 이 빠른 이유 VirtualDOM 이 빠른 이유 브라우저 렌더링 에 대한 이해 VirtualDOM 이 빠른 이유 프론트앤드를 공부하다보면, "Virtual DOM" 이라는 단어를 한번씩 마주치게 됩니다. 많이 사용되는 프레임워크들은, 주로 Virtual DOM 을 사용해서 속도를 올립니다. 어떻게 이렇게 빠른걸까요? 그리고 왜 실제 DOM 은 느리고 비효율적일까요? 브라우저 렌더링 에 대한 이해 사실 프론트앤드 개발자들은 복잡하더라도 DOM 을 기본적으로 이해할 필요가 있습니다. HTML/CSS 페이지만 서버에서 요청해온다고 가정해보겠습니다. JS 는 여기서 필요하지 않습니다. HTML/CSS 형식의 파일을 응답으로 받은 후에는, 아래와 같은 일들이 일어납니다. 1. HTML 파싱 브라우저는 HTML 파일들을 파싱하고.. 2021. 7. 8. 210623 React Context React Context React Context Context 란? Context.Provider Class.contextType Context.Consumer Context.displayName Context 란? Context 는 컴포넌트 트리의 매 계층마다 props 전달 없이 데이터를 제공하는 방식입니다. (global context) Context 는 특정한 데이터가 다수의 컴포넌트에서 사용될때/필요할 때 사용합니다. 많은 컴포넌트에서 사용하므로, 사용시 주의가 필요합니다. Context API // create context object const context = React.createContext(defaultValue) Context.Provider 이 context 오브젝트는 트리에서.. 2021. 7. 4. 210622 React Hooks React Hooks React Hooks Hook 이란? Basic Hooks useState useEffect Rules of Hooks Building Your Own Hooks useContext Context Additional Hooks useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue Hook 이란? React 에서 Hook 은, function 컴포넌트 내부에서 React 의 state 와 lifecycle 특징을 연결시켜주는 (hook) function 입니다. 리액트는 내장 Hooks 들을 제공하며, 개발자가 직접 작성한, 재사용 가능한 Hook 을 사용할 수도 있습니다. Basi.. 2021. 7. 4. 210425_Jest 사용법 Jest 기본 사용법 Test 파일 구성 Test File 이름 짓기 Jest 코드 작성 Jest 로 스냅샷 테스트하기 비동기 테스트 패턴 테스트 더블 (Test double) 모의 함수 만들기 (Mocking) SpyOn 사용하기 (Spying) Jest 기본 사용법 Spharos CMP 프로젝트의 Jest 는 package.json dependencies 내부에 @vue-plugin-e2e-cypress 로 정의되어있으며, 하단 스크립트로 실행 할 수 있습니다. --mode 는, 개발기 dev, 배포용 prod 으로 변경할 수 있습니다. "scripts": { "test:unit": "vue-cli-service test:unit --mode prod" }, "devDependencies": { "@.. 2021. 5. 28. React - React lifecycle methods 정리 Lifecycle methods 1. type component가 만들어질 때 실행 ( 기본 state를 설정할 수 있음 ) 2. componentWillMount() component가 DOM에 렌더링전 실행 ( DOM 처리를 할 수 없음 ) 3. render 4. componentDidMount() component 결과가 DOM에 렌더링 된 후 작동 ( 다른 js 프레임워크 연동 및 setTimeout, setInterval 및 AJAX 사용, DOM 처리 가능 ) 5. componentWillReceiveProps() 새로운 props를 받았을 때, props에 따라 state를 업데이트할 때 유용 ( setState 가능 ) 6. shouldComponentUpdate(nextProps, nex.. 2020. 5. 16. 이전 1 다음
