프로그래밍/Web
-
[스압/데이터주의] 웹 최적화 방식 모음 - 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, 웹컴포넌트 등 파워풀한 것을 모두 넣어서 가볍고 빠르고 생산성까지 잡으며 아름답게 만드는 것이 목표 ㅎㅎ 가끔씩 업데이트하다보니 렉이 심해서 나누었습니다..
-
자바스크립트와 함수형 프로그래밍.프로그래밍/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 계열로 이해하는 ..
-
웹브라우저 확장기능 개발.프로그래밍/Web 2018. 12. 31. 06:56
요렇게 스토어 등록했습니다.Readable Font - Get this Extension for 🦊 Firefox (ko)Download Readable Font for Firefox. 가독성 좋은 글씨를 보여줍니다. Readable Font가독성 좋은 글씨를 보여줍니다. Readable Font - 웨일 스토어가독성 좋은 글씨를 보여줍니다. 웹브라우저 폰트 관련 확장기능을 만들었는데, 그 과정을 공유해서 아이디어는 있는데 개발을 어떻게 해야할지 우왕좌왕 싶은 분들에게 일종의 가이드(?)를 해주려 합니다. * 확장기능은 부기기능, 확장앱, Addon, Extension 등으로도 부릅니다. 처음 만들어봤는데 생각보다 쉬워요^^ 단, 제가 하는 강좌는 HTML, CSS, Javascript 강좌가 아니고 저..
-
Billboard.js 기초 사용법.프로그래밍/Web 2018. 11. 7. 09:18
2018/10/31 - [IT] - Letter - Enhanced Ver. 2 프리뷰. 에서 약속했던대로 Billboard.js라는 차트 기초 사용법을 알아봅시다. 예제 및 기초 사용법. 제가 예제로 써놨던 것은 Billboard.js의 홈페이지에 나오는 예제였습니다. 코드로 보여주면, 였습니다. class vs id? 지금까지 형식을 써왔기 때문에 id가 나와서 어떤 차이인가 간략히 설명하면 페이지 내부에서 사용 가능 횟수. ex) 2번 사용한 경우. 내용들 내용들 class: 여러번.id: 한번 만.복수 적용. ex) 2개를 복수 적용한 경우. 내용들 내용들 class: 가능.id: 불가능.표현법.class: .class이름.id: #id이름. 차트를 여러번 쓰거나 티스토리의 기본기능들이 대부분 c..
-
iframely가 아닌 Embedly를 택한 이유.프로그래밍/Web 2018. 11. 6. 03:59
원래 텀블러에 올릴만한 글이나,텀블러 스킨은 일부 스크립트를 불러오기가 힘든 관계로 티스토리에 적습니다. 사실 코드 복사 & 붙여넣기엔 iframely가 Embedly보다 좋지만, 만들어지는 코드 형태가 복잡해서 API를 사용하면 모를까 일반 사용자들이 코드를 짜기엔 적합하지 않다. 예를 들어 글쓰다 날려먹었단 제 블로그 일기를 Embedly와 iframely를 차례로 나열하면, 플래시는 나의 적.플래시는 나의 적.플래시 활성 안했다고 임시저장한게 없어서 다 날라갔다. 플래시에 에러맞고 불구덩이 쳐박힌 내 기분을 니들이 알아? https://www.youtube.com/watch?v=D3ZFtSoWtRc 그건 그렇고 임시저장해놓은 글들이 많았구나.. 나중에 차근차근 풀어야겠다. https://black7..
-
Letter - Enhanced 스킨 공개.[Ver. 2.0]프로그래밍/Web 2018. 10. 31. 06:30
* 여기는 Letter - Enhanced Ver. 2의 기능을 미리 볼 수 있는 페이지 입니다.* 이 페이지에서 보여주는 Letter - Enhanced 스킨은 개발 중인 관계로 미공개 기능이나 코드, 버그가 포함되어 있을 수도 있습니다. 맨붕.. 내가 만들어놨던 테스트 페이지가 실수로 싹 날라갔다.으아망ㄴㅁ리ㅓ;ㅣㅏ 플래시 때문에 자동저장도 안됐어! 너ᅟᅡᆷㄹ;ㅣᅟᅡᆫㅁ얼플래시는 나의 적ㄴㅁㅇ;ㅣ러ㅣ;ㅣ망ㄴㄹ댜ㅓ매; 0. 파일 첨부.Ver 2.1 깃허브에서도 확인할 수 있습니다. black7375/Letter-EnhancedTistory's Letter Skin + Font setting, Pretty Blockquote, Math & Code highlighting - black7375/Letter..