프로그래밍/Web
-
HTML과 CSS 전처리, 템플릿의 표현력프로그래밍/Web 2022. 9. 11. 01:55
별다른건 아니고, 예전에 찾았었던 자료들 정리나 하려고 쓰는 글. 그래도 굳이 쓰게된 동기를 찾는다면 JSX와 CSS In JS의 표현력에 관해 발전할 여지가 있는지이다. PHP를 사용하던 페이스북이 XHP(xhp-php5-extension, XHP: Introduction)를 만들고, 대체할 제품으로 React와 JSX, CSS-In-JS(슬라이드)를 소개하더니, 종국에는 서버 컴포넌트까지 만들어 내면서 PHP를 대체 가능하게 만들어버렸다. ReactJS 둘러보기 - XHP부터 React Native까지 난 이러한 과정에서 과연 표현력의 손실이 있는가가 궁금했다. 우리가 보지 못한 다른 가능성이 있는가도 말이다. 전처리, 템플릿 엔진 전처리기는 입력 데이터를 처리해 다른 프로그램에 대한 입력으로 사용되..
-
Pure CSS + SVG 애니메이션 적용 실패기프로그래밍/Web 2022. 4. 13. 14:58
때는 2022년 2월 21일. 비디오 플레이어 디자인을 고민할 때였다. 기본, 1줄 프로토타입, 2줄 프로토타입 이왕 만드는 것, 재생-일시정지 버튼에 무언가 포인트를 넣고 싶었다. 아이디어 원천은 LG 음악앱. 폰은 구렸지만 음악앱 하나는 기똥차게 좋았던 LG..ㅠ 처음 써봤을때 재생, 리플레이 인터렉션보고 감동받았다. (투박한 유튜브 따위와 비교가 안됨) 대략 이런 느낌 [Dribble: Play -> Pause, Micro Interactions] 먼저 움직이는 SVG를 만들어봤다. 일시정지 사각형 두개가 중앙에서 만나 깔끔하게 옆으로 솟아나는 재생버튼을 만들기란 어지간히 어려운 일이 아니었다. 똥손이라 단순한 크기조정과 이동 정도를 구현하면 몰라도, 자체적으로 그래픽 리소스를 만들 자신은 없었다...
-
[스압/데이터주의] 웹 최적화 방식 모음 - 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에 스타일..