프로그래밍
-
[스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드프로그래밍/Web 2021. 3. 5. 12:32
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리 [스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드 [스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리 [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링 [스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭 [스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후 [스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드(현재) 5. 빌드 빌드 성능 최적화를 앞서, 우리가 사용하고 있는 툴들의 종류가 무엇이 있는지 생각해보자. 로컬에서 자바스크립트 코드 자체를 실행하기 위한 Node.js 패키지 설치와 의존성 관리를 위한 NPM 모노레포 관리를 위한 Lerna 자바스크립트를 정적..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후프로그래밍/Web 2021. 2. 14. 18:25
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리 [스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드 [스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리 [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링 [스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭 [스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후(현재) [스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드 4. 로드 후 동일한 페이지, 다른 페이지 4.1 요청줄이기 다른 페이지로 넘어갈 때 요청량을 줄일 수 있는 여러 기법들이 존재한다. [Offline First] 4.1.1 클라이언트 저장소들 비교와 활용 개요 로드 후, 브라우저에 정보를 저장하는 것은 ..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭프로그래밍/Web 2021. 2. 14. 18:25
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리 [스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드 [스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리 [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링 [스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭(현재) [스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후 [스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드 3.3 UX 트릭 객관적인 성능이 올라가는 것이 아니라 사용자가 빠르다고 느낄 수 있게 만드는 트릭들. UX는 글로만 설명하기 힘든 부분이 많기 때문에 가급적 GIF나 사진자료 통해 직관적으로 이해할 수 있도록 힘을 썼다. 초반에 나오는 것들은 많이들 접..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링프로그래밍/Web 2021. 2. 14. 18:25
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리 [스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드 [스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리 [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링(현재) [스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭 [스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후 [스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드 3. Layout 및 렌더링 Layout 발생 빈도 최소화 및 비용 최소화와 CPU 처리 효율화, UX 트릭으로 나뉜다. 레이아웃에 영향을 미치는 것들에 대한 정리는 What forces layout/reflow란 글이 잘 설명해준다. 3.1 발생 빈도 ..
-
React + RxJS Todo App (with 오버엔지니어링?)프로그래밍/Web 2020. 5. 3. 09:01
처음에는 React에 RxJS를 섞어보는 것을 목표로 하는 플젝이었는데 재미로 이것저것 넣다보니 산으로 갔다ㅋㅋ 아직 만드는 중이지만 벌써 5월이 되서 일단 소개해본다. 회사 지원해야뎌.. https://github.com/black7375/React-RxJS-Todo black7375/React-RxJS-Todo Contribute to black7375/React-RxJS-Todo development by creating an account on GitHub. github.com 목표는 성능 코드의 간결함 나중에 다른 플젝에서도 우려먹을 디자인 컨셉 반응형 | 유동적 디자인 시간나면 PWA, Web Component까지도 도입 등등 각종 개념 증명용 또는 오버엔지니어링 수행 우선 생긴건 대충 이런식..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리프로그래밍/Web 2020. 4. 19. 15:54
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리 [스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드 [스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리(현재) [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링 [스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭 [스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후 [스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드 2. 파싱 및 렌더링 트리 이 파트의 핵심은 파싱의 병렬성과 렌더링에 미치는 영향이다. 크게 배치순서를 바꾸는 것과 제한, 기타 효율적 활용하는 방안으로 나눌 수 있다. 2.1 배치순서 2.1.1 CSS를 상단에 배치 개요 분류: CSS HEAD에 스타일..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드프로그래밍/Web 2020. 4. 4. 09:36
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리[스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드(현재)[스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링[스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭[스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후[스압/데이터주의] 웹 최적화 방식 모음 - 5. 빌드1. 다운로드사용자(End-user) 응답시간의 80%는 초기 로딩부분에서 소요된다. 그 중 대부분의 시간은 모든 페이지 구성요소(images, syltesheets, scripts 등)의 다운로드에 소요된다.따라서 다운로드 관련 시간을 아끼는 것은 중요하다. 크게 ..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리프로그래밍/Web 2020. 3. 17. 15:56
웹으로 전향한지 얼마 안됐는데 그동안 경험상 전반적 구조 파악에는 퍼포먼스 개선하는게 최고라 적게되었습니다. 이 문서는 완전히 완성된 상태가 아니라 시간이 나면 업데이트 중. 혹시 이외에도 재미있는 팁을 아시는 분이 있다면 댓글로 알려주세요. 모바일이나 기타 프로그래밍/전공 경험과 지식을 살려봤습니다. 제 블로그 글들을 보면 알겠지만 상당히 장문으로 이루어져 있지만.. 이건 역대급으로 심하게 길다보니 머릿글을 ㅎㅎ 조금 과장해서 책 한권;; 블로그 스킨을 React 기반으로 클린룸 구현해볼까 생각 중이라 더 열심히 하고 있습니다. 타입스크립트, PWA, 웹컴포넌트 등 파워풀한 것을 모두 넣어서 가볍고 빠르고 생산성까지 잡으며 아름답게 만드는 것이 목표 ㅎㅎ 가끔씩 업데이트하다보니 렉이 심해서 나누었습니다..