프로그래밍
-
[스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후프로그래밍/Web 2021. 2. 14. 18:25
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리 [스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드 [스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리 [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링 [스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭 [스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후(현재) 4. 로드 후 동일한 페이지, 다른 페이지 4.1 요청줄이기 다른 페이지로 넘어갈 때 요청량을 줄일 수 있는 여러 기법들이 존재한다. [Offline First] 4.1.1 클라이언트 저장소들 비교와 활용 개요 로드 후, 브라우저에 정보를 저장하는 것은 캐시로 사용해 서버에 요청을 줄이거나 낙관적 UI(Opt..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭프로그래밍/Web 2021. 2. 14. 18:25
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리 [스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드 [스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리 [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링 [스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭(현재) [스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후 3.3 UX 트릭 객관적인 성능이 올라가는 것이 아니라 사용자가 빠르다고 느낄 수 있게 만드는 트릭들. UX는 글로만 설명하기 힘든 부분이 많기 때문에 가급적 GIF나 사진자료 통해 직관적으로 이해할 수 있도록 힘을 썼다. 초반에 나오는 것들은 많이들 접해봤겠지만, 후반에 나오는 낙관적 UI(Optimisti..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링프로그래밍/Web 2021. 2. 14. 18:25
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리 [스압/데이터주의] 웹 최적화 방식 모음 - 1. 다운로드 [스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리 [스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링(현재) [스압/데이터주의] 웹 최적화 방식 모음 - 3.3 UX 트릭 [스압/데이터주의] 웹 최적화 방식 모음 - 4. 로드 후 3. Layout 및 렌더링 Layout 발생 빈도 최소화 및 비용 최소화와 CPU 처리 효율화, UX 트릭으로 나뉜다. 레이아웃에 영향을 미치는 것들에 대한 정리는 What forces layout/reflow란 글이 잘 설명해준다. 3.1 발생 빈도 최소화 3.1.1 CSS 속성 개요 분류: CSS 이야기..
-
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. 로드 후 2. 파싱 및 렌더링 트리 이 파트의 핵심은 파싱의 병렬성과 렌더링에 미치는 영향이다. 크게 배치순서를 바꾸는 것과 제한, 기타 효율적 활용하는 방안으로 나눌 수 있다. 2.1 배치순서 2.1.1 CSS를 상단에 배치 개요 분류: CSS HEAD에 스타일 시트를 넣으면 페이지가 점진적으로 렌더링 될 수 있어 ..
-
-
[스압/데이터주의] 웹 최적화 방식 모음 - 0. 전반적 원칙과 원리프로그래밍/Web 2020. 3. 17. 15:56
웹으로 전향한지 얼마 안됐는데 그동안 경험상 전반적 구조 파악에는 퍼포먼스 개선하는게 짱짱이라 적게되었습니다. 이 문서는 완전히 완성된 상태가 아니라 시간이 나면 업데이트 중. 혹시 이외에도 재미있는 팁을 아시는 분이 있다면 댓글로 알려주세요. 모바일이나 기타 프로그래밍/전공 경험과 지식을 살려봤습니다. 제 블로그 글들을 보면 알겠지만 상당히 장문으로 이루어져 있지만.. 이건 역대급으로 심하게 길다보니 머릿글을 ㅎㅎ 조금 과장해서 책 한권;; 블로그 스킨을 React 기반으로 클린룸 구현해볼까 생각 중이라 더 열심히 하고 있습니다. 타입스크립트, PWA, 웹컴포넌트 등 파워풀한 것을 모두 넣어서 가볍고 빠르고 생산성까지 잡으며 아름답게 만드는 것이 목표 ㅎㅎ 가끔씩 업데이트하다보니 렉이 심해서 나누었습니..
-
자바스크립트와 함수형 프로그래밍.프로그래밍/Web 2020. 3. 7. 22:36
React Native에서 사용하는 React는 함수형 프로그래밍의 철학을 받아들여 만들어졌습니다. React를 처음 접하는 이들을 위한 문서에서도 함수형 프로그래밍의 특징중 하나라는 불변성을 강조하고 있을 정도 입니다. 자습서: React 시작하기 - React 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 따라서 React Native로 프로그래밍을 하기 위해서는 함수형 프로그래밍에 대해 알아두는 것이 좋습니다. 함수형 프로그래밍이란 패러다임은 람다대수에 기반하여 만들어졌고, 람다대수와 가장 가까운 프로그래밍 언어는 Lisp입니다. 따라서 함수형 프로그래밍 개념은 Lisp 계열로 이해하는 ..