# 성능최적화

31개의 포스트
post-thumbnail

우리 팀의 성능 최적화 이야기♻️

공식의 성능🧪 이제, 우테코에서의 배운 내용을 토대로 우리 팀의 프로젝트의 성능을 최적화할 시간이 왔다.

2022년 9월 11일
·
4개의 댓글
·
post-thumbnail

[우아한테크코스] 모락팀의 성능 최적화, 왜 해야해?

프로젝트 4차 요구사항에는 '성능 리포트를 공유한다.'라는 문항이 있었습니다. > 성능 리포트...? 그게 뭔데... 그거 꼭 해야해? 🤔 솔직하게 말하면 코드에서 부족한 부분들이 많았기 때문에 성능 리포트를 공유하라는 요구사항을 보고 가장 먼저 든 생각은 '지금

2022년 9월 4일
·
7개의 댓글
·

[React] useCallback, 함수형 업데이트

리액트 Hook 중 하나로 렌데링 최적화를 위함 이다. useEffect 나 useMemo처럼 의존성 배열을 받는다. 두번 째 인자인 deps(의존성 배열, dependency array) 에 변화가 일어나면 메모이제이션(memoization) 된 콜백함수가 반환된다.

2022년 8월 19일
·
0개의 댓글
·
post-thumbnail

웹 성능 최적화 - 1. animation

웹 성능 최적화 중 가장 많이 개선한 animation

2022년 8월 3일
·
0개의 댓글
·

웹 성능 최적화

참고글성능 최적화는 페이지를 로드할 때, 페이지를 렌더링할 때로 분류할 수 있다.dom tree가 만들어지는 과정에서 css, js를 만나게 되면, 돔 트리 파싱을 중단하고 해당 파일을 파싱하거나 다운로드 후 실행하게 되는 요소를 블록 차단 리소스라고 한다.css의

2022년 7월 23일
·
0개의 댓글
·
post-thumbnail

LazyLoad vs PreLoad

LazyLoad는 이름 그대로 게으른 로딩을 의미한다. 쉽게 말해 보여지지 않는 이미지에 대한 로딩 시점을 뒤로 미루는 것이다.페이지 로드 시점에 유저에게 보여지지 않는 이미지는 스크롤 등으로 실제로 이미지가 보여지는 시점이 올 때 로딩된다. 따라서 사용자가 스크롤을

2022년 6월 29일
·
0개의 댓글
·

React 랜더링 최적화 7가지 방법 (Hooks)

