끄적끄적 개발정리

최근 1년간 회사에서 디자인 시스템관련 작업을한 경험을 공유하려고 합니다. 완벽한 디자인 시스템을 만들었다고 생각하지 않지만 편의상 디자인 시스템이라고 하겠습니다. 최근 1년 작업하면서 느낀건 개발자들와 UX디자이너들이 생각하는 디자인 시스템이 많이 다르다는걸 느꼈습니다. 우선 디자인 시스템에 대해 설명하고 넘어가겠습니다. 개발자가 생각하는 디자인 시스템: Storybook + UI Component 로 구성된 구성 UX디자이너가 생각하는 디자인 시스템: Pigma or Zeplin 으로 구성된 컴포넌트 구성 + 폰트, 디자인 심볼 + 무언가를 통한 일괄적용 ( 앱 + 웹 ) 어떻게 보면 UX디자이너가 생각하는 부분이 완전한 디자인 시스템에 더 가깝습니다. (적용은 다른 얘기지만요...) 디자인 시스템을..

필요성 웹상에서 적절한 font를 보여주는 것은 매우 중요하며 웹폰트를 사용하지 않고 내장폰트를 이용한다면 내장폰트에 맞게 적절한 폰트수치를 사용하는게 중요하다. 현재 운영중인 iOS, Android에서 제공되는 웹뷰에서 각기 다른 폰트가 적용되고 있다. (별도의 웹폰트를 사용하고 있지 않다.) iOS, Android 모두 디바이스에 내장된 폰트를 사용하고 있습니다. iOS의 경우 .AppleSystemUIFont, Android의 경우 Noto Sans CJK KR가 적용된다. iOS디자인 가이드상으로는 font-weigh을 600으로 사용하여야 하고 Android는 유사한 두께로 보여주기위해 700을 사용하여야 했다. 두 폰트의에 동일한 font-weight을 적용할 경우 한 쪽 폰트가 너무 두껍게..

Motivation Vue를 통해서 현재 두 가지 서비스의 프론트엔드 개발을 하고 있습니다. 추가적으로 신사업도 개발하게 될 것 같고 N개의 서비를 운영하게되겠죠 이렇게 개발해야하는 상황에서 공통기능 (컴포넌트, 유틸, 상수값 등)에 대해 어떻게 유지해야할지 고민하게 되었습니다. 1. 패키지 저장소를 구성하고 하여 관리하는방식 2. 하나의 저장소를 모노레포 구조로 구현하여 공통소스를 공유하는 방식 versioning을 해야하는 상황이고 관리할만한 인력과 환경이라면 1번 케이스가 베스트라고 생각했습니다. 하지만 고민해본 결과 당장 versioning을 해야하는 상황도 아니고 버전별로 관리하고 운영하게 더 어렵다는 생각이 들어서 MonoRepo 구조로 개발하기로 하였습니다. 구성 과정 모노레포 구조로 개발하..

뷰 리액트에 대한 비교글은 많지만 제가 실무에서 사용하면서 느낀점에 대해서 주관적으로 포스팅해보려고 합니다. 주관적인 관점에서 포스팅 하는만큼 잘못된 점이나 다른 의견은 댓글로 알려주시면 감사하겠습니다. Vue 3.x 버전에 대해서 다루겠습니다. ( MS가 IE 지원을 드랍한 상황에서 Vue 2.x 를 더 이상 사용할 이유가 크게 없기 때문입니다. ) Vue 3.x 버전부터는 React와 상당히 유사합니다. 간단히 카운트를 증가시키는 기능을 예제로 보겠습니다. React import { useState } from "react"; import "./App.css"; function App() { const [count, setCount] = useState(0); const addCount = () =>..

네트워크 환경이 충분히 좋고 디바이스 성능이 뛰어나다면 별도의 최적화 작업등이 무의미 할 수 있다. 이런 최적화 작업은 좋지못한 환경에서 빛을 바란다. 전제조건 1. Optimized 이미지를 사용 2. 네트워크 환경이 좋지 못함 3. Low Performance Device를 사용중 이미지 포멧등의 최적화는 적용하기 나름이기 때문에 최적화 되었다는 가정하에 진행한다. 핀터레스트 같은 사이트를 보자 https://www.pinterest.co.kr/ 빨간색 영역이 디바이스에 보여지는 영역(View port)이고 파랜색 영역이 랜더링되는 영역이다. 실제 파란색영역은 세로로 더 긴영역을 차지한다. 이럴경우 실제 최초 로딩에 필요한 부분은 화면에 보여지는 영역뿐이다. 이때 사용할 수 있는게 Intersecti..

브라우저 렌더링 방식에대해 포스팅합니다. Google Developer 문서를 보면서 아래 문구가 가장 와다았습니다. 일반적으로 '주요 렌더링 경로 최적화'란 HTML, CSS 및 자바스크립트 간의 종속성 그래프를 이해하고 최적화하는 것을 말합니다. 간단히 설명하자면 HTML을 파싱하여 DOM을 만들고 CSS를 파싱하여 CSSOM을 만듭니다. 그리고 DOM과 CSSOM을 이용하여 Render Tree를 생성합니다. 그리고 생성된 Render Tree를 이용해 화면에 그리기 위해 좌표값을 계산하는 Layout(reflow)과정을 거친 후 Paint과정을 통해 화면게 그려지게 됩니다. HTM => DOM (Document Object Model) CSS => CSSOM (CSS Object Model) 위에..

state, props가 변경시 render함수가 실행되고 새로운 엘리먼트 트리를 반환한다. 이때 두개의 가정을통해 효과적으로 랜더링을 진행한다. 1. 엘리먼트의 타입이 다르다면 기존 엘리먼트를 폐기한다. 랜더링 조건에따라 => 으로 바뀐다면 기존 엘리먼트를 폐기하고 새로 랜더링한다. 이때 OldComponent는 componentWillUnmount()을 실행하고 NewComponent 는 componentWillMount 을 실행한다. 2. 키를통해 새로 랜더링해야할지 판단한다. 재귀적 호출을통해 엘리먼트를 생성할경우 key값을 필수적으로 삽입하야여한다. 그렇지 않을 경우 새로운 엘리먼트가 추가될때 성능상에 좋지 않다. *랜덤값을 사용한다거나 재배열되는 리스트의 인덱스값을 사용할 경우 성능상 좋지않고..