뷰 리액트에 대한 비교글은 많지만 제가 실무에서 사용하면서 느낀점에 대해서 주관적으로 포스팅해보려고 합니다. 주관적인 관점에서 포스팅 하는만큼 잘못된 점이나 다른 의견은 댓글로 알려주시면 감사하겠습니다. Vue 3.x 버전에 대해서 다루겠습니다. ( MS가 IE 지원을 드랍한 상황에서 Vue 2.x 를 더 이상 사용할 이유가 크게 없기 때문입니다. ) Vue 3.x 버전부터는 React와 상당히 유사합니다. 간단히 카운트를 증가시키는 기능을 예제로 보겠습니다. React import { useState } from "react"; import "./App.css"; function App() { const [count, setCount] = useState(0); const addCount = () =>..
빠른 로딩을 위한 이미지 로딩전략
네트워크 환경이 충분히 좋고 디바이스 성능이 뛰어나다면 별도의 최적화 작업등이 무의미 할 수 있다. 이런 최적화 작업은 좋지못한 환경에서 빛을 바란다. 전제조건 1. Optimized 이미지를 사용 2. 네트워크 환경이 좋지 못함 3. Low Performance Device를 사용중 이미지 포멧등의 최적화는 적용하기 나름이기 때문에 최적화 되었다는 가정하에 진행한다. 핀터레스트 같은 사이트를 보자 https://www.pinterest.co.kr/ 빨간색 영역이 디바이스에 보여지는 영역(View port)이고 파랜색 영역이 랜더링되는 영역이다. 실제 파란색영역은 세로로 더 긴영역을 차지한다. 이럴경우 실제 최초 로딩에 필요한 부분은 화면에 보여지는 영역뿐이다. 이때 사용할 수 있는게 Intersecti..
AWS Application Load Balancer를 이용한 리다렉트
최근 로딩성능 개선을위해 https://developers.google.com/speed/pagespeed/insights/?hl=ko 을 통해 개발중인 서비스의 개선점을 자주 모니터링하고있습니다. 개선 과정중에 http => https 로 리다이렉트 시키는 js파일이 랜더링 차단요소에 나타난걸 보고 제거하기로 했습니다:) AWS Elastic Beanstalk를 사용중이고 적용할 수 있는 방법이 있나 찾아보니 로드벨런서를 이용한 리다이렉션이 가능했다. 현재 사용하고있는 로드밸런서는 Classic Load Balancer였고 Redirection을 지원하지않아 Application Load Balancer로 변경하기로 하였다. 지원 가능등은 아래 링크를 통해 비교가능하다. https://aws.amazo..