프로그래밍
-
Pure CSS + SVG 애니메이션 적용 실패기프로그래밍/Web 2022. 4. 13. 14:58
때는 2022년 2월 21일. 비디오 플레이어 디자인을 고민할 때였다. 기본, 1줄 프로토타입, 2줄 프로토타입 이왕 만드는 것, 재생-일시정지 버튼에 무언가 포인트를 넣고 싶었다. 아이디어 원천은 LG 음악앱. 폰은 구렸지만 음악앱 하나는 기똥차게 좋았던 LG..ㅠ 처음 써봤을때 재생, 리플레이 인터렉션보고 감동받았다. (투박한 유튜브 따위와 비교가 안됨) 대략 이런 느낌 [Dribble: Play -> Pause, Micro Interactions] 먼저 움직이는 SVG를 만들어봤다. 일시정지 사각형 두개가 중앙에서 만나 깔끔하게 옆으로 솟아나는 재생버튼을 만들기란 어지간히 어려운 일이 아니었다. 똥손이라 단순한 크기조정과 이동 정도를 구현하면 몰라도, 자체적으로 그래픽 리소스를 만들 자신은 없었다...
-
객체지향 시스템과 패러다임 그리고 철학프로그래밍/설계 2021. 12. 14. 00:31
자바스크립트는 왜 프로토타입을 선택했을까 라는 글을 읽고 떠오르는 내용들을 덧붙이거나 정리 해보았습니다. 원글과는 접근법이 좀 다르며, 기획이 아닌 급하게 쓴 글이라 의식의 흐름 사이에서 표류합니다 ㅠㅠㅠ 빠른요약 클래스와 프로토타입의 가장 커다란 차이는 객체 생성 방식 [클래스 -> 인스턴스 vs 객체 -> 복사된 객체]. 가장 큰 공통점은 객체지향이며, 프로그램을 객체라는 단위로 나누고 상호작용하게 하는 것. 객체지향의 핵심인 캡슐화를 잘하기 위한 가장 간단한 방법은 추상화를 잘 하는 것. 추상화는 데이터 위주의 성질(고전적 OOP), 형태(타입), 상태(데이터 주도 설계)와 관계 중심인 시간(절차지향), 행동(함수형), 정의(논리형), 상황(도메인 주도 설계, AOP) 등으로 나누어 생각할 수 있음..
-
러스트 찍먹 후 느낀점?프로그래밍/Rust 2021. 6. 13. 00:36
면책사항) 간단히 튜토리얼을 한 후 첫인상일 뿐이므로, 정확하지 않을수도 있다. 귀여운 >.< Ferris 좋았던 점. 1. 툴체인!! 누구도 부정할 수 없다. Cargo, rustup, Rustfmt, Clippy, Rust Analyzer등의 공식툴!! 빌드 툴부터 생각해보자. 네이티브 계열에서 생각나는건 Make!! 어느정도 규모가 있는 프로젝트는 크로스 플랫폼 대응이나 각종 설정을 적용하기 위해 Meta Make 시스템을 사용하는게 일반적이다. 대표적인게 GNU Autotools(Autoconf, Automake, Libtools). [Introduction to GNU Autotools, The Basics of Autotools] M4와 Make 두개의 작은 언어를 더 알아야만 한다..ㅋㅋㅋ ..
-
[스압/데이터주의] 웹 최적화 방식 모음 - 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까지도 도입 등등 각종 개념 증명용 또는 오버엔지니어링 수행 우선 생긴건 대충 이런식..