# optimize

ksa199653

컴포넌트의 랜더링의 최적화를 적용했던 React.memo에서 한계점이 들어났었다. useMemo useCallback 훅을 알아보기 전에 useMemo에 대해서 집고 넘어가는게 좋을것 같다. 이때 React.memo와 useMemo가 헷갈릴 수 있는데 이 차이를 알아보고 넘어가자 React.memo vs useMemo React.memo 와 useMemo는 서로 다른 역할을 하는 메소드이다. 1. React.memo : React.memo는 리액트의 고차 컴포넌트(HOC, Higher Order Component)이고, 이는 컴포넌트 로직을* 재사용*하기 위한 React의 고급기술과

hsecode

🗡 PurgeCSS ? PurgeCSS는 HTML이나 JS 등의 파일에 들어있는 키워드들을 뽑아내 CSS 파일과 비교한다. 이때 HTML/JS 파일에서 사용되지 않은 선택자와 키워드를 제거해 CSS 파일을 최적화해주는 라이브러리다. 👇👇👇 after PurgeCSS 👇👇👇 Bootstrap,Bulma 등과 같은 CSS 프레임워크와 함께 사용되고, Webpack, gulp, grunt 같은 플러그인과 함께 쓰일 수 있다. 참고 유지보수를 오랜기간 진행하다보면 사용하지 않는 스타일까지 끌어안고 가기 마련. 그렇게 쌓인 오래된 미사용 CSS를 정리하기 위해 PurgeCSS를 불러와봤다. 여러가지 방법이 있지만 간단하게 CLI와 Gulp를 활용하는

hsecode

이미지 압축 자동화에 이어.. 포맷도 자동으로 바꿔보자! 📌 기본 사항 기본적으로 설치해야하는 것들은 이미지 압축 자동화와 같다. (node.js/ npm 설치부터 imagemin-sharp 설치까지) 📎 node.js, npm 설치 / package json 생성 기본적으로 node js와 npm 설치가 필요하다. node js 💡 -y : default 값으로 설정된 package.json 추가 📌 imagemin 설치하기 imagemin과 압축/포맷 변경에 사용할 imagemin-sharp, imagemin-webp를 설치

hsecode

📌 기본 사항 📎 node.js / npm 설치 기본적으로 node js와 npm 설치가 필요하다. node js 📎 package json 생성 💡 -y : default 값으로 설정된 package.json 추가 📌 imagemin 설치하기 📌 imagemin-sharp 설치하기 📌 이미지 압축 js 파일 만들기 imagemin을 실행할 js파일을 제작한다. ⭐️ 개선하기 위와 같이 작성했을 때 몇가지 문제가 있었

buddle6091