부모에게서 전달받은 props가 변경될 때부모 컴포넌트가 리렌더링 될 때자신의 state가 변경될 때useMemo 공식문서(https://ko.reactjs.org/docs/hooks-reference.html어떠한 값에 변화가 있을때만 새로운 값을 할당해주고

2022년 6월 28일
·
0개의 댓글
·
post-thumbnail

브라우저 ReFlow

오늘은 브라우저 리플로우에 대해서 공부해보려고 한다!우선 리플로우에 대해 공부하려면 렌더링이라는 게 무엇인지 확실히 알 필요가 있다.렌더링이란 무엇일까?렌더링 과정은 다음과 같다.DOM(Document Object Model), CSSOM(CSS Object Model

2022년 4월 7일
·
0개의 댓글
·
post-thumbnail

[최적화] 핵심적인 웹 지표(LCP,FID,CLS) 개선하기

🐻 : LCP, FID, CLS 에 대해서도 정리해주신다고 했잖아요! 그리하여 웹 성능 최적화 포스팅의 연장. 웹 성능 최적화 V2 ⚡️ 핵심적인 웹 지표 개선하기.

2022년 3월 31일
·
3개의 댓글
·

프로세스 생성 관계 보기 명령어

AIX : proctree \[pid]HP-UX, 솔라리스 : ptree \[pid]리눅스 : pstree \[pid]윈도우 : 프로세스 모니터, 프로세스 해커

2022년 3월 7일
·
0개의 댓글
·

통신/파일 간 동작 모니터링 명령어

IBM AIX/오라클 솔라리스 : truss -dl -o \[outfile] -p \[pid]truss -c -p \[pid] <- 모니터링하는 동안 시스템 콜 명령별 호출 횟수와 소요시간 통계 조회HP-UX : tusc - T "" -o \[outfile] -l

2022년 3월 7일
·
0개의 댓글
·

스텍 수집 명령어

유닉스 바이너리 프로그램(C/C++) HP-UX/솔라리스/리눅스 : pstask pid IBM AIX : procstask pid자바 프로그램 오라클/HP 계열 1.5 이상 : jstask pid <- JDK home/bin 디렉토리에 위치 오라클/HP 계

2022년 3월 7일
·
0개의 댓글
·

React 생명주기

주제 React의 기본 개념을 알았으니 상세하게 알아볼 필요가 있다. 생명주기, hooks, 성능최적화등에 대해 알아보자 생명주기(life cycle) 컴포넌트가 실행, 업데이트, 제거등 웹에서 화면에 생성부터 사라질때까지를 생명주기 또는 라이프사이클이라고 표현한다.

2022년 3월 6일
·
0개의 댓글
·
post-thumbnail

[최적화] 웹 성능 최적화 방법 5분 완성

성능 최적화 방법 몇가지를 알고 계신가요? 성능 최적화 방법을 아는대로 설명해주세요! ( ...🤔 전부요..? )

2022년 2월 24일
·
10개의 댓글
·
post-thumbnail

[최적화] 검색엔진 최적화(SEO) 이유와 방법 10가지

검색 엔진 최적화(Search Engine Optimization, SEO)가 필요한 이유는 무엇일까? 꼭 해야할까? 🤔 제 대답은 Yes여요! 검색엔진 최적화 방법을 알아보자.

2022년 2월 18일
·
14개의 댓글
·
post-thumbnail

[성능최적화] squoosh를 활용해 이미지 최적화하기

구글에서 제공해주는 squoosh 사이트를 활용해 기존 이미지를 웹이미지로 변환하여 이미지사이즈를 최적화시켜줄 수 있다.https://squoosh.app/해당 squoosh 사이트를 활용하면오른쪽 하단에 축소한 퀄리티의여부와 사이즈 여부가 나타난다.기존 kB

2022년 2월 15일
·
0개의 댓글
·
post-thumbnail

[성능최적화] Code Splitting 최적화하기

모든페이지에서 여러가지 라이브러리가 전부 필요하지 않다.라이브러리는 많은 데이터를 쓰게되고, 렌더링시간이 더 오래걸리기 때문에 페이지별로 라이브러리를 나눠서 사용해주는것이 최적화에 용이하다.페이지를 로드하다보면 왜 ?뭐 때문에? 로딩이 오래걸리는지 의문이 들때가 많다.

2022년 2월 14일
·
0개의 댓글
·
post-thumbnail

[성능최적화] 이미지 최적화 lazy Image / 최적화 size 만들기

말 그대로 '게으른 이미지'를 뜻한다!즉, 서버나 사이트가 실행될 때 모든 이미지들을 한번에 불러오는 것이 아닌, 페이지 렌딩에 따라 천천히 불러오는 방식이다.이미지 최적화를 사용하면 초기 진입시 유저가 페이지를 더 빨리 접할 수 있고, 데이터의 낭비를 줄일 수 있다.

2022년 2월 14일
·
0개의 댓글
·
post-thumbnail

[성능최적화] 웹 성능최적화에 대한 고민

수많은 에러를 접하면서 그리고 그 해결과정을 겪으면서, 스스로가 조금 더 성장했단 것에 뿌듯함과 욕심이 더 생기기 시작했다. 처음엔 전공자도 아닌 쩌리가 뭘 할 수 있겠냐는 식의 무시가 싫어서 더 찾아보고 파헤치고 노력했던 건데, 어느순간 '무시'가 '인정'으로 바뀌었

2022년 2월 14일
·
0개의 댓글
·