프로그래밍
-
[스압/데이터주의] 웹 최적화 방식 모음 - 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 계열로 이해하는 ..
-
간단한 모나드 설명과 예제프로그래밍/설계 2020. 2. 11. 13:57
리엑트 네이티브 스터디 때문에 시작한 글이었는데 생각보다 길어져서 분리하게 되었다. 자바스크립트 관련 코드는 해당 스터디쪽 문서에 올릴 예정. 역시 모나드를 이해할때는 Haskell이 가장 효율적이므로 Haskell로 된 코드를 사용해보자. 자바스크립트로도 설명할 수 있지만(모나드 섹션 하단의 링크 참조) 이해하기에 코드가 깔끔하진 않다. 하스켈의 간단한 입출력 예제다. main = do putStrLn "Input: " x >= 타입 생성자 M 타입 생성자는 C++의 templete 와 유사하여 다른 타입을 인자로 받는다. 완전히 같진 않지만 아래와 같이 대응된다고 생각하면 된다. -- Haskell myFunc :: Int -> Int data MyData t = MyData t -- 형태: * ->..
-
내 맘대로 프로그램 설계 7. - 함수형 프로그래밍.프로그래밍/설계 2019. 5. 21. 17:07
내 맘대로 하는 프로그램 설계 시리즈. Chapter1 - 간단한 데이터 처리(4섹션) 2017/12/27 - [프로그래밍/설계] - 내 맘대로 프로그램 설계 1. - 이유와 준비. 2018/01/11 - [프로그래밍/설계] - 내 맘대로 프로그램 설계 2. - 데이터 타입. 2018/01/16 - [프로그래밍/설계] - 내 맘대로 프로그램 설계 3. - 함수와 변수. 2018/05/29 - [프로그래밍/설계] - 내 맘대로 프로그램 설계 4. - 고정 크기 데이터. 2017/06/30 - [프로그래밍/설계] - 프로그래밍과 추상화에 대하여.[부록] Chapter2 - 임의의 데이터 처리 2018/06/10 - [프로그래밍/설계] - 내 맘대로 프로그램 설계 5. - 리스트와 재귀. 2019/05/20 ..
-
내 맘대로 프로그램 설계 6. - 데이터구조와 알고리즘.프로그래밍/설계 2019. 5. 20. 09:53
내 맘대로 하는 프로그램 설계 시리즈. Chapter1 - 간단한 데이터 처리(4섹션) 2017/12/27 - [프로그래밍/설계] - 내 맘대로 프로그램 설계 1. - 이유와 준비. 2018/01/11 - [프로그래밍/설계] - 내 맘대로 프로그램 설계 2. - 데이터 타입. 2018/01/16 - [프로그래밍/설계] - 내 맘대로 프로그램 설계 3. - 함수와 변수. 2018/05/29 - [프로그래밍/설계] - 내 맘대로 프로그램 설계 4. - 고정 크기 데이터. 2017/06/30 - [프로그래밍/설계] - 프로그래밍과 추상화에 대하여.[부록] Chapter2 - 임의의 데이터 처리 2018/06/10 - [프로그래밍/설계] - 내 맘대로 프로그램 설계 5. - 리스트와 재귀. 2019/05/20 ..
-
웹브라우저 확장기능 개발.프로그래밍/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 강좌가 아니고 저..