이제 Webpack을 통하여 본격적인 Optimize를 진행해보려고 한다! 사실 Webpack5가 도입이 되면서 아주 기본적인 최적화를 default로 진행을 해준다고 한다. 하지만, 이외의 Plugin과 Optimaization 옵션을 적절하게 사용하면 번들크기를 줄이는데 도움이 되고, 번들을 줄이는 매커니즘(?)을 배워가는 과정이 될 것이라 생각하니 쪼매 설렌다. Webpack Analyzer Plugin Webpack Analyzer Plugin은 Bundle 들의 크기 및 구성이 어떻게 이루어져있는지 시각적으로 보여주는 Plugin이다. 이전에 [최적화 포스트](https://velog.io/@buddle6091/%EC%84%B1%EB%8A%A5-%EA%B0%9C%EC%84%A0-4.-LightHouse-%EC%A7%84%EB%8B%A8%ED%95%B4%EC%84%9C-%EB%82%98%EC%98%A8-%EB%AC%B8%EC%A0%9C%EC%A0%

rndso15

Summary 최근 문제를 풀면서 Sort에 대한 이슈(?) 에 대해 궁금증이 생겨 테스트를 해보았다. 본인은 Sort 사용시 주로 java.util을 이용을 하는데... 여기서 내가 본 코드는 기본적으로 제공된 Arrays나 Collections 모두 Comparator 사용시 Primitive 타입을 사용할수 없다는 점이다. Example. Arrays.sort 그러면 Boxing하는 과정에서 얼마나 리소스를 잡아먹을까 ? Case 1. Integer 변환 실험 테스트 코드 테스트 케이스를 진행한 결과 예상과는 좀 다르다. | | Time | Memory | | :- | - | :-: | | Primitive | 0.004 millis | 511544 Bytes | | Wrapper | 0.009 millis | <ce

eunseo9808

저는 현재 간단한 리액트 라이브러리를 만들고 있습니다. 만들면서 애니메이션 최적화 한 경험을 공유해 보려고 합니다. 라이브러리 구현 내용 계층 구조로 만들어 폴더를 열고 닫을 수 있는 라이브러리입니다. 이 라이브러리를 구현한 방식을 소개해 드리도록 하겠습니다. 폴더를 overflow를 hidden으로 만들고 transition을 height으로 줘서 클릭할 경우 height 값을 바꿔주어야 합니다. 하지만 단순히 클릭된 엘리먼트의 height만 바꿔주면 안됩니다. 부모에도 height가 지정되어 있기때문에 밑에 있던

ttogle918

[tensorflow Lite 모델의 크기, RAM 사용량 감소 추론 시간 감소 -> 계산을 단순화하여 잠재적 정확성을 떨어뜨리는 방식으로 줄임(특정 모델은 최적화 프로세스로 인해 오히려 정확성이 개선될 수도 있다.) -> 전

jay

안녕하세요, 단테입니다. 오늘은 비단 개발자 뿐만 아닌, 마케터 및 기획자 분들도 관심을 가질만한 주제에 대해 글을 써보려고 합니다. A/B 테스트는 UX 라이팅, 버튼 배치, 페이지 전환 플로우등 제품을 개발하면서 마주하게 되는 여러 갈림길에서 A안이 B안보다 좋을 것이다라는 추측을 가설에서만 그치지 않고 검증까지 할 수 있게 도와주는 종합 대조 실험(controlled experiment) 방법입니다. 얼핏 A/B테스트라는 단어 자체만 보자면 A,B군을 잘 나누기만 하면 모든 일이 일사천리로 해결될 것 같지만, 작은 규모의 테스트라고 할지라도 유저에게 보여지기까지 정말 많은 단계의 세분화된 의사결정을 해야합니다. 가설 설계 제품이 주로 어떻게 사용자에게 소개되어지는지에 따라, 이 페이지의 최종 목표가 많은 유저에게 도달하는 것인지, 아니면 실제 서비스 구매까지 이어지는지에 따라 A,B의 후보가 크게 달라집니다. 서비스 홍보가 목표라면, 한

hanei100

성능 최적화 Bootstrap의 커스터마이징 내에 있는 Optimize, 성능 최적화에 대해 살펴봅시다. 프로젝트 내의 SCSS, JavaScript 파일에 필요하다고 생각하는 컴포넌트만 @import하여 최적화할 수 있습니다. 해당 작업을 진행하며, 초기화 등의 여러 작업이 번거롭게 느껴지지만 웹사이트를 제작하면서 최적화된 성능을 위해 불편함을 감수하는 trade-off라고 할 수 있습니다. 출처: Bootstrap Custimoize-Optimize 1.1 SCSS 이전 시간에 색상 커스터마이징을 위해 진행했던 예시를 통해 함께 알아봅시다. 윗부분은 색상 커스터마이징을 위해 필요한 작업이며, 아래에 나와있는 Bootstrap 초기화 부분이 성능 최적화에 해당합니다. 현재는 `@import "../node_modules/bootstrap/scss/bootstr

awesomelon

오늘은 웹 어플리케이션 번들러 3대장webpack, rollup, parcel중 하나인 parcel의 세팅 방법에 대해 알아보겠습니다. 물론 알아볼 것도 없이 parcel 홈페이지가 워낙 번역이 잘되어 있긴 합니다 ㅎㅎ;; 그래도 세팅이 어려운 분들을 위해 작성해봅니다. 시작하기 먼저 parcel을 실행하려면 parcel을 설치해야겠죠? Yarn: yarn global add parcel-bundler npm: npm install -g parcel-bundler 그 다음 yarn init -y npm init -y 그런 다음 index.html 실행 parcel index.html 이런식으로 실행하면 parcel이 자동으로 다시 빌드하고 핫리로드도 지원합니다. 그냥 진입점 파일만 지정해주면 됩니다. 개발 환경 parcel은 옵션을 건드릴게 없습니다. 그게 장점이라면