개발 블로깅/Improving Performance
-
Preact로 번들 사이즈 대폭 줄이기개발 블로깅/Improving Performance 2023. 10. 15. 18:37
아마 React를 많이 다루어본 사람들이라면 Preact를 한번씩 들어보았을 것이다. React와 굉장히 유사하지만 엄연히 다른 라이브러리로 존재하는 PReact. 이미 React가 강력하게 점유하고 있기 때문에, PReact를 가볍게 들여다보기만 하거나 크게 관심을 가질 정도의 라이브러리가 아니였을 수도 있을 것이다. (우선 나는 그랬다..) 그러나 Preact를 가지고 React 프로젝트를 굉장히 가볍게 만들 수 있다는 것을 알게 되고 나서, 다시금 굉장히 관심을 가지게 되면서 Preact에 대해 어느정도 리서치를 해보게 되었다. 이번 글에서는 Preact가 React와 어떤 점이 다른지, 어떤 원리로 React 코드의 번들 사이즈를 줄일 수 있는지, 추가로 Preact에서는 Server Side 환..
-
GCP CloudBuild에서 Test CI 시간 단축시킨 과정 정리개발 블로깅/Improving Performance 2023. 2. 2. 17:27
GCP 프로젝트에서 Test CI 마다 항상 새롭게 디펜던시를 설치하고 빌드함으로써 많은 시간을 소요하는 것이 마음에 들지 않았다. 시간이 오래 걸리면 개발 생산성에도 영향을 미치지만, 무엇보다 CI로 소요된 시간만큼 비용 산정이 되므로 시간이 길어질수록 인프라 비용이 늘어나는 문제가 발생한다. 문제점 CI Test의 가장 큰 문제점은, CI가 돌 때마다 항상 아무것도 없는 상태에서 새롭게 시작한다는 것이다. 그런데 생각해 보면, 대부분 변경되는 사항은 비즈니스적 로직과 코드 단이지, 디펜던시 모듈이 자주 변경되지 않는다. 대부분 큰 차이가 없을 node_modules를 항상 새롭게 설치할 필요가 있을까?라는 생각이 들었다. 이미 이전에 생성했든 node_modules를 그대로 보유한 채 계속해서 다음 ..
-
[Yarn berry] Yarn Berry의 문제점개발 블로깅/Improving Performance 2022. 10. 19. 20:14
모노레포로 사용 중인 Yarn berry 환경에서의 성능 개선을 위해 정말 이것저것 많은 노가다와 테스트를 삽질했다. 특히 pnp를 통한 zero install에 굉장히 많은 기대를 하며 기적 같은 속도 개선이 이루어지기를 바랬었다. 그러나 결론은 아래와 같다. Yarn Berry 환경 자체가 매우 느려서 성능을 개선할 수가 없다. 이전 블로그 포스팅에서도 작성했듯이, Yarn Berry 환경 자체는 단순히 자바스크립트 파일로만 동작하는 환경이다 보니, Yanr Classic 환경 위에서 또 하나의 작은 환경으로 Javascript 코드로 동작하게 된다. 실제 shell과 다이렉트로 동작하는 게 아니다 보니 우선 느린 요소가 생길 수밖에 없을 것 같긴 하다. Yarn install yarn Classic..
-
Brotli 압축방식(Compression)을 통한 웹 성능 최적화개발 블로깅/Improving Performance 2022. 6. 30. 00:51
이번에 web.dev 공부를 하면서 gzip보다 뛰어난 압축방식인 Brotli를 새롭게 알게 되어서 한번 소개를 해보려고 한다. HTTP Compression 우선 HTTP 압축에 대해 다시 한번 알아보자. HTTP 압축은 웹 서버에서 리소스들을 압축 알고리즘을 통해 사이즈를 줄임으로써, 브라우저로 전달할 때 더 작은 사이즈로 전달하기 위한 방식이다. 웹 서버로 리소스를 요청할 때 Request Header의 accept-encoding에 현재 브라우저에서 호환되는 압축 정보를 실어서 함께 요청하면, 웹서버에서 해당 압축 방식을 지원하는지 확인 후 지원이 되면 리소스를 압축하거나 미리 압축되어있던 리소스를 전달하게 된다. 💡 대부분 웹서버에서 이러한 압축 방식을 직접 구현할 수도 있지만, 이미 대부분의..
-
Next.js Lazy Hydration으로 웹 성능 향상시키기(HTML은 유지하고 Script는 걸러내자)개발 블로깅/Improving Performance 2021. 12. 2. 12:24
Next.js의 Hydrate개념을 아직 모르신다면,이전에 작성했던 Next.js의 Hydrate 글을 먼저 참고하시는 것을 추천드립니다. Next.js에서는 첫 페이지를 로드하면 Hydrate과정을 거치게 된다. 💡 Hydrate란? 화면에 보여줄 document 페이지를 서버 단에서 먼저 렌더링 후 브라우저로 전송한 뒤, 이후에 해당 DOM 요소에 필요로 한 Script 코드들을 바로 브라우저로 전송한다. 그리고 각 DOM 요소와 Script 코드가 매칭이 되면서 정상적으로 웹 페이지가 동작하게 된다. 그러나 이러한 Hydrate 방식은 아직 약간의 아쉬운 점이 존재하는데, 그것은 'PreRendering 된 DOM 요소의 모든 Script는 무조건 모두 가져온다는 것'이다. 이 말이 무슨 뜻인지 아..
-
브라우저 동작원리를 알아야 하는 이유가 무엇인가요?개발 블로깅/Improving Performance 2021. 10. 30. 01:00
💡 해당 글은 React의 SSR인 Next.js 프레임워크에 의존하여 작성된 글입니다. 그러나 전체적인 맥락과 핵심 내용을 이해하시는 데는 큰 문제는 없습니다. 프론트엔드 주니어 개발자가 꼭 알아야 하는 기본지식 중 하나로 많이 소개되고 있는 '브라우저 동작 원리' 취업이나, 이직 준비를 해봤다면 무조건 들여다봤을 내용인 만큼, 브라우저가 어떻게 동작하는지에 대해서는 프론트엔드 개발자라면 이미 어느 정도는 알고 있을 것이라 생각한다. 그러나 개발자에게 필요한 기본 지식이라고 해서 어찌어찌 들여다보고 이해는 했는데... 도대체 이게 왜 필요한 걸까? 지금까지 이런 지식 없이도 개발은 잘만 해왔고, 왠지 앞으로도 굳이 필요 없을 것 같긴 한데.. 브라우저 동작원리에 대해 상세하게 다루는 블로그 글과 영상은..
-
[2021.05.02] 웹 성능 최적화를 위한 Webpack Bundle Size 줄이기개발 블로깅/Improving Performance 2021. 5. 2. 13:14
요즘 웹 페이지의 Build 최적화를 위해서 Bundle 사이즈를 줄이는 작업을 하는 중인데, 새롭게 알게 된 내용에 대해 정리해 보려고 한다. # Webpack Bundle Analizer Webpack Bundle Analizer를 이용하면 Build된 Bundle 파일의 상태를 아래처럼 시각화 하여 볼 수 있다. 우선 Chunk 파일을 어떻게 분리할지 Webpack에서 설정을 해주지 않으면, 기본 설정인 페이지 별로 Chunk 파일이 분리 되도록 되어있다. 하지만 이러한 방식은, 각 페이지에서 동일하게 사용되는 코드가 중복으로 들어가게 된다. 현재 내가 작업 중인 프로젝트의 Chunk를 확인해보면, 각 페이지 별로 Sentry 라이브러리를 사용하는데, 각 페이지의 Chunk 파일마다 Sentry 관..
-
웹 성능 최적화를 위한 Tree Shaking 소개개발 블로깅/Improving Performance 2021. 3. 27. 16:36
최근 웹 성능 최적화 관련해서 계속해서 공부 중인데, Tree Shaking이라는 새로운 개념에 대해 알게 되어서 블로그로 정리해 보려고 한다. 한 줄 소개 나무를 흔들어서 죽은 나뭇잎들을 떨어뜨리듯, 코드를 빌드할 때도 실제로 쓰지 않는 코드들을 제외한다는 뜻으로 Tree Shaking이란 이름이 붙여졌다고 한다. 개념 소개 자바스크립트에서 주로 작업할 때, 여러 코드를 모듈 형식으로 파일 별로 관리하며 ES6 문법을 통해 export, import 해서 사용하게 된다. import * as util from '../utilFile'; 위 코드를 보면, utilFile이라는 파일에 있는 모듈을 import 해서 가져오게 된다. 여기서 궁금한건, 저 utilFile 내에 얼마나 많은 모듈 코드가 있을 것..