UI 테스트가 있으면 좋은 케이스 일부 컴포넌트의 변경 사항이 다른 컴포넌트들에 영향을 줄 확률이 높을 때 사람이 모든 사이드 이펙트를 예측하고 직접 눈으로 하나하나 확인하는데는 한계가 있을 때 테스트를 적용하여 제품의 안정성을 보장하고 싶을 때 UI 테스트 종류 수동 테스트 개발자가 컴포넌트의 정확성을 수동으로 확인하여 정확성을 검증 빌드 시 컴포넌트의 모양이 온전한지 확인하는 데 도움 됨 스냅샷 테스트 Storyshots을 사용하여 컴포넌트가 렌더링 된 마크업을 캡쳐 렌더링 오류 및 경고를 유발하는 마크업의 변경사항을 파악하는데 도움 됨 단위 테스트 컴포넌트의 출력이 고정 입력값에서 동일하게 유지되는지를 확인 컴포넌트의 기능적 품질을 테스트하는데 유용 대표적으로 Jest 가 있음 시각적 회귀 테스트 ..
IT/Web
display란? display은 css 레이아웃 속성 중 하나이며 요소를 어떻게 보여줄지 결정한다. 알아둘만한 속성은 6개 정도가 있으며, 태그마다 기본적으로 적용된 속성이 다르다. none 요소를 렌더링하지 않도록 설정함 visibility: hidden으로 설정한 것과 달리, 영역도 차지하지 않음 inline 한 줄로 나열됨 텍스트의 크기 만큼 영역 차지함 (width, height 설정 불가/ img 는 예외적으로 높이와 너비 설정 가능) 줄바꿈되지 않음 inline 속성인 태그들 , , , , , , , , , , , , , , , , , , , , block 블럭처럼 위에서부터 차곡차곡 쌓이며 줄바꿈 됨 width는 기본적으로 100%를 차지함 (부모가 있을 경우 부모 너비의 100% 차지) ..
SVG란? SVG(Scalable Vector Graphics, SVG)는 2차원 벡터(Vector) 그래픽을 표현하기 위한 XML 기반의 파일 형식이다. SVG 파일의 장단점 장점 픽셀로 구성된 래스터(Raster) 파일과 달리, SVG는 벡터(Vector) 그래픽이기 때문에 크기를 조정해도 해상도를 유지한다. 비교적 많은 컬러 픽셀로 생성되는 래스터 이미지에 비해 용량이 작다. SVG 파일은 텍스트를 디자인이 아닌 텍스트 그대로 처리하기 때문에 스크린 리더가 SVG 이미지에 포함된 모든 단어를 스캔할 수 있다. 따라서 웹 페이지를 읽어야 할 때 유용하며 검색엔진은 SVG 이미지 텍스트를 읽고 색인을 달 수도 있다. 단점 SVG 파일은 로고, 일러스트레이션, 차트 등 웹 그래픽에 적합하며, 픽셀이 부족..
컴포넌트 만들기 전에 1. 외부 라이브러리의 컴포넌트는 Wrap 컴포넌트를 만든 다음에 사용 외부 라이브러리는 언제 사용을 중단할지 알 수 없어요. 관리 주체가 우리가 아니기 때문에 한계가 있기 때문이죠. 그러니 외부 라이브러리는 언제든 다른 라이브러리로 바꾸거나 자체 코드로 변경할 수 있도록 Wrap 컴포넌트를 만들어 사용해요. props 및 config를 프로젝트 전반에 동일하게 가져가려는 목적도 있어요. 컴포넌트 만들기 1. 파일과 디렉토리디렉터리 명은 케밥 표기법을 기본으로 사용하고, 리액트 컴포넌트 관련 디렉터리와 파일만 파스칼 표기법으로 사용 파일 내에서 컴포넌트 명이나 클래스의 이름을 표기할 때는 파스칼로 표기해요. 스토리북 내의 title은 파스칼케이스로 표기해요. 2. 함수 컴포넌트를 생..
Virtual DOM JavaScript 객체로 표현된 DOM이다. DOM 조작은 각 조작이 attachment → reflow → repaint 과정의 리렌더링을 일으킨다. 변화를 묶어서 DOM fragment에 적용한 다음, 한 번에 DOM에 반영하면 리렌더링을 줄일 수 있다. VirtualDOM은 변화가 일어나면 그 변화를 모아뒀다가 한 번에 적용시킨다. 즉, 리렌더링을 한 번만 일으킨다. 다시 말해, DOM fragment를 관리하는 과정을 직접 하지 않고, Virtual DOM이 자동화를 해주는 것이다. Virtual DOM의 처리 속도가 DOM 보다 절대적으로 빠르지는 않다. 다만 업데이트 처리가 간결해질 뿐이다. 렌더링 요인(트리 구성이 변화되지 않는 상황에서도)이 발생할 때마다 전체 트리의..
