필요성 이번에 부족한 개발인원으로 인해 외주업체에 프론트엔드 개발을 주면서 자동 배포환경이 필요하게 되었다 기존에는 aws cli를 통해 배포 하고있었으나 그러기 위해선 pem파일을 공유해야 하고 일부 AWS권한을 부여해야하는 문제가 있었다. 그러나 외주업체에 AWS접근권한을 준다는것에 대한 거부감이있었고 github actions를 통해서 자동배포환경을 구성하게 되었다. 찾아보면 Github Actions 템플릿이 많이 존재하여 생각보다 쉽게 구성할 수 있다. 프론트엔드 배포를 위해 아래와 같은 조건을 충족하여야 했다. 1. github push 많으로 빌드, 배포가 자동적으로 이루어져야한다. 2. package.json 기준으로 패키지 인스톨이 가능해야한다. 3. 빌드 과정을통해 production에..
브라우저 렌더링 방식에대해 포스팅합니다. Google Developer 문서를 보면서 아래 문구가 가장 와다았습니다. 일반적으로 '주요 렌더링 경로 최적화'란 HTML, CSS 및 자바스크립트 간의 종속성 그래프를 이해하고 최적화하는 것을 말합니다. 간단히 설명하자면 HTML을 파싱하여 DOM을 만들고 CSS를 파싱하여 CSSOM을 만듭니다. 그리고 DOM과 CSSOM을 이용하여 Render Tree를 생성합니다. 그리고 생성된 Render Tree를 이용해 화면에 그리기 위해 좌표값을 계산하는 Layout(reflow)과정을 거친 후 Paint과정을 통해 화면게 그려지게 됩니다. HTM => DOM (Document Object Model) CSS => CSSOM (CSS Object Model) 위에..
state, props가 변경시 render함수가 실행되고 새로운 엘리먼트 트리를 반환한다. 이때 두개의 가정을통해 효과적으로 랜더링을 진행한다. 1. 엘리먼트의 타입이 다르다면 기존 엘리먼트를 폐기한다. 랜더링 조건에따라 => 으로 바뀐다면 기존 엘리먼트를 폐기하고 새로 랜더링한다. 이때 OldComponent는 componentWillUnmount()을 실행하고 NewComponent 는 componentWillMount 을 실행한다. 2. 키를통해 새로 랜더링해야할지 판단한다. 재귀적 호출을통해 엘리먼트를 생성할경우 key값을 필수적으로 삽입하야여한다. 그렇지 않을 경우 새로운 엘리먼트가 추가될때 성능상에 좋지 않다. *랜덤값을 사용한다거나 재배열되는 리스트의 인덱스값을 사용할 경우 성능상 좋지않고..